Issue #268 (element.click(), React, JS Utils, JSON/Data)09/06/18
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:
I can do this:
|
let myBox = document.querySelector('.box');
myBox.addEventListener('click', function () {
document.body.style.background = 'aqua';
}, false);
myBox.click();
|
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!
|
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
react-async
Flexible promise-based React data loader.
react-dropdown
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.
react-nipple
A React wrapper for the nippleJS on-screen-joystick.
react-flip-toolkit
A React animation helper library for highly configurable transitions that uses the FLIP technique (i.e. First, Last, Invert, Play for better performance).
react-digraph
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.
RIFM
React Input Format & Mask is a tiny (~650-750b) component to transform any input component into formatted or masked input.
react-tabtab
A mobile-supported, draggable, editable, and API-based tab component for React.
|
|
Recommended Reading for Developers
|
JavaScript Utilities
Sal.js
Performance-focused, lightweight scroll animation library.
Between.js
Lightweight JavaScript (ES6) tweening library.
Pushbar.js
A tiny, fully customizable and dependency-free JavaScript plugin for creating sliding drawers (e.g. sidebar menus or option drawers) in your apps.
TOAST UI Grid
A powerful widget that allows you to visualize and edit data via its table representation.
PWACompat
A library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps.
Scrollmonitor Parallax
A simple parallax API.
zii
Chain function calls using a prototype function.
Wretch
A tiny wrapper built around the Fetch API with an intuitive syntax.
polyfill-lambda
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.
v8n
The ultimate JavaScript data validation library. Dead simple fluent API., customizable, reusable.
to-milliseconds
Convert an object of time-based properties to milliseconds. E.g. `{seconds: 2}` → `2000`.
|
JSON, Data Tools, Content, etc.
Kepler.gl
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.
FoundationDB
Recently open-sourced by Apple. Gives you the power of ACID transactions in a distributed database.
FormStorage
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.
BlueChip
Normalizes GraphQL and JSON:API payloads into your state management system and provides ORM selectors to prepare data to be consumed by components.
tree-to-string
JavaScript utility to convert a tree structure into a human friendly string.
json-peek
Stringify JSON just enough to see what it is.
Docverter
Convert plain text documents written in HTML, Markdown, or LaTeX to PDF, DOCX, RTF, or EPUB with a simple HTTP API.
Cometdocs
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
