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, and it does have some clear advantages, like the fact that the generated stylesheet is generally smaller than hand-rolled CSS authored other ways—plus, the available classes are like guardrails that ensure more consistent usage in a design system. I also appreciate that innova..

• 0 Comment

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. (P.S. We have our own little coding fonts website to showcase some high-quality favorites.) Wenting Zhang documented in a newsletter that she built it the whole thing with Retool, meaning she had to write very little code directly, and instead used pre-built..

• 0 Comment

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 “whimsy” for the site. ✨ One of the first things that drew my attention was the large image of Kody (🐨) on the landing page. He’s surrounded by objects and that, to me, screamed, “Make me move!” I have built parallax-style scenes before that respond to cu..

• 0 Comment

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 places VS Code is becoming available to use on the web. I’d say it’s kind of a big deal, as VS Code isn’t just some editor; it’s the predominant editor used by web developers. Availability on the web means being able to use it without in..

• 0 Comment

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 lots in between. Dates and times are prone to errors too. Handle them incorrectly, and they can confuse end-users and fellow programmers alike. This is a quick guide to dealing with dates and times specifically in the PHP programming..

• 0 Comment

I feel like half of all “custom-designed radio buttons and checkboxes” do two things: Make them biggerColorize them I always think of SurveyMonkey for having big chunky radios and checkboxes. And indeed, just poking at their interface quickly, even internally, the app uses has those all over the place: SurveyMonkey’s implementation appears to be pseudo-elements on a <label> element with icon fonts and such. I think it’s worth noting that if that..

• 0 Comment

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 it, so careful about that. Unless you smash off the round-y look with -webkit-appearance: none—then you can, so probably 92% of all websites do this.You get a little × icon inside the input (when it has a value) that clear..

• 0 Comment

This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about the next articles! 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. Today, we’ll look at git cherry-pick and how it allows us to integrate selected, individual commi..

• 0 Comment

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 fix and a new variation to the component. Because of the skill siloing: problems. Designers move from idea to a wireframe, a prototype, a logo, or even just a drawing. Developers move from a problem or feature to a cod..

• 0 Comment

Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element. That’s not quite what I’m talking about here. “Sticky footers” were a UI concept before position: sticky existed and they mean something slightly different. The idea is that they stick to the bottom of the screen, even when the content of the page isn’t..

• 0 Comment