Contents tagged “Eleventy”

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

There are 67 contents with this tag:

  1. Some things I wish people mentioned when writing about #Eleventy usage, moreover concerning assets bundling (Sass, JavaScript, etc.):

    • Does it run only once per asset, or once per template where the asset is used?
    • Does it run before or after HTML is generated?
    • Does it manage hashes for cache busting?

    This is really important for sites with many contents/pages, build speed, and site performance.

  2. 📢 The 3rd Edition of EVERY LAYOUT is now available!

    We were blown away reading all the kind words you gave us for testimonials; have some logical properties as a thank you!
    every-layout.devN

    Don't have this masterpiece yet? Get it now, it will prevent headaches when creating CSS layouts!

    The layout of my #Eleventy project https://pack11ty.dev/ uses it to get a responsive layout without any media query.

  3. 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/

  4. 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?

  5. 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/

  6. 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.

  7. 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…>

See all tags.