robweychert

A simple Sass function for frame-based CSS animation

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

@function f($frame) {
  @return percentage( $frame / $totalframes )
}

robweychert

Sass typographic scale generator

Generate a typographic scale of CSS variables with any interval (fixed or proportional) and any number of sizes. Just edit $interval, $body-text, $scale-min, and $scale-max:

:root {
  $interval: 1.5;    // Unitless for proportional, unit for fixed
  $body-text: 1rem;  // Must have a unit
  $scale-min: -2;    // Unitless negative integer
  $scale-max: 2;     // Unitless positive integer

robweychert

AP style month abbreviations with strftime in Liquid

AP style is particular about how dates are formatted in various circumstances. strftime uses %b for month abbreviations, but its format (the first three letters of the month: Jan, Feb, etc) differs from AP style’s preferred abbreviations for some months. This Liquid snippet converts strftime’s month abbreviations to AP style:

{{ object | date: '%b. %e, %Y' | replace: 'Mar.', 'March' | replace: 'Apr.', 'April' | replace: 'May.', 'May' | replace: 'Jun.', 'June' | replace: 'Jul.', 'July' | replace: 'Sep.', 'Sept.' }}

For example, this Liquid code…

robweychert

Python easing functions

For precision programmatic animation!

Translated from the JavaScript in Sean Yen’s Easing equations
Illustrations adapted from Andrey Sitnik and Ivan Solovev’s Easings.net

Example usage:

duration = 30

robweychert

module.exports = function(eleventyConfig) {

	// Make a custom collection based on a key in your posts' front matter
	function addCollectionByKey(collectionName, postKey, paginate=true, postsPerPage=100) {

		eleventyConfig.addCollection(collectionName, function(collectionApi) {

			const collectionObjects = {};
			let collectionFinal = [];