#168

? Notes from around the web

Responsive tables are a tricky thing to get right, but Bradley Taunt shows a few quick ways to make tables responsive with minimal CSS. Bradley shows how we can let folks scroll around the table with overflows, or how we can use CSS to make each table row into a card like this:

It’s a nifty trick similar to the one that Chris shared back in 2011 and it shows just how difficult it can be to get these tables working right for everyone and on every device.


“So much of modern web development is built around JavaScript,” begins Chris Ferdinandi’s book, The Lean Web. “We’re sacrificing initial page load performance—our user’s first impression with our site or app—for the hopes of faster page loads later. I’m not so sure that trade-off is worth it.”

The Lean Web is infinitely quote-worthy and is certainly worth checking out as Chris questions modern day best practices for web performance and how we could be doing a better job in that department overall. It’s definitely worth saving for the weekend.


VisBug is a brilliant Chrome extension that’s designed gives designers a way to debug and understand the styles of a website. Here’s an example of how it illustrates the accessibility of content just by hovering over it:


Amelia Wattenberger made this outstanding demo that scrapes through a dataset about which countries are eating the most apples, coconuts, soybeans, etc. And it’s pretty gosh darn beautiful, too:

This reminds me that it’s absolutely worth checking out Amelia’s data-vis article on the subject of what makes a country “good,” In that post, she breaks down each country by a series of attributes and measurements of success and shows them in this absolutely gob-smacking interactive chart:

I wish I had something smart to say about this, but: woof!


? From the blog

Images are not static content

The ImageEngine team looks at the complexity of serving the right image to the right device at the right time. Thankfully there are a bunch of tools out there, such as ImageEngine itself, which explores and shows how images can be optimized for everyone.

The rest of the post walks us through an audit of a catalogue website with Lighthouse:

ImageEngine shows how they made the time to interactive speed 1.7 seconds faster, which is an enormous amount of time, just by taking care of the images. And without that much time and energy, too.


Recipes for Performance Testing Single Page Applications in WebPageTest

Speaking of web performance, Nicolas Goutay looks into why gathering performance metrics for single page applications can be such a pain and gives us all a few ways to tackle the problem. Here’s one problem of measuring performance in an SPA:

…client-side routing means that the server has no role in navigation. Thus, hitting a URL directly would significantly slow down the measured performance (because of the time it takes for the JavaScript framework to be compiled, parsed and executed), a slowdown that the user does not experience when changing pages.

The secret magical solution to all this? WebPageTest scripts. With a little bit of work mastering the WebPageTest API we can ensure that the service would experience the app just as a regular user would. And then we can print helpful waterfall charts like this:

And up until recently, this has been sort of a pain when it comes to building something like a giant React app.


The Teletype Text Element Lives On… at Least on This Site

Here’s an interesting bit of web history: the <tt> HTML element was originally designed to set text in a monospaced font but over time it fell out of fashion and now it’s likely to be entirely deprecated any day.

I like this post from Chris though because he mentions that he hadn’t heard of the <code> element in the early days of CSS-Tricks and would mistakenly use <tt> instead.

But Chris writes:

I bring this up just because it’s a funny little example of not knowing what you don’t know. It’s worth having a little sympathy for people early in their journey and just doing things that get the job done because that’s all they know. We’ve all been there… and are always still there to some degree.

I think we can all be a little more careful on this front. Everyone is learning and there’s so much to learn when it comes to front-end!


Some Hands-On with the HTML Dialog Element

Chris explores the ever so fancy <dialog> element that lets us create modals with nothing more than a tiny bit of HTML. The great thing about this is that it’s got all that tricky accessibility stuff built into it as this GIF of Chris using it with VoiceOver shows:

The problematic part of all this is that browser support isn’t too swell right now — but it’s exciting nonetheless! There’s a handy polyfill available if you want to ship this to production today.


Clipping, Clipping, and More Clipping!

Clipping paths in CSS can be extraordinarily helpful for making interesting bits of UI, animations, and transitions. Here’s one example that Mikael Ainalem showcases in this post that I think is super nifty:

Mikael writes:

I’m using clip-path transitions in this demo. It’s used to zoom in from one clipping path covering a tiny region going into another huge one. The smallest version of the clipping path is much smaller than the resolution — in other words, it’s invisible to the eye when applied. The other extreme is slightly bigger than the viewport. At this zoom level, no cuts are visible since all clipping takes place outside the visible area. Animating between these two different clipping paths creates an interesting effect. The clipped shape seems to reveal the content behind it as it zooms in.

Mikael also makes a demo with a brilliant mobile UI navigation pattern that includes a clipped overlay that can change the color of an illustration, creating this rather charming toggle background effect:

These tiny animations make all the difference and I reckon they make the feeling of clicking something that more predictable and trustworthy. At least in the example of the toggle above. I love that little guy so much.


SPONSOR

Netlify

A big shout out to Netlify for sponsoring this week’s newsletter! We use and love Netlify around here at CSS-Tricks and have used it on some of our own projects. It’s super fast to set up a new site with a GitHub workflow and deploy updates with continuous delivery that triggers when commits are pushed to your production branch.

Best yet, there’s a free tier. Try it now and deploy a site in seconds. 🚀


SPONSOR

axe Pro

Friends don’t let friends ship inaccessible code. You have the power to stop excluding people with disabilities from using your website. Start your automated and guided accessibility audit with axe Pro.
Catch your defects in DevTools using axe, send us some feedback so we can make the tool better and we’ll send you a sweet t-shirt.

Give it a try!