Accessing Design Tools Css Canvas

CSS "decorations"

A reader wrote to me the other day asking about this bit of CSS they came across in Wikipedia's Common.css:

              .mw-collapsible-leftside-toggle .mw-collapsible-toggle {   /* @noflip */   float: left;   /* @noflip */   text-align: left; }

What's that @noflip business? That's …

Responsive Layouts, Fewer Media Queries

We cannot talk about web development without talking about Responsive Design. It's just a given these days and has been for many years. Media queries are a part of Responsive Design and they aren't going anywhere. Since the introduction of …

Reimagine Atomic CSS

I'm not the biggest fan of Atomic CSS myself. I don't like all the classes. I like to express my styles in CSS because I find CSS… good. But I appreciate that a lot of people seem to like it, …

Coding Font Game

A tournament bracket UI where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way to suss out your own taste and arrive at a choice.…

Parallax Powered by CSS Custom Properties

Good friend Kent C. Dodds has recently dropped his new website which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some …

Avatar of Jhey Tompkins

The Many Faces of VS Code in the Browser

VS Code is built from web technologies (HTML, CSS, and JavaScript), but dare I say today it's mostly used a local app that's installed on your machine. That's starting to shift, though, as there has been an absolute explosion of …

PHP Date and Time Recipes

Dealing with dates and times is one of those things that can frustrate programmers a lot. At the same time, they are fundamental to software development, used from everything from meta and how things are ordered to time-based triggers and …

Zero Trickery Custom Radios and Checkboxes

I feel like half of all "custom-designed radio buttons and checkboxes" do two things:

Make them bigger
Colorize them

…

What do you get for using a search input type?

Like this: <input type="search">

You get an extra-round-y appearance in Safari, which at one time matched the macOS look for search inputs, but not really anymore. I don't hate the look, except…
Safari totally ignores the font-size you set on

…

Cherry-Picking Commits in Git

In part 5 of this series, we looked at rebasing and merging. Although there are a couple of differences between git merge and git rebase, both commands have the same goal: they integrate changes from one branch into another.

The Gap (Design Engineering)

Direct Link

Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey) developer implements the change exactly as requested—but really what was required was both a bug …