Web Tools Weekly
What a Tool!

Issue #321  (Array.includes(), Frameworks, JS Utils, Git/CLI)09/12/19

DevTest Practices to Increase Delivery by 2x
Is your QA and testing processes struggling to catch up with development? Learn how to manage an agile and engaging QA team with best practices from Uber, AddThis and Usersnap.
Download Ebook for Free

Another useful method that's been added to the variety of array methods in ECMAScript is Array.includes(). This method will return true if a given value is found in the array and false if not.

For example, I'll use the following array:

let myArray = ['one', 2, '3', 'four', 5, NaN];

Here's how it's used with a single positive argument:

console.log(myArray.includes('one')); // true
console.log(myArray.includes('2')); // false
console.log(myArray.includes(2)); // true
console.log(myArray.includes('3')); // true

Notice the data types are respected and not coerced.

I can also use a second argument, which starts searching for the given value at the specified index in the array:

console.log(myArray.includes('four', 4)); // false
console.log(myArray.includes('four', 3)); // true

The integer value can be negative, which tells the JavaScript engine that I'm searching for the given value starting at array.length+integer:

console.log(myArray.includes('one', -2)); // false
console.log(myArray.includes('four', -4)); // true

Finally, you'll notice the array includes a value of NaN. Since NaN !== NaN in JavaScript, if I use Array.indexOf() to find NaN, the search would fail. But Array.includes() allows me to find NaN in the array:

console.log(myArray.indexOf(NaN)); // -1
console.log(myArray.includes(NaN)); // true

Here's a CodePen that uses all the above code examples.

This feature was added to ECMAScript in ES7 but has strong browser support. It's supported in all modern browsers on desktop and mobile with the only missing browser being IE11.

Now on to this week's tools!

Front-end Frameworks

A New Way to QA
Testing first and end-user focused testing methods are on the rise. Read this ebook about how to build an agile QA process to keep your team engaged and productive. Exclusive sharings from Uber QA team. Get Free eBook.   sponsored 

Cyberpunk inspired web design. Futuristic, cyberpunk-inspired UI shaping for any element.

MD Bootstrap Snippets
An extensive source for Bootstrap code examples and plugins.

Now at version 6+ (details). Open source framework for building truly native mobile apps with Angular, Vue, TypeScript, or JavaScript.

Hackathon Starter
A boilerplate for Node.js web applications, specifically with Hackathons in mind, but likely has other use cases too.

Now at version 2+ (details).  A semantic Material Design component framework for Vue that provides reusable components that make building your application a breeze.

A modern client-side JavaScript framework for building Single Page Applications. It's small (under 10kb gzip), fast and provides routing and XHR utilities out of the box.

Chakra Design System
A simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.

Admin Bro
An admin panel for apps written in Node.

A JavaScript framework for front-end microservices.

React Layouts
A go-to resource for examples of modern self-contained page layout styles for use in React.

Atomize React
A UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly.

Flawwwless UI
A React component library for building enterprise applications.

JavaScript Utilities

Radial Menu
A highly customizable radial menu (i.e. pie shaped) that can be a replacement for the context menu or used as a regular site menu.

Adds a mini map object to a page to help navigate long pages (similar to the mini map feature in Sublime Text, if you've used that before).

Now at version 2+ (details). Modern JavaScript date utility library that provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates.

The buffer module from Node.js, for the browser.

A lightweight and versatile typewriter effect plugin.

Allows an object on the page to be draggable, resizable, scalable, rotatable, warpable, and pinchable.

Official API for Airtable, the spreadsheet/database tool.

Color Thief
Grab the color palette from an image using just JavaScript. Works in the browser and in Node.

Humanize Duration
Turn millisecond durations into human-readable strings. For example humanizeDuration(97320000)  becomes "1 day, 3 hours, 2 minutes".

Robust ZIP decoder with defenses against dangerous compression ratios, spec deviations, malicious archive signatures, and lots more.

Search UI
A JavaScript search framework for implementing world-class search experiences without reinventing the wheel.

Git, GitHub, and CLI Tools

Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech.  promoted

A JavaScript implementation of google/python-fire, for automatically generating CLIs from most JavaScript objects.

Learn from other developers by watching how they work. Combines both video and source code sharing in one place to help you collaborate more interactively.

Executes a file, command, or REPL using a specific Node.js version.

The complete solution for Node.js command-line interfaces, inspired by Ruby's commander.

Slack reminders and notifications for GitLab. Personal and team notifications to suit your workflow.

Read and write stories about your code instead of documentation. Enables developers to easily simulate debugger-like visuals to tell a story about pieces of code.

GitHub Actions Toolkit
Provides a set of packages to make creating actions easier and drive consistency.

A CLI to help you get insight into your projects' licenses.

A simple bash script (compatible with Debian-based distributions like Ubuntu and Kali) to install and setup necessary tools after a fresh install.

A recruiting tool to help you start sourcing candidates from GitHub.

A Tweet for Thought

Jesse James Garrett, the one who coined the term "Ajax", on the importance of solving the correct problem with design choices.

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

Real Dev is a platform for developers to solve real-life coding problems to learn and potentially get hired.

Thanks to all for subscribing and reading!

Keep tooling,