Table des matières
1 - Headless CMS
2 - SEO
3 - Sur EleventyJS
Plugins
- Eleventy - Images Responsiver
- Eleventy - Helmet
- Eleventy - Schema
- Eleventy - plugin blog
- Eleventy - Svg contents
- Eleventy - Mindmap
- Eleventy - Monetization
- Eleventy - Mordred - Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
- Eleventy - img
- Eleventy - Drop Cap
- Eleventy - Critical CSS
- Eleventy - SCSS
- Eleventy - TOC
- Eleventy - Caniuse
- Eleventy - external links transform
- Eleventy - Prismic
- Eleventy - Plugin SEO
- Eleventy - Copy local assets
- Eleventy - SVG sprite
- Eleventy - MDX
- Eleventy - Footnotes
- Eleventy - Shopify
- Eleventy - Vite
- Eleventy - Lit Web Component
- Eleventy - Clean urls
- Eleventy - unfurl
- Eleventy - Metagen Eleventy - Navigation
=> Eleventy Plugins list - All the Eleventy things by David Darnes
Thèmes
- Xity Starter
- Bymattlee
- Eleventy - Webpack
- Eleventy high performance blog
- Twelvety
- Minimal 11ty Starter
- 11ty Netlify Jumpstart
- Fundamenty
- Smix
- A high-performance blog template for 11ty
- Eleventy Duo
- 11up
- Adding SEO tags to Eleventy
- News-Blog template
Tips
- Youtube Code fo Eleventty for Netlify
- Including RSS Content in your Eleventy Site
- Customizing File Structure, URLs and Browsersync
- Generate Social Image Covers With Eleventy And Node-Canvas
- Dynamically choosing a data file to use in Eleventy templates
- Configuring Web Fonts in 11ty with Global Data
- Eleventy 1.0 - Dynamic Ignores
- Lazily Loading Images with the 11ty Image Plugin
- Cache busting in Eleventy
- Simple 11ty cache busting
- Eleventy Introduction
- Generate Twitter cards automatically
- Eleventy Error Overlay
- Not found
- Nunjucks filter for img lowsrc
- Add a Static Directory to an Eleventy Project
- 11ty.recipes
- Customizing 11ty Blog
- Keep data cache
- Get Tag List
- Cache on netlify
- Use Kirby as CMS
- Eleventy: Date Output
- Setup social sharing previews, SEO, and favicons on Eleventy
- Accessible Emojis with 11ty
- Integrate Pocket in Eleventy
- Javascript Data Files and You by Bryan Robinson
- Building an Image Gallery with CSS Grid and PhotoSwipe
- Don’t Shut Down Your Business! Instead Use Eleventy Image
- Quick Tips
- 11ty Web Component Generator
- Use Eleventy Templating To Include Static Code Demos
- Image plugin for easy optimization
- Using 11ty JavaScript Data files to mix Markdown and CMS content into one collection
- Binding behaviour to HTML with Web Components as Progressive Enhancement
- 11ty IIIF Manifest Generator tool
- Structuring Eleventy projects
Ressources
- Building a design system with Eleventy
- Eleventy Previews
- Nord
- Creating Both HTML and API with Pipedream
- Show off your Lighthouse scores as static HTML in Eleventy with the PageSpeed Insights API
- A Google Static Maps Eleventy Plugin
- Show off your Lighthouse scores as static HTML in Eleventy with the PageSpeed Insights API
- Eleventy For IndieWeb Enthusiasts - Basic Setup And Post Organization
- Eleventy and Github pages
- Eleventy 1.0 - Global Data via Plugins Example
- demo-eleventy-serverless-oauth
- Eleventy 1.0 - Upgrading Experience
- Building a notification thingamajig with Eleventy data
- Architecting data in Eleventy
- How I Create an Article Series in Eleventy
- Encapsulated Eleventy/Nunjucks components with macros
- I Finally Understand Eleventy’s Data Cascade.
- Running Staticman on Netlify Functions
- Leveraging 11ty in Healthcare
- 11ty + Nunjucks
- How we build the site and use Web Components - web.dev
- Architecting data in Eleventy - dev.to
- Eleventy: Paired Shortcodes and Markdown Rendering - Dirtystylus
- Testing My Eleventy-Website With Cypress and Netlify - Martin Schneider
- SofaConf 2020 - a technical write-up - Clearleft
- A Return to Progressive Enhancement with LitHtml and
11ty(@eleven_ty) - Bryan Wilhite - Eleventy benchmark/bench.sh results for WIP patches
- Snowpack + Eleventy + Sass + PostCSS
- Beginner’s Guide to Eleventy [Part I] - Tatiana Mac
- Easily Use Design Tokens In Eleventy - Heydon Pickering
- Using Agility CMS and Eleventy for simple JAMStack tasks
- Building a Static API with Eleventy - Cobwwweb
- Embed everything
- Eleventy contributors - Zach Leat
- Building a Turnkey Fundraising Mini-site with Foxy and Eleventy - Foxy
- Building and maintaining components from utility classes in Eleventy - Christopher Kirk-Nielsen
- Add DuckDuckGo-powered search to your website - Marc Amos
- Eleventy and Github pages - Lea Tortay
- Adding Algolia Search to Eleventy and Netlify - Raymond Camden
- How to Enable your Jamstack Site to have a “Rain Day” - Raymond Camden
- How Paradigma Digital switched from Wordpress to Strapi and Eleventy
- Building a Blog with 11ty and Strapi
- Performant data fetching with promises and Eleventy
- Do I Need a CDN for My Personal Website?
- Build An Eleventy (11ty) Site From Scratch
- Creating a production-ready Eleventy project with webpack, Babel and Sass
- How to use 11ty with TakeShape
- Collected notes as a CMS
- How to get started with the 11ty (Eleventy) Blog Starter
- Building a Blog With 11ty and WordPress
- Web components and eleventy
- Create a Plugin for 11ty
- How the heck do I use Eleventy? The intro guide I wish I had
- Eleventy: RSS Feeds and Front Matter Data
- Eleventy and Vue, a match made to power Netlify.com
- Getting Started with Eleventy
- How I got started with 11ty
- 11ty Rocks!
- Add YouTube playlists to your Eleventy site
4 - Sur Hugo
Documentation
Articles
- https://ma.ttias.be/adding-a-sticky-table-of-contents-in-hugo-to-posts/#styling-the-table-of-contents
- https://jonyablonski.com/articles/2020/simplified-development-workflow/
- https://sebastiandedeyne.com/how-to-schedule-posts-with-hugo-netlify-and-github-actions/
- https://pawelgrzybek.com/webp-and-avif-images-on-a-hugo-website/
- https://acanalis.github.io/post/concepts-of-hugo/
- https://blog.cavelab.dev/2021/01/hugo-aliases-to-firebase-redirects/
- https://www.thenewdynamic.com/article/hugo-module-netlify-redirects/
Thèmes
Modules
- https://jamstatic.fr/2020/09/05/tout-savoir-sur-les-modules-hugo/
- https://gitlab.com/neotericdesign-tools/hugo-content-module-style-guides
- https://www.thenewdynamic.com/note/develop-hugo-modules-locally/
- https://www.hugofordevelopers.com/articles/master-hugo-modules-managing-themes-as-modules/
Books & PDF
- E-books with Hugo
- github.com/weitblick/epub/
- PDF Book Exporter - A CLI tool to export eBooks written in Hugo markdown to PDF
- Hugo PDFThis shortcode allows you to add PDF file to your pages using browser native PDF renderer.
- Exporting Hugo to PDF
- Professional PDF Book Exporter: Export Hugo Markdown Books to PDF
5 - Sur la low-tech web
L’analyse du cycle de vie (ACV)
Pour introduire la Low-tech, intéressons nous à la question de l’ACV.
Qu’il s’agisse d’un bien, d’un service, voire d’un procédé, toutes les étapes du cycle de vie d’un produit sont prises en compte pour l’inventaire des flux, du « berceau à la tombe » : extraction des matières premières énergétiques et non énergétiques nécessaires à la fabrication du produit, distribution, utilisation, collecte et élimination vers les filières de fin de vie ainsi que toutes les phases de transport.
Ce qui faut retenir :
L’empreinte d’un site web n’est pas déconnecté du monde matériel. Son existence se justifie à condition de s’inscrire dans un circuit complet en relation avec un service, un usage…
Notion de “Scopes” :: émissions de gaz à effet de serre (GES)
- Scope 1 :: GES directes
- Scope 2 :: GES indirectes - consommation d’énergie
- Scope 3 :: GES indirectes - matières premières
Lire :
- https://www.boavizta.org/media/pages/blog/empreinte-de-la-fabrication-d-un-serveur/984471cb9f-1640269351/scopesms.png
- https://github.com/Boavizta/environmental-footprint-data/blob/main/boavizta-data-us.csv
- https://www.boavizta.org/media/pages/blog/empreinte-de-la-fabrication-d-un-serveur/36488b4bfa-1637600134/acvademe.jpeg
Ce qui faut retenir :
Les notions d’empreinte d’un service web s’attachent le plus souvent au Scope 1 (la consommation d’électricité pour lire le site web).
Seulement, il faut aussi considérer en pratique, la consommation du serveur et des routeurs réseaux (en fonction de son mix énergétique) Scope 2 ; et plus précisément de toute l’énergie nécessaire pour produire le matériel servant à son hébergement, consultation… Scope 3. Les questions de Scope 2 et Scope 3 sont souvent compliquées à établir car elles sont partagées avec d’autres services.
Empreinte carbone
L’empreinte carbone d’une activité humaine est une mesure des émissions de gaz à effet de serre d’origine anthropique, c’est-à-dire qui peuvent lui être imputées.
Elle est mesurée en équivalent CO2. L’équivalent CO2 est, pour un gaz à effet de serre, la quantité de dioxyde de carbone (CO2) qui aurait la même capacité à retenir le rayonnement solaire.
Lire :
- https://www.greenit.fr/etude-empreinte-environnementale-du-numerique-mondial/
- http://gauthierroussilhe.com/post/explication-empreinte.html - http://gauthierroussilhe.com/img/blog-ecoconception-01.svg
- https://climateactiontracker.org/media/images/CAT-2100WarmingProjectionsGraph-PNG-2021.11.original.png
- https://www.materialepyramiden.dk/#
Ce qui faut retenir :
Il est possible de faire des estimations au niveau mondial sur l’empreinte carbone du numérique. On peut considérer que le numérique permet de réduire l’empreinte de certains secteurs de l’économie en optimisant des circuits.
Seulement, le modèle marchand tentant de maximiser les profits, nous observons la mise en pratique du paradoxe de Jevons (effet rebond). Pour limiter l’impact, il convient donc de se poser la question de l’intérêt des outils, dans le temps, que nous produisons pour les sociétés humaines.
Référentiels d’éco-conception
Lire :
- https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/
- https://institutnr.org/le-referentiel
- https://www.24joursdeweb.fr/2021/le-rgesn-rejoint-le-rgaa-et-le-rgpd-pour-un-numerique-responsable/
Notion de Low-Tech web
Le Low-Tech Lab
Lire :
Ce qui faut retenir :
- Utile : Une low-tech répond à des besoins essentiels à l’individu ou au collectif.
- Accessible : La low-tech doit être appropriable par le plus grand nombre.
- Durable : Éco-conçue, résiliente, robuste, réparable, recyclable, agile, fonctionnelle.
Web Low-Tech
3 pistes sur l’écoconception de Gauthier Roussilhe http://gauthierroussilhe.com/post/ecoconception-critique.html :
- On doit réduire l’empreinte environnementale du service, qu’il soit numérique ou non ;
- On doit répondre avec pertinence aux besoins exprimés par les usagers ;
- Il faut partir du principe que la numérisation n’est pas forcément la meilleure option pour répondre aux deux premiers points.
Lire :
- https://solar.lowtechmagazine.com/fr/2015/10/how-to-build-a-low-tech-internet.html
- https://solar.lowtechmagazine.com/fr/2018/09/how-to-build-a-lowtech-website.html - https://zestedesavoir.com/billets/2839/comment-fabriquer-un-site-internet-a-basse-technologie/
- https://opensourcelowtech.org/tutorials.html
- https://acailly.github.io/confs/low-tech-web/lowtechweb-remoteclazz.pdf
Ce qui faut retenir :
La Low-tech web ne peut pas se dissocier d’une prise en compte de l’ACV du site web. Toute démarche ne concernant que l’aspect visuel, navigateur… opère des actions optimisations.
Internet Low-Tech
Lire :
- https://journals.openedition.org/tc/8489
- https://usbeketrica.com/fr/article/internet-est-mort-vive-l-internet-low-tech
- https://www.le-projet-olduvai.com/t10293-comment-construire-un-internet-low-tech
- https://longuevieauxobjets.gouv.fr/
Ce qui faut retenir :
Pour qu’un site web soit considéré comme Low-Tech (Utile, Accessible, Durable), il convient de prendre en compte un grand ensemble de conditions, de consultations : faible réseau, intermittence électrique, périphériques peu puissants, ressources financières faibles pour la maintenance…
Design Low-Tech et éco-conception
Pour le moment, les grands exemples de sites sobres se démarquent pas une interface typée Low-tech : images dégradées, couleurs passées, peu d’illustrations.
Pourtant, un site peu avoir une très faible empreinte et avoir un aspect
Lire :
- Avenir site Low-Tech https://graphism.fr/quel-avenir-pour-les-sites-low-tech/
- La méthode C.O.E.U.R. https://www.lunaweb.fr/blog/atelier-ideation-eco-conception/
- Designer éthiques : https://static1.squarespace.com/static/6071fa745947937fc933ecbb/t/60a02725893d22758a6207c5/1621108519636/Giving-a-damn-about-accessibility.pdf
- https://www.webdesignfortheplanet.com/eco-conception-web-3-exemples-de-pros/
Exemples
Consulter :
- https://design.numerique.gouv.fr/
- https://commown.coop/
- https://lte.fairness.dev/
- https://www.pikselkraft.com/en
- https://homebrewserver.club/low-tech-website-howto.html#software
- https://lowww.directory/
- https://www.f-f-p.org/
- https://www.dalkia.fr/
Tour d’horizon de la Low-Tech
Pour aller plus loin sur le sujet, voici des ressources sur la dynamique Low-Tech
- Une climatisation écolo : https://www.franceculture.fr/economie/leviathan-dynamics-une-climatisation-ecolo-sans-gaz-fluore
- Récupérateur de chaleur : https://wiki.enerlog.fr/doku.php?id=espace_public:chauffage_solaire:tuto_csa:etape_3
- Tierce forêt : https://www.youtube.com/watch?v=KE-hSk5K0Co
- Adiabatic urban cooling : https://www.designboom.com/technology/arep-adiabatic-urban-cooling-system-12-05-2021/
- La ville Low Tech (Adème) : https://librairie.ademe.fr/urbanisme-et-batiment/5219-la-ville-low-tech.html
- La méthode Miyawaki (végétation) : https://vert.eco/articles/en-jordanie-la-methode-miyawaki-senracine-pour-reverdir-le-moyen-orient
- La ville low tech : https://www.bouygues-construction.com/blog/fr/dossier-special/ville-low-tech/
- Low-tech en rénovation énergétique (BD) : https://programmeprofeel.fr/ressources/low-tech-en-renovation-energetique-la-bande-dessinee/
- Pour des métropoles low-tech et solidaires https://www.lelabo-ess.org/system/files/2022-02/2022%20-%20Low-tech_WEB.pdf
- Avec la low-tech, penser et agir par-delà la technique https://theconversation.com/avec-la-low-tech-penser-et-agir-par-dela-la-technique-185184#Echobox=1665087524
6 - Sur la performance web
Articles
- Performance-Optimized Video Embeds with Zero JavaScript
- Improving SVG Runtime Performance
- Optimize Cumulative Layout Shift - web.dev
- Is it time for a Web Performance rebrand? - Simon Hearne
- Prioritizing users in a crisis: Building the California COVID-19 response site
- User-centric performance metrics - web.dev
- Testing Behind Consent - Simon Hearne
- Everything You Have to Know About Core Web Vitals - Calibre
- [Loading web pages fast on a $20 feature phone - Addy Osmani](<https://dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6)
- Visualising Front-End Performance Bottlenecks - Richie McColl
- Let’s talk about TTFB, CrUX, and CMS + Hosting performance
- How to Add Web Vitals to Google Analytics and Reveal a New Search Ranking Signal - Noise to Signal
- Is WebP really better than JPEG?
- We need more inclusive web performance metrics - Filament Group
- Why you should be testing your 404 pages web performance
- Quel type de contenu intégré sur une page ralentit le plus son chargement ?
- How to Improve Largest Contentful Paint (LCP) and SEO
- Strengthening the Link Between Site Speed and Business Outcomes
- Cumulative Layout Shift in Practice
- The Core Web Vitals hype train
- Testing priority hints with WebPageTest
- Ecommerce Core Web Vitals Study
- Cumulative Layout Shift Study of Over 1 Million Websites
- Measuring Web Performance in 2021: The Definitive Guide
- Optimizing Web Vitals using Lighthouse
Ressources
- https://boris.schapira.dev/assets/images/2020-06-04/synthese.png
- https://github.com/addyosmani/puppeteer-webperf#largest-contentful-paint
- https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting
- https://blog.bitsrc.io/performance-analysis-tools-for-front-end-development-a7b3c1488876?gi=3ea70890bef2
- https://almanac.httparchive.org/en/2020/
- https://www.voorhoede.nl/en/blog/building-a-client-side-proxy/
- https://web.dev/bfcache/
Measure
- https://web.dev/chrome-ux-report-data-studio-dashboard/
- https://css-tricks.com/recipes-for-performance-testing-single-page-applications-in-webpagetest
- https://dev.to/victormagarlamov/performance-measuring-12nj
- https://web.dev/chrome-ux-report-api/
- https://nextjs.org/docs/advanced-features/measuring-performance
Tools
- Perf Track
- Netlify-minutes
- Security Headers
- https://tools.keycdn.com/curl
- Crux Run
- Glyphhanger
- Fastorslow
- Crux benchmarking
- Speedlab
- PageSpeed Compare
- Google Lighthouse Budget Generator
- EStimator
- Layout Shift GIF Generator
- Pagespeed Compare
- Lighthouse Parade
- GreenIT-Analysis
- Site Speed
- Free Google Page Experience Checker - Cloudways
- Lighthouse Metrics
Github
- https://github.com/pocketjoso/specificity-graph
- https://github.com/patrickhulce/third-party-web
- https://github.com/dwisiswant0/findom-xss
- https://github.com/remorses/actions-cli
- https://github.com/mandatoryprogrammer/CursedChrome
- https://github.com/Zizzamia/perfume.js
- https://github.com/GoogleChrome/web-vitals/
- https://github.com/WPTbot/WPTbot
- https://github.com/tsenart/vegeta
- https://github.com/treosh/web-vitals-reporter
- https://github.com/philhawksworth/virtual-lolly/blob/master/plugins/track-latest/index.js
- https://lightest.app/c/moDs01S3Ng