Issue #419 (El.closest(), Media, Build Tools, JS Utils)07/29/21
Here's a DOM method that I've yet to cover in a tip before: Element.closest(). You may have heard of this one because it's been part of the HTML5 standard for a while but likely didn't have developer interest due to lack of support in pre-Chromium versions of Edge. It's now supported across the board in modern browsers.
This method lets you traverse the DOM starting from the targeted element, searching for the first element that matches a provided list of selectors. Here are a few examples:
|
let myEl = document.querySelector('.inside');
myEl.closest('.previous, .next').innerText;
myEl.closest('.inside').className;
myEl.closest('.next').innerHTML;
|
Notice after I grab my desired element, I use the method by passing in a string of one or more valid selectors, separated by commas.
Try it in this CodePen demo
The demo targets an element that's nested deeply inside a few other elements, so I can traverse up until I find what I want. I'm using console logs to show the data I'm grabbing, so make sure to view the console in CodePen or in your browser.
The closest() method returns the first element that matches the specified selector. If more than one selector is used (like my first example above), the element returned is the first one that's matched.
In my two-selector example, if there's no element with a class name of "previous", it will search for one with a class of "next". If neither is found, it returns null.
The method is quite flexible because you can pass in any valid selector string including new pseudo-classes like :not, :disabled, :empty, and so forth. So it's kind of like parentNode or parentElement on steroids. An interesting and useful DOM method to keep in mind for advanced DOM manipulation in your projects.
Now on to this week's tools!
|
| |
Media Tools (SVG, Audio, Video, etc.)
Store. Optimize. Deliver Images with ImageKit.io
What's the best image format for a website? What about the size? How do I optimize WebP/AVIF? What about cross-device optimization? If you are constantly riddled by these questions when you think of images, you should check out ImageKit.io. sponsored
Ant Design Charts
A charting library powered by React and G2Plot that lets you create elegant and and easy to use diagrams, graphs, area charts, and more.
Glitter Text
A really neat glitter text generator. Type your text then use the "save" link to grab the SVG that produces the glitter text.
Same Energy
An image search engine that lets you paste your own image or do a keyword search to search for similar images to the one selected.
Elementary Audio
A JavaScript runtime for writing native audio applications, as well as a library and framework for composing audio signal processes.
3Dengine
A JavaScript WebGL 3D engine built from scratch. The live version works quite nicely in the browser.
iMac Vector Illustrations
A set of 7 free, do what you want, iMac 24” vector illustrations for creating iMac-based mockups.
AVPress
An in-browser video compressor that includes a number of different settings to optimize and reduce the size of a video or GIF.
3D Bay
Royalty-free, high-quality 3D stock images. Search by keyword or select a category to choose from thousands of images.
Sequencer64
An experimental music creation tool that runs in the browser and works offline and lets you sequence a 64-step pattern for a 9-sound sampler.
Akar Icons
A set of 300+ "rounded" icons that you can download for use as a React snippet or SVG.
JPEG XL
A community website for JPEG XL, the next-generation, general-purpose image compression codec by the JPEG committee.
React SVG Radar Chart
A lightweight project to create "radar" charts.
|
Build Tools, Bundlers, etc.
Night Eye – The Best Dark Mode Extension
Night Eye is a browser extension that protects your eyes by enabling dark mode on any website. Unlike other extensions, Night Eye uses a smart conversion algorithm (no color inversion), has no ads, and has great support. Get a 25% discount on the lifetime offering by using discount code wtw at checkout. sponsored
React Native Liftoff
A CLI for quickly starting up a React Native project.
xo
An opinionated but configurable ESLint wrapper that enforces strict and readable code.
commitlint
A linter to help your team adhere to conventions for commit messages, based on npm-installed configurations.
new-tailwind-app
A zero-configuration cross-platform Node-based CLI that generates boilerplate code for Tailwind web apps based on React, Next.js, Gatsby, Vue, and Laravel.
Velociraptor
A multi-featured script runner that brings package.json-style scripts to Deno.
Astro
In early Beta. A build tool from the makers of Snowpack that promises to ship less JavaScript and works with your framework of choice.
Openbase
An npm package search engine that lets you compare millions of open-source packages with reviews, insights, and categories.
Packup
A web app bundler for Deno, inspired by Parcel.
Ness
Deploy websites to your AWS account with no sign-ups, paywalls, or scaling limitations.
Tasuku
An unopinionated, Type-safe, minimal task runner for Node.js.
fastify-vite
A Fastify plugin to serve Vite SSR apps with a universal API, data fetching, and hydration utilities.
esbuild-loader
Lets you harness the speed of esbuild in your webpack build by offering faster alternatives for transpilation (e.g. babel-loader/ts-loader) and minification (e.g. Terser).
|
JavaScript Utilities
Night Eye – The Best Dark Mode Extension
Night Eye is a browser extension that protects your eyes by enabling dark mode on any website. Unlike other extensions, Night Eye uses a smart conversion algorithm (no color inversion), has no ads, and has great support. Get a 25% discount on the lifetime offering by using discount code wtw at checkout. sponsored
use-color
A powerful color hook to parse and stringify colors with strict type checking at compile time.
Stoxy
A small, dependency-free, zero-config reactive state management system equipped with web components.
spacers
A JS library that supports multiple spacers for controlling padding, margins, and more.
TextKit
A framework for creating textual graphics. It provides layers, styling, rich color, text justification, layouts, tables, viewports, transparency, etc.
quetie
A small queue/dequeue implementation.
Milkdown
A plugin-driven WYSIWYG markdown Editor, inspired by Typora, built on top of ProseMirror and remark.
botd
A library for JavaScript bot detection (detecting automation tools, browser spoofing, and virtual machines).
Handsfree.js
Library to quickly integrate face, hand, and pose tracking to your front-end projects.
typesafe-i18n
An opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
On the Release Radar:
Want the latest in productivity tools and articles? Try my other newsletter, Tech Productivity. Includes tools, articles, and tips on productivity and remote work.
|
A Tweet for Thought
Here's a Steve Jobs email to Bill Gates from 1998 (click to view the full email in the Tweet).
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...
This is different: DarkPattern.games is website to help you find healthy, non-addictive mobile games that don't use gaming dark patterns.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
