Paul Hebert
Watch Out for Layout Shifts with ‘ch’ Units
In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…
Archives
-
-
General question about synthetic performance monitoring:
How do you define the device/network settings of your tests?
- Do you use low end devices / bad network to easily detect issues?
- Or do you try to be close to your RUM data, to have more predictability when you deploy changes?
I usualy do the former, but I think both could be useful.
-
Who still thinks writing a Service Worker for basic features (performance with cache, offline fallback) is cumbersome?
Using #Workbox recipes make it so easy!
Here's the Service Worker for https://pack11ty.dev 😍
https://github.com/nhoizey/pack11ty/blob/main/src/assets/js/service-worker.js
-
Oh… you need to quickly start a new #Eleventy project on your computer?
Asuming you already have
npminstalled, here's how to use my Pack11ty starter/plugin:npm create pack11ty@latest your-project-nameEasy enough? 😁
Details on https://pack11ty.dev with other solutions for Netlify, Vercel, StackBlitz, etc.
-
My double standards about JS framework compilers
I probably need to unpack some emotional baggage from past decades of work doing ObjC,.Net, and Java client work. Those were not my favorite projects…
-
display: contents considered harmful
At this point, I don’t think we as an industry can use
display: contentswith confidence. Past actions are a good indicator of future behavior,… -
I really like to see that all browser vendors agree with @scottjehl@mstdn.social that we need
@media,srcsetandsizesfor<video>as for<img>/<picture>! 🤩 -
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
Using
object-fit: cover;in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many<source>in a<picture>? -
HTML and CSS based View Transitions are coming
While same-document View Transitions have now been available for a while in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷♂️).
-
Early Days Examples of View Transitions
All of these are page transitions, like when you leave one page and go to another. As opposed to the document.startViewTransition kind, which are…
-
Getting started with View Transitions on multi-page apps
View Transitions for MPAs are a feature that’s high on my CSS wishlist, so I got to it. It took less than an hour to do, requires zero JavaScript,…
-
TIL:
a:linkin CSS doesn't matchaelements without anyhrefattribute! 😲https://codepen.io/nhoizey/pen/dyggeOJ
It makes sense, but I never use
aelements withouthrefattributes (different from#of course), so I didn't know… 🤷♂️ -
Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!
I still wish it was much easier than dealing with
<picture>andxdescriptors for fluid images… 😞With a
<img maxdensity="2.5" …>attribute for example!If you agree, comment:
https://github.com/whatwg/html/issues/4421 -
Building a modern design system in layers
While there has been a lot written in the form of “Web Components vs. $FRAMEWORK”, you find that this is totally the wrong frame. There are a variety…
-
If someone is creating service workers with #Workbox recipes and injectManifest, a build with #esbuild, and doesn't have any issues, I'm interested! 😅
I have a very strange issue:
https://github.com/GoogleChrome/workbox/issues/3207
Bonus points if this is with #Eleventy
-
Why would anyone use the
pathpackage from npm instead of Node’spathmodule?https://www.npmjs.com/package/path
Just found it in one of my own projects, where I'm the only contributor… 😅
-
The ongoing defence of frontend as a full-time job
We truly are the shape shifters of the market. So to say that someone who is “just” a frontend developer isn’t flexible enough means first and foremost…
-
Unlike SPAs, HTMX doesn't throw away the architectural approach of REST ; it augments the browser, improving its hypermedia capabilities and making…
-
Is it ok to use Workbox's
injectManifestwith the recent recipeswarmCacheoption?I tried this without success in the Service Worker in Pack11ty:
staticResourceCache({ warmCache: self.__WB_MANIFEST, });Other caches are warmed up, not this one.
-
What makes Web Components different than JS frameworks is that they're a set of Web Standards built into the platform.
-
The intersectionality of web performance
Sure, those people almost certainly do care about the business. Who doesn’t? But they’re also humans. I feel like if really want to convince them,…
-
Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and…
-
Nick Vlku
[Algolia] introducing new developer-friendly pricing
Algolia’s freemium journey has been heralded in the developer community for many years, and today we’re doubling down. We’ve replaced the Free plan…
-
30th anniversary of licensing the Web for general use and at no cost
the 30th anniversary of the release of the World Wide Web into the public domain, for general use, and at no cost, on 30 April 1993 by CERN. This…
Dave Rupert
Eric Bailey
Chris Coyier
Dion Almaer
Christian Heilmann
Chris James
Jeremy Keith
Stephanie Eckles
![screenshot of [Algolia] introducing new developer-friendly pricing](https://res.cloudinary.com/nho/image/fetch/q_auto,f_auto,w_auto:100:384,c_limit/https%3A%2F%2Fimage.thum.io%2Fget%2Fwidth%2F1200%2Fcrop%2F800%2Fnoanimate%2Fhttps%3A%2F%2Fwww.algolia.com%2Fblog%2Falgolia%2Fintroducing-new-developer-friendly-pricing%2F)
Coralie Mercier