Zach Leatherman

web-font-loading-recipes. A bunch of demos for different web font loading strategies. Companion to https://www.zachleat.com/web/comprehensive-webfonts/

speedlify. Benchmark the web performance and accessibility of sites over time.

glyphhanger. Your web font utility belt. It can subset web fonts. It can find unicode-ranges for you automatically. It makes julienne fries.

BigText. jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.

fontfaceonload. A simple utility to execute a callback when a webfont loads.

table-saw. A small web component for responsive <table> elements.

browser-window. Used in demos as a way to fake a Safari-esque web browser window.

details-utils. A suite of utilities to add more features to the <details> element.

zachleat.com. zachleat.com is powered by Eleventy and WebC.

Humane-Dates. Show the difference between a date and now (4 days ago)

line-numbers. A web component to add line numbers next to various HTML elements

snow-fall. A web component to add snow to your web site (or to an element on your web site).

carouscroll. Add next/previous buttons to a horizontal scrollable container.

seven-minute-tabs. A minimal no-theme Tabs web component.

performance-leaderboard. A plugin to run Lighthouse against a set of urls to see which site is the fastest.

filter-container. Filtering visible child elements based on form field values.

postcss-foft-classes. A postcss plugin to automatically add classes for various font loading strategies.

video-radio-star. A lightweight web component helper for HTML5 videos.

font-family-reunion. Compatibility tables for default local fonts.

spider-pig. Get a list of local URL links from a root URL.

hypercard. Web component to add a three-dimensional hover effect to a card.

flex-luthor. A small CSS-only wrapper library to help with responsive intrinsic-sized Flexbox layouts that wrap based on content and container width and avoiding viewport-based media queries.

announcement-banner. An announcement banner web component.

speedlify-score. A web component that shows Lighthouse scores via Speedlify.

heading-anchors. Adds and positions sibling anchor links for heading elements (h1–h6) when they have an `id` attribute.

squirminal. The squirminal is a fake antique terminal web component

jQuery-Gravatar. Retrieve a gravatar image dynamically from any e-mail address.

pagefind-search. A web component to search with Pagefind.

bench-framework-markdown. A set of scripts to test markdown processing speeds in various site generators/frameworks

infinity-burger. A new kind of hamburger menu

resizeasaurus. A web component to add resizing behavior to test intrinsically sized responsive components.

performance-leaderboard-pagespeed-insights. A plugin to run Lighthouse on Pagespeed Insights against a set of urls to see which site is the fastest.

queue-code. Allows you to “type” syntax highlighted source code for presentations and screencasts.

idea-book. A public dump of ideas for side projects, for public upvoting/downvoting/commenting.

webcare-webshare. JavaScript

selecthor. A better way to test, learn, and demo CSS selectors

esm-import-transformer. Change import URLs in JavaScript code using import maps. e.g. `import * from "before"` to `import * from "after"`

github-issue-to-json-file. Convert a well formed GitHub Issue Form populated Markdown body into a JSON data file in the repository.

JavaScript-Code-Katas. Let's practice our JavaScript testing.

f2em.com. A Front End Engineer's Manifesto

this-website-is-a-tech-talk. HTML

educational-sensational-inspirational-foundational. A website dedicated to a history of foundational web development blog posts.

avatar-local-cache. Saves a image URL for an avatar to the local file system (and optimizes the image).

artificial-chart. An SVG charting library based on D3.js

gruntlerplate. A default grunt configuration for new projects.

ToolOrDie. A presentation on Web Developer Workflow.

font-stats. Generates useful information about a font from a font file.

css-tricks-font-loading. A case study of the font loading for css-tricks.com

lite-youtube-embed. A faster youtube embed.

JsTestDriver-Boilerplate. Easy boilerplate for test driven JavaScript projects using the JsTestDriver tool.

uniclode. Another Eleventy Serverless demo, select characters to form a Unicode Range