Blog

macOS comes with a lot of (overzealous?) security features, that are meant to prevent the average user from destroying their computer after downloading and executing random stuff from the internet, which recently got me into trouble.

I’m using Chromium for testing websites, because it’s a stripped-down version of Google Chrome that comes without many of its annoying features, like a crappy updater that permanently runs in the background and is famous for destroying your computer’s performance and battery life.

And although I’ve been a die-hard Firefox user from the first public beta, I also need to test my websites in Chrome’s engine. And as Chromium does not come with an updater, I’m using the homebrew package manager for installing and updating the browser. But because of macOS’s Gatekeeper feature, I recently could not open it any longer after updating and got the following error:

I found a solution on Reddit, which is pretty straightforward. Just enter the following line into your terminal and be happy. This basically removes the quarantine flag from the Chromium app and allows it to be opened like any signed app:

xattr -cr /Applications/Chromium.app

The other day, I stumbled across two new CSS resets by Elad Shechter and Josh Comeau and found a lot of their ideas quite interesting – although I don’t agree with everything, like I stated in a comment on CSS-Tricks. But doing a bit more research on the latest and greatest in CSS lead me to another article by Elad Shechter about the keywords unset, initial and revert, that finally helped me to understand what these really do.

Elad uses a combination of these greatly in his CSS reset for resetting all properties, while keeping the display property from the user agent stylesheet. Otherwise, it would become inline for all elements, which would be quite unhandy.

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

[…]

But the coolest thing about this is, that stuff like form elements can now be reverted to the browser’s default style on-demand, e.g.:

input[type="radio"] {
    all: revert;
}

Over the last year, I’ve been mostly working on Tailwind-based projects, and I’m starting to realize, how much of CSS’ potential we are wasting when trying to solve everything by throwing a bunch of classed to the browser. On the other hand, the CSS spec and capabilities of CSS are evolving so fast, that it is becoming harder to keep up with everything unless you are a specialist. Finding a middle ground between »smart coding« and simplicity always requires great attention – you does not gain anything from writing ingenious code that even your future self cannot understand just a few months from now. And frameworks like Tailwind often help stopping us from trying to be too smart. ;-)

Given the fact, that :where() is not supported on iOS 13 and only has global support at the time of writing this (early 2022), I will still hold back with switching from my older CSS reset. But I’m looking forward to incorporating my new learnings in the near future.

Like many other developers, I was almost offended by the idea of using Atomic CSS (aka »utility-first«) at first. But only a few thoughts later, I also realized the benefits of using such an approach, especially for things like spacing, typography and theming. I found Tachyons quite interesting, when it came out, but always saw it more as an inspiration, rather than being code that I’d actually would use in any of my projects.

For Tailwind CSS, this was already a different story. My only complaint here was, that the huge CSS bundles generated in dev mode and a giant node dependency for development were turning me off – though I have successfully used Tailwind in a larger project without many issues. Recent versions of Tailwind not come with a JIT-compiler, that only generated the classes which are actually used in one’s codebase. Now, the performance problems are gone and developing with Tailwind has almost become fun. I still don’t like how opinionated the framework is by providing a set of colors, drop shadows and typography out of the box and – worse – adds display: block to image tags by default (why?).

Another interesting project is Uno CSS, an on-demand atomic CSS generator, that behaves very much like Tailwind’s JIT-compiler. The cool thing is, that is can generate everything that other frameworks like Tailwind and Tachyons would provide using presets and tries to be more agnostic by itself. Unlike many other frameworks, it does not include any form of normalize.css or CSS reset, which makes it a great choice for existing projects. It also will only ever generate the classes that one really needs.

Anthony Fu (author of Uno CSS) has written a very extensive article about his approach to atomic CSS, that I can only recommend to everyone who’s into CSS architecture or at least mildly interested in Uno CSS and Tailwind: https://antfu.me/posts/reimagine-atomic-css

»Sticky footers« are somewhat common in web design and are a reoccurring problem to solve. A sticky footer ensures, that the page footer (copyright, meta navigation, social links etc.) sticks to the bottom of the viewport, when a page has very little content or the viewport is very tall. Because it would look quite odd, when your footer floats around mid-window.

Luckily, CSS has evolved a lot over the last years and things have become a lot easier than just a few years ago. In a recent article on CSS Tricks, I think this is the most elegant technique that I’ve come across so far (probably invented by Sílvio Rosa):

I haven’t used it in a project yet, but it seems to have less side-effects than using Grid or Flexbox. Though I must admit, that it’s actually not that intuitive, so I would always add a comment when doing something like this:

html, body {
  height: 100%;
}

body > footer {
  position: sticky;
  top: 100vh;
}

(Source: https://css-tricks.com/a-clever-sticky-footer-technique/)

There have been quite a few things that have fascinated me throughout my life, but bicycles always had a special place in my heart. Not only have I been mountain-biking since I was about 12 years old, but my trusty bike was also my primary way of getting around town during my teenage years – and made me a bit less dependent on my parents. My first MTB has been overhauled several times and is still in use – including the original ~25-year-old shifters and derailleurs. I also worked as a bicycle mechanic and salesman for almost 2 years, so I assume to understand a thing about the bike industry and the tech or two – though I must admit that I’m not an expert by any means …

read more