|
Issue #559 • April 4, 2024
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.
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"> </td>
<td> </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.
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.
 |
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.
|
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.
 |
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
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!
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
|
|
