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.
Contents tagged “Eleventy”
Eleventy (aka "11ty") is the great Node.js based Static Site Generator I use to build this site.
There are 54 contents with this tag:
-
-
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 -
Vanilla JavaScript and old-school SSGs are the best choices for web performance
True. That's why I love #Eleventy so much!
-
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.mdand/about/index.mdwith 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.devNDon'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
srcsetandsizesattributes 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 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/VmwJ4KInloQI 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.
-
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. 😅
-
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 gatsbyin 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…)
-
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! 😍
-
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.
titlevsitem.data.title…Wish it was the same, for simpler Nunjucks macros with a single
itemobject with the same attributes. -
Each step of
eleventy-plugin-images-responsivertutorial 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.
-
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/LIt 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 needsIs 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?
-
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…>… -
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.linkis 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! 💪
Chris Ferdinandi
Zach Leatherman
Jérôme Coupé
Carolina Gilabert
Mark Llobrera
Mike Riethmuller
Nicolas Goutay
Bryan L. Robinson
See all tags.