Issue #266 (Radio.value, Productivity, Front-end Frameworks, Text Editors)
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,
myRadio1 = myForm.elements['group1'],
myRadio2 = myForm.elements['group2'],
myRadio3 = myForm.elements['group3'];
myRadio3.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!
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
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 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.
Text Editors and Code Playgrounds
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.
A dark with pastels color scheme for Vim.
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 package for Atom designed to make writing documentation faster and easier.
An online Markdown editor with GitHub styles.
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...
Thanks to all for subscribing and reading!