Skip to main content

Issue 68 - Color from images, Cache optimized images, A post to match the Meetup, New categories, Nice new sites...And 8 releases, 17 posts and 22 sites to see

6 minutes to read

Welcome to Issue 68 of the 11ty Bundle. 11ty, aka Eleventy, is a "simpler static site generator" that is designed to be simple, flexible, and highly customizable. It is built on Node.js and allows developers to create websites by transforming templates and data into static HTML files. It supports multiple template languages, giving developers the freedom to choose the languages that best suit the needs of their project.

An email version of this blog is available. Subscribe here.


A note from Bob:

I'm in a slightly elevated state of anxiety at the moment. I'm having my second knee replacement on March 6th and my wife just received a breast cancer diagnosis, which thankfully, was caught early. We're coping well and doing our best to keep our spirits up (notwithstanding the total clusterfuck that is the US presidency). I'm not sure how much I'll be able to do in the next few weeks. I'll do my best to keep adding posts, releases and sites, but I may take a break from these blog posts. I'll keep you posted. The best way to keep up with the posts is by subscribing to the Firehose RSS feed. There's also an RSS feed for releases.


Color from images. Zach created a new plugin, called image-color that extracts color information from images. Here's his blog post about it. It looks pretty cool and it's got me thinking of an idea on how I might use it.

Cache optimized images. And while this is something that I thought happened automagically when using the image transform, it turns out that you can have your optimized images placed into the .cache folder which is great, particularly when using a deployment host like Netlify or Cloudflare (and perhaps others) that respect the .cache folder between builds. Those optimied images can then be automatically copied to your output folder post-build. This should shave significant time off your builds, particularly for image heavy sites. Here's a Gitub issue that explains it.

A post to match the Meetup. At our recent Eleventy meetup, Sia had presented Using 11ty to build a data and chart analytics website (video). She has since followed that up with a blog post covering similar ground, titled How I built Shopify Theme Vitals using 11ty and CrUX. If you want to build a rich, data-driven site, there are learnings here.

New categories. I've created two new categories on this site, one for Notion and one for Obsidian. There seemed to be enough content to make these useful. So now when you do a search on either of these terms, you get right to the category, rather than get a rather repetitive list of posts. I hope you find this useful.

Nice new sites. Among the new sites in this issue, I wanted hightlight a few that caught my eye: Oregon Symphony Association, Green Web Tracker, and State of California Design System, and Damian Walsh's personal site.

Until next time...


Recent releases

@11ty/image-color

Small utility to efficiently fetch the colors from an image. - 11ty/image-color

Eleventy Import v1.0.14

Utility to import content from multiple services (and a CLI, too) - Release Eleventy Import v1.0.14...

Eleventy Import v1.0.13

Utility to import content from multiple services (and a CLI, too) - Release Eleventy Import v1.0.13...

Eleventy Font Awesome v1.0.0-beta.8

Optimized per-page tree-shaken SVG spritesheets for Eleventy with Font Awesome icons. - Release...

Eleventy Font Awesome v1.0.0-beta.9

Optimized per-page tree-shaken SVG spritesheets for Eleventy with Font Awesome icons. - Release...

Eleventy Font Awesome v1.0.0-beta.10

Optimized per-page tree-shaken SVG spritesheets for Eleventy with Font Awesome icons. - Release...

is-land v5.0.0-beta.4

A new performance-focused way to add interactive client-side components to your web site. - Release...

Eleventy Font Awesome v1.0.0-beta.7

Optimized per-page tree-shaken SVG spritesheets for Eleventy with Font Awesome icons. - Release...

Posts from around the web

How I Built Shopify Theme Vitals using 11ty and CrUX

Building a site that shows real-user web performance data by Shopify theme using HTTP Archive, the Chrome User Experience Report, BigQuery, Node, and 11ty

Feb 26, 2025

Categories: Global DataHow to...Performance

11ty Obsidian & Github Style Alert Blocks

Adding Obsidian & Github Style Alert / Callout Blocks Using 11ty and markdown-it Plugins

Feb 25, 2025

Categories: ConfigurationHow to...MarkdownObsidian

Setting target _blank and rel noopener noreferrer to external links using markdown-it + 11ty

Feb 25, 2025

Categories: CSS/SassConfigurationHow to...Markdown

Welcome to my new new website!

Hello and welcome to my NEW new website. If everything goes well, it should look almost exactly the same[^1].Around nine years ago, I set this website up w...

Feb 22, 2025

Categories: Why Eleventy?

My Tiny Eleventy (11ty) Sites

Adam DJ Brett Web Developer

Feb 21, 2025

Categories: CSS/SassGetting Started

Adding a Button to Copy Code Snippets

How I added a button to copy code snippets to my website with JavaScript.

Feb 19, 2025

Categories: AccessibilityConfigurationHow to...

DecapCMS with 11ty

Personal site for a coffee addicted geek

Feb 18, 2025

Categories: CMSConfigurationHow to...

WordPress to 11ty

Personal site for a coffee addicted geek

Feb 1, 2025

Categories: BloggingMigrating to Eleventy

Managing My Books Data

Why do something manually (that takes a few seconds to do), when a script (created over the course of several hours) can do it for you?

Jan 31, 2025

Categories: Global DataHow to...

Creating a Books Page

How and why I decided to create a Books page to keep track of my reading.

Jan 25, 2025

Categories: Global DataHow to...

Build personal blog easy with 11ty.js

Build personal blog site super easy with Eleventy JS, a simpler static generator.

Jan 14, 2025

Categories: BloggingDeploymentGetting StartedWhy Eleventy?

11ty and Obsidian Template for Solo Play

A quick intro to pushing out your own solo ttrpg recap website.

Jun 12, 2024

Categories: DeploymentHow to...Obsidian

Built with Eleventy

Here are the new sites to see. If you want to see more sites, check out the Eleventy Leaderboards.

Return Maple Bay

Heal the Reciprocal Relationship Between the Lake and Onondaga Nation #Lakeback

Be Grant

Benjamin Grant's primary online presence

India Grant

A post by Zach Leatherman (zachleat)

Luke Warlow

Luke Warlow's portfolio site

Oregon Symphony

Your official source for Oregon Symphony Tickets. Explore the Oregon Symphony located in Portland...

Liam Steckler

Systems Administrator and Freelance Theatre Audio Engineer and Designer. I think trains, public...

zmknox

The website of a person who likes computers.

Saúl Corona

Hi 👋 I am a Software Engineer with over 5 years of experience in the tech industry.

UrbanFlow

We are two passionate media artists creating organically flowing realtime animations and sound...

Death, Taxes, and Off-By-One Errors

Hello! My name is Dex, and I'm currently a computer science student at a Canadian university.

One...

Chobble

Tech consultants and web developers in Prestwich, Manchester

Renegade Solar

Renegade Solar - Solar panel and battery installations in Manchester

pixel dirt

nannnsss head filled with pixels and dirt

State of California Design System

This system makes it easy to build digital services that meet the needs of Californians.

Green Web Tracker

Tracking the progress of the internet towards 100% fossil free hosting. Updated every two weeks.

Formby Counseling

I'm Alison Keen and I help people with psychotherapy.

Lynn Fisher's Instagram Archive

A bunch of photos that were once on Instagram.

TrozWare

Crazy Mac lady. Mac author & developer. Lover of Apple computers and devices. Swift & SwiftUI...

Damian Walsh

Designer (Interaction/UX/UI) based in Manchester, UK

Get the blog by email (or RSS)

Powered by Buttondown