Issue #255 (Array.from(), Uncats, Git/CLI, Media)06/07/18
Segment Personas is Now Out of Beta
Personas allows you to combine user data and events into one universal customer profile. Then, you can build computed traits and custom audiences on top of your data and auto-sync to Facebook, Google, Redshift, and hundreds more.
Sign up today
|
|
One of the most welcome additions to JavaScript in recent years is a feature that allows you to convert an array-like object to an array. This is now possible using the Array.from() method, added in ES6.
Array-like objects are quite common in front-end applications. Here's a common example to demonstrate how this feature works:
|
function doSomething (a, b, c) {
console.log(Array.isArray(arguments)); // false
let args = Array.from(arguments);
console.log(Array.isArray(args)); // true
}
doSomething(1, 2, 3);
|
View on JS Bin
The above code uses one of the most common array-like objects – the arguments object contained in all functions. You can see that the object is initially not an array, but after using Array.from(), it becomes a valid array. From there, I then have the option to use any array method to manipulate the collection.
Array.from() can convert any array-like object or any iterable object and convert it to an array. As of this writing, Array.from() doesn't seem to work on DOM collections, even though it seems like it should. But if you want to convert a DOM collection to an array, you can use the spread operator, another ES6 feature:
|
let myLinks = document.querySelectorAll('li a');
console.log(Array.isArray(myLinks)); // false
myLinks = [... myLinks];
console.log(Array.isArray(myLinks)); // true
|
Try on JS Bin
I'm not entirely sure why Array.from() doesn't work on DOM collections. Maybe it's not supposed to, or else browsers haven't implemented that yet. If you have any info on that, feel free to reply to this email. Nonetheless, the spread operator technique is simple enough and technically uses less code.
Now on to this week's tools!
|
The Uncategorizables
Personas by Segment is now out of beta
Use Personas to treat your customers like people, not data points. Get started with Personas. sponsored
Cierge
An open source authentication server (OIDC) that handles user signup, login, profiles, management, and more.
Hooks Data
An API for real world data in real time. Get updates about thousands of topics in a single API.
Uploadfiles.io
Upload files for free. Secure, anonymous, free. It's the simplest way to send files from A to B.
OSS Ninja
Open Source licenses with just a link. Just select a license then insert the name of the organization and a custom link is ready to use.
Dialogflow
Build natural and rich conversational experiences. Give users new ways to interact with your product by building engaging voice and text-based conversational interfaces powered by AI.
Crypto Tab
Chrome or Firefox extension to replace your browser New Tab page with a Bitcoin price chart.
Paw
A full-featured HTTP client for MacOS that lets you test and describe the APIs you build or consume.
Fax Rocket
The easiest way to send a fax. No subscriptions, contracts or gimmicks.
Reason
Lets you write simple, fast and quality type safe code while leveraging both the JavaScript and OCaml ecosystems.
Strapi
Node.js API Framework with Headless CMS capabilities.
|
|
Recommended Reading for Developers
|
Git, GitHub, and Command Line Tools
Git Enforcer
GitHub bot for validating pull request mergeability requirements and issues structure.
Git Project Manager
VSCode extension that allows you to open a new window targeting a Git repository directly from a VSCode window.
GitHub Contributions Chart Generator
Enter your GitHub user name and this tool will generate a chart of all your contributions as a downloadable image.
GitHub Review Filter
Chrome extension to filter files in GitHub code review using a glob pattern (filenames with a wild card character).
ink-gradient
Gradient color component for Ink (React tool for interactive command-line apps).
GRV
A terminal based interface for viewing Git repositories.
Octohint
Chrome extension to add IntelliSense hints to GitHub.
Basho
Lets you to write complex shell tasks using plain JavaScript without having to dabble with shell scripting.
Codekeeper
Source code escrow for developers. A solution for software developers to provide clients with source code escrow as part of their service or license agreements.
|
Media Tools
Fugue
Royalty-free music for commercial projects, in exchange for a link back.
curtains.js
Easy WebGL tool to animate images and videos.
pixo
Convert SVG icons into React components.
Streamline Emoji
A unique set (780+) of free, unique vector emojis.
vuebit
Adds a GIF-like moving preview to video thumbnails. Supports YouTube, Vimeo, Dailymotion, and Streamable.
Swifticons
A remarkable set of 2,500+ premium icons covering 23 categories in 6 editable styles.
DrawerJs
A JavaScript library for freehand drawing and creating sketches with simple shapes. A customizable WYSIWYG HTML canvas editor.
Image Trace Loader
JavaScript utility that loads images and exports traced outlines as image/SVG+XML URL-encoded data.
bubbly-bg
Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped).
|
A Tweet for Thought
This tweet by Evan Johnson kind of sums up what a library like React is all about.
Send Me Your Tools!
Made something? Send links via Direct Message on 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...
Paper Programs, oddly enough, is a browser-based system for running JavaScript programs on pieces of paper.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
