Thread by @stefanjudis, I'm joining the @eleven_ty club (finally)!It took me months to get this [...]

I& #39;m joining the @eleven_ty club (finally)!

It took me months to get this rebuild out.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙈" title="Nichts sehen-Affe" aria-label="Emoji: Nichts sehen-Affe"> And it& #39;s not 100% there yet, but I wanted to get it out finally. :)

Below some details. :)

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">

I& #39;m joining the @eleven_ty club (finally)!It took me months to get this rebuild out. https://abs.twimg.com/emoji/v2/... draggable=

And it& #39;s not 100% there yet, but I wanted to get it out finally. :)Below some details. :) https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">" title="I& #39;m joining the @eleven_ty club (finally)!It took me months to get this rebuild out. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙈" title="Nichts sehen-Affe" aria-label="Emoji: Nichts sehen-Affe"> And it& #39;s not 100% there yet, but I wanted to get it out finally. :)Below some details. :) https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">" class="img-responsive" style="max-width:100%;"/>

My previous site transferred ~850kb of data on index (400kb of this JavaScript).

I& #39;m now down to a little bit more than 100kb. And everything& #39;s deployed to @Netlify. :)

I moved from tinyletter to @buttondown. Subscribers are added via a serverless functions and I will send my first newsletter from there in a few days.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">

" title="I moved from tinyletter to @buttondown. Subscribers are added via a serverless functions and I will send my first newsletter from there in a few days. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">" class="img-responsive" style="max-width:100%;"/>

I self-host one google font and load it via `document.fonts.load` to toggle a class when the font is available and minimise the layout shift when the font kicks in.

I wrote myself a quick web-vitals custom element to keep track of performance and see it all the time. :)

https://github.com/stefanjudis/web-vitals-element">https://github.com/stefanjud...

My RSS feed now includes the whole articles and not only links to the site.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙈" title="Nichts sehen-Affe" aria-label="Emoji: Nichts sehen-Affe">

" title="My RSS feed now includes the whole articles and not only links to the site. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙈" title="Nichts sehen-Affe" aria-label="Emoji: Nichts sehen-Affe">" class="img-responsive" style="max-width:100%;"/>

Images are lazy-loading via `loading="lazy"` and preview images are inlined as svgs using sqip. :)

(there is still some work here to make it work properly without JS).

The mobile nav is build following @justmarkup & #39;s excellent advice on how to build accessible hamburger menus. https://justmarkup.com/articles/2019-12-04-hamburger-menu/">https://justmarkup.com/articles/...

Do's and Don'ts of implementing a hamburger menu

The infamous hamburger menu is one of the examples were I see bad practise very often. A look at good and bad examples of the hamburger menu.

https://justmarkup.com/articles/2019-12-04-hamburger-menu/

Build time on Netlify was reduced from 3 1/2 minutes to 50 seconds thanks to Eleventy and very little JavaScript crunching.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">

Build time on Netlify was reduced from 3 1/2 minutes to 50 seconds thanks to Eleventy and very little JavaScript crunching. https://abs.twimg.com/emoji/v2/... draggable=

" title="Build time on Netlify was reduced from 3 1/2 minutes to 50 seconds thanks to Eleventy and very little JavaScript crunching. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">" class="img-responsive" style="max-width:100%;"/>

Social share images are automatically generated via @cloudinary and the URL is built using @jlengstorf & #39;s fantastic `get-share-image` package. :)

https://www.npmjs.com/package/@jlengstorf/get-share-image">https://www.npmjs.com/package/@...

And yeah... As a last point, the data is coming from @contentful which triggers new builds via webhooks every time I publish something. :)

Overall I& #39;m very happy right now.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙈" title="Nichts sehen-Affe" aria-label="Emoji: Nichts sehen-Affe">

Ah yeah... and really last thing. I dropped Google Analytics in favour of Netlify& #39;s server-side analytics. :D

And another last thing. :D

I used more custom elements.

YouTube videos are brought in using @paul_irish `lite-youtube` and publishing dates use GitHub& #39;s `time-ago` element.

https://github.com/paulirish/lite-youtube-embed/
https://github.com/paulirish... href=" #time-ago">https://github.com/github/time-elements #time-ago">https://github.com/github/ti...

https://github.com/github/ti..." title="And another last thing. :D I used more custom elements. YouTube videos are brought in using @paul_irish `lite-youtube` and publishing dates use GitHub& #39;s `time-ago` element. https://github.com/paulirish... href=" https://github.com/github/time-elements #time-ago">https://github.com/github/ti...">

Latest Threads Unrolled: