RWD Weekly #430
Hello and welcome to RWD weekly newsletter edition 430.
This week we have two articles on how to break out into full-bleed for images/video/codeblocks while still keeping your columns widths to readable text sizes. Our feature article goes to town on CSS Variables, and there are some performance bonuses in our tutorials.
This week our feature image comes from Nils and features a nifty little slider that adds and removes lines of CSS. It’s like the ol’ CSS Zen Garden, but with layers of enhancement.
Let’s get to it!
Headline
CSS Variables 101
This is an epic introduction to just about everything you can do with CSS Variables var(–myvariable). From animations to colours, dark-modes, padding, margins, scoped variables…. Ahmad ticks every box with a good overview and great real-world example code.
Sponsor
Learn what’s next in web design
An Event Apart Online Together: Fall Summit is a 3-day web design conference with an intense focus on digital design, UX, content, code, and more—featuring 18+ in-depth sessions, live Q&A with the speakers, and one-on-one conversations with special guests. You’ll get deep insights into where the industry is now and where it is headed next. Join us online October 26-28.
Save $100 on any multi-day pass with promo code AEAOTRWD.
Article
What’s New In DevTools (Chrome 87)
One of the key reasons I initially switched over to Firefox (there are a lot of other reasons too) was the support for Grid debugging in dev tools. It looks like Chrome has come to the part for anyone that has been waiting!
Why Tailwind CSS
I’m not a fan of utility classes and although I appreciate Tailwind CSS it’s never something I can see myself reaching for. It seems this was the same for Guo Lai Ren until they built two sites using the framework, and now they’re hooked.
Do Website Policy Disclosure Pages Always Have To Be So Ugly?
My favourite Terms of Service page is the CodePen version with human readable translation like
- BYO electricity, internet, computer, web browser, etc.
- Don’t be a jerk.
Giving material.angular.io a refresh
This article looks through the recent changes on the Material Angular site. They’ve added some guides and some nice illustrations on the components area. I really like the Material design for documentation style sites.
Stop using Open Sans – Why your font choice matters
In this article Oliver will cover why your font choice matters, why Open Sans is that popular, and where to find alternatives for more diverse typography on the web.
Building Automatic Platform Optimization for WordPress using Cloudflare Workers
A Complete Guide to CSS Media Queries
AVIF image format supported by Cloudflare Image Resizing
Tutorials
I made my website 28ms faster with content-visibility
By adding content-visibility:auto to content elements on your page you can speed an already lightning fast site up even more. Better yet, your slower website will be even faster. I’m interested to hear if anyone has an negative thoughts about the application?
CSS Grid full-bleed layout tutorial
My favourite thing about this tutorial is the use of the main content area width to min(65ch, 100%) – which means which ever value is smaller, 100% or 65 characters, make that the width of the content column.
Full bleed layout using simple CSS
Another solution to hit full bleed widths on certain page elements without having to lay out your site using Grid (side note: grid is still a great way to lay out up your site).
WordPress, Gutenberg, and Tips for ACF Blocks
It’s been a long time since I’ve had to do any custom development on my personal projects, but I’m looking to overhaul all my work on the RWD site to make it all Gutenbergy. This is certainly one of the posts i’ve bookmarked, especially Dave’s self registering block script.
Events
Performance Psychology, and Optimisation Experiments
Simon and Andy are taking the virtual stage next week for some performance talks. I used to miss these when we used to commute to and from work (remember those days), but I’m really looking forward to getting my performance on again! .
