Page Inspect

Tobias Ahlin

Tobias Ahlin

- Overview
- Blog
- Tutorials

Moving Letters TypeSource SpinKit

#

# Tobias Ahlin Bjerrome

## I design, tinker, & teach.

## Blog.
# Responsive type scales with composable CSS utilities
Read more

With the help of calc(), clamp() and CSS vars, we can create composable, responsive, and fluid type scales that smoothly adapts to viewport and container widths.

# Hiding empty elements with CSS :empty and :has()
Read more

You might be used to toggling classes on elements to handle state styles. What if we could just write CSS that reflected the state of the DOM?

# Selecting previous siblings with CSS :has()
Read more

Selecting a previous sibling was for long impossible, but is now a breeze with the has() pseudo-class

# A brief introduction to A/B-testing
Read more

Learn how to use A/B-testing as a guiding compass for making product decisions, and how to avoid its pitfalls

# Chaining styles with a JavaScript Proxy
Read more

If you miss method chaining from Ruby or jQuery when working with styles in JavaScript, you can recreate the pattern with a few lines of code

# Smoother & sharper shadows with layered box-shadows
Read more

Default

Smooth

With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects

# Cheat sheet for moving from jQuery to vanilla JavaScript
Read more



This reference guide will help you convert jQuery's most common patterns to vanilla JavaScript

# Breaking to a new row with flexbox
Read more



You can break to a new flexbox row or column without setting the size of an item: add a collapsed flex item between two flex items

### Read all posts

I write about design, CSS, animation, and the projects that are keeping me busy.

## Projects.
View project### SpinKit

Nobody likes to wait… but you can make it less of a pain. I've created **SpinKit**, an open-source collection of loading spinners animated with CSS.

View project### Moving Letters

If you want more playful and expressive typography, I've created an open-source collection of text effects animated with JavaScript and anime.js.

View project### Typesource

I created **TypeSource** as a way to browse web fonts by how they look and feel, rather by their name and attributes.

## Work.

View project### GitHub

I work as a Design Engineer at GitHub, working on our brand, GitHub.com, Mona Sans, and more.

View project### Minecraft

As the **Experience Design Director** at **Minecraft** I worked with the team at **Mojang** to overhaul their UI infrastructure and design and iterate on new and old Minecraft games.

View project### Spotify

Early on at Spotify I lead the UI design for all products and worked with building the design team.

## Say hi.

hello@
tobiasahlin.com

I love to design and make things. I used to make things at Spotify and Minecraft, and am currently a design engineer at GitHub. Say hi!

Tobias Ahlin Bjerrome
Stockholm, Sweden