Issue #321 (Array.includes(), Frameworks, JS Utils, Git/CLI)09/12/19
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
augmented-ui
Cyberpunk inspired web design. Futuristic, cyberpunk-inspired UI shaping for any element.
MD Bootstrap Snippets
An extensive source for Bootstrap code examples and plugins.
NativeScript
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.
Vuetify.js
Now at version 2+ (details). A semantic Material Design component framework for Vue that provides reusable components that make building your application a breeze.
Mithril.js
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.
single-spa
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.
pagemap
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).
date-fns
Now at version 2+ (details). Modern JavaScript date utility library that provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates.
buffer
The buffer module from Node.js, for the browser.
TypeLighter.js
A lightweight and versatile typewriter effect plugin.
Moveable
Allows an object on the page to be draggable, resizable, scalable, rotatable, warpable, and pinchable.
Airtable.js
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".
zip
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
js-fire
A JavaScript implementation of google/python-fire, for automatically generating CLIs from most JavaScript objects.
GitDuck
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.
nve
Executes a file, command, or REPL using a specific Node.js version.
Commander.js
The complete solution for Node.js command-line interfaces, inspired by Ruby's commander.
GitAgent
Slack reminders and notifications for GitLab. Personal and team notifications to suit your workflow.
StoryTime
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.
delice
A CLI to help you get insight into your projects' licenses.
autosetup
A simple bash script (compatible with Debian-based distributions like Ubuntu and Kali) to install and setup necessary tools after a fresh install.
GitRecruit
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
