Skip to main content
Fresh Article

Painting With the Web

Matthias Ott, comparing how painter Gerhard Richter paints (do stuff, step back, take a look) to what can be the website building process and what can wreck it:

[…] this reminds me of designing and building for the Web: The unpredictability, the peculiarities of the material, the improvisation, the bugs, the happy accidents. There is one crucial difference, though. By using static wireframes and static layouts, by separating design and development, we are often limiting our ability to have that

Read article “Painting With the Web”

A Microsite Showcasing Coding Fonts

We made one! It’s open source if you want to make it better or fix things.

There are quite a few purpose-built fonts for writing code. The point of this site is to show you some of the nicest options so you can be aware of them and perhaps pick one out to try that suites your taste.… Read article “A Microsite Showcasing Coding Fonts”


How to Add Text in Borders Using Basic HTML Elements

Some HTML elements come with preset designs, like the inconveniently small squares of <input type="checkbox"> elements, the limited-color bars of <meter> elements, and the “something about them bothers me” arrows of the <details> elements. We can style them to match the modern aesthetics of our websites while making use of their functionalities. There are also many elements that rarely get used as both their default appearance and functionality are less needed in modern web designs.

One such HTML element is … Read article “How to Add Text in Borders Using Basic HTML Elements”


Under-Engineered Responsive Tables


Native CSS Masonry Layout In CSS Grid

Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order. So that’s what this new ability will solve in addition to it just being less hacky in general.

You can already test a partial implementation … Read article “Native CSS Masonry Layout In CSS Grid”


Super Tiny Icons


Lots of Ways to Use Math.random() in JavaScript

Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible for an actual 0 to be returned) and 1 (exclusive, as in, it’s not possible for an actual 1 to be returned).

Math.random(); // returns a random number lower than 1

This is incredibly useful for gaming, animations, randomized data, generative art, random text generation, and more! It can be used for … Read article “Lots of Ways to Use Math.random() in JavaScript”


A Complete State Machine Made With HTML Checkboxes and CSS

State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we’re going to do exactly that. I recently built a website that included a “no client JavaScript” constraint and I needed one particular unique interactive feature.… Read article “A Complete State Machine Made With HTML Checkboxes and CSS”



The text-orientation property in CSS aligns text in a line when working with a vertical writing-mode. Basically, it rotates either the line by 90° clockwise to help control how vertical languages are displayed — much like the way text-combine-upright rotates groups of characters within a line of text in a vertical script, but for full lines of text.

.element {
  text-orientation: mixed;
  writing-mode: vertical-rl; 

For handling bi-directional text — a block that contains both left-to-right and right-to-left text, … Read article “text-orientation”


Exploring What the Details and Summary Elements Can Do

We’ve mentioned before just how great the <details> and <summary> elements are. They’re great for quickly making accordions that are accessible to touch, mouse, and keyboard input:

CodePen Embed Fallback

<details> and <summary> can even be used to play/pause gifs! Click the pause button in the top right of this image to see it in action:

CodePen Embed Fallback

Neat, eh? But what else can these elements do? For a long while, I’ve only thought about details as a … Read article “Exploring What the Details and Summary Elements Can Do”

Keep browsing in the archives

Monthly Mixup


Pseudo Code


How to Create a “Skip to Content” Link


What a CSS Code Review Might Look Like

Monthly Sponsor
Thanks, Frontend Masters!