Issue #449 (Image.complete, JS Utils, Uncats, React)02/24/22
I'm not sure how this DOM feature flew under my radar for so long, but I recently came across the HTMLImageElement.complete property, a Boolean that indicates whether or not an image has completely loaded.
This will be a tricky one to test properly, because generally images load relatively quickly, but there are some options to mimic a slow loading image in your browser's developer tools.
First of all, here's some code to demonstrate how this property might be used:
|
let myImage = document.querySelector('#myImage');
// will display true or false
console.log(myImage.complete);
|
Nothing special here, just a reference to an image element, then I'm logging the value of the complete property on the image. This property is one of many methods and properties available in the DOM as part of the HTMLImageElement API.
You can try it out using this CodePen demo, which intentionally includes a relatively large JPG image for the off chance that the console will display false on slower connections.
If you view the CodePen in "Debug mode", which you need to be logged in for, you can use your browser's developer tools to mimic a slow connection using network throttling. The image below shows this in the Network tab in Firefox. Chromium-based browsers have a similar feature.
 |
After you set your throttling option, reload the page, then watch the console. If you choose a slow enough connection, you should see a message indicating that the image hasn't yet loaded, since the code doesn't actually wait for the page to load before running the script.
If you're going to use the image.complete property, keep in mind that an image is considered "fully loaded" if any of the following is true:
- Neither the src nor the srcset attribute is specified
- The src attribute is an empty string
- The image has been fetched and is ready for rendering
- The image failed to load due to an error in the URL
- The user has disabled images in their browser
Again, all of the above would constitute a "complete" image, even though the image would technically not be loaded. From this you can see that this property should only be used on images that you expect to be somewhere in the process of loading.
Now on to this week's tools!
|
JavaScript Utilities
The All-in-One Modern Data Platform You Need
Get everything you need to combine, organize, and transform your data for analysis, including a Snowflake data warehouse and ETL tools. sponsored
Stylo
A JavaScript rich text editor with no dependencies that adds interactive editing to page elements via a toolbar that appears when you select text in an editable component.
LetMeScroll
A utility that lets you programmatically respond to scroll behaviour with the additional feature of scroll bar styling.
unrouted
A minimal, composable router built for speed, portability, and developer experience, and also includes testing utility package.
easy-transform-stream
Node.js utility to create a transform stream using await instead of callbacks.
Add-to-Calendar Button
A JavaScript snippet that lets you create beautiful buttons that lets users add events to their calendars for Apple Mail, GCal, Yahoo, MS 365, etc).
Yup
A schema builder for runtime value parsing and validation. Define a schema then transform a value to match, assert the shape of an existing value, or both.
Metho
A small library to allow you to safely add 'dynamic properties' to objects, with the help of Symbols, useful for 'monkey patching' native JavaScript types to give them new capabilities.
timequeue.js
A queue with custom concurrency and time limits. Inspired by the async utilities project, but also with variable number of arguments in the worker, events, and with optional time limits.
Two.js
A two-dimensional drawing API for modern browsers that's renderer agnostic enabling the same API to draw in multiple contexts: SVG, Canvas, and WebGL.
flatpickr
A lightweight and powerful JavaScript date/time picker with no dependencies, extensible, and includes multiple themes.
pattern-case
A fast and efficient pattern matching utility for Typescript.
International Telephone Input
An older project, a utility to add a formatted international phone number field to a form.
|
The Uncategorizables
Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today! sponsored
Files
Single-file PHP app that can be dropped into any folder, instantly creating a gallery of files and folders.
Chirpy
An open source and privacy friendly Disqus alternative. The hosted version is currently free while in Beta.
chezmoi
Manage your dotfiles across multiple diverse machines, securely.
WebVM
A server-less virtual Linux environment running fully client-side in HTML5 and WebAssembly.
Mizu
A simple-yet-powerful API traffic viewer for Kubernetes enabling you to view all API communication between microservices to help you debug and troubleshoot regressions.
Brutalita Sans
An experimental font and font editor. You can use the default version of the font or modify each character before downloading.
Zim
A graphical text editor used to maintain a collection of wiki pages. Each page can contain links to other pages, simple formatting and images. Pages are stored in a folder structure and can have attachments.
ring-client-api
An unofficial TypeScript API for Ring Doorbells, Cameras, the Ring Alarm System, Ring Smart Lighting, and third party devices that connect to the Ring Alarm System.
CodeCaptcha.io
A variation on the Captcha concept that forces the user to complete a coding challenge before being able to visit a URL.
Fable
A web-based and feature-rich motion design platform that exports in various video, social media, or GIF formats.
Flame Engine
A a modular, 2D game engine built on top of Flutter that takes advantage of the powerful infrastructure provided by Flutter but simplifies the code you need to build your projects.
|
React Tools
Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today! sponsored
React Zorm
Type-safe form element for React using Zod, the popular TypeScript-first schema validation library.
useWorkerizedReducer
Like useReducer, but the reducer runs in a worker that makes it possible to place long-running computations in the reducer without affecting the responsiveness of the app.
React Motion Router
Declarative routing library for React, based on React Router and React Navigation, with page transitions and animations.
reaselct
Select component for React with options for multi-select or single select.
drei
A growing collection of useful helpers and fully functional, ready-made abstractions for react-three-fiber.
react-grid-table
A modular React table component based on CSS grid layout, optimized for customization.
react-google-calendar-api
A React-based API to manage your Google Calendar.
react-grid-heatmap
A React component to create a heatmap visualization in a grid layout, with no third-party libraries.
React String Replace
A simple way to safely do string replacement with React components with zero dependencies.
react-three-state-checkbox
A React component to create a checkbox that has checked, unchecked, and indeterminate states, and is TypeScript compatible.
React-Transition-State
A tiny library that helps you easily perform animations/transitions of your React component in a fully controlled manner, using a hook API.
react-lowlight
Syntax highlighter for React that utilizes virtual DOM for efficient updates.
|
Commercial Tools and Classifieds
These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).
HappyKit - Feature Flags for your Next.js applications.
GravaMetrics - Build brilliant dashboards to connect your data in one system.
vscode.email - Coming soon. A newsletter on tools and tips for VS Code. ad
EmailEngine - Receive and send emails using an easy-to-use REST API.
Advanced React - React course with 70+ HD videos across 11+ modules. ad
Stytch - App authentication platform for developers.
Stepsize - Issue tracker that integrates with code editors and PM tools.
|
A Tweet for Thought
I don't condone the setting ablaze of members of the media, but we all know this would be entertaining.
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...
According to my audience stats, I have quite a few subscribers in Ukraine and about the same number in Russia. I just wanted to say I feel for you all right now and I hope you're all safe. I've never been to Russia, but I visited Ukraine in 2018 and it was one of the best experiences of my life. I've never felt safer in any country and the people were kind and polite everywhere we went. Despite the fact that both my wife and I got really sick with the worst flu we've ever had at the time, we still view our time in Ukraine as one of our most memorable and enjoyable trips.
If you're in Russia or Ukraine, and you're able to safely find the time, feel free to reply to this message and let me know how things are going for you and how the situation has affected you.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
