Hey everyone and welcome to week #386 of the responsive design weekly.
This week we lead off with a monster of a report that dropped this week. The Web Almanac state of the web for 2019 which goes into all kinds of aspects of the web. This isn’t the only report that we’re looking at this week either, there’s also the annual front-end tools survey results to review.
There’s also been this little event called the Chrome Dev summit which has uncovered some new performance tracking and much much more.
Right, let’s get linking!
HTTP Archive’s annual state of the web report.
Take 5 minutes to learn a practical skill with Gymnasium’s Take 5 video tutorials. Gymnasium is dropping a new video every day this month with a different theme each week — from web design to career development. What are you waiting for? Start learning!
Chris takes a look the Web Almanac’s CSS Chapter written by Una Kravetz and pulls out some of the key facts he thought were interesting. We’ve included the link to the full Web Almanac back up in the top of the email if you haven’t already clicked and read it.
The results are in from 3005 developers answering 27 questions about how they use front-end tools. Ashley does this every year and it’s always interesting to see what the wider developer community is using year on year.
I feel that most of us (certainly me) are still coming to grips with the application of variable fonts when we build sites. To me this means it’s up to us to become more familiar with how they work and the design potentials that they open up, and then showcase that to designers so that they can have it in their toolbox when designing interfaces. I also think that until variable fonts are a part of our design tools it will be a struggle.
Last week I talked about Edge having Chrome as it’s rendering engine (more or less) and that this is true for WebKit and any iOS browser. In this article Owen looks at the steps Apple are taking to literally remove as much web based technology from native apps as it can do. I’d like to think that is a performance based decision, but I feel it’s done for the same reason AMP pages get a free pass to the top of the Google results…. Apple are using their position in the market to force things to be built with their own tools.
The Google Chrome team are making UX changes to the browser to help users identify is a site is known to be slow loading. This is a great step in the right direction provided that they get the measurements right (which I’m sure they will). It’s great to see the Chrome team focussing specifically on performance as the key indicator for this, unlike the Search implementation that just looks at whether a page is AMP enabled. This is a great reason to revisit your sites performance because you can be sure that anyone that sees a “usually loads slow” message will be hitting the back button pretty quickly.
Really eye opening slides from Laura Kalbag’s recent talk at Full Frontal web conference in Brighton last Friday. If you think you know how much data is collected about you, I’m almost 100% sure you’ll find something else you didn’t know in this (I know I did)
The new :is() selector is a very interesting approach to writing CSS. The support for :is() isn’t great at the moment, but oh my isn’t CSS getting more and more interesting these days.
Calibre (a performance monitoring tool) go through all the announcements related to performance that happened during the Chrome Development Summit. They cover off some of the items we have in our resources section this week and much more.
The Brave browser has turned v1.0, now is a great time to go download it and give it a go.
For those of you that love your animations you probably have used or are using GreenSock. Well this week lots of things have changed (for the better) with their release of V3. This blog takes a look at some of the bigger and more impressive changes.
This seems so fun and simple that I feel like it’s going to be a weekend project with the kids so that they can make their own monster and — let’s face it — fart sounds.
Speaking of variable fonts in design tools…. as soon as I wrote the comments for the above link I went searching. It turns out that sketch did include its variable font capabilities back in October. Did you know that?
When building a website, understanding what’s happening with accessibility can help you make certain your site can be used by everyone. Firefox DevTools now has a new Accessibility Inspector that shows an outline of the accessibility tree, and lists problems with contrast or missing labels, and much more. Jen Simmons gives you a tour.
Setting the padding as a percentage on a variable width element will allow the design to remain within a given ratio (think a flex element or a responsive element that might grown or shrink depending on the number of items in the list or the viewport width). It turns out that the percentage isn’t based on the element itself though, but instead the parent container the element is within. Huh, I did not know that.
Tools & Resources
If you self host video on your site then I’m sure you’ve come across HandBrake before, and if not you really should. I used to use this to rip DVD’s I’d bought onto my computer to watch, and over the years I’ve continued to use it to compress video when required.
This resource provides insights about the types of things that Google recommend you should be monitoring and reporting on for better website performance. More and more acronyms to get used to including FCP (first contentful paint), FID (first input delay), TBT (total blocking time) and more.
That’s all for this week. As always thank you to those that sent through link recommendations, if you’ve come across something or have written something please send it through.
See you again next Friday.