RWD Weekly #377
Hello again and welcome to week 377 of the RWD Weekly.
This week we see Smashing Magazine turn 13, I explain why you don’t really need any of the top 10 best CSS Frameworks (and why you might), how 5G is going to slow the internet for most of us and some brilliant magazine layouts using CSS Grid (and more).
Headline
Smashing Magazine Is Thirteen!
Congratulations on 13 years of making the web a better place. I remember when I first came across Smashing back in ’09 and I’ve read almost every article and book in the ten years since then.
Here’s to another 13 (and more!), and for that to happen I recommend you joining as a member and contributing a few dollars a month to a resource that is second to none in our industry.
Article
10 best CSS frameworks in 2019
In 2019 I would encourage you to (I thought demanding would come on a little too strong) to use both Flexbox and CSS Grid for your layouts in any project, be it a side project or working on a production site.
What these frameworks can still offer is a series of common modules that you use on your sites which may be more helpful.
If you’re using these frameworks for their grid, don’t (or at least give CSS Grid a try).
Automatically compress images on Pull Requests
Calibre’s new GitHub Action allows you to compress raster images with minimal setup automatically. Never ship unoptimised graphics again.
sitespeed.io 10.0
My favourite (but more difficult to implement) performance tool has turned 10 (versions old, not years) along with Browsertime turning 6. They’ve incorporated more metrics using Chrome 77 and incorporated Safari OSX/iOS testing as well as other improvements.
5G Will Definitely Make the Web Slower, Maybe
While the estimate for download speeds on 5G range between 100Mb to 1Gbit per second (holy crap) it won’t happen overnight. First of all, you need to build towers for 5G which are not that prevalent at the moment, and secondly, we need the phones that support it. Not only isn’t it available on the latest and greatest iPhone, but only a small percentage of people in the world have the money to afford one while everyone else will be left downloading the 5Mb pictures of salad bec
The Curious Case of the Render Blocking Resource
Beware the CDN hosted assets on your sites
Kerning & Ligatures in Letterspaced Type
An overview of when you can/should do each of these options with type on the web, and a codepen to go along with it.
Tutorial
Using Custom Properties to Wrangle Variations in Keyframe Animations
CSS Custom Properties can be applied to keyframe animations to produce customisable animations using the same animation code. This example replaces the scale value within the animation keyframe with custom properties, which in turn can then be set on the element that has the animation applied. Confusing? Read the tutorial and it’ll make perfect sense.
Create auto-sized columns using CSS Grid
Quick and dirty tutorial on twitter from CodyHouse on creating auto-sized columns using CSS Grid
Machine Learning For Front-End Developers With Tensorflow.js
Learn how to get started using Tensorflow.js and bring some artificial intelligence (read: machine learning) into the projects that you develop. Charlie has already built some pretty cool projects including a webcam powered street fighter game where you make the moves you want your character to perform
Tools & Resources
lighthousebot
This tools will actually fail your PR if your commit changes your lighthouse score for the worse.
Image Actions in GitHub
Automagically optimise your images during GIT Pulls using this git action from Calibre App (performance monitoring
Finally
CSS Grid: Magazine Layouts
I love the range of layouts that you get in this CodePen. The first page is the most straight forward and least impressive, but then it gets better and better as you go on.
——————-
That’s all for this week, see you again next Friday.
Cheers
