Web Tools Weekly
What a Tool!

Issue #251  (ES6 Sets cont'd, Productivity, React, Git/CLI)

Advertisement (via Syndicate)
Secure and Manage Your Apple Devices
Jamf Now is a device management solution for Apple devices. It's cloud-based, so you can manage devices from anywhere. Not tech savvy? It's easy to manage Apple devices with Jamf Now and your first 3 devices are free, forever!
Create your account!

In the previous tip, I introduced ES6's new sets feature, a more practical use-case specific alternative to arrays. With that introduction in mind, here are some other things worth noting when using sets.

Sets don't coerce values when making comparisons as sometimes happens in other parts of the language. For example:

let set = new Set([1, "1", 2, 2, 3, 3]);

console.log(set.size); // 4
console.log(set.has("1")); // true console.log(set.has("2")); // false

Try it on JS Bin

Keeping in mind that a set cannot contain duplicates, notice in the above code I've included 1 and "1" as separate entries in the array. But in the final set, they are considered different, so the string "1" is not coerced into a number. The second 2 on the other hand, is a duplicate so it's removed.

Another point to take note of is what happens with duplicate objects:
let set = new Set(),
    obj1 = {},
    obj2 = {};


console.log(set.size); // 2

Try it on JS Bin

Notice here I'm using the add() method to add two objects as the only items in the set. Although the objects are exactly the same, they are not considered duplicates, so both are kept. If the objects were converted to strings, however, then they would be considered duplicates and one would be stripped out.

Finally, in addition to the methods I've already mentioned, you also have access to the delete() method, which removes a single item from a set, and the clear() method, which will clear all items from the set:
let set = new Set([1, 2, 3, 4, 5]);

console.log(set.size); // 5

console.log(set.size); // 4
console.log(set.has(3)); // false

console.log(set.size); // 0

Try it on JS Bin

As you can see, the third item is removed using delete() (confirmed using the size property and the has() method). Then the entire set is cleared, leaving it with zero items.

Now on to this week's tools!

Productivity Tools

Jamf Now
A device management solution for Apple devices. It's cloud-based, so you can manage devices from anywhere. Not tech savvy? It's easy to manage Apple devices with Jamf Now and your first 3 devices are free, forever!   sponsored via Syndicate

Rhythm App
A simple daily markdown-based notebook, calendar, and task list.

Chrome and Firefox extension that gives you a nudge when you spend too much time on certain websites. It's a gentler alternative to website blockers.

Help desk ticketing software with a simple design and artificial intelligence (AI), for IT and HR support teams that need to stay productive and keep employees happy.

Facebook Container
Firefox extension. Isolates your identity into a separate container tab, making it harder for Facebook to track you on the web outside of Facebook.

An AI that helps you quickly compose personalized emails in Gmail.

Save Text...
Chrome extension. Select whatever you want to save as PDF, Word, Excel, or email it directly to someone.

A smart, simple desktop app for Mac that shows and searches keyboard shortcuts based on your currently focused app.

Android app that deletes all your tasks at the end of the day. Complete your tasks before Tet deletes them.

Simple Print
Convert web articles into printable PDFs for Letter, A4, or A5 paper size.

A set of open-source projects that allows you to easily build and deploy secure videoconferencing solutions.

A markdown text editor for Mac with productivity features. Unlike other editors, does outlining, todo lists, and more.

Recommended Reading for Developers
Learning React Book   CSS Secrets Book   Secrets of the JavaScript Ninja Book

React Tools

React components that expose the Web Animations API.

A tiny React component that helps you make auth checks declarative in your React or React Native app.

Path recognizing component for React (that is, it captures a mouse's movement, with the ability to draw the path).

An immutable React state management library with a simple mutable API, memoized selectors, and structural sharing.

Fast and lightweight drag-and-drop, sortable library for React with many configuration options covering many scenarios. Uses hardware-accelerated CSS transitions for animations.

React Credit Cards
Beautiful credit cards for your payment forms. A modern credit card component for React.

Create Content Loader
SVG component for React and Vue to create placeholder loading, like Facebook cards loading or also known as skeleton UI.

A high performance listview for React Native and web with support for complex layouts.

React Velocity
Application that allows you to visualize your React project's component hierarchy before exporting the requisite boilerplate code.

A set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs outside of CSS.

State management so simple, it goes without saying.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Git, GitHub, and Command Line Tools

Creates clickable links in the terminal.

A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios.

Build and deploy Docker images to Kubernetes using `git push`.

Chat without leaving your terminal.

Print a horizontal bar chart with legend and chart scale straight to your terminal. Or use it as a module in your code and print the chart yourself.

Now at version 2+. Forget screen recording apps and blurry video. Enjoy a lightweight, purely text-based approach to terminal recording.

Terminal assistant to find and install node packages.

Client side-only web app to monitor your (or your team's) open merge requests and pipeline status on GitLab.

GitHub Pull Request Tree
Make GitHub pull requests better with a file tree view and other UX improvements.

A simple Git commit checker.

A Tweet for Thought

My favorite answer to the "What five words best describe programming?" thread.

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...

Leanpub, the popular publishing startup well-known for its programming books will now be allowing authors to create and sell courses.

Thanks to all for subscribing and reading!

Keep tooling,