Web Tools Weekly
What a Tool!

Issue #263  (HTML Collections, JS Libraries, Git/CLI, Testing)

When you use a DOM method like querySelectorAll() or childNodes(), you get what's called a NodeList object, which is an array-like collection. Depending on the method used, the collection could contain nodes other than element nodes. In the past, these collections were referred to as HTML collections, which is basically now a legacy term.

The DOM spec says:

"HTMLCollection is a historical artifact we cannot rid the web of. While developers are of course welcome to keep using it, new API standard designers ought not to use it."

As far as I can tell, the only three DOM methods that return an HTML collection are getElementsByTagName(), getElementsByTagNameNS(), and getElementsByClassName().

None of this is to suggest that you shouldn't use these. They'll always be supported and they work fairly well for collecting elements. In addition, HTML collections have two little-known methods you can use, as shown in this code:

let d = document,
    myLists = d.getElementsByTagName('ul'),
    myListItems = d.getElementsByTagName('li');

console.log( myLists.namedItem('myList').tagName );
// "UL"

console.log( myListItems.item(2).innerText );
// "Example item three"

Try on JSFiddle

The methods are:

  • HTMLCollection.item(index) - Returns the node at the given zero-based index.
  • HTMLCollection.namedItem(id) - Returns the node that has an ID attribute that matches the string passed in as a parameter. It falls back to the name attribute if an ID isn't found and if the element supports the name attribute.

Both these methods are in the spec, and browser support is good across the board (including IE11 and Edge).

Now on to this week's tools!

Did you enjoy this week's coding tip? Previous tips are compiled in my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2


JavaScript Libraries and Frameworks

Declarative state and logic management. A lightweight library to manage the application state alongside business logic, without compromising from the predictability of the state.

A modular framework for visual programming. Allows you to create a node-based editor directly in the browser.

A minimal view layer for creating declarative web user interfaces. Mix it with your favorite state container or use it standalone for maximum flexibility.

A minimal standalone JavaScript library for DOM manipulation.

Friendly machine learning for the web. Provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.

Animation library that mimics CSS keyframes when scrolling.

NodeJS module generator/boilerplate with Babel, Jest, Flow, Documentation and more.

The popular animation library is now at version 2+ (details here).

Now at version 1+. Want to use Vanilla JavaScript but find native APIs a bit unwieldy? Bliss is for you.

A JavaScript game engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.

A progressive framework for modern web apps, now at version 2+ (details).

Now at version 6+ (details).

Recommended Reading for Developers
Learning React Book   CSS Secrets Book   CSS in Depth Book

Git, GitHub, and Command Line Tools

Netlify CMS
Now at version 2+ (details). Open source content management for your Git workflow. Use with any static site generator for a faster and more flexible web project.

Apollo CLI
Brings together your GraphQL clients and servers with tools for validating your schema, linting your operations for compatibility with your server, and generating static types for improved client-side type safety.

Next Editor
Still in early development. Standalone Git editor in the browser, for Chromebook.

Local offline peer-to-peer social Git front end.

Beautiful images of your code – from right inside your terminal.

A simple, interactive command line interface to help you choose and quickly add a LICENSE file to your project.

A personal information dashboard for your terminal, developed for those who spend most of their day in the command line.

Lets you set up a redirect for GitHub repos that you've moved to another repository site.

Immersive terminal interface for managing docker containers and services.

A cloud service that creates comments in failed pull requests and tell the author what went wrong and what they can do to fix it.

Framework for building a command line interface (CLI) in Node.js. Create CLIs with a few flags or advanced CLIs that have subcommands.

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

Testing and Debugging Tools

A bare test runner. It looks for test sources, finds exported functions, and runs them – without requiring any imports or exposing any globals.

A simple, modern, opinionated unit testing framework for testing JavaScript in a browser or with Node.js, with no configuration options or plugins.

Report URI
Service that provides real-time security reporting for your website.

Security Headers
Online tool to analyse your website's HTTP response headers.

A standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing HTTP interactions.

Fathom Analytics
Google Analytics alternative. Tracks users on a website (without collecting personal data) and give you a non-nerdy breakdown of your top content and top referrers.

A statistical analysis tool for performance testing.

Tools for developing, documenting, and testing React component libraries.

Request Map Generator
Submit a URL to generate a node map of all page requests. Rapidly identify third parties, where your transmitted bytes are coming from, and how slow your domains are.

A platform for debugging mobile apps on iOS and Android. Visualize, inspect, and control your apps from a simple desktop interface.

Now at version 5+. A range of free and open source tools to help designers and developers make their web pages more accessible.

Now at version 1+ (details). A continuous visual testing tool made for modern view layers like React

A Tweet for Thought

It turns out, Internet Explorer is holding us back again (see full 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...

IssueHunt is a funding platform for open source software. Anyone can fund any issue on a project and the funds will be distributed to its maintainers and contributors.

Thanks to all for subscribing and reading!

Keep tooling,