Issue #409 (Pointer Events, React, Media, JSON/DB)05/20/21
If you're like me, then you've probably been accustomed to using the various mouse events for dealing with interactions of the user's pointer. For example, mouseover, mouseenter, mousemove, and so forth.
Well, we're just about at the point where mouse events should be left behind in favour of Pointer Events, which now have solid browser support. This specification is not to be confused with CSS's pointer-events property.
The events that this spec makes available include:
- pointerover
- pointerenter / pointerleave
- pointerdown / pointerup
- pointermove
- pointercancel
- pointerout
There are other events listed in the spec, but these are the ones you'll probably use the most to replace your mouse events. The spec explains the advantage of these events, describing them as:
"... events and related interfaces for handling hardware agnostic pointer input from devices including a mouse, pen, touchscreen, etc."
The spec also explains why it's important to have a more universal set of events instead of separate events for each pointer type:
"Event types have been proposed for handling each of these forms of input individually. However, that approach often incurs unnecessary duplication of logic and event handling overhead when adding support for a new input type."
From what I can see, all modern browsers and even IE11 support these events, so they're quite safe to use in most cases.
Now on to this week's tools!
|
React Tools
Engineering Leaders Need to Know How to Structure a Remote
Hiring Process
A new era of remote work suddenly arrived and managers need to enhance their recruiting process if they want to win the best talent for their companies. This guide shows you how GitLab, Zapier and other companies build thriving remote teams. Download Revelo’s free eBook. sponsored
GeoStyler
An open source React library that enables users to style maps with the help of a GUI.
React Live Chat Loader
Implement a live chat beacon in your React application without performance regressions.
use-clipboard-copy
A lightweight hook for React to add copy-to-clipboard functionality to React.
React Alice Carousel
A React component for building content galleries, content rotators, and other types of carousels.
React Auth Kit
A lightweight authentication management library for React that's production-ready, 3.33 KB gzip'd, and supports JSON Web Tokens (JWT).
leva
React-first components GUI, customizable, extensible, with 12+ inputs available and keyboard accessible.
react-tree
A hierarchical object tree component for React with dark mode and ability to add your own custom theme.
inspx
An element inspector that lets the user view an element's padding, margins, and dimensions using Option-hover (ALT-hover on Windows).
use-tus
React hooks with TypeScript support to implement resume-able file uploads using tus-js-client (a JS utility).
React Google Places Autocomplete
A fully customizable React component to easily incorporate Google Places Autocomplete into your app or website.
On the Release Radar:
|
Media Tools (SVG, Audio, Video, etc.)
1440 Newsletter
The fastest way to an impartial point-of-view, 100% free. The team at 1440 scours 100+ sources covering culture, science, sports, politics, business, and everything in between – in a 5-minute read each morning. sponsored
Skuawk
A repository of unique high-quality public domain photos, categorized. Some really nice options here!
RedKetchup
A whole slew of online tools for doing all sorts of image-related manipulations – resize, compress, convert, make favicons, and lots more.
Iconic
A set of 170 free line-based SVG icons, categorized, searchable, and can be used in commercial projects.
TinyVid
Native Windows, Mac, or Linux app that will compress a video to a desired file size (e.g for use in WhatsApp, Discord, or another platform with limits).
Replay
A React video player that's ready to use with customizable player controls and UX.
Mastershot
A free intuitive web-based video editor to trim clips, combine clips, add audio, convert video to MP3, and more.
SVGFilterBuilder
A drag-and-drop UI to fiddle around with SVG filter effects. Seems pretty complex, but might be cool if you can figure it out.
three-projected-material
Three.js Material that lets you do Texture Projection on a 3D model. The demos are nice!
Vektors
A search/portal for finding illustration packs from various sources around the web.
react-svg-map
A set of React components to display an interactive SVG map.
On the Release Radar:
|
JSON Tools, Databases, etc.
Your Impartial, Comprehensive Daily News Source
1440 is a daily newsletter covering culture, science, sports, politics, business, and everything in between, in a 5-minute read each morning, 100% free. sponsored
Sqliteviz
A PWA for fully client-side visualisation of SQLite databases or CSV files that allows you to run SQL queries against a SQLite database and create Plotly charts.
ark.db
A small and fast JSON database for Node and the browser.
Baserow
An open source no-code online database that can be used by non-developers, free forever if you self host.
KeyDB
A high performance fork of Redis with a focus on multithreading, memory efficiency, and high throughput.
PlanetScale
A "pay-as-you-grow" serverless database built on MySQL and Vitess. Free plan includes 3 databases and 10GB per database.
veeQuery
An app to query databases and large data files, plus data exploration, data analysis, and data visualization.
TQL
Write type-safe GraphQL queries with TypeScript.
Refi App
A GUI tool to make interacting with Firestore less painful.
@mswjs/data
A data modeling and relationship library for testing JavaScript applications.
On the Release Radar:
|
A Tweet for Thought
If you're a self-taught developer, Madison's got your back.
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...
Last week I shared a developer portfolio that mimics the MacOS GUI. This week I came across two similar projects: Andy's Desk (mimicking Windows 7) and Wen's Blog (mimicking a Linux environment). Very cool!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
