Skip to content

Instantly share code, notes, and snippets.

GitHub Drop ICE

Zach Leatherman zachleat

GitHub Drop ICE
Block or report user

Report or block zachleat

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
zachleat / gist:8cd9f1844c7144099c54533fff1b0a76
Created Apr 18, 2020
Eleventy Vue Responsive Images Plugin Sample Input/Output
View gist:8cd9f1844c7144099c54533fff1b0a76
alt="The front entrance to a store"
:widths="[350, null]" />
<!-- BECOMES -->
<source srcset="/v3/img/respimg/ef7c5bc4-350.webp 350w, /v3/img/respimg/ef7c5bc4.webp 589w" type="image/webp">
<source srcset="/v3/img/respimg/ef7c5bc4-350.jpeg 350w, /v3/img/respimg/ef7c5bc4.jpeg 589w" type="image/jpeg">
zachleat / .eleventy.js
Last active Mar 21, 2020
Eleventy + Vue Preview
View .eleventy.js
const eleventyVue = require("@11ty/eleventy-plugin-vue");
module.exports = function(eleventyConfig) {
// Use Defaults
// OR, Use your own options
eleventyConfig.addPlugin(eleventyVue, {
// Directory for single file components (defaults to includes folder)
componentsDirectory: "",
View .eleventy.js
module.exports = function(eleventyConfig) {
// you’ll have to get a list of all the tags in your talks.json here which is not great but pretty easy
["Web Assembly"].forEach(function(tag) {
eleventyConfig.addCollection(tag, function(collection) {
return collection.getFilteredByTag("talks").filter(item => {
// note here the use of the pagination alias `talk`
return ( || []).indexOf(tag) > -1;
zachleat / img.njk
Created Sep 5, 2019
Experimenting with a Nunjucks shortcode for images in Eleventy
View img.njk
<!-- throws an error, missing [alt] attribute -->
{% img src="img/9a93578a.png", loading="lazy" %}
<!-- local img source, outputs a standard <img> tag -->
{% img src="img/9a93578a.png", alt="zachleat’s Avatar", loading="lazy" %}
<!-- remote img source -->
<!-- download using avatar-local-cache, outputs <picture> with webp and png fallback -->
{% img src="", alt="zachleat’s Avatar", loading="lazy" %}
zachleat / .js
Created Aug 29, 2019
Using Eleventy Programmatically
View .js
const Eleventy = require("@11ty/eleventy");
(async function() {
let inst = new Eleventy();
await inst.init();
await inst.write();
zachleat / gist:cda7af65f5d61666e7fa6037c3ede752
Created Jun 12, 2019
This webmention entry made it through sanitize-html
View gist:cda7af65f5d61666e7fa6037c3ede752
"type": "entry",
"author": {
"type": "card",
"name": "",
"photo": "",
"url": ""
"url": "",
"published": "2019-06-11T00:00:00",
zachleat / font-sizes.js
Last active Jan 11, 2019
Returns a unique sorted array of font-size values on a page.
View font-sizes.js
(function() {
let fontSizes = new Set();
document.querySelectorAll("*").forEach(function(node) {
return Array.from(fontSizes).sort();
View gist:27e61d1a7dc25e6cab40241e05e0239c
;(function ($) {
function Lettering() {}
Lettering.prototype.splitText = function() {};
Lettering.prototype.injector = function() {};
window.LetteringJS = Lettering;
View gist:c8638fbfa337f7fe0dfc1d8d90acf89e
Dear Zach Leatherman,
Today the FCC voted to remove net neutrality rules that restricted Internet service providers from throttling specific parts of the Internet, creating "Paid Prioritization" plans, and blocking or reducing access to competitive products.
We at XXX stand committed to Net Neutrality and to treating all customer data as the highest priority and will not throttle, cap, or limit access to any legal site on the Internet. When our data usage gets high on links we increase the speed we can handle instead of trying to reduce the speed you use.
We believe the Internet should remain open and we will do our part for our customers to make sure that happens.
zachleat / gist:c135c079f802934006978e2257086cc3
Last active Aug 28, 2017
Typinator Automations for CSS em and rem values
View gist:c135c079f802934006978e2257086cc3
Abbreviation: ;ems
Formula: {{size=?Size}}{{parentsize=?Parent Size<16>}}{{#size/parentsize}}em; /* {{#size}}px /{{#parentsize}} */
Sample output: 0.75em; /* 12px /16 */
Abbreviation: ;rems
Formula: {{size=?Size}}{{parentsize=?Parent Size<16>}}{{#size/parentsize}}rem; /* {{#size}}px /{{#parentsize}} */
You can’t perform that action at this time.