Web Tools #472 - Media, SVG, React, JSON, Databases

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #472 • August 4, 2022

Advertisement
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.

Start a Free Trial!
Scout APM

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:

el.addEventListener('click', function (event) {
  // do something with "event"
}, false);

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.
You can try these out in this CodePen demo. Keep the console open to see the result of the button click. I haven't expanded too much on these properties here, but you can read more on them in the DOM spec. There are a few others listed there, along with some methods that you might also want to check out.

In my demo I'm printing out the literal meaning of the event phase, which you can read about here, rather than just the integer value that's meaningless if you don't know what each number represents.
 

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.

MingCute

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.

rci

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.
 
💡 This week in VSCode.Email:
  • Customizing VS Code's Quick Suggestions
  • A Vim emulator for VS Code
  • 4 Useful VS Code Editing Tricks
Check the archives for the latest issue, and subscribe for more!

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.

Azimutt

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.

Malthus – Generate high-quality prospects and leads for your business.  AD 

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.

A Tweet for Thought
 

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

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #471 - CSS Articles, JS Utils, Git/CLI, Svelte

Thursday, July 28, 2022

Web Tools Weekly WEB VERSION Issue #471 • July 28, 2022 Advertisement Internal Tools Are Built On Retool Build interfaces fast with 100+ pre-built components. Then customize with JavaScript, SQL, HTML,

Web Tools #470 - JS Classes, Tailwind, CSS, SVG, Bundlers

Thursday, July 21, 2022

Web Tools Weekly WEB VERSION Issue #470 • July 21, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #469 - React, Testing, Figma to Code, Uncats

Thursday, July 14, 2022

Web Tools Weekly WEB VERSION Issue #469 • July 14, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #468 - Frameworks, JSON, Databases, JS Utilities

Thursday, July 7, 2022

Web Tools Weekly WEB VERSION Issue #468 • July 7, 2022 Advertisement Build Internal Tools 10x Faster with Retool Retool is the fast way for developers to build and share internal tools. Teams at

Web Tools #467 - CSS Tools, Git/CLI, React

Thursday, June 30, 2022

Web Tools Weekly WEB VERSION Issue #467 • June 30, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

GCP Newsletter #306

Monday, August 8, 2022

Welcome to issue #306 August 8th, 2022 News Data Analytics Data Studio Official Blog Introducing Data Studio as our newest Google Cloud service - Data Studio, our self-service business intelligence and

What Is a Reverse Proxy, and How Does It Work?

Monday, August 8, 2022

Read in Browser Logo for DevOps by How-To Geek August 8, 2022 What Is a Reverse Proxy, and How Does It Work? What Is a Reverse Proxy, and How Does It Work? Reverse proxies are a useful tool in any

University acceptance rates by college and program

Monday, August 8, 2022

SQL, Database Querying, Aggregation Functions, InterviewQs University acceptance rates by college and program SQL Database Querying Aggregation Functions Forward this email to a friend or colleague and

Amazon buys the company behind Roomba robot vacuums

Monday, August 8, 2022

The Morning After Now available on your smart speaker and wherever you get your podcasts Apple Podcasts | Spotify | Google Play | iHeart Radio It's Monday, August 08, 2022. Amazon made a $1.7

Smartwatches Are Great, but a Luxury Smartwatch Is Pretty Dumb

Monday, August 8, 2022

Read in Browser Logo for Review Geek August 8, 2022 Believe it or not, smartwatches are pretty great. When they first took off years ago, that wasn't a guaranteed outcome, given that they were

Post from Syncfusion Blogs on 08/08/2022

Monday, August 8, 2022

New blogs from Syncfusion Top 7 JavaScript Object Destructuring Techniques More from the Syncfusion Ecosystem Bold Reports: Paginated Reports and Analytics Bold Desk: Customizable Help Desk Software

🏷 Data Labeling for ML: Survey

Monday, August 8, 2022

About 45% of the time in data science projects is consumed by processing and labeling data. It's fair to say that data labeling is one of the most expensive tasks of any machine learning project.

Architecture Weekly #87 - 8th August 2022

Monday, August 8, 2022

Architecture Weekly - links and resources to boost your knowledge and developer skills! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Digital transformation in 2022 and beyond: These are the key trends

Monday, August 8, 2022

Foldable phones might be the next big thing: Here's what you need to know ZDNet Facebook Twitter LinkedIn ZDNet Insights August 8, 2022 Digital transformation in 2022 and beyond: These are the key

Amazon buys Roomba 🤖, Meta's AI chatbot 💬, advice for junior devs in current market 👨‍💻

Monday, August 8, 2022

Amazon has agreed to acquire iRobot for approximately $1.7 billion. Sign Up | View Online | Sponsor Daily Update 2022-08-08 Is SOC 2 a thorn in your side? Make SOC 2 painless (Sponsor) To land