|
|
|
|
Issue #138 (Splat, Sass, Git/CLI, Media)03/10/16
Let's say you have a function that takes a specific number of arguments, like this:
|
function myFunc (a, b, c) {
return a + b + c;
}
|
Somewhere in your application code, you might have an array that contains the values you want to pass into the function. Using the example of two separate arrays, you can pass those in as follows:
|
var ArrayOne = [8, 14, 432];
var ArrayTwo = [74, 4, 26];
console.log(myFunc.apply(null, ArrayOne)); // 454
console.log(myFunc.apply(null, ArrayTwo)); // 104
|
(View this example on JS Bin)
Here I'm using JavaScript's Function.prototype.apply() method to "splat" the values of the array. The "null" value is the first argument for apply(), which is where you custom-define the value of "this". Using apply() in this way prevents the need to do any kind of array manipulation; you just drop in the array.
But this becomes even easier if you use ESNext's rest parameter (which is represented by three dots):
|
console.log(myFunc(...ArrayOne)); // 454
console.log(myFunc(...ArrayTwo)); // 104
|
(JS Bin example)
Here I'm simply prefixing the array with the rest parameter and I'm able to accomplish the same thing.
Hat tip to Josh Branchaud's TIL JavaScript tip for the ES5 version. You might also want to check out this Stack Overflow thread, which explains the term "splat", and also MDN's entry on the rest parameter.
Now on to this week's tools!
Sass and Preprocessor Tools
stellar
A Less library helping you scaffold your web app. "Just @import and save yourself some time."
_bemify
"A set of Sass mixins to write well-structured, maintainable, idiomatic BEM-style .scss."
Sunglass
"A mixin and functions library for Sass." Includes mixins/functions for grids, lists, numbers, and more.
Juice
"A collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements."
GUFF
A Sass helper framework made up of the author's favorite features from the top Sass frameworks.
Hoisin.scss
"A simple responsive front end mini framework written in Sass to kick start your web project."
Hocus-Pocus
"A design-free Sass framework inspired by Primer and InuitCSS... to make a universal and lightweight stylesheet starter kit that focuses on the most common features."
Shevy
"A simple, configurable Sass library for typography with perfect vertical rhythm."
Typi
Helps you write font-size and line-height properties at different breakpoints with font maps and
calculate vertical rhythm easily with the vr() function.
AcceCSS
"This mixin will allow you to get an overview of all the zones of your layout, get a grayscaled version to check the contrast, as well as 8 different filters to emulate the most common color blindness types."
Git, GitHub, and Command Line Tools
git-labelmaker
"Edit GitHub labels from the command line using git-labelmaker! You can easily add or remove GitHub labels, making it easier for your projects to adhere to a sane labelling scheme."
diff-so-fancy
"Good-lookin' diffs with diff-highlight and more. diff-so-fancy builds on the good-lookin' output of git contrib's diff-highlight to upgrade your diffs' appearances."
GitHub Importer
"If you have source code in Subversion, Mercurial, Team Foundation Server, or another Git repository, you can now quickly and easily move that code to GitHub."
gitbar
"A plugin for bitbar to quickly show your open source GitHub contribution stats and help set contribution goals, all on your Mac OS X Menu Bar."
Gist It
"Lets you easily embed files from a GitHub repository into any webpage just like a gist."
Git Snippet
"Allows you to embed code samples directly from GitHub, BitBucket or GitLab. Similar to the built in functionality of GitHub gists."
GitHub Module Browser
Chrome extension. "Lets you click and browse modules inside GitHub source view."
HTML5 Validator
"Command line tool to validate HTML5 files. Great for continuous integration."
GitNotifier
"Get email notifications when someone stars or forks one of your GitHub repos and follows/unfollows you."
git-sketch-plugin
"A Git client built right into Sketch. Generate pretty diffs so that everybody knows what are the changes."
Multimedia Tools
Cloud Vision API
"Classifies images into thousands of categories (e.g., "sailboat", "lion", "Eiffel Tower"), detects individual objects and faces within images, and finds and reads printed words contained within images."
Dash-video
"A web component for playing back responsive dash video."
ZorroSVG
"The transparency of PNGs for the file size of JPEGs."
spritesh
"A Bash script to build a SVG sprite from a folder of SVG files (typically icons)."
mapillary-js
"WebGL JavaScript library for displaying street level photos from Mapillary."
Loud Links
"A simple tiny JavaScript library to add interaction sounds to your website."
Origami.js
A Canvas library that makes it easier to work with the Canvas API.
Optimizilla
"This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size."
SVGson
"Transform svg files and Strings into Object or JSON with useful options."
A Tweet for Thought
Jake Archibald on libraries vs. frameworks.
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...
From Quora in 2010, Why do so many people seem to hate JavaScript? The answers and even the question itself would most certainly be different today.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
