Web Tools Weekly
What a Tool!

Issue #268  (element.click(), React, JS Utils, JSON/Data)09/06/18

Advertisement via Paved
Pramp – Free Frontend Interview Practice
Now you can practice for your frontend interview with a peer, for free. Practice CSS, HTML, and JavaScript over a collaborative environment with other awesome developers like yourself.

Sign up to get unlimited interview credits!

Schedule a mock interview >

This Stack Overflow thread discusses different ways to trigger a click event on an element even when the click doesn't actually occur via user input. If you've used jQuery, then you might be familiar with trigger(), which allows you to do this.

The thread, however, points out an old DOM method called click() that can be used similarly. What's interesting is that the old spec (which is the only one MDN's brief article references for this method) says this method will:

"Simulate a mouse-click. For INPUT elements whose type attribute has one of the following values: 'button', 'checkbox', 'radio', 'reset', or 'submit'."

But despite that this seemed to be originally limited to clicks on certain types of elements, you can apparently do this on any element. For example, assuming this HTML:

<div class="box"></div>

I can do this:

let myBox = document.querySelector('.box');

myBox.addEventListener('click', function () {
  document.body.style.background = 'aqua';
}, false);


JS Bin Demo

Here I'm triggering the click on a div element, and it works. And this is in agreement with the current HTML spec (not the DOM spec), which includes click(). There it runs through some specific steps the browser should take when this method is used. The click() method is also referenced in the DOM spec, but only as a side point while discussing the isTrusted attribute.

So if you ever need to simulate a click on some element, this is an easy and mostly cross-browser way to accomplish it.

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


React Tools

Pramp – Free Frontend Interview Practice
Now you can practice for your frontend interview with a peer, for free. Practice CSS, HTML, and JavaScript over a collaborative environment with other awesome developers like yourself.    sponsored via Paved 

Flexible promise-based React data loader.

Simple dropdown component for React, inspired by react-select.

React Pose Text
Automatically splits strings of text into individual words and/or characters. These can then be animated with the full power of Pose.

React Timekeeper
Time picker based on the style of the Android Google Keep app.

React Loadable
A higher order component for loading components with promises.

A React wrapper for the nippleJS on-screen-joystick.

A React animation helper library for highly configurable transitions that uses the FLIP technique (i.e. First, Last, Invert, Play for better performance).

A React component which makes it easy to create a directed graph editor without implementing any of the SVG drawing or event handling logic.

React Final Form
High performance subscription-based form state management for React.

React Input Format & Mask is a tiny (~650-750b) component to transform any input component into formatted or masked input.

A mobile-supported, draggable, editable, and API-based tab component for React.

Recommended Reading for Developers
Learning React Book   You Don't Know JS: this & Object Prototypes book   Using SVG with CSS3 & HTML5 book

BTW - If you've written a book for developers that's available on Amazon, reply to this email and let me know. I'll consider including it here. No charge.

JavaScript Utilities

Performance-focused, lightweight scroll animation library.

Lightweight JavaScript (ES6) tweening library.

A tiny, fully customizable and dependency-free JavaScript plugin for creating sliding drawers (e.g.  sidebar menus or option drawers) in your apps.

A powerful widget that allows you to visualize and edit data via its table representation.

A library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps.

Scrollmonitor Parallax
A simple parallax API.

Chain function calls using a prototype function.

A tiny wrapper built around the Fetch API with an intuitive syntax.

Uses polyfill.io's service to generate a polyfill based on the user agent of the request. Aggressively caches to ensure as few requests as possible.

The ultimate JavaScript data validation library. Dead simple fluent API., customizable, reusable.

Convert an object of time-based properties to milliseconds. E.g. `{seconds: 2}` → `2000`.

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

JSON, Data Tools, Content, etc.

A powerful open source geospatial analysis tool for large-scale data sets.

Online JSON Editor
An Online JSON editor to help you create, view, and edit JSON with the help of a treeview to visualize your data side by side with the code.

Recently open-sourced by Apple. Gives you the power of ACID transactions in a distributed database.

A JavaScript library that stores form data in Local Storage so the user doesn't have to fill it out again when coming back to the same form.

Normalizes GraphQL and JSON:API payloads into your state management system and provides ORM selectors to prepare data to be consumed by components.

JavaScript utility to convert a tree structure into a human friendly string.

Stringify JSON just enough to see what it is.

Convert plain text documents written in HTML, Markdown, or LaTeX to PDF, DOCX, RTF, or EPUB with a simple HTTP API.

Convert your PDF files to Word, Excel, PowerPoint and more.  Convert various formats to PDF. Store and share your documents for free. 

A Tweet for Thought

Had to laugh at this great response to an equally great reminder that technical blog posts should always have a date on them.

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

Keep a Changelog is a nicely done info-site to help you understand how and why you should keep a changelog.

Thanks to all for subscribing and reading!

Keep tooling,