Web Tools #559 - HTML Template, CSS Tools, Testing, React

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #559 • April 4, 2024

Advertisement

Webinar: Android Malware Application Protection
In 2023, mobile malware attacks spiked by more than 50% compared to 2022. As the malware problem continues to grow in scale and sophistication, developers play an increasingly crucial role in ensuring the resiliency of their Android apps.

Webinar: Android Malware Application Protection

Join our webinar “Android Malware: How it Works and How to Protect Your Application Against It” on April 9th to learn about Android malware's most common behavior and attack techniques; recommended mitigation techniques; and a case study highlighting the importance of code hardening and runtime protection in preventing malware attacks.

Register Now →

If you haven't researched it yet, the new-ish HTML <template> element is a way to enable HTML templating. That is, repeating common bits of HTML that are generated via JavaScript.

The contents, or children, that appear inside the opening and closing <template></template> tags don't appear on an HTML page, so JavaScript is required to make this feature useful.

Similar to other HTML element APIs, the <template> element is represented by the HTMLTemplateElement object, or API. This API has a single property: content. When you access template.content (assuming "template" is a reference to an HTML template object), this is equal to a DocumentFragment of all child nodes inside the referenced <template>.

When you access the template, you can then clone it using cloneNode, and insert it wherever it's needed. As an example, let's say I have the following HTML:

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<template>
  <tr>
    <td class="cell">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</template>

Notice the table markup along with the single table row with two cells inside the <template> element. Normally I would leave the table cells blank but for display purposes, I'm adding a non-breaking space into each cell, so the cells will technically be 'visible'. In a real application, I would have some further code that generates the data.

With that in place, I can then use the following JavaScript to generate a single table row that gets added to the <tbody> element:

let tbody = document.querySelector('tbody'),
    template = document.querySelector('template');

tbody.append(template.content.cloneNode(true));

This code is fairly rudimentary and thus isn't very practical. But that should give you an idea of how the feature works. You can try out the code in this interactive demo. There's a button that dynamically inserts the 'row' template as many times as you want to insert it, along with a row reset button.

And as a final point, you don't technically have to include your <template> element inside your HTML document. You can create the <template> element using JavaScript then insert it and its children as needed. Once it's in the DOM, you can access it the same way.

Now on to this week's tools!
 

CSS and HTML Tools

magick.css — A minimalistic and mostly classless CSS framework inspired by LaTeX, old school TTRPG rulebooks, and other classless frameworks.

Dropflow — A CSS layout engine created to explore the reaches of the foundational CSS standards (that is: inlines, blocks, floats, positioning, but not flexbox or grid).

ECSS — A set of rules and principles for authoring modern CSS that includes a Stylelint config and scaffolding tool to help incorporate the desired rules.

Webinar: Android Malware Application Protection — Join Guardsquare on April 9th to learn about Android malware's most common behavior and attack techniques, recommended mitigation techniques, and the importance of code hardening and runtime protection in preventing malware attacks.     SPONSORED 

play-button — A simple web component to play audio or video with a button, so the user can control an audio or video track with a single button.


MistCSS — A code generation tool that enables you to write atomic React components using only CSS (i.e. "JS-from-CSS"), with support for Next.js, Remix, and Tailwind.

TeamColors — This is different! It's a gallery of official and unofficial colors associated with teams from major sports leagues, with 6 leagues currently included, filterable by team name and you can choose different color formats.
 
Team Colors

Variable Fonts — A simple resource for finding and testing variable fonts, filterable by category tags, font designers, character sets, licenses, and more.

pagefind-search — A web component that adds functionality for Pagefind, a popular fully static search library, built in Rust, and commonly used in static websites.

cccolor — A color picker and color palette generator that shows different types of color palettes for a chosen color, and is easy to convert to different color formats.
 

Testing and Debugging Tools

Webhook.Cool — A service that allows you to receive and inspect webhook requests. Use your unique webhook URL to send any webhook to it.

Vlite — A lite, zero-config ESM-friendly demo server, inspired by Vite, with Support for Vue, React, TypeScript, JSX, TSX, and more.

