Jittery Scrolling

What: Jittery Scrolling, or very slow scrolling in Chrome-based browsers. It’s caused by too many paint operations when scrolling, in my particular case caused by an SVG set as a background-image with background-size: cover and background-attachment: fixed.

Read more

Media Queries for Input Devices

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.

Read more

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.

Read more

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…

Read more

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.

Read more

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.

Read more

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.

Read more

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).

Read more