Issue #263 (HTML Collections, JS Libs, Git/CLI, Testing)08/02/18
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!
|
JavaScript Libraries and Frameworks
Kinsta Managed WordPress Hosting
Powered by Google Cloud Platform, Kinsta takes managed hosting to the next level with resource isolation and automatic scalability. They offer 15+ data centers, 24x7 support/backups, free SSL/CDN, and dev-friendly staging/SSH. sponsored via Syndicate
Reclare
Declarative state and logic management. A lightweight library to manage the application state alongside business logic, without compromising from the predictability of the state.
Rete.js
A modular framework for visual programming. Allows you to create a node-based editor directly in the browser.
Superfine
A minimal view layer for creating declarative web user interfaces. Mix it with your favorite state container or use it standalone for maximum flexibility.
nanoJS
A minimal standalone JavaScript library for DOM manipulation.
ml5.js
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.
Motus
Animation library that mimics CSS keyframes when scrolling.
nod
NodeJS module generator/boilerplate with Babel, Jest, Flow, Documentation and more.
GreenSock
The popular animation library is now at version 2+ (details here).
Bliss.js
Now at version 1+. Want to use Vanilla JavaScript but find native APIs a bit unwieldy? Bliss is for you.
Impact
A JavaScript game engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.
Dojo
A progressive framework for modern web apps, now at version 2+ (details).
Angular
Now at version 6+ (details).
|
|
Recommended Reading for Developers
|
Git, GitHub, and Command Line Tools
Stop Wasting Hours on a Job Search
Stop sending your resume into a blackhole and wasting hours on a job search. Use Leap.ai to get guaranteed responses and instant job matches at unicorn and other fast growing companies for engineering roles! sponsored
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.
gitverse
Local offline peer-to-peer social Git front end.
carbon-now-cli
Beautiful images of your code – from right inside your terminal.
licensed
A simple, interactive command line interface to help you choose and quickly add a LICENSE file to your project.
WTF
A personal information dashboard for your terminal, developed for those who spend most of their day in the command line.
gh-notify-move
Lets you set up a redirect for GitHub repos that you've moved to another repository site.
dockly
Immersive terminal interface for managing docker containers and services.
TravisBuddy
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.
oclif
Framework for building a command line interface (CLI) in Node.js. Create CLIs with a few flags or advanced CLIs that have subcommands.
|
Testing and Debugging Tools
Best
A bare test runner. It looks for test sources, finds exported functions, and runs them – without requiring any imports or exposing any globals.
Luna
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.
PollyJS
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.
Hiper
A statistical analysis tool for performance testing.
Kit
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.
Flipper
A platform for debugging mobile apps on iOS and Android. Visualize, inspect, and control your apps from a simple desktop interface.
Pa11y
Now at version 5+. A range of free and open source tools to help designers and developers make their web pages more accessible.
Chromatic
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
