With that testing, I uncovered a doozy. We were getting a massive hit on our performance score because of a large CLS score—Cumulative Layout Shift—a metric on Lighthouse. The source of that shift? A progressively enhanced burger menu.

There’s a whole tutorial on this site about that progressively enhanced burger menu, but in short, a web component takes existing navigation and creates a burger menu if the parent container has less available space than declared as a property. If not, it does nothing. Good ol’ progressive enhancement.

The problem is that initial switch causes a layout shift on the whole page, because by default, for when JavaScript doesn’t work, the navigation renders as normal. Only when all the conditions are met, does it switch to being a burger menu.

Now, I can see where Lighthouse is coming from with CLS. Adverts can wreck a user experience as they load and make the page jump around, but in this instance, it’s a pattern designed to benefit the user and nothing else.

I’m really perplexed, so would love to hear from people that know what they are talking about. It’s very likely that I in fact do not know what I’m doing.

I see this pattern—rendering a minimum viable experience, then enhancing where the browser allows—as a crucial way of delivering high quality websites for users. If it will, however, become a problem for Lighthouse, I might have to remove that requirement of 100s across the board as a deliverable, which sucks, frankly.

For the project in question, I ended up reworking navigation so it didn’t need to be a burger menu, but that’s only one use case of this progressive enhancement pattern—using web components to take existing markup and enhance it. I would be really disappointed if I couldn’t do that any longer.

Anyway, if you’re curious, I tested the demo of the burger menu tutorial on Lighthouse, so go check the report out. Consider it a simple use case to try to reproduce the issue if you’re up for helping. I really hope to get some answers to this!

I’ve decided to make the course open source because I don’t really have to bandwidth to maintain it and update it—especially with Eleventy now getting ever closer to version 1 (which is great).

I’ve slung together a VuePress site—similar to the CUBE CSS documentation—to make this process easier. The repository is public and open for contributions too. You can see the course’s new location at <https://learneleventyfromscratch.com/>.

Wrapping up

To everyone who bought this course in the past and/or left comments to improve the content, thank you. Your support means a lot and you allowed this content to be published for free, which opened the door to thousands of people who previously had no way of accessing the content.

The hope of making the course open source is that it can continue to help people and get contributions from the vast array of Eleventy experts out there.

Until next time, take it easy 👋

First, cd into the directory you want to serve, then run:

npx serve

Then, go to <http://localhost:5000>.

The response from the mind-blowing amount of people that have bought it has been overwhelmingly positive, so thank you so much for that. You’ve made me very happy!

Quality of content and most importantly, the accessibility and inclusivity of content, is of the upmost importance to me, so feedback about how this course has helped people to finally understand static site generators and Eleventy really does mean the world to me. It makes me feel like I did my job right. I’m especially happy that people have liked the conversational tone to the content, too.

Fun facts about the production of this Eleventy course

A lot of work has gone into this course—not just with the content, but also infrastructure, so let’s break it down:

1. The course has a word count of just over 35,000 words! I committed the first draft of the first lesson on the 19th of May. I committed the last bit of content yesterday (living fast and loose).
2. The production of the course properly started in March this year with some rough prototyping and lesson outlining.
3. In total, the main production of the course material resulted in 248 git commits! Combined with the API and content delivery system, it was well over 500 commits by the time I published it all.
4. A complete, authenticated content delivery system that delivers premium content via an API and service workers has been produced, from scratch, to serve this course to you. There will be some material written about that in the future, for sure, because I’d love to empower others to self-publish.
5. I produced the song that is the backing track for the trailer video 13 years ago when I used to make music. You can listen to the whole song here.
6. I say “add the following” 131 times throughout the course, because I am a predictable creature of habit.
7. Every lesson ends with a now traditional “Wrapping up” section because otherwise, I legitimately won’t sleep.
8. I’ve said “thanks, pal” to Amy, the editor of the course, about 20 million times.
9. Last, and most importantly, the entire course and site is built with Eleventy

Wrapping up

The production of this course has been so hard (especially during a pandemic) and so much work, but it has been satisfying work. I love teaching and producing courses will increasingly consume more of my time, rather than client work, which will be ace.

I’m so happy that so many of you have bought this course. It has blown my mind. From the bottom of my heart: thank you so much for your ongoing support! All of the exhaustion is really worth it when you all support the work I do.

For me now, I am having some much needed downtime. Then, I’ve got plenty of new content to produce. There’s all the CUBE CSS stuff, which will include a workshop and further documentation, then of course, I will get started on Learn CSS From Scratch, later in the summer.

Until then, take it easy!

Buy the course now

That holiday is now over because today, this site has gone live and Issue #33 should be in your inboxes.

What’s new

I want to centralise all of my writing and education work, so the main part of the new Piccalilli is the tutorials section and the courses section. Those sections will expand into additional, premium, member-only content in the future, too.

I’ve published 4 tutorials for this launch and published the upcoming courses—the first of which will be Eleventy From Scratch. I’m really looking forward to getting stuck into the production of these courses, now that I have a solid structure to work with.

I merged in external course sites that I had, such as cssfromscratch.com, because I want to keep all of this stuff under one roof. I’m a big believer in content systems and the way I see it: courses and tutorials will seamlessly link between each other, so you, the reader, can learn as much as possible.

In the further long-term, I’m planning on bringing Front-End Challenges Club in-house, too, because I think that content will compliment content on here very well.

Branding

Piccalilli got a new logo! I put a bucket load of work into this. Branding and logo design isn’t my strength, but I was determined to give myself the full-service, like I would for a client and the end result really shows that. I’m so glad I forced myself to do it properly, because I’m really happy with the end result.

It’s in stark contrast with the first Piccalilli logo, which I did in 10 minutes in Illustrator, and pretty much hated it from day 1. The priority then, though, was prototyping the concept of the Piccalilli newsletter. A lot has changed since then!

I wrote about the logo design process over on my blog.

Tech stuff

We’ve got to dive into the tech stuff, because there’s some exciting Jamstack business going on.

The site is built with my favourite static site generator, Eleventy. I used my naked starter kit, Hebra to build it as a HTML only site initially, then spent a lot of time designing the look and feel in static design tools. This then led to a progressive enhancement approach of vanilla CSS and finally, vanilla JS.

That approach has paid dividends because the footprint of this site is tiny and the site is getting some seriously good Lighthouse and Web Page Test scores. It’s given me a really solid foundation to work from, so I’m really happy, because I talk about this stuff a lot on the web, so it would be daft if I didn’t practice what I preach.

“How the hell are you doing the newsletter with Eleventy?”, they scream. Well, that’s the magic right there. Because Eleventy is incredibly flexible, it enabled me to use a combination of RSS, Node JS and Postmark to create a lush, web-first system. The original newsletter was very much email-first, which I was never comfortable with. The issues had URLs, but they looked crap. Now, the design priority is on the web versions, with a lighter version being sent to your inbox.

I’ll probably make a tutorial on the newsletter stuff in the future, because it really is a nice way to publish content and much cheaper than using Curated, like I was before.

Wrapping up

This is just a short post to say howdy again and to give you a bit of knowledge about what’s being going on behind the scenes. I’ll also take this opportunity to thank you all again. This newsletter has always surprised me at how popular it is. Issue #33 has been sent to over 2,000 people!! Your support really drives me to make cool stuff.

I’m so happy that this project is in a completely new phase of its life. There’s so much good stuff to come, so stay tuned (and subscribe to the newsletter and RSS).

Until next time, take it easy 🙂