RWD Weekly #438
Hey everyone and welcome to week #438 of the responsive design newsletter.
It’s Christmas time which means the season of Advent blog posts are upon us again. I’ve listed my favourites below, mostly focussed around performance and UX with a dash of progressive-ness as well.
Let’s get to those links!
Headline
The State of CSS Survey
CSS is evolving faster than ever. Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS.
After the success of the annual State Of JavaScript survey, Sasha and Raphaël have decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”!
Clean advertising
Jeremy hits the nail on the head (in my opinion) in his take on advertising on the web today.
Sponsor
Visual website feedback is just a click away
BugHerd changes vague feedback and bug reports into visual, trackable tasks. Clients and team members can pin feedback directly to the web page. BugHerd adds screenshots, browser and OS information to help your team resolve feedback fast. Website feedback that’s easy to manage from one central location.
Article
New! Vitals Dashboard
Speed Curve are making it super simple for you to understand how your site is tracking against web vitals.
Why the web is such a mess
Robin Rendle posts about a recent video from Tom Scott about how the web is a mess with pop ups and advertising. Robin has some good points, and I’m certainly with him around the need for advertising on the web… but I like to think it can be created around and in support specifically for the people that contribute and build up a community.
A font-display setting for slow connections
My favourite thing about the lead up to Christmas is the all the Advent Calendar style posts that we get. This one is from PerfPlanet and looks at all the methods you can use to improve your font loading/displaying.
Minimal Takes on Faking Container Queries
If you need solutions today, most of them involve JavaScript watching what is going on (i.e. the container width) and then giving you some kind of styling hooks (e.g. classes). Here’s a quick review of the “minimal takes” landscape.
Making Virtual Events Magical
A lot of us have had to organise our own virtual events, or ones for our clients. A lot of work goes into them, but they’re different from the in person events we’re used to. This article from Viget shares some great tips around how to make your virtual event a lot more magical.
Tutorials
Creating websites with prefers-reduced-data
Even though more and more people get access to the internet every day, not all of them have fast gigabit connections or unlimited data. Using the media query prefers-reduced-data we can keep our sites accessible to everyone. This media query is part of a set of upcoming media queries designed specifically to support different user preferences and their environments. A tonne of practical uses for prefers-reduced-data with code examples in there as well.
Refactor and clean your stylesheets with CSS Overview
This short tutorial shows you how to enable CSS Overview in Chrome Dev tools and some neat benefits you can use it for.
A Calendar in Three Lines of CSS
Get a calendar layout sorted simply with a bit of display: grid;
Native Aspect Ratio Boxes in CSS thanks to aspect-ratio
With Chromium 89 (current Canary) and Firefox 85 (current Nightly) already supporting aspect-ratio unflagged, it’s time to start playing with this new addition and start thinking about dropping all those nasty hacks to mimic aspect ratios in CSS. Let’s take a look …
Resources & Tools
How to extract images (and media files) from Word and Keynote documents
One of my favourite tricks for pulling images from a PowerPoint (change the filename to zip and extract).
The Product Design Resources & Tools Database
A great set of UX resources here broken down into research, analysis, visual design, interface design, productivity and more
Slowfil.es
Demonstrate and observe slow-loading resources
SuperTinyIcons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
Finally
That’s all for this week. If you’ve come across any interesting/helpful articles or you’ve written something yourself please hit reply and let me know about them.
See you all next week!
Have a great weekend!
Cheers,
Justin.
