Eleventy (aka "11ty") is the great Node.js based Static Site Generator I use to build this site.
There are 57 contents with this tag:
If you use #Eleventy and know how to add fetchpriority="high" on your Largest Contenful Paint image, I made a plugin that adds a <link rel="preload"…> for it, even it it's responsive: https://github.com/nhoizey/eleventy-plugin-auto-preload
Feedback welcome! 🙏
There are now pages on my photography site about the cameras and lenses I used to shoot the photos you can see:
https://nicolas-hoizey.photo/gear/
Data are extracted from the photos' EXIF, and pages are still generated with #Eleventy! 😍
TIL in #Eleventy inputPath gives the path to the source content, not to the template generating the page, when we use pagination… Where can I guet the template path? 🤔
Trys Mudford
Building a design system with Eleventy
Trys shows here some of the power of Eleventy, the best static site generator, to generate a Design System with components.
After several years using #Eleventy, I still struggle with dates and timezones… 😅
Being in UTC+02:00, I don't want content written one day at 1am to be "seen" as published the day before at 11pm:
https://github.com/11ty/eleventy/issues/573#issuecomment-1031617462
Chris Ferdinandi
Vanilla JavaScript and old-school SSGs are the best choices for web performance
True. That's why I love #Eleventy so much!
Zach Leatherman
Trailing Slashes on URLs: Contentious or Settled?
I have mixed feelings about URLs without an extension (.html for example) or a trailing slash. It certainly comes mostly from 25 years of unexpected behaviors with HTTP servers and other Web plumbering.
URLs, a poll:
(there is a right answer)
This is an important question for #Eleventy users, because you can't have both /about.md and /about/index.md with Eleventy default behavior.
In #Pack11ty, a single setting is enough to decide: https://pack11ty.dev/documentation/collections/#permalinks
📢 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.
Without any visual change, a simple config change in my #Eleventy plugin images-responsiver improved srcset and sizes attributes of images on my photography site and have reduced the homepage weight by half! 🏎
Keeping track of what happens in my mentions is easy with @mxbck's amazing project Webmention Analytics, built with webmention.io and #Eleventy.
And it's public: https://nho-webmention.netlify.app/
Jérôme Coupé
Jérôme tells us how he structures his Eleventy projects.
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.
eleventy-plugin-images-responsiver, my #Eleventy plugin for responsive images, is now available in a much faster v1.9.0! 🏎
My own site build is for example 30 % faster. 😍
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?
Accessible anchor links with Markdown-it and Eleventy
I like to be able to link directly to a section in a long content. I wish every site provided anchor links associated to headings, even if Text Fragments might be a cross browser thing sometimes in the future. Here's how I made the anchor links of my Eleventy based site accessible.
Carolina Gilabert
Rebuilding my site - Part 1: Eleventy
Carol shares the process to build her new site with Eleventy, with a section about image optimisation, a topic I'm very interested in, as you should already know. 😅
Mark Llobrera
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
Own your short URLs!
Easy with #Eleventy and #Netlify (for example):
https://github.com/nhoizey/1y#readme
@addyosmani Bitly sets cookies and shares user data with third parties. Please consider stopping unnecessarily using URL shorteners.
Whoops, there's a warning gatsby in the logs of @jlengstorf's Let’s Learn Eleventy! video with @zachleat… 😅
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…)
Mike Riethmuller
Understanding Filters, Shortcodes and Data in 11ty
I've been using Eleventy for 2 years now (already! 😮), and I thought Mike's post would be a nice one to send to beginners, but I actually learned something!
I mixed this awesome #Netlify proxy for #Cloudinary trick from @philhawksworth and @tkadlec with #Eleventy and my responsive images plugin, and the result is great! 😍
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.
Enhancing archives navigation, step 2
In my previous article Enhancing archives navigation, step 1, I promised further archives navigation enhancements. Here they are!
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.
I may have created a new plugin for #Eleventy… 😅
If you use Nunjucks layouts and want an easy way to build internal links between your contents, this might help you:
https://github.com/nhoizey/eleventy-plugin-link_to#readme
Browsing #Eleventy docs to see data available in a page and in a collection item. title vs item.data.title…
Wish it was the same, for simpler Nunjucks macros with a single item object with the same attributes.
Each step of eleventy-plugin-images-responsiver tutorial is both a README and a small Eleventy site with the plugin and progressively improving configuration and usage… 😎
I'm already using #Jest to test images-responsiver, my #Node package for easier responsive images, but I wonder how to use it to test my plugin wrapping it for #Eleventy… 🤔
I'm quite happy with this nice and simple collection of complementary tools that help me maintain my pet projects on #GitHub:
https://nhoizey.github.io/images-responsiver/#tools-and-automations
⚠️ People using my #Eleventy plugin for responsive images should be aware that its Git(Hub) repository has moved into the new images-responsiver monorepo.
There's nothing to do if it has been installed from npm, though.
Should I use a monorepo for images-responsiver and eleventy-plugin-images-responsiver, the #Eleventy plugin? 🤔
Might be better to manage dependencies and sync releases, and easier for users to find/add issues.
YouTube and Vimeo videos are now embedded thanks to @gfscott's great #Eleventy Embed Everything plugin.
YouTube videos are light and without trackers thanks to @paul_irish's lite-youtube-embed.
Zach Leatherman
Use Speedlify to Continuously Measure Site Performance
If you don't have any budget for Dareboost (or competitors) yet, Speedlify can help you monitor your site's performance for free, and build your performance strategy to justify using even better tools:
Using speedlify with #Netlify is great, because enhancing the sites performance will reduce the build times, therefore the monthly cost… 😁
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/
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?
Tracking my #Eleventy based web sites in #Dareboost to make sure my performance and accessibility results stay good for the leaderboards… 😅
My Dareboost monitoring dashboard for Eleventy based sites
Pack11ty, my #Eleventy template project, now uses some of #EveryLayout layouts and starts looking much better!
I guess #CSSNakedDay is the best day to launch my own heavily opinionated #Eleventy template project, for which I didn't write any CSS yet… 😅
Here is Pack11ty, hosted on #Netlify!
Trying to write documentation for my #Eleventy plugin as runable examples… not so easy, but I think it's worth the effort!
https://github.com/nhoizey/eleventy-plugin-images-responsiver/tree/master/docs/examples
I guess (without proof) #Eleventy builds including assets bundling/minifying could be accelerated with memoization.
Did this for the slugify filter (I use @sindresorhus's one instead of the default) called multiple times with the same string:
https://github.com/nhoizey/nicolas-hoizey.com/blob/master/src/_utils/slugify.js
images-responsiveris 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.
People using #Eleventy and #Webmention, when and how do you send mentions from your content to remote sites?
Bryan L. Robinson
Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more
This is an excellent writeup of the different paths Bryan went to optimize the performance of his site built with Eleventy. I will definitely look for inspiration in this code.
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…>…
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.
You should remember I told you nho.link is built with #Eleventy.
So why do #Netlify Analytics tell me the most visited URL is https://nho.link/wp-login.php ? 🤷♂️
Now that I use #Rollup to generate my #ServiceWorker with #Workbox in #Eleventy, I guess I should try to remove #Webpack from #JavaScript assets bundling… 😅
You might have noticed that these notes are #POSSE on social networks with a link to a shorter domain. 🤔
https://nho.link/ is my short URL domain, hosting only redirects. It is also powered by #Eleventy! 💪
Use the "1y" template to create your own: https://github.com/nhoizey/1y
Hashtags written in Markdown content of such notes are automatically transformed into tag links in the site with some #Eleventy magic (I'll explain later), but are not yet "true" tags.
Waiting for an issue to be resolved (if possible): https://github.com/11ty/eleventy/issues/971
Migration from #Jekyll to #Eleventy now complete, and even more! 💪
See all tags.
