Web Tools #409 - Pointer Events, React, SVG, JSON/DB

Advertisement

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

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:

• React DnD - Drag and drop library at v14+
• react-spring - Spring-physics animation library at v9+
• spectacle - JSX-based presentation library at v7+

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:

• D3.js - At v6+ since August
• Heroicons - SVG icon set now at v1.0

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:

• Altair - GraphQL client is now at v4+
• Apollo - GraphQL libs and tools platform at v3+
• fakeIndexedDB - Now at v3+

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 everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books