Web Tools Weekly
What a Tool!

Issue #266  (Radio.value, Productivity, Frameworks, Text Editors)08/23/18

Advertisement via Paved
😊 Getting Lost in Tabs? Have All Your Work Apps, in One Place.
Station is a free desktop tool that aggregates all the different apps you use at work. If you're having a hard time handling 20+ open tabs or simply staying focused: this is for you!

Regain control, stay focused, get Station:
🚀 500+ supported apps
🏆 Product of the year 2017 on Product Hunt

Download now!

If you're working with an HTML form that includes multiple groups of radio buttons, there's a quick way to access the selected (or "checked") value of a particular group of radio buttons with JavaScript.

Let's assume I have a page with three sets of radio buttons (which are distinguished using the name property in the HTML). Here's some DOM scripting that will give me the string value of each selected radio option.

let myForm = document.forms[0],
    myRadio1 = myForm.elements['group1'],
    myRadio2 = myForm.elements['group2'],
    myRadio3 = myForm.elements['group3'];

myRadio3[2].checked = false;

console.log(myRadio1.value); // "Oranges"
console.log(myRadio2.value); // "Carrots"
console.log(myRadio3.value); // ""

You can view a full demo, including the HTML, in this JS Bin.

Notice after I grab each group of radio buttons, I'm using the value property to find the checked option. In other words, each group has a value property that's equal to the value of the selected option.

Additionally, in this case I'm also setting the selected radio button in the third set to false (i.e. "unchecked") before grabbing the values, so you can see that the collection is live. In that instance, the third group returns an empty string because by that point in the code the third group has no selection.

And as a side point, the elements property is available on a form object to help you get access to a radio group or an individual form input. This property only retrieves non-image form elements and will helpfully ignore all other elements.

Now on to this week's tools!

Did you enjoy this week's coding tip? Previous tips are compiled in my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2


Productivity Tools

A free desktop tool that aggregates all the apps you use at work. If you're having a hard time handling 20+ open tabs or simply staying focused: this is for you! sponsored via Paved 

The ephemeral to-do list. All tasks will disappear within 24 hours of adding them.

Custom internal tools have the same building blocks. Retool gives you those building blocks, so you can build them much faster.

The world’s most productive group chat. Combines the immediacy of Slack with an email threading model.

Firefox add-on. Create and share links to arbitrary elements on a web page. The links will still work for people without the extension, but they don't get the advantage of the element being highlighted.

Get a random item you've liked/bookmarked every time you open a new browser tab.

Supercharged video standups (i.e. daily status meetings) for teams. Get teams to engage better by helping them make regular video check-ins from any timezone in the world.

A Kanban board for your emails. Makes it easy to see which emails need your attention, and when.

Chrome extension. Helps you remember tasks to complete by replacing the new new tab page with a shiny todo manager.

Extensions Storage Box
Chrome extension that works as an extension manager for all your Chrome extensions.

Simple incident response software that lets you organize, Investigate, and remedy faster when things break.

Recommended Reading for Developers
Learning React Book   You Don't Know JS: this & Object Prototypes book   Using SVG with CSS3 & HTML5 book

BTW - If you've written a book for developers that's available on Amazon, reply to this email and let me know. I'll consider including it here. No charge.

Front-end Frameworks

React + Stripe Ecommerce Store Template
Artisanal hand-rolled e-commerce site. Written in React, served up with Express, and integrated with Stripe Dashboard.

PWA Starter Kit
An end-to-end solution for building high-quality Progressive Web Apps (PWAs). 

Angular 6 Example App + Angular CLI + Angular Material + Docker + Angular Example Library.

Ultra-fast bootstrapping with Angular 6 and Electron (Typescript + SASS + Hot Reload).

A React UI framework for building ambitious products, made up of multiple components and tools that you can import one by one.

Shards Dashboard Lite
A free, high-quality Bootstrap admin dashboard template that includes lots of templates and components.

A minimalist transpiler-free isomorphic framework for building JavaScript apps.

Vue Storefront
A standalone PWA storefront for your eCommerce site, able to connect with any eCommerce backend (e.g. Magento, Shopware, etc.) through an API.

Boilerplate for creating a custom element.

An opinionated Typescript starter setup for Express + Pino. Deployable with Docker and PM2.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Text Editors and Code Playgrounds

React Live
A production-focused playground for live editing React code.

VSCode extension that adds Angular development tooling.

Vim plugin for selectively illuminating other uses of the current word under the cursor.

Sacred Forest
A dark with pastels color scheme for Vim.

Electron Fiddle
The easiest way to get started with Electron (a framework for creating cross-platform desktop apps).

A tslint plugin for SublimeLinter to allow you to lint your TypeScript code.

Angular CLI for Sublime Text 3
Allows you to run the Angular CLI commands using the Sublime Text interface.

A SublimeText 3 Plugin to use Chrome as your REPL. Execute JavaScript in your browser. Interact with your running web apps. Live code your brains out.

A package for Atom designed to make writing documentation faster and easier.

An online Markdown editor with GitHub styles.

TypeScript Playground
Online JSFiddle-like environment to play around with TypeScript, on the official TypeScript website.

A Tweet for Thought

True words on the potential for avoiding needless meetings and/or lengthy email threads.

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Devhints is a pretty extensive collection of cheatsheets not only for general stuff like ES6 but also for specific things like JavaScript arrays or HTML5 Canvas.

Thanks to all for subscribing and reading!

Keep tooling,