Issue #393 (Array.flat(), JS Utils, Testing, Jamstack)01/28/21
A relatively new array method that the ECMAScript specification added in ES2016, and has strong browser support, is the simple to use but practical Array.flat().
Array.flat() allows you to flatten any array that has nested array items (or elements in one or more sub-arrays). For example:
|
let myArray = ['one', 'two', [1, 2, 3], 'three', 'four', 'five', [4, 5, 6], 'six'];
console.log(myArray.flat());
// ["one", "two", 1, 2, 3, "three", "four", "five", 4, 5, 6, "six"]
|
Try it on CodePen
As you can see, the original array has two different sub-arrays. When I call myArray.flat(), the entire array gets converted to a single-level (i.e. flat) array. This method doesn't change the original array, but returns a new flat array.
Array.flat() additionally takes an optional argument, an integer, that defines how deep the array should be flattened. The default is 1, which means 'flatten one sub-array down'.
A few code examples should help you grasp how this works:
|
let myArray = ['one', 'two', [1, 2, ['a', 'b', 'c'], 3], 'three', 'four', 'five', 'six'];
console.log(myArray.flat(1));
// ["one", "two", 1, 2, ["a", "b", "c"], 3, "three", "four", "five", "six"]
console.log(myArray.flat(0));
// "one", "two", [1, 2, ["a", "b", "c"], 3], "three", "four", "five", "six"]
console.log(myArray.flat(2));
// ["one", "two", 1, 2, "a", "b", "c", 3, "three", "four", "five", "six"]
console.log(myArray.flat(3));
// ["one", "two", 1, 2, "a", "b", "c", 3, "three", "four", "five", "six"]
|
Try it on CodePen
As you can see, this time the original array has a sub-array with another sub-array nested inside that sub-array. Here's how the different argument values respond:
- Calling myArray.flat() with the default argument of 1 flattens only the first two levels of the array, leaving the sub-sub-level intact.
- Using 0 as the argument flattens nothing
- Using an argument of 2 flattens both sub-levels to a single flat array
- Using 3 or higher has the same effect as 2 since it doesn't go any deeper in this instance
As MDN points out, if you don't know how many levels deep the array goes, you can use Array.flat(Infinity) if you want to flatten the whole thing.
That's Array.flat() in a nutshell and it's safe to use in all modern browsers.
Now on to this week's tools!
|
JavaScript Utilities
The Free Modern Jira Alternative for Teams
Tara AI is the simplest free product development tool, designed for teams moving rapidly. One workspace for your team's docs, sprints and tasks, synced to Git. sponsored
Okie
Utility for an API to run a dead simple worker threads pool.
Typesense
An open source, typo tolerant search experience for your pages that includes instant search, auto-suggest, faceted search, and more.
Pikaday
A refreshing JavaScript date picker – lightweight, no dependencies, and modular CSS.
Filterizr
A JavaScript library that searches, sorts, shuffles and applies stunning filters over responsive galleries using CSS transitions.
JavaScript Keyboard Events
An all-in-one online interactive demo that shows info on keypress, keydown, and keyup events when using a physical keyboard.
EasyGrid
Fully customizable vanilla JavaScript responsive grid with no need for a CSS framework and includes a filter feature.
Email Validator
Validates email addresses based on regex, common typos, disposable email blacklists, DNS records, and SMTP server response.
Detect GPU
Classifies GPUs based on their 3D rendering benchmark score, allowing the developer to provide sensible default settings for graphic intensive apps. Like a user-agent detection for the GPU but more powerful.
ActiveJS
Pragmatic, reactive state management for JavaScript apps featuring a simpler API and features like undo/redo, persistence, immutability, and observable events.
luciascript
Hastscript-like utility to create HTML strings.
next-translate
A Next.js plugin + internationalization API to keep the translations as simple as possible in a Next.js environment.
ON THE RELEASE RADAR:
|
Testing and Debugging Tools
Source Map Visualization
Upload a CSS or JS source map file (i.e. one with proper source map commenting) to see an interactive visualization of your source map data.
MSW
A seamless API mocking library for the browser and Node. Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.
deno-puppeteer
A fork of Puppeteer running on Deno.
slowbug
A VS Code extension for debugging your code in slow-mo, as an alternative to stepping through multiple breakpoints.
HostedScan
Service for 24/7 alerts and detection for security vulnerabilities on your website or app, including a pretty good free tier.
EStimator.dev
Enter a website URL and this tool will tell you how much performance could be improved by converting old JavaScript to modern ES features.
Firefox Profiler
A web app for Firefox performance analysis. Capture a performance profile, analyze it, and share it.
Playwright CLI
CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.
markdown-link-check
Extracts links from markdown text and check whether each link is alive (200 OK) or dead, including mailto: links.
web-vitals
A tiny (~1K), modular library for measuring Google's Web Vitals metrics on real users, in a way that matches how they're measured by Chrome and reported to other Google tools.
|
Jamstack, Site Builders, etc.
gatsby-themes
High-quality, open-source, and customizable Gatsby themes to quickly bootstrap your website.
Lume
A static site generator for Deno with support for multiple file formats (MD, YAML, etc.) and ability to hook any pre- or post-processor (Sass, PostCSS, etc).
Stork Search
Fast web search, made for static sites. Add a beautiful, fast, and accurate search interface to your static site. The on-page demo works great!
11ty Sass Skeleton
Starter kit with nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside Eleventy.
Jamstack.new
Kind of like Google's sheets.new and docs.new, which instantly create sheets/docs. This one helps you quickly build a Jamstack site via Stackbit.
next-cms-ghost
Create and publish fast blogs with this Jamify blogging system. Powered by React and Next.js and content fed by headless Ghost.
Nextein
A static site and blog generator that combines the simplicity of Markdown and the power of Next.js.
Motionless
A static site generator using plain JavaScript and HTML with Node. No special templating or config language to learn, just load plain HTML files and use querySelector and the DOM API to change pages using JavaScript.
11ty Netlify Jumpstart
Quickly launch an Eleventy-generated static site that includes a minimal Sass framework, generated sitemap, RSS feed, and social share preview images.
Jamstack Explorers
A learning platform for building sites using Jamstack technologies via Netlify.
Hashnode
A developer/tech blogging platform that seems to be garnering some interest in the community.
|
  |
A Tweet for Thought
We need more honesty like this, not only in tech, but everywhere.
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...
Dimensions is described as "a comprehensive reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces that make up our world." Nicely designed, kind of like a Wikipedia for visuals. Might come in handy if you're designing or drawing everyday objects.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
