| Issue #419 • July 29, 2021 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. | |
0 коммент.: