Issue #241 (Destruct Assignments, Testing, GitHub/CLI, Mobile)03/01/18
Previously, I introduced the concept of object destructuring, a new feature in ES6, using an example that incorporated variable declarations. In addition to that technique, you also have the option to use destructuring in an assignment expression.
So instead of this:
|
let { dairy, grains, vegetables, fruits } = groceries;
|
You would do this:
|
({ dairy, grains, vegetables, fruits } = groceries);
|
Assuming, of course, that groceries represents an object that has the number of properties expected (in this case, four).
In the latter example, I'm using four variables that have already been given values in another part of the code (not shown above), but they will be updated to reflect the values taken from the destructured groceries object.
Notice that the syntax is slightly different in the assignment statement: there are parentheses placed around the entire statement. This is because the opening curly brace looks like a block statement to the JavaScript parser and a block statement cannot appear on the left side of an assignment statement.
This feature opens up lots of possibilities because you can put a destructuring assignment expression anywhere you would normally put a value. So you can even use it as an argument in a function call:
|
function doSomething (foods) {
console.log(foods.fruits); // "apples"
console.log(grains, vegetables, fruits);
// "bread", "celery", "apples"
}
doSomething({ grains, vegetables, fruits } = groceries);
|
Again, the above assumes you've already defined a groceries object. Here's a full demo.
Now on to this week's tools!
|
Testing and Debugging 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
React Scope
Visualize your React components as you interact with your application.
webshot-factory
Screenshots at scale based on headless Chrome.
Page Analyzer
Web scraping page analyzer. Loads the page using headless Chrome and analyzes the HTML and JavaScript objects on the page.
Karmatic
A simplified zero-configuration wrapper around Karma, webpack, Jasmine, and Puppeteer.
Flow
A static type checker for JavaScript.
Chromatic
Pinpoint UI component bugs instantly. Ensures UI consistency in React components, down to the pixel. Every commit is automatically tested for visual changes.
URLColors
Chrome extension that adds a colored border around websites that match user inputted preferences. Useful for visually identifying dev server vs. test, production, etc.
SSL-check
Crawl an HTTPS-website (entire website, recursively, following internal links) and search for non-secure images, scripts, etc.
Rocket Validator
The fastest way to validate HTML5 on large sites. Find accessibility and HTML issues in your large sites, in seconds.
SlimerJS
A scriptable browser for Web developers. Allows you to interact with a web page through an external script.
|
Git, GitHub, and CLI Tools
Y-Productive
Keep track of your productivity, apps and websites you use for work. Real-time task efficiency feedback, time tracker, built-in website blocker, and more. Helps to perform better every day. sponsored
fish shell
A smart and user-friendly command line shell for macOS, Linux, and the rest of the family.
tmate
Instant terminal sharing. A fork of tmux (app that allows multiple terminal sessions in one window) that provides an instant pairing solution.
domain-cli
Search for availability of domain names via the terminal.
sh-exec
Use template literals in shell scripts.
GitHub File Icon
Chrome or Firefox extension to add useful icons to different files when browsing repos on GitHub.
Refined GitHub
Browser extension (Chrome, Firefox, Opera) that simplifies the GitHub interface and adds useful features.
stacks-cli
View a website's technology stack from the terminal.
reactopt
A CLI React performance optimization tool that identifies potentially unnecessary re-rendering.
TLDR Pages
A community effort to simplify the beloved `man` pages (UNIX docs) with practical examples.
Termipal
Augment your Mac Terminal with easy native UI. Instant, native micro-GUIs for shell scripts and command line apps.
|
Mobile Tools
Lottie
Mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and on the web.
Aspect Ratio
Aspect ratio calculator and device resolutions reference for designers and developers.
Fuse
Create better native apps for iOS and Android with a new breed of development tools.
Native Directory
A curated list of 277 React Native libraries to help you build your projects.
erste.js
JavaScript view library for building performant hybrid mobile applications.
Supernova Studio
The world's first true design-to-code platform. Turn Sketch designs into native mobile apps in minutes.
Shoutem
Code-free mobile app building platform with e-commerce, monetization features, and lots more.
|
|
