What: Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same.
How: You can use media queries.
Taking My WordPress Class Online
Because of the pandemic I too have to start teaching online. I’ve been setting everything up and I’m going to track my progress and findings under the teaching online-tag. This post is about my preparations to make this class available online.
scroll-margin-top
What: CSS-Tricks just posted about this last Friday and since I could have used this that day (!) but didn’t find it until now, I’m adding a note here for myself:
You have a page with a table of contents (with links), or you have a one page website with in-page navigation and you have a fixed header — when you click a link the content scrolls up too far and is hidden by the fixed header. This is not a good user experience, and you can improve it with scroll-margin-top in Firefox and Chrome-based browsers…
Counting Down an Unordered List
What: You have an unordered list and you want to turn it into an ordered one through CSS
How: You can do this with CSS 2.1 and the counter element. Yay! I love CSS.
Hosting Assets: Do It Yourself?
I have started hosting more and more of the assets for sites, like web-fonts and JavaScripts libraries, stats, with the sites themselves instead of using a CDN / third-party service, largely because I was starting to feel squeamish about my role in helping tech giants follow you across the internet.
Always Include Widows and Orphans
What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re creating a multi-column layout.
Joy
I recently updated the links page on my personal website, something I hadn’t done in years, and there were some broken links there but I also stumbled again across entropy8.com.
Auto Sizing Font-sizes
What: Changing the font-size and the line-height based on the width of the viewport but without using media queries, to create a smoother experience (with less work).
More on Color Tools
I recently wrote about the disappearance of 0to255 and what to replace it with and today I found another very versatile tool for color: calcolor.
Writing less.
A nice old (2016) video of a talk by Heydon Pickering about writing less code. It’s smart, funny, and I agree.