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

Benchmark the web performance and accessibility of sites over time.

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

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

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

A small web component for responsive <table> elements.

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

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

zachleat.com is powered by Eleventy and WebC.

Show the difference between a date and now (4 days ago)

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

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

Add next/previous buttons to a horizontal scrollable container.

A minimal no-theme Tabs web component.

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

Filtering visible child elements based on form field values.

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

A lightweight web component helper for HTML5 videos.

Get a list of local URL links from a root URL.

Compatibility tables for default local fonts.

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

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.

An announcement banner web component.

A web component that shows Lighthouse scores via Speedlify.

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

The squirminal is a fake antique terminal web component

Use import('data:') and import(Blob) to execute arbitrary JavaScript strings

A web component to search with Pagefind.

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

A new kind of hamburger menu

A set of scripts to test markdown processing speeds in various site generators/frameworks

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

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

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

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

No description.

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

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

Convert a well formed GitHub Issue Form populated Markdown body into a JSON data file in the repository.

Let's practice our JavaScript testing.

A Front End Engineer's Manifesto

A website dedicated to a history of foundational web development blog posts.

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

No description.

Improving the web font rendering of the default Wordpress theme.

A loading indicator overlay for images (and maybe other things later).

An SVG charting library based on D3.js

A default grunt configuration for new projects.

Execute a string of JavaScript using Node.js and return the global variable values and functions.

A presentation on Web Developer Workflow.

Web Component to show Parity Purchasing Power prices.

Web based alarm clock

Generates useful information about a font from a font file.

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

A demo for 11tymeetup.dev

A non-image based non-normative proposal for conformance of W3C status banners.

A faster youtube embed.

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

A web font loading demo to showcase FOIT and FOUT behavior side by side.

Test cases for asynchronous css loading

Retina friendly progressively enhanced banner for iliveinomaha.com

Meta package for Zach Leatherman

A series of small atomic tests used to compare accessibility linting tools.

I am a single HTML file.

Web component to show the current status of a fundraiser.

RETIRED—A Google Chrome extension, provides a single click add to your Netflix queue while browsing the web.

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

HTML5 tests used for research for blog posts

A minimal module to test importing in other tools.

No description.

This project is retired.

Do math on Unicode Ranges for web fonts.

Find a twitter avatar image url from a twitter username.

No description.

Reads an image into an ndarray

GitHub Action for generating a static website with Eleventy

No description.

A little script to update my lights with the status of a Netlify build

Find the bloat in your document using this Firebug Lite plugin.

Retired source code for an old JavaScript Code Coverage plugin for Firebug.

A multi-color vector icon set (grunticon generated) of browser logos

A boilerplate for the Jekyll/Grunt/Buttsweater combination used on zachleat.com and nebraskajs.com.

Playground for testing various dynamic script execution methods in JavaScript

No description.

No description.

No description.

No description.

A full screen photo gallery with flickr integration.

It’s out of this world.

Sample created for https://twitter.com/jaffathecake/status/1153759414765203463

Just testing GitHub templates

No description.

No description.

This is a GitHub actions test.

Automated linting of Cascading Stylesheets

Try to get Vitest and `new Eleventy()` working with a stubs file.

A starter repository for a blog web site using the Eleventy static site generator.

No description.

I AM A ✨ SPECIAL ✨ REPOSITORY

an in-browser canvas tool which is great fun!

Making #A11Y tips and tricks easier to digest and leveraging the community into the cloud.

Curated resources that help you build lightning fast websites

Graded Feature Support: Look up web technologies and find out if they are ready for use.

Utility to fetch hyperlinks from a URL.

A little directory of people's personal sites

HTML5 <audio> or <video> player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers.

Lit is a simple library for building fast, lightweight web components.

(Fork) 🛏 An HTML to Markdown converter written in JavaScript

A web development microblog

The official Jamstack site

This repository contains compatibility data for Web technologies as displayed on MDN

Multi-framework responsive image component

Ask me anything!

The Claw Webring

Transforming styles with JS plugins

A details/summary plugin to expand and show source code.

No description.

Understand and fix your static website trailing slash issues!

jQuery Mobile Framework

I can show you the hello world. Shining shimmering splendid?

No description.

A professional front-end template for building fast, robust, and adaptable web apps or sites.

A public list of upcoming conferences https://conferences.css-tricks.com/

Nothing to see here

No description.

📝 Personal website built with eleventy, postcss, and rollup.

No description.

BORING

Repository for Dev.Opera source code

(Do Not Use This Repo) A demo of Netlify deploy of the eleventy-base-blog start project for Eleventy.

Embedded JavaScript templates -- http://ejs.co

A Liquid implementation for JavaScript with all shopify/liquid features.

A typeface designed for source code

JavaScript's utility _ belt

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

A meme generator for Bernie’s large printed posterboard tweets.

Up-to-date data on support for type and typographic features on the web.

Notes for web development and browser research

A tiny recognizer using parsing expression grammars.

Small bookmarklet to change all the images on a page to cats

A quick overview of what CSS features to prefix

A proposal for CSS to let web developers control font timeout

Concatenate files.

Myth - Postprocessor that polyfills CSS

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

How to keep up to date on Front-end Technologies? - The Recipe

Just a simple, minimal jQuery dialog with typical interactivity

Jekyll is a blog-aware, static site generator in Ruby

No description.

Raw browser/feature support data from caniuse.com