What’s Old is New
I collect a bunch of links in a bookmarks folder. These are things I fully intend to read, and I do — eventually. It’s a good thing bookmarks are digital, otherwise, I’d need a bigger coffee table to separate them from the ever-growing pile of magazines. The benefit of accumulating links is that the virtual pile starts revealing recurring themes. Two seemingly unrelated posts published a couple months apart may congeal and become more of a dialogue around a common to..
Read more- 0 Comment
Two Ways to Create Custom Translated Messaging for HTML Forms
HTML forms come with built-in ways to validate form inputs and other controls against predefined rules such as making an input required, setting min and max constraints on range sliders, or establishing a pattern on an email input to check for proper formatting. Native HTML and browsers give us a lot of “free” features that don’t require fancy scripts to validate form submissions. And if something doesn’t properly validate? We get “free” error messaging to disp..
Read more- 0 Comment
Quick Hit #18
PSA: Today’s the day that Google’s performance tools officially stops supporting the First Input Delay (FID) metric that was replaced by Interaction to Next Paint (INP). Quick Hit #18 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter...
Read more- 0 Comment
Anchor Positioning Quirks
I am thrilled to say, that from this week onwards, the CSS-tricks Almanac has an entry for each property, function, and at-rule related to the new Anchor Positioning API! For the last month, I have tried to fully understand this new module and explain it to the best of my ability. However, anchor positioning is still a new feature that brings even newer dynamics on how to position absolute elements, so it’s bound to have some weird quirks and maybe even a few bugs lurking a..
Read more- 0 Comment
Sanding UI
Jim hit a snag while working on a form. Placing labels next to inputs is trivial with flexbox, sure, but what happened in Jim’s case was a bit of dead-clicking between the labels and radio buttons. The issue? Not the markup, that’s all semantic and cool. Turns out the gap he placed between the elements is non-interactive. Makes sense when you think about it, but frustrating nonetheless because it looks like a bug and feels like a bug even though there’s nothi..
Read more- 0 Comment
Time Travelling CSS With :target
Checkbox and radio button hacks are the (in)famous trick for creating games using just CSS. But it turns out that other elements based on user input can be hacked and gamified. There are very cool examples of developers getting creative with CSS games based on the :hover pseudo-class, and even other games based on the :valid pseudo-class. What I’ve found, though, is that the :target pseudo-class seems relatively unexplored territory in this area of..
Read more- 0 Comment
Sticky Headers And Full-Height Elements: A Tricky Combination
Quite a fun article I worked on with Philip Braunen. Do you know that little bit of elasticity you get when scrolling beyond the viewport when browsing the web on a mobile device? iPhone calls it a “rubber-banding” effect. And you know it’s cool because Apple has previously fought to hold a copyright on it. Anyway, Philip wrote into Smashing Magazine with a clever approach to mimic rubber-banding in CSS — not only for non-mobile UI but also applied to any sort of c..
Read more- 0 Comment
Quick Hit #17
“Wrapping the <label> around the <input> is fine, and is sufficient for conformance on its own, however adding explicit association with for and id is still necessary in practice.” —James Edwards Quick Hit #17 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter...
Read more- 0 Comment
Quick Hit #16
“Never, ever hire for JavaScript framework skills. Instead, interview and hire only for fundamentals like web standards, accessibility, modern CSS, semantic HTML, and Web Components.” — Alex Russell Quick Hit #16 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter...
Read more- 0 Comment
Quick Hit #15
Almost missed that the WP Twenty Twenty-Five theme was approved a couple weeks ago. Quick Hit #15 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter...
Read more- 0 Comment