Issue #300 (Event Delegation, Testing, Build Tools, JSON/DB)04/18/19
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
Get 40% Off Your Entire Manning.com Order!
Perfect your skillset! Manning Publications are offering 40% off everything in their catalog, including their range of web dev books and video courses. sponsored
ScreenDump
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.
Browsershot
Take screenshots programmatically using the getDisplayMedia API. Useful for debugging, feedback etc.
Anwendo
Cross browser testing in the cloud. Automate QA and test your web site online.
Majestic
Zero config GUI for Jest (the popular JavaScript testing framework).
tslint-react-hooks
A TSLint rule that enforces the Rules of Hooks for React hooks.
css-analyzer
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.
FromJS
An experimental data-flow analysis tool for JavaScript. See where each character on the screen came from in code.
Qase
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.
rrweb.io
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.
Webpack bundle analysis, for every commit — packtracker.io
Track your webpack bundle analysis over time, optimize your individual assets, and bring this data right into your GitHub Pull Requests. Never wonder how your code changes will affect your asset profile again. sponsored
ScaffoldHub
Your next web application generated in minutes.
Zero Server
Zero config web framework and server to simplify web development.
npm-gui
GUI for npm tasks for the front end, to easily work with package.json and the node_modules folder.
npmf
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.
qcl
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.
pkglink
(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.
Webpack bundle analysis, for every commit — packtracker.io
Track your webpack bundle analysis over time, optimize your individual assets, and bring this data right into your GitHub Pull Requests. Never wonder how your code changes will affect your asset profile again. sponsored
Jsonnet
A data templating language that's a simple extension of JSON, for app and tool developers.
EdgeDB
Currently in Alpha release. Combines the simplicity of a NoSQL database with relational model’s powerful querying, strictness, consistency, and performance.
Spider
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).
xtrct.io
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.
Mongoku
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.
Jobrun
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.
emuto
A small language for manipulating and restructuring JSON and other data files.
MSON
Generate an app from JSON.
|
|
