Skip to content

Instantly share code, notes, and snippets.

View zachleat's full-sized avatar

Zach Leatherman zachleat

2.4k followers · 66 following
View GitHub Profile
@zachleat
zachleat / reading_time.rb
Last active May 12, 2026 17:51
Read this in X minutes Liquid Filter Plugin (for Jekyll)
# Outputs the reading time
# Read this in “about 4 minutes”
# Put into your _plugins dir in your Jekyll site
# Usage: Read this in about {{ page.content | reading_time }}
module ReadingTimeFilter
def reading_time( input )
words_per_minute = 180
@zachleat
zachleat / eleventy.config.js
Created August 27, 2025 16:09
Use Eleventy Image concurrency with Image Transform method
// Using the command: DEBUG=Eleventy:Image* npx @11ty/eleventy
// will report the concurrency value used.
import eleventyImage, { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
eleventyImage.concurrency = 1;
export default async function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
// …
@zachleat
zachleat / gist:2008932
Created March 9, 2012 21:56
Prevent zoom on focus
// * iOS zooms on form element focus. This script prevents that behavior.
// * <meta name="viewport" content="width=device-width,initial-scale=1">
// If you dynamically add a maximum-scale where no default exists,
// the value persists on the page even after removed from viewport.content.
// So if no maximum-scale is set, adds maximum-scale=10 on blur.
// If maximum-scale is set, reuses that original value.
// * <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,maximum-scale=1.0">
// second maximum-scale declaration will take precedence.
// * Will respect original maximum-scale, if set.
// * Works with int or float scale values.
@zachleat
zachleat / critical-foft-data-uri.html
Last active March 24, 2025 01:15
Compare Critical FOFT with Data URI against Critical FOFT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Critical FOFT with Data URI</title>
<style>
@font-face {
font-family: LatoSubset;
src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABVwAA0AAAAAG+QAARqgAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABMAAAABYAAAAWABEANkdQT1MAAAFIAAACkQAAA9wvekOPT1MvMgAAA9wAAABcAAAAYNjUqmVjbWFwAAAEOAAAADgAAABEAIcBBGdhc3AAAARwAAAACAAAAAgAAAAQZ2x5ZgAABHgAAA8EAAAUUN1x8mZoZWFkAAATfAAAADYAAAA2DA2UbWhoZWEAABO0AAAAHgAAACQPOga/aG10eAAAE9QAAADIAAAA2PXwFPVsb2NhAAAUnAAAAG4AAABuhQSA721heHAAABUMAAAAGgAAACAAOgBgbmFtZQAAFSgAAAA0AAAANAI2Codwb3N0AAAVXAAAABMAAAAg/3QAegABAAAADAAAAAAAAAACAAEAAQA1AAEAAHicTZO/SxthGMe/d4k2NFbSFE2Maaq2tJ4/qtE4dwnBoUgoHUq5pWBBaCv0h4OCS2MLGUuXIhlKhwxFMnVwcAvB4SiSQSRkOEK9xan/wdvPRYQSnrzv3fu8n8/7vO97siRd1z0tyS6WHj/V8OsXHzY1rCjvZYzCcevVy3ebioW9fkRl99sYUepn5vTZWtOhdW7v6MJas+aIDeujdW5d2GV7x/4VSUaKkSf8ipFN4rK/EdnjaQ9KDuKArimuId1QQjeV1C2NaFQppTWmjMaV1W1N6K7ua1qOZjSreeW1
@zachleat
zachleat / eleventy.config.js
Created February 26, 2025 21:54
Change default time zone for string dates in Eleventy
import { DateTime } from "luxon";
export default function(eleventyConfig) {
// requires Eleventy v3.0+
eleventyConfig.addDateParsing(function(dateValue) {
if(typeof dateValue === "string") { // override String dates
return DateTime.fromISO(dateValue, { zone: "America/Chicago" });
}
});
};
@zachleat
zachleat / critical-foft-preload.html
Last active September 15, 2024 13:30
Compare Critical FOFT against Critical FOFT with preload
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Critical FOFT with preload</title>
<link rel="preload" href="/web/css/fonts/lato/lato-zachleat-optimized.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: LatoSubset;
@zachleat
zachleat / README.md
Last active July 6, 2024 00:09 — forked from pspeter3/.eleventyignore
Eleventy 11ty.js Extensions
@zachleat
zachleat / .eleventy.js
Created October 12, 2022 13:27
Add to Calendar Urls in Eleventy
const { google, outlook, office365, yahoo, ics } = require("calendar-link");
module.exports = function(eleventyConfig) {
// `event` structure documented on https://www.npmjs.com/package/calendar-link
eleventyConfig.addLiquidFilter("addToCalendar", (event, type) => {
if(type === "google") {
return google(event);
} else if(type === "office365") {
return office365(event);
} else if(type === "outlook") {
@zachleat
zachleat / eleventy.config.js
Last active August 25, 2022 13:37
JSMin filter with a cache
const { minify } = require('terser');
const jsMinCache = {};
module.exports = function (eleventyConfig) {
eleventyConfig.addNunjucksAsyncFilter('jsmin', async function (code, callback) {
try {
if(jsMinCache[code]) {
callback(null, jsMinCache[code]);
} else {
const minified = await minify(code);
@zachleat
zachleat / .eleventy.js
Created June 24, 2022 15:08
Add your own Handlebars partial directlyto Eleventy
// via https://www.11ty.dev/docs/languages/handlebars/#optional-set-your-own-library-instance
module.exports = function(eleventyConfig) {
let handlebars = require("handlebars");
// see https://handlebarsjs.com/guide/partials.html#basic-partials
handlebars.registerPartial("name", "Handlebars syntax");
eleventyConfig.setLibrary("hbs", handlebars);
};