In this talk, I will walk through how I built the themevitals.com website which displays web performance data by Shopify theme populated with data from HTTP Archive and CrUX. In a similar talk for the 11ty meetup, I spoke more about the static website building process. In this talk, I will focus more on what data is available in HTTP Archive and CrUX and show this example of how I use it.
Content tagged “Eleventy”
See all tags or all content.
Building a site that shows real-user web performance data by Shopify theme using HTTP Archive, the Chrome User Experience Report, BigQuery, Node, and 11ty
In this informal talk, I will walk through how I built the themevitals.com website which displays web performance data by Shopify theme. It starts by processing monthly query data, then using that data to generate SVG charts on the server side. Then, 11ty builds all the pages, rendering the data and charts in a user-friendly and accessible way.
My most popular content in 2024 was all about the web - from performance to 11ty, hosting, and the Indie Web
Did you ever notice those social media share images that automatically pop up for a site and think to yourself, "wow, it would be really cool if I could get that set up for my blog"? In this talk, Sia will show you how she uses 11ty shortcodes and Cloudinary to generate unique share images for each page and blog post on her site. (Cloudinary has a free tier that's generous enough that most personal sites fit under.)
Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! In this talk, I discuss what webmentions are and how to implement them. The code is based on an Eleventy site, but the concepts should be applicable to any site.
A lot of e-commerce solutions exist, but many of them charge a monthly fee. How could we build a site with the lowest hosting costs possible?
In episode 3 of this series, , Sia Karamalegos (@TheGreenGreek) is joining Matt Ling (@mattling_dev) from Stripe to build out an end-to-end eCommerce store selling digital goods, using 11ty, Netlify serverless functions, and Stripe. In this third and final episode you’ll learn how to leverage a Netlify serverless function to build a webhook endpoint to listen and react to payment events such as a Checkout Session completing to fulfill your orders.
In episode 2 of this series, Sia Karamalegos (@TheGreenGreek) is joining Matt Ling (@mattling_dev) from Stripe to build out an end-to-end eCommerce store selling digital goods, using 11ty, Netlify serverless functions, and Stripe. In this second episode you’ll learn how to leverage Netlify serverless functions to create Checkout Sessions using the Stripe API and collect payments from your customers.
In episode 1 of this series, Sia Karamalegos (@TheGreenGreek) joins Matt Ling (@mattling_dev) from Stripe to build out an end-to-end eCommerce store selling digital goods, using 11ty, Netlify serverless functions, and Stripe. In this first episode you’ll learn how to model a product catalog in Stripe using Products and Prices and how to query and render them using Stripe-node and 11ty.
A lot of e-commerce solutions exist, but many of them charge a monthly fee. How could we build a site with the lowest hosting costs possible? Sometimes the biggest challenge is coming up with an architecture that will work. In this talk, I will show you how I'm building an Eleventy shop for digital downloads using Stripe, Netlify, Sendgrid, and AWS. It's a sneak peek for a longer series where we will go step-by-step in the build.
Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! Eleventy is JavaScript-based static site generator that requires no client-side JavaScript, making it performant by default.
Let Cloudinary make your image management easier! In this talk, I'll show how to set up responsive images in Eleventy using Cloudinary and Eleventy shortcodes. If time permits, I'll also show how I generate social share images using Cloudinary and Eleventy.
Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! Eleventy is JavaScript-based static site generator that requires no client-side JavaScript, making it performant by default.
Want to get started with Eleventy but feel overwhelmed? Try out this pared-down tutorial
Use lite-youtube-embed in Eleventy for faster and more privacy-minded video
Learn the fundamentals behind responsive images and how to set them up in Eleventy using Cloudinary and Eleventy shortcodes
Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! In this talk, I discuss what webmentions are and how to implement them. The code is based on an Eleventy site, but the concepts should be applicable to any site.
Slides and resources from my talks at JamStack Toronto and Magnolia JS.
Setting and using data in the static site generator Eleventy
Encourage users to retweet or share a post based on whether a Tweet already exists for your blog post.
Join the Indie Web by adding Webmentions to your serverless Eleventy static site with this step-by-step tutorial. No client-side JavaScript needed!
A strategic partner you can depend on
I make websites faster, smarter, and easier to grow.
If you want someone who’s creative and precise, deeply reliable, and not afraid to tell you what’s what to get you to the next level—I’m your partner.