|
|
|
|
Issue #139 (Spread/Rest, Frameworks, Productivity, JS Utils)03/17/16
Last week I discussed how to "splat" an array with ES5 and ES6. As one reader pointed out, however, I mistakenly referred to the Rest Parameter syntax when in fact I was using the Spread Operator. Here's another example that uses the Spread Operator (the same one I used last issue):
|
var myFruit = ['apples', 'oranges', 'peaches'],
myNewFruit = ['kiwis', 'pairs', 'melons'];
myFruit.push(...myNewFruit);
console.log(myFruit);
// ["apples", "oranges", "peaches", "kiwis", "pairs", "melons"]
|
(View on JS Bin) As the reader pointed out, the confusion is likely due to the fact that the Spread Operator uses the same syntax as Rest Parameters (three dots). As Addy Osmani explains, Rest Parameters are different in that they allow your functions to have variable number of arguments without using the arguments object.
The main advantage to using Rest over the arguments object is the fact that the items passed in as Rest Parameters are an array, so you can manipulate them using any valid array methods, which is unlike the array-like arguments object.
Here is the Rest syntax in action:
|
function myFunc (a, ...b) {
return b.length;
}
console.log(myFunc(3, 1, 2, 3));
console.log(myFunc(1, 2, 3, 5, 20, 34));
console.log(myFunc('one', 'two', 'three', 'four', 'five'));
console.log(myFunc('one', 'two'));
|
(View on JS Bin) The function is simply returning the length of "b", which is variable depending on what we pass in. The "a" variable (the first thing passed in) is separate from the remaining arguments (is that where the word "rest" comes from, the fact that it covers the "rest" of the arguments?). This allows us to pass in as many arguments as we want using a simple syntax and we have the added advantage of the use of array methods.
I hope that clarifies things a little better. This is something I'm just starting to research, so feel free to reply to this email and correct me if needed!
Now on to this week's tools!
Front-end Frameworks
Outline Mail
"An email framework with a bunch of fully trusted responsive components to provide you a solid foundation for your HTML email project."
Flexi
"A lightweight, mobile first, performance focused layout framework for Ember. Flexi makes building layouts that are fluid, responsive, and platform aware fun, easy and fast."
ZUI
A pattern library (buttons, banners, badges, alerts, tabs, etc.) for an organization called Zource.
Singularity.gs
"A next generation grid framework built from the ground up to be responsive."
Penguin
"A lightweight and extensible front-end framework built with Sass for kickstarting any web project."
Jolteon
"Babel + Electron + React + Browserify + Sass application stack. Gets the stupid work done so you can actually make something."
MJML
"The only framework that makes responsive-email easy."
instantsearch.js
A library of UI widgets to help you build the best instant-search experience with the Algolia's Hosted Search API.
Baker
"HTML5 based digital publication framework for publishing interactive books & magazines on iPad & iPhone using simply open web standards."
React Slingshot
"A comprehensive starter kit for rapid application development using React."
Productivity Tools
Video Speed Controller
Chrome extension. "Speed up, slow down, advance and rewind any HTML5 video with quick shortcuts."
CodeCoach
"Share a link and pair-program with someone immediately, via WebRTC."
howdoi
"Instant coding answers via the command line."
Brave
"The new Brave browser is tops at speed and privacy by blocking ads and trackers. Adding micropayments and better ads gives users and publishers a better deal."
Blogtrottr
"Delivers updates from all of your favourite news, feeds, and blogs directly to your email inbox, giving you the flexibility to stay updated whilst on the go."
how2
Stack Overflow from the terminal."
Codeshare
"Use Codeshare to collaborate, teach, troubleshoot, pair program and more."
skadi
"Fast and powerful self-hosted project management tool."
Batched Inbox
"We deliver your emails at times you specify, so you can focus on what matters."
JavaScript Utilities and Mini Libraries
Draft.js
"A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences."
Bricks.js
"A blazing fast masonry layout generator for fixed width elements."
react-blobber
"Create orthogonal blobs from grouped arrays of rectangles."
Drop
"A JavaScript and CSS library for creating dropdowns and other popups attached to elements on the page. Drop uses Tether.js to efficiently position its elements."
A11y Dialog
"A very lightweight and flexible accessible modal dialog."
Luminous
"A simple, lightweight, no-dependencies JavaScript image lightbox."
Feature.js
"A Fast, simple and lightweight browser feature detection library written in plain JavaScript."
A Tweet for Thought
Luke Wroblewski has a simple message on code maintenance.
Suggestions / Corrections
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...
You might be amused by this pull request that featured two bots interacting.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
