Issue #472  (DOM Events, Media, React, JSON/DB)08/04/22

When dealing with events in JavaScript, most of the time you won't have to do anything too complex. Most of the time you're adding an event listener, responding accordingly, maybe removing an event listener. You might be accustomed to using preventDefault() or stopPropagation(), both of which are pretty handy in specific circumstances.

If you do need some really specific info about events you're watching for and responding to, there are some lesser-used properties that are good to be aware of.

You can access different properties on an event by passing the event object into the function for the event listeners, something like this:

From there, you can access a number of different properties on the event. In this case the object is represented by the variable "event" but you can use whatever variable name you want. It's common to simply use "e" for brevity.

• event.type – Tells you the type of event that was triggered (e.g. "click")
• event.timeStamp – milliseconds elapsed since the page began listening for the event.
• event.bubbles – Boolean that tells you if the event bubbles or not.
• event.cancelable – Boolean indicating if part of the event can be cancelled via preventDefault().
• event.isTrusted – Boolean indicating if the browser dispatched the event, as a security measure.
• event.eventPhase – Returns 0, 1, 2, or 3, depending on what phase the event is currently in.

Now on to this week's tools!
 

Media Tools (Images, Video, etc.)

Powerful Monitoring, Low Overhead!
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow downs. Scout quickly shows you the exact endpoint or endpoints causing issues.    SPONSORED 

Ava Maker
Online avatar builder to build your own character by customizing just about every part of the facial features, then export as PNG or SVG.

Funnel Easy
Online tool to customize and build a funnel-based chart in PNG format. You can change the style as well as the associated text on the chart/graph.

Online Image Tool
Compress, convert, or resize large batches of images in just one click for free with no usage limits.

MingCute
A set of 1,300+ open-source icons, searchable, available in SVG or PNG format, and the online app lets you add icons to collections before downloading.

Line Graph Maker
Free online tool to create a line chart, customized according to the data you enter in the fields, downloadable as PNG or JPEG.

Imagemin Guard
An JavaScript package that provides convenient and safe automated image compression for JPG, PNG, GIF, WebP, and AVIF formats. It's an extension of the now unmaintained imagemin project.

neovis.js
A graph visualization library powered by vis.js with data from Neo4j.

Vector.js
A JavaScript library for creating interactive graphics with HTML, SVG, and CSS and has no dependencies.

Flowchart React
A lightweight React library for creating flowcharts and adding editable flowcharts to React apps.

Majesticons
A set of 700+ MIT-licenced Figma icons, searchable, customizable, and available in line style or solid.

castable-video
A script to easily extend the HTMLVideoElement API to allow you to cast your video element to a large screen with ease.
 

React Tools

The Sample
Each morning, The Sample sends you one article from a random blog or newsletter that matches up with your interests. When you get one you like, you can subscribe with one click.    SPONSORED 

React Aria
A library of React Hooks that provides accessible UI primitives for your design system.

React useWebSocket
React Hook designed to provide robust WebSocket integrations to your React Components, with experimental support for Socket.IO.

react-marksome
Lightweight, flexible and readable labels in React using a subset of Markdown.

heart-switch
A heart-shaped toggle switch component for React, inspired by a similarly-designed Dribbble shot.

rci
Better segmented code inputs for the web, to improve on the accessibility and cross-platform UX of multi-inputs in web forms.

React Firebase Hooks
A set of reusable React Hooks for Firebase.

React Upload Gallery
A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize it as you like.

use-unmount-signal
A React Hook to cancel promises when a component is unmounted.

React Game Engine
A lightweight game engine with components that make it easier to construct dynamic and interactive scenes on the web using React.

useHooks
A collection of React Hook recipes with easy to understand code examples to help you learn how hooks work.
 

JSON Tools, Databases, etc.

The Sample
Each morning, The Sample sends you one article from a random blog or newsletter that matches up with your interests. When you get one you like, you can subscribe with one click.    SPONSORED 

Water
A micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in Melon (a .NET JavaScript runtime).

JSON Parser
An online multi-featured JSON viewer and editor that includes options to repair, sort, filter, minify, format, and more.

SQLite3 Fiddle
An experimental online playground for SQLite, but not officially supported, although it is on the SQLite website.

Dragonfly
A modern Redis replacement, a scalable in-memory datastore made simple, fully compatible with Redis and Memcached.

Dolt
Git for data. An SQL database that you can fork, clone, branch, merge, push, and pull just like a Git repository.

Azimutt
An online tool to explore your SQL database schema by searching for relevant tables, following relationships, hiding columns, and finding paths between tables.

ERDPlus
A database modeling tool for creating entity relationship diagrams, relational schemas, star schemas, and SQL DDL statements.

SimpleDB
A simple online tool to create a database by generating a token, then running various common database tasks with your token.

MySQL Workbench
A unified visual tool for database architects, developers, and DBAs that provides data modeling, SQL development, and comprehensive admin tools for server configuration, user administration, backup, and more.

graphql-schema-linter
A command line tool to validate GraphQL schema definitions against a set of rules.

JSON Mask
A tiny language and an engine for selecting specific parts of a JavaScript object and hiding/masking the rest.
 

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Polite Pop – Polite email signup popups designed not to be overly intrusive.

Better Stack – Logging and monitoring tools to ship better software faster.

Tailwind Weekly – A Newsletter that levels up your Tailwind CSS skills.  AD 

QueryClips – Share database queries easily to CSV, JSON, Excel, and GSheets.

Squeaky – A privacy-friendly analytics suite to capture up to 60% more data.

Tonic.ai – Test data that looks, feels, and behaves like production.
 

A Tweet for Thought

Kudos to Ahmad Saleem for doing this. It would be great if more of us in the dev community took a few minutes to report, comment on, and help to close long-existing bugs in software projects that are important to our industry.

 

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 want to be more aware of the nutrition level of different types of food products you buy and consume, you'll want to bookmark Open Food Facts. It's a non-profit database of information that's searchable and editable by anyone, similar to Wikipedia.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris