Web Tools #420 - CSS Tools, Front-end Frameworks, Uncats

Advertisement

I previously discussed the DOM method Element.closest(), which allows you to pass in a selector string to find the matching element that's 'closest' to the targeted one. There's another method that allows you to pass in a selector string: Element.matches().

This one is quite different from the other method. Element.matches() will check to see if the passed in selector string matches the element it's being tested on.

This might come in handy in a whole slew of contexts that allow for dynamically built selector strings along with dynamically generated HTML.

For an example, suppose I have an HTML list where the list items each have a different class applied to them. I can use matches() while passing in a dynamically chosen class name to see if the class matches the element.

Here's my example HTML:

I'm going to use a select box with five options that match the class names in each of the list items, to allow the user to "check" which one matches the elements.

Here's the JavaScript that will utilize Element.matches():

Try it on CodePen

Clearly this is a contrived example but I'm sure it gives you an idea how this works. The CodePen spits out the return value of Element.matches() for each of the list items, which is either true or false, depending on if the selector matches the element. Notice I'm building the class selector using the selected value in the option dropdown.

This should be used with care because if the selector is invalid (e.g. maybe it's constructed on the fly and there's a syntax mistake), then it will throw a JavaScript error rather than simply returning false. Therefore, as with any method that takes a selector string, it has to be a valid CSS selector.


Now on to this week's tools!
 

CSS and HTML Tools

Stock Market Data API
The marketstack API offers free stock data in JSON for various ticker symbols. Access real-time and historical data for over 170,000+ stock tickers.   sponsored 

Inter Font Family
A typeface carefully crafted and designed for computer screens that features a tall x-height to aid in readability of mixed-case and lower-case text.

Unicode Arrows
A one-stop location for copying and pasting unicode arrows along with their code equivalents. You can even purchase unicode arrow jewelry. Really.

Toolb
50+ tools for generating and manipulating code for all sorts of front-end stuff: Gradients, shadows, HTML tables, minifiers, prettiers, and lots more.

r12a apps
This is a list of tools that include various unicode tools, internationalization tools, and more.

Theme Builder
Design accessible color systems, responsive type scales, and more. Export as JavaScript, CSS, JSON, or CSS/Sass Variables.

GradientArt
A really great online gradient editor tool that includes layering, free cloud storage, and just about everything you'll need to customize a gradient before grabbing the CSS.

Indiepen
A lightweight, privacy-friendly solution to embed HTML, CSS and JS code examples in blog posts, tutorials, and documentation pages.

Content Placeholder for Tailwind CSS
A plugin to create utility classes to add content placeholders to your Tailwind projects.

Typographic Scale Calculator
Online tool to help you choose the right font size from a harmonious type scale inspired by the way music works.

margin-margin-revolution.css
A silly but challenging game to help you never forget the order of CSS margin values. Apparently this is a parody of the Konami game series Dance Dance Revolution.

HexColorPedia
Choose any color and this online tool will show you color information, conversion to other formats, related tints/shades, blending, schemes, and more.

Front-end Frameworks

Developer Stories From Hell
More than 20 real, honest, lovely and very uniquely painful stories from a Developer collected in a book of "pain and humour".   sponsored 

FrontWork
A marketplace to buy and sell front-end components for HTML, React, and Vue.

Salvia-Kit
A set of beautiful dashboard templates with each dashboard available for React, Next.js, Vue, and Nuxt.js projects.

Vechai UI
A set of high-quality accessible React UI components using Tailwind CSS with built-in dark mode.

Notus React
A beautiful UI Kit and admin dashboard template built with Tailwind CSS and React.

Modular
A modular front-end development framework where libraries, views, and apps coexist together and tooling is a first-class citizen.
 
Berry Free React Material Admin Template
A free customizable React admin template built with Material-UI with a focus on user experience.

Emergency Site Kit
This is a little different. A template for emergency information websites, powered by Eleventy and Netlify CMS.

vite-typescript-ssr-react
A modern template stack that provides the minimum viable example for React 17, TypeScript 4.3, Vite SSR, Tailwind, Prettier, ESLint, and more.

Next + Netlify Starter
A minimal Next.js v11 project bootstrapped with create-next-app and set up to be instantly deployed to Netlify.

nextjs-dashboard-tailwind-framermotion
This Next.js dashboard template includes components built with Framer Motion, the React animation library.
 

The Uncategorizables

Developer Stories From Hell
More than 20 real, honest, lovely and very uniquely painful stories from a Developer collected in a book of "pain and humour".   sponsored 

Openby.design
Custom crafted free UI design resources (currently dashboards and logos in Figma and SVG format), for personal and commercial projects.

WiFi Card
Print a simple card with your WiFi login details that you can provide for guests or others using your WiFi. The card will also include a QR code to scan instead of manually connecting to the network.

LiveKit
An open source platform for real-time communication. Build 1000-person, live audio or video experiences into your mobile app or website, in minutes.
 
Unleash
Feature management service that lets you turn new features on/off in production with no need for redeployment. Self-hosted is free.

Aurora
A web analytics alternative that doesn't use cookies but only collects anonymous data.

Localeum
Localization service that integrates into your current CI/CD process, free for a single developer/user.

APIC Agent
A fast user-agent lookup API that detects browser, OS, device type, and other attributes from user-agent.

Begin
A platform for building serverless apps, sites, and APIs and deploying to AWS in seconds. Free for up to 5 apps for a single developer.

Thumbnail.ai
A fast way to generate social images for your blog posts.

SidePage
A simple tool to quickly create professional documentation for your projects. Features HTML export, Markdown, analytics, and more.

Commercial Apps and Classifieds

This is a new section of the newsletter that will contain brief links to commercial (non-free) apps and paid classifieds. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

NinjaSEO - All-in-one SEO software and page grader

Eagle - Mac/Win app to organize image files

Editr - Automatically generated subtitles for videos

JavaScript E-Books Bundle - 190+ JS/DOM tips in 3 e-books  ad 

No-Code Board - Analytics dashboard powered by Google Data Studio
 

A Tweet for Thought

Does this describe you? I hope not!

 

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 like text-based adventure games or used to play them years ago, you'll want to check out WrittenRealms. It has a nice interface so it's not entirely textual and apparently they also welcome contributions to their games.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee