Issue #385 (beforeinput, JS Utils, Text Editors, React)12/03/20
The input and change events are quite common when manipulating data entered in form controls, and I've discussed those here many times. A new one that's been added to the spec that's supported in all modern browsers except Firefox is called beforeinput.
The beforeinput event can be applied to input, select, and textarea elements as well as any element with contenteditable or designMode enabled (i.e. anything that takes input). Here's how the spec describes input and beforeinput so you can see the subtle difference (which is somewhat obvious from the name):
- input - "A user agent MUST dispatch this event immediately after the DOM has been updated."
- beforeinput - "A user agent MUST dispatch this event when the DOM is about to be updated."
The difference between the two is kind of strange when you use them both for logging the values in the field.
Try this CodePen demo to see what I mean.
Make sure you use Chrome or Edge or another browser that supports beforeinput. Notice that the first input that logs the value seems to always be behind a keystroke. If you think about it, this makes sense. The event is supposedly firing "before" any data is input. So the first thing it does is enter nothing (which is the default value of the field). Then it logs each previous value "before" each successive keystroke.
This makes more sense if you add a default value to the first input. Then you'll see that default value appear on first keystroke, after which the new value will appear, and so on with each keystroke.
Meanwhile, the input event used on the second form field works perfectly for this purpose – it logs the value in real-time, as you would expect. Clearly, the beforeinput event is the wrong tool for the job if you're intending to log what's being typed. But this should serve to demonstrate what the event does. If you need to perform an action while the user is typing something but before that 'input' is finalized, then beforeinput would be the right tool for the job.
As mentioned, Firefox is the main culprit in lack of support at the moment but it looks like it's on track to be added soon.
Now on to this week's tools!
|
JavaScript Utilities
JavaScript Speed Coding Challenge
Are you ready to put your JavaScript skills to the test? Enter our JavaScript Speed Coding Challenge and see how you stack up among the world’s top developers. sponsored
p-state
Inspect the state of a promise, which might come in handy in the rare case before doing a heavy operation or for assertions when writing tests.
Planton
A database-agnostic task scheduler that abstracts logic for handling concurrency and different task scheduling strategies.
promisify-4loc
Convert a Node-style callback API to a Promise, similar to an older tool but implemented in just four lines of code, with only the core functionality provided.
Valtio
Makes proxy-state simple for React and vanilla JavaScript.
utfu
Replaces busted characters carried over from legacy text encodings with the proper UTF-8 characters.
joi
A powerful schema description language and data validation library for JavaScript.
XActor
An actor model implementation for JavaScript and TypeScript, heavily inspired by Akka. It represents the "actor model" parts of XState and can be used with or without XState.
panzoom
Extensible, mobile friendly pan and zoom framework (supports DOM and SVG). Demo here.
 |
redaxios
The Axios API as an 800 byte Fetch wrapper.
Mutik
A tiny (495B) immutable state management library based on Immer.
web-worker
Native cross-platform Web Workers. Works in published npm modules.
Svelte-Convert
Convert a Svelte component to a Vue or React component, with SSR support.
Seafox
A blazing fast 100% spec compliant, self-hosted JavaScript parser written in TypeScript.
|
VS Code, IDEs, Text Editors, etc.
Tech Productivity Newsletter
A brief weekly newsletter sent out every Monday that features productivity tools and articles on efficiency, well-being, remote work, and more. promoted
React Icons
Search for icons for React from a number of different icon libraries, right from inside VS Code.
Paircast
For those hiring developers, this is a service that provides streamlined technical take-homes for Applicant Tracking Systems (ATS). Records developers' screen, video, and code changes while they complete 1-hour coding projects.
Serenade
A powerful tool to enable writing code using natural speech (i.e. voice coding).
Adobe XD for VS Code
VS Code extension that allows developers to visually map design sources, created in Adobe XD and available in Creative Cloud Libraries, to platform-specific code using design tokens.
Microsoft Edge Tools for VS Code
Use the Microsoft Edge Dev Tools from within VS Code to see your site's runtime HTML structure, alter its layout, fix styling issues as well as see your site's network requests.
Uivonim
A fork of Veonim but without the reliance on VS Code extensions.
Vuln Cost
An open source security scanner for VS Code. Find security vulnerabilities in npm packages while you code. Receive inline feedback such as how many vulnerabilities a package contains.
reply.vim
A Vim and Neovim plugin to make edit buffers play with REPLs nicely. More than 40 REPLs are supported by default, and you can add your own.
Project Manager
VS Code extension to allow you to easily manage and switch between projects.
 |
Emmet for Sublime Text
Emmet, the popular front-end workflow tool, is now at version 2.
Import Cost
VS Code extension to display the size of an imported package. Utilizes webpack with babili-webpack-plugin in order to detect the imported size.
|
React Tools
Concent
Simple, predictable, progressive, and efficient state management tailored for React.
beautiful-react-diagrams
A collection of lightweight React components and hooks to build diagrams with ease.
Tippy.js for React
A React component for Tippy.js, the tooltip, popover, dropdown, and menu solution powered by Popper.
react-dropdown-tree-select
A lightweight and fast control for React to render a select component that can display hierarchical tree data.
React Simple Maps
Now at version 2+. Create beautiful SVG maps in React with d3-geo and TopoJSON using a declarative API.
React Easy Edit
A React library that adds inline "click to edit" functionality on HTML form elements, with validation for user input and customizations to include save and cancel buttons.
React FilePond
A wrapper component for FilePond, the "upload anything" utility with optimization and accessibility features.
Fresh
A highly opinionated forms library for React with a dead simple API.
react-cropper
A React component for Cropper.js, the popular utility for cropping/framing an image on the page.
react-use-pip
A React hook for using the Picture-in-Picture API, a still-in-flux standard.
use-fauna
React hooks for interacting with Fauna databases.
MUI-Datatables
A responsive data table component built on Material-UI that includes features like filtering, resizable columns, view/hide columns, draggable columns, search, and more.
|
  |
A Tweet for Thought
This is great advice for when on vacation and especially if it's a "staycation" where you're not actually traveling but still dependent on your electronic devices.
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...
If you're staying home a lot and have some LEGO on hand, you might enjoy Rebrickable, a website that shows you which LEGO sets you can build from the sets and parts you already own.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
