Skip to main content
CSS is fun and cool and I like it.

#192: Git Tricks for Getting Yourself Out of Trouble

As amazing as Git is for handling your source code, you can certain git (lol) yourself into trouble. What if you make a change to a file and you want to get rid of the change? What if you just want to get rid of part of the change? What if you’ve already committed it? What if the commit was good but the commit message was bad? Those are just the first few that we cover in this video.

Tobias Read article “#192: Git Tricks for Getting Yourself Out of Trouble”


Winamp Skin Museum


content-visibility: the new CSS property that boosts your rendering performance

Una Kravets and Vladimir Levin:

[…] you can use another CSS property called content-visibility to apply the needed containment automatically. content-visibility ensures that you get the largest performance gains the browser can provide with minimal effort from you as a developer.

The content-visibility property accepts several values, but auto is the one that provides immediate performance improvements.

The perf benefits seems pretty big:

In our example, we see a boost from a 232ms rendering time to a 30ms rendering

Read article “content-visibility: the new CSS property that boosts your rendering performance”

Interaction Media Features and Their Potential (for Incorrect Assumptions)

The Media Queries Level 4 Interaction Media Features — pointer, hover, any-pointer and any-hover — are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user’s input device.

Read Me!


Using a brightness() filter to generically highlight content


How to Get Handwriting Animation With Irregular SVG Strokes

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms of SVG), it was near impossible to do this sort of thing with typical path animation techniques. But I found an innovative application of SVG masking to achieve this affect in matter of minutes. … Read article “How to Get Handwriting Animation With Irregular SVG Strokes”


Defining “View Source”


Modifying Specific Letters with CSS and JavaScript

Changing specific characters can be a challenge in CSS. Often, we’re forced to implement our desired changes one-by-one in HTML, perhaps using the span element. But, in a few specific cases, a CSS-focused solution may still be possible. In this article, we’ll start by looking at some CSS-first approaches to changing characters, before considering a scenario where we need to turn to JavaScript.… Read article “Modifying Specific Letters with CSS and JavaScript”


Setting up and Customizing the Ant Design System in a Nuxt App

I don’t typically work with UI libraries because they can be cumbersome and hard to override, which can contribute to a bloated. However, Ant Design has recently gained some some of my affection because it’s easy to use, has extensible defaults, and features a delicate design.

Nuxt and Ant Design work well together, in part because of Nuxt’s code-splitting and tree-shaking abilities, not to mention Nuxt’s new static target deployment option. I can serve an app using Ant Design … Read article “Setting up and Customizing the Ant Design System in a Nuxt App”