skip to main content

Random stuffs that May or may not interest you.

If you are like me you are probably serving your fonts from Google Fonts.
Why? Because it is one less thing to worry about when making websites (font rendering, font subsets, unicode range, font variants, font display, font discovery…).

In addition to those nifty features and sensible defaults, it was common knowledge that using Google fonts would leverage the speed and cache of their CDN. Sadly the caching argument is not true anymore.

Since Chrome v86, released October 2020, cross-site resources like fonts can’t be shared on the same CDN anymore. This is due to the partitioned browser cache (Safari has had this for years already).

This feature was added to prevent some cross-site tracking mechanism like:

  • detect if a user has visited a specific site
  • detect if a user has search for some special terms
  • track a user through multiple sites

Now is the time to say goodbye to Google Fonts 👋

It seems Firefox will ship with :focus-visible support in v85.
Chrome has been supporting it since September.

It will allow us to remove the button outline appearing when clicked without removing it for users who rely on it for accessibility.

/* Hide focus when button receives focus via mouse */
button:focus:not(:focus-visible) {
outline: 0;
}

/* Show focus only for keyboard users */
button:focus-visible {
outline: 5px solid red;
}

But as pointed out by css-tricks, we should still avoid using it since it requires a polyfill for other/older browsers and therefore adds more code and complexity to our bundles.

Plus we already have a solution for that. It’s called Accessible Design and it includes designing those focus states to be part of the website experience.

All hail the wide supported :focus.

Today is the 1st of December. It is also the day I discovered Privatezilla. A sweet tool for a quick privacy and security check of your Windows 10.

The Privatezilla logo

No more googling how to remove default apps, disabling Cortana, deleting OneDrive, blocking telemetry…

I’ll try to make this December the “improve my setup” month.

You might have resorted to a generous padding-top to avoid having a fix header overlap your page anchors. There is a less hacky way to do it now using scroll-margin-top. And it is widely supported.

Today I had some free time and cleaned up my file explorer and right click menu. It feels good to debloat your daily OS. I am now experimenting with this alternative file explorer. Will report on it later if needs be.

Tips: to remove “unremovable” item from the sidebar, search in regedit for the string IsPinnedToNameSpaceTree and change its value to 0 where needed (Dropbox, iCloud, Adobe…).

Instead of placing .catch() after my Ajax calls to mock the API, maybe consider using Mock Service Worker. I can then reuse this mock for testing, development and debugging instead of forgetting to remove the code when the backend work is done 😉

I have always disregarded the different console methods, but this article definitely brings it home. Outputting API results through console.table seems like the sensible thing to do now.

The console panel showing the `console.table`

If you ever need i18n or i10n for your static web site, Smashing Magazine wrote a nice article about it. Hint: they use service workers and some clever data files.

Webpack 5 released last month and I just had time to peak at the changelog. With it comes a new Assets module that remove the need for custom loaders like file-loader. There is a small satisfaction to removing dependencies from your package.json isn’t it?

Today I joined the CSS Grid hype train. Yeah, I am late. But hear me out.

I have been using float for a long time before I moved to flex. When you find such a malleable tool, it’s hard to try out new things as almost all layouts can be achieved with flex. But using grid, as I found out, allows you to write way less code. Bye Bye most of my @media queries and Hello auto-fill and repeat.

If you ever need to remap your bash shortcuts (advance word, kill word, kill line…) you might struggle to find the correct key sequence. From this stack exchange answer, paste the following sed -n l in bash, press your key sequence, then enter. You can also use ctrl + V, but it might not show all keys.

Tips: To see all your bindings type bind -P

Damn Zach Leatherman hits us again with a great little tool.
Speedlify joins the like of Calibre and SpeedCurve but as open-source and statically generated. Obviously it is not as feature packed as those tools but it might be enough for our use cases.

Let the 🦛 website thrive once again. A nice take on “breaking out of the mold” and going back to our crazy roots. Thanks to Max Böck for this one.

Everyone knows flexbox by now. But if like me, you only used the shorthand approach of display: flex then this article is for you. It goes in great details about flex-shrink, flex-grow but also the lesser known flex-basis. Worth a read.

Here’s my first note! I want to try this as a way of posting small, random chunks of content.