Web Tools Weekly
What a Tool!

Issue #300  (Event Delegation, Testing, Build Tools, JSON/DB)

The book Secrets of the JavaScript Ninja has a nice tip involving event delegation and the event.target property.

Let's say I have a group of elements and I want to attach the same event to all of them. I can do this using a loop, something like this:

let cells = document.querySelectorAll('td');

for (i of cells) {
  i.addEventListener('click', function () {
    // do something...
  }, false);

That's not terrible code, but you can imagine how inefficient it would be if there were dozens or even hundreds of table cells.

Instead, how much better is it to attach a single event to the parent table element, then use the event.target property to determine if a cell was clicked and respond accordingly. Here's the improved code:

let table = document.querySelector('table');

table.addEventListener('click', function (e) {
  if (e.target.tagName.toLowerCase() === 'td') {
    // do something...
}, false);

By default, the click event on a cell is going to bubble up to the parent element (which is where the event is attached). This will detect the initial click. Using event.target will allow me to determine on which element the event actually occurred before it bubbled up to the parent.

This CodePen demonstrates how this works. The JavaScript panel has the inefficient version in the code comments, but the live code uses the version with the click event delegated to the table element.

Now on to this week's tools!

Testing and Debugging Tools

Responsive design testing tool. Enter a URL and you'll get screenshots of your site on various devices including 10 desktops, 8 mobile, and 2 iPads. You can also add a custom device of your own.

Take screenshots programmatically using the getDisplayMedia API. Useful for debugging, feedback etc.

Cross browser testing in the cloud. Automate QA and test your web site online.

Zero config GUI for Jest (the popular JavaScript testing framework).

A TSLint rule that enforces the Rules of Hooks for React hooks.

A module that goes through your CSS to find all kinds of relevant statistics, like the amount of rules, the amount of !importants, unique colors, and so on.

Pulno Audit
Online tool that does a SEO audit and website analysis.

An experimental data-flow analysis tool for JavaScript. See where each character on the screen came from in code.

Test case management system for Dev and QA teams. Makes it easy to manage test cases, compose test plans and perform test runs as an individual or in a team.

Open source web session replay library that provides easy-to-use APIs to record a user's interactions and replay them remotely.

Build Tools, Bundlers, Tasks, etc.

Your next web application generated in minutes.

Zero Server
Zero config web framework and server to simplify web development.

GUI for npm tasks for the front end, to easily work with package.json and the node_modules folder.

Tool to quickly fetch info on an npm package via the terminal.

Create App
Create a webpack config or Parcel app with React, Vue, Typescript, CSS, etc, using this online tool.

Quick Command Line. An add-on that works on top of other package managers like npm and yarn and keeps track of globally installed packages and removes those past their expiry date.

Package Phobia
Reports the size of an npm package before you install it. Useful for inspecting potential dependencies or devDependencies without using disk space or waiting for npm install.

(Older project) Locates common JavaScript/Node packages from your node_modules directories and hard links the package files so they share disk space.

JSON Tools, Databases, Content, etc.

A data templating language that's a simple extension of JSON, for app and tool developers.

Currently in Alpha release. Combines the simplicity of a NoSQL database with relational model’s powerful querying, strictness, consistency, and performance.

 Turn websites into organized data without coding. Start clicking and collect the data you need. No upfront configuration or programming needed.

jq kung fu
Online tool to test queries using jq (a lightweight and flexible command-line JSON processor).

Automatically extract product data. No selectors. No coding. Just provide a product URL for any site to get prices, variants, ratings, comments, images, descriptions and more.

MongoDB client for the web. Query your data directly from your browser. You can host it locally, or anywhere else, for you and your team.

A tiny JavaScript job runner for MongoDB.

JSON Function
Allows you to use methods such as schema, innerJoin, where, limit, select, and orderBy on JSON data.

A small language for manipulating and restructuring JSON and other data files.

Generate an app from JSON.

A Tweet for Thought

How not to do push notifications.

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...

This WIndows XP re-creation is just way too good. Multiple working levels of Minesweeper and Winamp!

Thanks to all for subscribing and reading!

Keep tooling,