Issue #243 (ES6 Array Destruct, Frameworks, JS Utils, Productivity)03/15/18
Previous tips focused on object destructuring in ES6. Let's now look at Array destructuring, which is based on the same principles with a few syntax differences and of course is used with arrays.
|
let fruits = [ 'apple', 'orange', 'pear'];
let [ fruitOne, fruitTwo ] = fruits;
console.log(fruitOne, fruitTwo);
// "apple"
// "orange"
|
Try on JS Bin
The syntax (as shown on line two above) is identical to object destructuring except for the use of square brackets in place of the curly braces that are used with object destructuring. And similarly, the variable names can be whatever you want.
The array that's destructured is not affected or changed in any way, so just like objects, this is simply an easy way to extract data from different parts of the array.
With array destructuring, you also have the option to omit items so you can get to only the ones you want. Here's how that would look using the same array as in the previous code block:
|
let fruits = [ 'apple', 'orange', 'pear'];
let [ , , fruitThree ] = fruits;
console.log(fruitThree); // "pear"
|
Try on JS Bin
Notice in order to extract the third item from the array, I've included two empty placeholders using two commas to "skip" the first two and get to the third item, which I've then logged.
Now on to this week's tools!
|
Front-end Frameworks
DragDropr – Universal Visual Content Builder
DragDropr, the only CMS-independent "What-You-See-Is-What-You-REALLY-Get" drag & drop page builder. sponsored
Gestalt
A set of React UI components that supports Pinterest’s design language.
Next.js
Now at version 5+. Framework for server-rendered or statically-exported React apps.
serverless-babel-starter
Serverless with all the fixings: webpack, Babel, Jest, ESLint, and Prettier.
Angular Material
Now at version 6+ (beta). Material Design components for Angular.
Ionic PWA Toolkit
Still in beta. Ionic recommended solution for building lightning fast PWAs with 0 config and best practices built in. Go from 0 to production ready PWA with Ionic and Stencil.
Vue Bootstrap with Material Design
That covers almost every click-bait dev headline. jQuery-free Material Design for Bootstrap 4 (Vue version).
Front End Toolkit
A set of best practices from Devbridge Group, to start a project quickly without any JavaScript library dependency.
Bootstrap
The most popular framework in the universe is now at version 4+ stable, after being in beta since the summer of 1873.
InfiniteGrid
A module used to arrange card elements including content infinitely according to layout type.
react-kit
Ready-to-go React app starter project, optionally available in TypeScript.
|
JavaScript Utilities
re-template-tag
Small library that provides a template tag function for composing regular expressions.
Dragon Drop
Accessible drag and drop list reorder module. Test the demo out with your keyboard. Works nicely.
attachshadow
An iframe-based Shadow DOM "poorlyfill".
Franxx
A vanilla JavaScript router that works everywhere.
Redux Rest Resource
Dead simple and ready-to-use store module for handling HTTP REST resources.
List
An extremely fast immutable list (i.e. array alternative) with a comprehensive functional API.
next-offline
Make your Next.js application work offline using service workers via Google's Workbox.
Immer
Create the next immutable state by mutating the current one.
miniAjax
A mini Ajax library that provides Ajax, JSONP, and other features for simple web applications.
element-ready
Detect when an element is ready in the DOM.
|
Productivity Tools
SmetLink
Send any links from your browser directly to your inbox in just one click.
Slack + GitHub
With two of your most important workspaces connected, you’ll get updates about what’s happening on GitHub—without leaving Slack.
Happy Mood Score
Feedback and employee engagement tool for agile companies, startups, or companies with remote employees, distributed teams, or digital nomads.
Ropig
Stop being interrupted by alerts. Let a robot pig send you only what’s important.
Riot
A decentralised encrypted communication app for the Matrix.org ecosystem. Create, share, communicate, chat and call securely, and bridge to other apps.
Taskade
Chrome extension. Turn a new tab into a checklist, note, or outline. Make lists, share notes, and brainstorm with your team.
Fedo
A product documentation tool for managers, designers, and engineers, designed for small teams.
Timely
The definitive automatic time tracking tool for improving productivity and profitability. From billable hours and meetings, to travel and downtime.
Mailbutler
Your personal assistant that brings email communication back to the 21st century. For Gmail and Apple Mail.
3things
Type in your three most important things for the year and get a monthly reminder.
|
A Tweet for Thought
Luke Stevens' recent tweetstorm on AMP is an important one. Lots of controversy surrounding AMP lately and this thread includes some discussion and links on the subject.
Send Me Your Tools!
Made something? Send links via 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...
If you're drowning in email and feel a revolution is needed, you might want to try applying the tenets of the Email Charter.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