Under New Management — A Chrome or Firefox extension that checks your installed extensions intermittently to see if the developer information listed on the Chrome Web Store or Firefox Addons store has changed.

Anytime Mailbox — Business starters, are you in need of a business address separate from your home? Anytime Mailbox provides a seamless solution, securing a private, professional address with added benefits like mail forwarding and scanning for ultimate convenience.    SPONSORED 

PDFcheck — An online tool that lets you upload one or more PDFs to check them for accessibility, based on an older PDF accessibility standard that was published by Adobe.

Web Font Analyzer — An online tool that uses the WebPageTest API to help you identify font subsetting opportunities, to help with performance bottlenecks associated with loading fonts.

OpenAPI DevTools — Chrome extension that enables you to instantly generate API specifications in real time for any app or website.

OpenAPI DevTools

CodeRev — A lightweight tool to help you organize and conduct technical interviews using code reviews rather than LeetCode (the popular platform for preparing for tech interviews).

screenlog.js — A very old tool that brings the browser's developer console right on your screen so that you can do logging without keeping the console open.
 
Advertisement

A Gold IRA Can Diversify Your Portfolio and Safeguard Your Retirement — Safeguarding your retirement with a Gold IRA can help you shield your wealth from market shifts, economic uncertainty, and inflation. And with gold’s value projected to increase in 2024, now is a good time to invest

Money

Planning for retirement involves more than saving, so fortify your portfolio with gold today and plan for a better tomorrow. See our list of Best Gold IRA Companies to start planning a better retirement.

See the List →


 

React Tools

restore-scroll — A React component that enables you to restore the scroll position of any scrollable elements on page navigation.

Shader Gradient — Create and customize animated 3D gradients for your React projects. Includes an online gradient editor and the generated gradient can be downloaded for React, Framer, or Figma.

typed-route-handler — Type-safe route handlers for Next.js, like the missing API endpoint layer for Next.js.

Functional UI Kit — A Figma UI kit for React that includes precise Figma and React components packed with best practices, unified prop names, consistent design and code.

Vocs — A minimal static documentation generator designed to supercharge your documentation workflow, built with modern web technologies.

Anytime Mailbox — Business starters, are you in need of a business address separate from your home? Anytime Mailbox provides a seamless solution, securing a private, professional address with added benefits like mail forwarding and scanning for ultimate convenience.    SPONSORED 

MightyMeld — An all-in-one drag-and-drop tool for React projects to visualize your components, JSX, and styles, integrating seamlessly with your regular dev setup. The Pro plan is coming soon but the free plan seems pretty good.

MightyMeld

nlux — An open-source JavaScript and React library that makes it super simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website.

Mantine React Table — A full-featured Mantine implementation of the TanStack React Table component, forked from Material React Table.

next-route-handler-pipe — Pipe together functions to create reusable function pipelines for your Next.js route handlers.
 

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Monodraw – An ASCII art editor for Mac to easily create text-based art (like diagrams, layouts, flow charts).
Morning Brew – A daily newsletter that delivers world news with a business spin straight to your inbox, free.   AD 
ANMT – A ready-to-use animations component pack for React (fade, tilt, scale, move, etc).
Mantis – A blazing-fast dashboard admin template built using the MUI React library.
TLDR – A daily byte-sized version of Hacker News that takes just a few minutes to read.     AD 
Maily Wizard – An HTML email generator with templates, an AI tool, tracked history, and more.
Loado – An easy-to-use website monitoring tool to improve user conversions and optimize SEO.

An X Post for Thought

Many of you have probably noticed the silence over at CSS-Tricks ever since Digital Ocean bought the site from Chris Coyier. This recent post from the CEO of Digital Ocean was nice to see. And there have since been 8 new posts on CSS-Tricks so it looks like everyone's favourite front-end resource is still alive and kicking!
 
An X Post for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...

You don't really want to buy yet another domain that you'll do nothing with, right? But if you happen to be in the market for one, you might want to check out TLD-List. It's a resource that allows you to compare the prices of every 3,400+ domain extensions from 54 different registrars.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly

Older messages

Web Tools #558 - ImageKit Review, JS Libraries, Git/CLI Tools, Jamstack

Thursday, March 28, 2024

