Next Code Break – Blogging with Eleventy

Hey folks – my next <Code><Br> will not be this Tuesday as I’ll be presenting at API World (assuming American gets me there today) so I’ve pushed back the livestream till Thursday, November 7th. Usual time – 12PM CST. You can read more about the event here: https://cfe.dev/talkshows/codebreak-11072024/ I’m going to be discussing Eleventy and building a basic blog. I’ve wanted to cover Eleventy on my show for a while but was waiting for 3.0 to come out. Now that it has – I can’t wait to introduce it to folks. Hope to see you there! Raymond Camden… more →
Posted in: JavaScript

Eleventy 3.0 Released (and in use here!)

This is just a quick note to let my readers know that Eleventy 3.0 has been released. This is a huge update and folks using it should read the full release notes here: Eleventy v3.0.0: Possums ❤️ ESM. I’ve been running a beta for a while. You can see the issues I ran into here: Upgraded to Eleventy 3.0 (Beta). I upgraded to the final version yesterday and ran into one issue, a template that output to a path without an extension. This was very clearly detailed in the error I got: [11ty] Problem writing Eleventy templates:[11ty] The template at './src/webfinger.liquid' attempted to write to './_site/.well-known/webfinger' (via `permalink` value: '.well-known/webfinger'), which is a target... more →
Posted in: JavaScript

Upgraded to Eleventy 3.0 (Beta)

Like I assume most of my fellow Eleventy users have been doing, I’ve been closely following the updates on Eleventy and its progress towards 3.0. As my blog is a fairly large site, I wasn’t in a rush to upgrade to an Alpha release, but the recent beta release convinced me it was time to take the plunge. The TLDR is that… it took me roughly an hour (most of which was by choice, I’ll explain below) and it’s been smooth sailing. Want to know more? Keep on reading… The Upgrade Helper Per the release notes, I made use of the upgrade helper which is a plugin you install along with, of course, upgrading your site to Eleventy 3. This worked well and flagged my only... more →
Posted in: JavaScript

Add Squirrelly Support to Eleventy

I’m supposed to be on vacation but writing about Eleventy two days ago has got it fresh on my mind, also, I can’t pass up an opportunity to use "squirrelly" in a blog title. I subscribe to three or four different email newsletters related to web development. It’s fairly normal to see the same link shared among a few of them. Most recently an example of this was the Squirrelly library. This is, yet another, JavaScript template language and I thought I’d take a look at it in my spare time. Given that Eleventy makes it easy to add other template languages, how long does it take you to add support for it? Step One – Make Your Eleventy project # Technically... more →
Posted in: JavaScript

(Don’t) Add BASIC Support to Eleventy

So yesterday I wrote up the process of adding the Squirrelly template language to Eleventy. It was, essentially, five minutes of work due to how well Eleventy supports adding custom languages. After writing it up, publishing it, and running some errands, a really bad and silly idea came to me… what if I added BASIC support to Eleventy? Way back in the Stone Age, my first computer language was Applesoft BASIC on an Apple 2e (or +, not sure). Just look at this rad machine and imagine it paired with a monochrome green monitor: By Bilby – Own work, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=11119727 I wrote a lot of programs on that machine, most typed by hand from the... more →
Posted in: JavaScript

Building a Web Version of Your Mastodon Archive with Eleventy

A couple of days ago Fedi.Tips, an account that shares Mastodon tips, asked about how non-technical users could make use of their Mastodon archive. Mastodon makes this fairly easy (see this guide for more information), and spurred by that, I actually started work on a simple(ish) client-side application to support that. (You can see it here: https://tootviewer.netlify.app) This post isn’t about that, but rather, a look at how you can turn your archive into a web site using Eleventy. This is rather rough and ugly, but I figure it may help others. Here’s what I built. Start with a Fresh Eleventy Site # To begin, I just created a folder and npm installed Eleventy. I’m using the... more →
Posted in: JavaScript

Creating Bootstrap WebC Components in Eleventy

For some time now as I’ve explored web components, it’s occurred to me that web components could be a great way to make working with Bootstrap simpler. Not that Bootstrap is necessarily difficult, but I’ve always thought it would be cool to take something like so: <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div> And... more →
Posted in: JavaScript

Using Goodreads Data in Eleventy

I’ve been a Goodreads user for a few years now, and much like how I use other ‘tracking’ services, I’m not there for other folks’ reading lists or recommendations, but instead, as a way to track what I’ve read. I especially like looking back over the past year and being reminded of the books I really enjoyed. Recently, myself and others were talking on Mastodon about how to work with this kind of data, other services, and so forth. Goodreads does not have an API unfortunately (it used to, but it shut it down) but they do let you export your data. I decided to take a look at this and see if (and how) it could be used in Eleventy. Here’s what I found. Edit... more →
Posted in: JavaScript
1 2 3