Contents tagged “Eleventy”

Eleventy (aka "11ty") is the great Node.js based Static Site Generator I use to build this site.

There are 45 contents with this tag:

  1. Working on my photography site, I wanted to show a few photos from folder in a gallery, and built something cool with just CSS.

    But is it really cool, or just cool once and then annoying?

    Try it live on desktop: nicolas-hoizey.photo/travels/europe/

    youtu.be/VmwJ4KInloQ

    I finally decided the effect on hover was too invasive and difficult to tweak, so I changed for a much more traditional way to show multiple images of a folder: a diaporama with a Ken Burns effect.

    Try it! https://nicolas-hoizey.photo/travels/

  2. I bet I can find 10 different ways people handle responsive images in Markdown, for example in #Eleventy projects… I'm part of the problem. 😅

    Shouldn't we try to first list requirements, and then maybe find a single solution for everyone, if possible?

  3. Today is the first anniversary of this site being built with #Eleventy, and it's been an amazing year! 🥳

    (At least on this topic, you know what I mean…)

  4. screenshot of Towards a Lightweight Jamstack

    Nicolas Goutay avatar Nicolas Goutay

    Towards a Lightweight Jamstack

    Not having to use a JavaScript framework also meant that HTML, not JSX or Vue components, is now front and center in the code you write. This helped me avoid the usual traps when writing React: the infamous div soup, inaccessible components, or non-semantic tags.

  5. Enhancing archives navigation, step 1

    I decided years ago to remove paged navigation (aka "pagination"), because I find it not user friendly at all, and a nightmare for SEO with new content pushing one tenth of contents to another page (for a 10 items per page pagination). Now, I improved the UX even further.

  6. This new monitoring tool based on #Eleventy, built by @zachleat, is awesome! 😍

    New project: Speedlify 🐇

    A self-hosted dashboard to continuously measure and publish web site performance statistics using Lighthouse and Axe.

    Demo:speedlify.netlify.app/ssg/c
    Blog post:www.zachleat.com/web/speedlify/L

    It took me just a few minutes to built my dashboard for multiple sites:
    https://webperf-monitoring.netlify.app/

  7. I use #Eleventy transforms for multiple use cases, but they can only be run on the almost final HTML.

    How would you run other transforms on the source #Markdown, before Markdown-it?

    How could it be done in en Eleventy plugin?

  8. images-responsiver is a simple solution for most responsive images needs

    Is it catchy enough? 😁

    Here's my latest pet project, trying to help people struggling with responsive images: https://nhoizey.github.io/images-responsiver/

    If you use #Eleventy, there's also a plugin: https://github.com/nhoizey/eleventy-plugin-images-responsiver

    Documentation is still a little rough around the edges, but should be enough at least for people already knowing npm and JS.

  9. My #Eleventy build time is now down to 37 seconds on average! 💪

    A few external data fetches, 1087 HTML pages generated, 1608 simple images <img src…> automatically transformed into responsive <img srcset… sizes…>

  10. screenshot of Eleventy’s New Performance Leaderboard

    Zach Leatherman avatar Zach Leatherman

    Eleventy’s New Performance Leaderboard

    Eleventy doesn’t do any special optimizations out of the box to make your sites fast. It doesn’t protect you from making a slow site. But importantly it also doesn’t add anything extra either. This sort of developer empowerment over the final product has seemed to attract an amazing group of performance oriented developers using the project and I am so grateful to every one of you.

See all tags.