WEB VERSION Issue #558 • March 28, 2024 The following is a paid product review for ImageKit's Video API, a developer-friendly toolkit for real-time video optimizations and transformations, to help

Web Tools #558 - ImageKit Review, JS Libraries, Git/CLI Tools, Jamstack

Thursday, March 28, 2024

WEB VERSION Issue #558 • March 28, 2024 The following is a paid product review for ImageKit's Video API, a developer-friendly toolkit for real-time video optimizations and transformations, to help

Web Tools #557 - App Badges, SVG Tools, Databases, Uncats

Thursday, March 21, 2024

WEB VERSION Issue #557 • March 21, 2024 Advertisement The #1 All-In-One Platform Your Team Needs Picture a world where workflows are finely tuned, automated to perfection, and seamlessly integrated

Web Tools #556 - structuredClone(), Frameworks, Testing Tools, JS Utilities

Friday, March 15, 2024

WEB VERSION Issue #556 • March 14, 2024 Advertisement Video API That Developers Love Delivering a high-quality video experience shouldn't be a burden for developers. Introducing ImageKit's

Web Tools #555 - CSS/HTML Tools, Git/CLI, ChatGPT

Thursday, March 7, 2024

WEB VERSION Issue #555 • March 7, 2024 Advertisement From Brewing AI Beers to Brewing Big Ideas At AE Studio, we've done some crazy things. One time, we taught AI to brew beer, and then market it —

You Might Also Like

New Blogs on ThomasMaurer.ch for 04/16/2024

Tuesday, April 16, 2024

View this email in your browser Thomas Maurer Cloud & Datacenter Update This is the update for blog posts on ThomasMaurer.ch. Automate on-premises Windows Server from the cloud using Azure Arc By

April TC39 meeting; Rspack v0.6; future of JS packages; Evan You on Vue, Vite, etc.

Tuesday, April 16, 2024

We have 7 links for you - Stay up-to-date on JavaScript and tools This Week In React - Keeps senior React devs up to date thisweekinreact.com Partner We keep over 37k mid/senior React devs up-to-date

Ingesting & Using CAD Data for Real-Time 3D

Tuesday, April 16, 2024

How engineering firms leverage real-time 3D technology View this email in your browser engineering.com White Paper - Ingesting and Using CAD Data for Real-Time 3D Ingesting and Using CAD Data for Real-

It’s Easy. But Is It Easy Enough? 🤓

Monday, April 15, 2024

Is self-hosting still too hard for normal people? Here's a version for your browser. Hunting for the end of the long tail • April 15, 2024 It's Easy. But Is It Easy Enough? Self-hosted apps are

Re: Free Class: Master the Notes app

Monday, April 15, 2024

Hi there, We are holding a Free Notes App Class tomorrow (Wednesday, April 17) at 4:30 pm ET! We do expect this class to fill up so register soon to save your spot! I wanted to take a minute to answer

Two Tesla execs leave amid layoffs

Monday, April 15, 2024

Tesla execs bid adieu View this email online in your browser By Christine Hall Monday, April 15, 2024 Welcome back to TechCrunch PM, where you can find me each day bringing you the most important

🍏 Why You Should Buy the MacBook Air Over the Pro — Thrift Stores Are a Goldmine for Geeks

Monday, April 15, 2024

Also: How to Play Epic Game Titles on the Steam Deck, and More! How-To Geek Logo April 15, 2024 📩 Get expert reviews, the hottest deals, how-to's, breaking news, and more delivered directly to your

JSK Daily for Apr 15, 2024

Monday, April 15, 2024

JSK Daily for Apr 15, 2024 View this email in your browser A community curated daily e-mail of JavaScript news Embracing Functional Programming: Streamlining Code with Reusability and Maintainability

True Anomaly and Rocket Lab will make big moves on orbit (literally)

Monday, April 15, 2024

The Space Force has contracted out its next "responsive space" mission, and this one is a doozy. View this email online in your browser By Aria Alamalhodaei Monday, April 15, 2024 Hello and

Daily Coding Problem: Problem #1413 [Medium]

Monday, April 15, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Square. Given a string and a set of characters, return the shortest substring containing