Issue #321 (Array.includes(), Front-end Frameworks, JS Utilities, Git/CLI)
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
console.log(myArray.includes('one', -2)); // false
console.log(myArray.includes('four', -4)); // true
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!
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.
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.
Chakra Design System
A simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.
An admin panel for apps written in Node.
A go-to resource for examples of modern self-contained page layout styles for use in React.
A UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly.
A React component library for building enterprise applications.
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).
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.
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.
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
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!