Issue #254 (Array.of(), Productivity, JS Libs, React)05/31/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
|
|
Using arrays in JavaScript has improved greatly since ES5, and that includes some new things added in ES6. One method that improves slightly on array creation is Array.of(), which I'll briefly introduce here.
The main use for Array.of() is to replace using the Array constructor, which has some odd behavior. For example:
|
let myArray = new Array(3);
console.log(myArray.length); // 3
let myArray2 = new Array("3");
console.log(myArray2.length); // 1
|
Try on JS Bin
This is not a major problem, but as you can see, passing a single item into the constructor can produce unexpected results. Should the single item be one of the items in the array? Or is it supposed to declare the number of items? Of course, this gets worse in the stream of a large codebase where you don't know what data is coming in.
Array.of() makes this easy because it always creates an array made up of whatever items are passed in, regardless of the number of items or the types of data:
|
let myArray = Array.of(1);
console.log(myArray.length); // 1
let myArray2 = Array.of("1");
console.log(myArray2.length); // 1
let myArray3 = Array.of(1, "2");
console.log(myArray3.length); // 2
console.log(myArray3); // [1, "2"]
|
Try on JS Bin
In most cases you'll use array literal syntax, which allows you to create the array directly using square brackets. However, in his book Understanding ES6, Nicholas Zakas advises: "But if ever need to pass the Array constructor into a function, you might want to pass Array.of() instead to ensure consistent behavior."
Now on to this week's tools!
|
Productivity Tools
Personas by Segment is now out of beta
Use Personas to treat your customers like people, not data points. Get started with Personas. sponsored
Reader
Chrome extension that reminds you to read what you save.
Stick Shift
Windows app that saves you time by removing repetitive changes to your hand position while typing.
Stack Overflow for Teams
A private, secure home for your team’s questions and answers. No more digging through stale wikis and lost emails—give your team back the time it needs to build better products.
Milanote
A tool for planning creative projects. See your ideas, notes, and research side by side.
What is my day rate?
Enter your desired gross annual salary and this tool will tell you how much you should make per day and how much to charge per hour.
Outline
Team wiki, documentation, meeting notes, playbooks, onboarding, work logs, brainstorming, and more.
Choosy
Mac tool. Instead of opening links in the default browser, Choosy sends them to the right browser.
Webdash
A customizable web dashboard that helps you visualize, monitor, and manage your web project using community-driven plugins.
FollowUp Personal CRM
A simple, intelligent tool that makes managing relationships easy.
MultiNewTab
Chrome extension to let you use multiple 'New Tab' Chrome extensions without manually enabling and disabling them.
|
|
Recommended Reading for Developers
|
JavaScript Libraries and Frameworks
Swiftype Site Search
The fastest and easiest way to add a search tool to your website with real-time indexing, analytics, and a mobile-friendly interface. sponsored
Cash
An absurdly small jQuery alternative for modern browsers.
Angular
Google's popular mobile and desktop app framework is now at version 6+. Details here.
Redux
Now at version 4+. A predictable state container for JavaScript apps. Details here.
TensorFlow.js
A WebGL accelerated, browser based JavaScript library for training and deploying ML models.
Sails.js
Now at version 1+. Makes it easy to build custom, enterprise-grade Node apps.
Callbag Basics
Tiny and fast reactive/iterable programming library based on Callbag, a standard for JavaScript callbacks that enables lightweight observables and iterables.
D3.js
Now at version 5+. A JavaScript library for manipulating documents based on data. Helps you bring data to life using HTML, SVG, and CSS.
NativeScript
Now at version 4+ (details). Open source framework for building truly native mobile apps with Angular, TypeScript, or JavaScript.
CanJS
Now at version 4+. Client-side JavaScript framework to build rich web interfaces, with state-management, templates, custom elements, and more.
React
Now at version 16+. Details here.
|
React Tools
Create React App Parcel
Create React apps with Parcel instead of webpack.
React Cosmos
Dev tool for creating reusable React components.
React Albus
React component library for building declarative multi-step flows.
react-app-loader
Production-ready library for handling micro-frontends.
constate
Tiny React state management library that lets you work with local state and scale up to global state with ease when needed.
react-worker-image
React component to fetch image resources via Web Workers.
React Retro Hit Counter
A straight-outta-geocities hit counter, because why not?
react-contextual
A small (less than 1KB) helper around React 16's new context API.
remeasure
Get position and size of a DOM element for any React component.
|
A Tweet for Thought
Paul Irish starts a discussion on why we'll probably still have to keep bundling modules for at least a couple more years.
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...
Transferslot is a curated marketplace where project founders can sell their side projects.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
