Issue #240 (Obj Destructuring, Productivity, JS Utils, Content)02/22/18
Another useful feature added in ES6 is object and array destructuring. Even if you aren't familiar with the technique, you've likely heard the phrase thrown around in ES6 conversations.
In brief, destructuring allows you to extract data from objects and arrays using a simpler and less redundant syntax. Prior to ES6, if you wanted to assign an object's properties to variables, you might do something like this:
|
let groceries = {
dairy: 'milk',
grains: 'bread',
vegetables: 'celery',
fruits: 'apples'
};
let dairy = groceries.dairy,
grains = groceries.grains,
vegetables = groceries.vegetables,
fruits = groceries.fruits;
console.log(dairy, grains, vegetables, fruits);
// "milk" "bread" "celery" "apples"
|
View on JS Bin
The above works fine for grabbing these values, but the code is too repetitive. With destructuring, the same thing can be accomplished with the following brief and elegant code:
|
let groceries = {
dairy: 'milk',
grains: 'bread',
vegetables: 'celery',
fruits: 'apples'
};
let { dairy, grains, vegetables, fruits } = groceries;
|
View on JS Bin
The log in this example (omitted in the code above, but used in the demo) will produce the same result as in the previous.
That's the basics of object destructuring, but there's much more to be said about the concept. For example, what about nested objects? Can you define default values for missing properties?
I'll try to cover a few more tips related to destructuring in future issues, but in the meantime, feel free to do a search for more info. There are lots of resources covering this subject in depth.
Now on to this week's tools!
|
Productivity Tools
FullStory
Wondering how users are taking to that new redesign? FullStory removes all the guesswork by showing you every click, swipe, and scroll. Best of all, you can try it for free. sponsored via Syndicate
All My Desktops
Remote Desktop from any browser. No need to install plugins or client software to connect. All your computers are always one click away from any browser.
Takehome
Better technical interviews. Code belongs in git. Not on a whiteboard. Show candidates you value their time. Get better results.
Linqes
Manage and share your collection of sites. Create own Groups of your favorite content and share with your friends or colleagues.
Riter
An intelligent tool for tracking the current status of a development process, monitoring the workflow, flexible project and team management.
Zoom
Modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, chat, and webinars across mobile, desktop, and room systems.
Casual
Visual Project and Process Management. Organize tasks and ideas the way they look in your mind.
Outclip
Record and share video clips and screencasts to make remote work way better.
Tree Style Tab
Firefox add-on. Displays browser tabs in a tree-like format in a side panel, organized according to where they originated when opened.
Fin
A powerful and flexible personal assistant. Human + machine intelligence for executing work on demand.
|
JavaScript Utilities
Selenium.Academy
Learn everything about automated web testing with Selenium. Features 29+ lessons and 100+ screencasts covering JavaScript, Java, C#, Ruby, Python. 50% Launch Discount available! sponsored
Page.js
Tiny ~1200-byte Express-inspired client-side router.
ijk
Transforms arrays into virtual DOM trees; a terse alternative to JSX
xcell
A tiny, open source library for building reactive, spreadsheet-like calculations in JavaScript.
KaTeX
The fastest math typesetting library for the web. Simple API, no dependencies – yet super-fast in all major browsers.
Workerize
Moves a module into a Web Worker, automatically reflecting exported functions as asynchronous proxies.
EasyTimer.js
Easy to use timer/chronometer/countdown library compatible with AMD and Node.
smart-number-inputs
Increment/decrement number values in text inputs using up and down arrow keys. No external dependencies (under 1kB gzip'd).
Flipping
A tiny library (and collection of adapters) for easily implementing FLIP transitions (a concept to improve animation perf). Still in beta.
|
Databases, Content, JSON, etc.
Automerge
A JSON-like data structure that can be modified concurrently by different users, and merged again automatically.
JSON-dry
Allows you to serialize and revive objects containing circular references, dates, regexes, class instances, etc.
just-dashboard
Create dashboards using YAML/JSON files.
Datasette Publish
Lets you upload one or more CSV files and turn them into a browseable web interface and JSON API using Datasette.
Toapi
A clever, simple, and fast library letting any web site provide APIs.
Apollo GraphQL
Provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on back-end changes.
TileDB
Array data management made fast and easy. Manages massive dense and sparse multi-dimensional array data that frequently arise in important scientific applications.
Cupper
A documentation builder for inclusive designers and those trying to be inclusive designers.
AST explorer
Paste or drop code into the editor and inspect the generated AST (Abstract Syntax Tree).
|
A Tweet for Thought
Whitney Williams addresses the idea that maybe CSS isn't taken as seriously as it should be in hiring.
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...
I don't usually care much for flashy, experimental demos, but this CodePen is worth checking out. Nice use of sound, animation, and functionality.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
