AMP is a symptom that someone, somewhere, thinks the web is failing so badly (so slow, so unresponsive) for a portion of the world that they want to take all the content and package it back up in a sterile, un-webby, branded box. That makes me so sad. PWAs, to me, are a potential treatment.
A great collection of learned lessons from implementing service workers.
I really, really like it when people share their own personal experiences and “gotchas!” like this.
Bram hopes for a way to define aspect ratios natively in CSS. We can sort of manage it now, but all the solutions are pretty hacky.
A look at the feedback needed for a slider control that feels “right”.
You can get most of the behavioural (though not styling) suggestions in HTML by doing this:
<form>
<input type="range" min="0" max="100" value="50"
onchange="amount.value=this.value"
onmousemove="amount.value=this.value">
<output name="amount">50</output>
</form>
Form validation taken to the extreme. If you want to know more about how it was done, there’s an article explaining the markup and CSS.
I think Chris is on to something here when he identifies one of the biggest issues with CSS growing out of control:
The developers are afraid of the CSS.
A handy tool with some pre-made CSS clip paths that you can then tweak to your heart’s desire.
Mike examines the real power of CSS custom properties compared to Sass variables—they can change at runtime.
I’m convinced that in almost all cases, responsive design logic should now be contained in variables. There is a strong argument too, that when changing any value, whether in a media query or an element scope, it belongs in a variable. If it changes, it is by definition a variable and this logic should be separated from design.
A great one-page intro to microformats (h-card in particular), complete with a parser that exports JSON. Bookmark this for future reference.
A really great introduction to web components by Monica. But I couldn’t help but be disheartened by this:
Web components tend to have dependencies on other web components, so you need a package manager to herd all them cats.
For me, this kind of interdependence lessens the standalone nature of web components—it just doesn’t feel quite so encapsulated to me. I know that this can be solved with build tools, but now you’ve got two problems (and one more dependency).
Dave muses on the challenges of maintaining a pattern library:
- Rolling out a Pattern Library is infinitely harder than building one.
- If you don’t have pages, it’s doesn’t solve the problem.
- Vertical spacing will make or break you.
- The Pattern Library is dead if it’s not prioritized.
A simple little tool for figuring out which keys map to JavaScript keycodes. This’ll save me some googling.
Charlie conducts an experiment by living without JavaScript for a day.
So how was it? Well, with just a few minutes of sans-javascript life under my belt, my first impression was “Holy shit, things are fast without javascript”. There’s no ads. There’s no video loading at random times. There’s no sudden interrupts by “DO YOU WANT TO FUCKING SUBSCRIBE?” modals.
As you might expect, lots of sites just don’t work, but there are plenty of sites that work just fine—Google search, Amazon, Wikipedia, BBC News, The New York Times. Not bad!
This has made me appreciate the number of large sites that make the effort to build robust sites that work for everybody. But even on those sites that are progressively enhanced, it’s a sad indictment of things that they can be so slow on the multi-core hyperpowerful Mac that I use every day, but immediately become fast when JavaScript is disabled.
Your website’s only as strong as the weakest device you’ve tested it on.
A great description of one of the most powerful features in CSS Grid.
This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.
If you use the ProcessWire Content Management System, Johannes has written a handy plug-in that allows you to specify which files should be cached by a service worker.
The really nicely documented design system for Lost My Name.
They’ve also written up the process of creating the design system which includes a refreshingly honest account of missteps made along the way—very valuable!
Of all the sites to pick to demo progressive web apps, we get the cesspit that is Hacker News …I guess it is possible to polish a turd.
Anyway, here are some examples of using frameworks to create alternative Hacker News readers. So the challenge here is to display some text to read..
Four of them render absolutely no content without JavaScript.
In the Hall of Shame we have React, Preact, Angular, and Polymer.
In the Hall of Fame, we have the ones doing it right: React, Vue, and Viper.
That’s right: React appears in both. See, it’s not about the tools; it’s about how you use ‘em.
A really great overview of using prefers-reduced-motion to tone down CSS animations.
This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!
It’s no substitute for testing with real devices, but the “device wall” view in this Chrome plug-in is a nifty way of getting an overview of a site’s responsiveness at a glance.