Issue #266 (Radio.value, Productivity, Frameworks, Text Editors)08/23/18
😊 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!
|
Productivity Tools
Station
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
Gone
The ephemeral to-do list. All tasks will disappear within 24 hours of adding them.
Retool
Custom internal tools have the same building blocks. Retool gives you those building blocks, so you can build them much faster.
Zulip
The world’s most productive group chat. Combines the immediacy of Slack with an email threading model.
Pinpointer
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.
Waytab
Get a random item you've liked/bookmarked every time you open a new browser tab.
Standups
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.
KanbanMail
A Kanban board for your emails. Makes it easy to see which emails need your attention, and when.
Assistant
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.
FireHydrant
Simple incident response software that lets you organize, Investigate, and remedy faster when things break.
|
|
Recommended Reading for Developers
|
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).
angular6-example-app
Angular 6 Example App + Angular CLI + Angular Material + Docker + Angular Example Library.
angular-electron
Ultra-fast bootstrapping with Angular 6 and Electron (Typescript + SASS + Hot Reload).
Evergreen
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.
brutal.js
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.
custom-element-boilerplate
Boilerplate for creating a custom element.
express-starter
An opinionated Typescript starter setup for Express + Pino. Deployable with Docker and PM2.
|
Text Editors and Code Playgrounds
React Live
A production-focused playground for live editing React code.
AngularDoc
VSCode extension that adds Angular development tooling.
vim-illuminate
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).
SublimeLinter-tslint
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.
ChromeREPL
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.
Docblockr
A package for Atom designed to make writing documentation faster and easier.
Devpen
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
