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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #420 • August 5, 2021

Advertisement
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.
Get Your Free API Key!
Stock Market Data API

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:

<ul class="myList">
  <li class="one">List item one</li>
  <li class="two">List item two</li>
  <li class="three">List item three</li>
  <li class="four">List item four</li>
  <li class="five">List item five</li>
</ul>

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():

btn.addEventListener('click', function () {
 
output.innerHTML = '';
  for (i of myList) {
    output.innerHTML += `${i.matches('.' + optList.value)} <br>`;
  }
}, false);

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.

Toolb

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

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

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!

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

Older messages

Web Tools #419 - Icons/SVG, Build Tools, JS Utilities

Thursday, July 29, 2021

Web Tools Weekly WEB VERSION Issue #419 • July 29, 2021 Advertisement Store. Optimize. Deliver Images with ImageKit.io What's the best image format for a website? What about the size? How do I

Web Tools #415 - JS Libraries, JSON/DB, React Tools

Friday, July 23, 2021

Web Tools Weekly WEB VERSION Issue #415 • July 1, 2021 Advertisement TLDR Newsletter - Byte Sized News for Busy Techies TLDR is a free daily newsletter with links and TLDRs of the most interesting

Web Tools #418 - VS Code, Front-end Frameworks, Uncats

Thursday, July 22, 2021

Web Tools Weekly WEB VERSION Issue #418 • July 22, 2021 Advertisement IP Geolocation API Identify a visitor's location based on their IP address with ipapi.com. This reverse IP lookup supports IPv4

Web Tools #417 - Testing Tools, React, GitHub/CLI Tools

Friday, July 16, 2021

Web Tools Weekly WEB VERSION Issue #417 • July 15, 2021 Advertisement Ship Embedded SaaS Integrations in Minutes with a Native iPaaS Building native integrations between your app and your customers

Web Tools #416 - ImageKit.io, CSS Tools, React, Jamstack

Saturday, July 10, 2021

Web Tools Weekly WEB VERSION Issue #416 • July 8, 2021 The following intro is a paid product review for ImageKit.io, a global image CDN with built-in optimization, real-time transformations, and more.

You Might Also Like

Infographic | How Small Investments Make a Big Impact Over Time 📈

Thursday, March 28, 2024

Compound interest is a powerful force in building wealth. Here's how it impacts even the most modest portfolio over the long term. View Online | Subscribe Presented by: EnergyX's groundbreaking

Fully Autonomous Development, AI .NET Components, Data Visualization ML Tutorial, More

Thursday, March 28, 2024

Home | News | How To | Webcasts | Whitepapers | Advertise .NET Insight March 28, 2024 THIS ISSUE SPONSORED BY: ■ Visual Studio Live! Chicago: .NET Developer Training Conference ■ dtSearch® - INSTANTLY

Daily Coding Problem: Problem #1395 [Hard]

Thursday, March 28, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Implement an LRU (Least Recently Used) cache. It should be able to be

72 x $99 tickets left for virtual product conference (May 2)

Thursday, March 28, 2024

​ACT FAST!​ ONLY 72 TICKETS AVAILABLE AT THE DISCOUNTED RATE OF $99! MAY 2, 2024 | ONLINE ACROSS THE WORLD Join product people from around the world on Thursday, May 2, for INDUSTRY, the #1 Virtual

⚙️ "I'm a GPT builder" 😎

Thursday, March 28, 2024

Plus: Elon's Grok will be available to all ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🔒 The Vault Newsletter: March issue 🔑

Thursday, March 28, 2024

Get the latest business security news, updates, and advice from 1Password. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

📑 Discover The Power of AI With UPDF — 63% Off For a Limited Time

Thursday, March 28, 2024

Digitally Read/Sign/Edit/Summarize PDFs Seamlessly. Available Now at a Huge Discount! How-To Geek Logo March 28, 2024 Tired of Dealing With PDFs? Try AI-Powered UPDF With the Biggest Discount of the

Issue 310 - New Autopark looks awesome!

Thursday, March 28, 2024

View this email in your browser If you are just now finding out about Tesletter, you can subscribe here! If you already know Tesletter and want to support us, check out our Patreon page Issue 310 - New

Programmer Weekly - Issue 199

Thursday, March 28, 2024

View this email in your browser Programmer Weekly Welcome to issue 199 of Programmer Weekly. Let's get straight to the links this week. Quote of the Week "Optimization hinders evolution.

wpmail.me issue#660

Thursday, March 28, 2024

wpMail.me wpmail.me issue#660 - The weekly WordPress newsletter. No spam, no nonsense. - March 27, 2024 Is this email not displaying correctly? View it in your browser. News & Articles What's