A rather geeky/technical weblog, est. 2001, by Bramus
rci — A clever React Component for One-Time Passwords (OTP)
rci is a React component that ask for a one time password, in a pretty clever way. rci uses a single DOM input element, overlayed on top of plain divs for styling. Most other implementations of this pattern are based on multiple inputs. Using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage …
Continue reading “rci — A clever React Component for One-Time Passwords (OTP)”
Steve Ruiz recently noted that in many design tools a group of shapes would end up at a different position after you rotate them and then successively rotate them back. The problem here is that the average center of the group — the point on which the group rotates — changes after the first rotation. …
:focus-visible Is Here
With Chromium 86 and now recently Firefox 85 supporting :focus-visible, it’s a good time to refer to this post by Matthias Ott: The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. You use :focus-visible …
:not(:focus):invalid, not :invalid
The built-in browser form validation mechanism can be frustrating as it will mark fields invalid while still entering text. Using only CSS this can be circumvented, so that validations happen afterwards.
Great research by Sara Soueidan: If you have a question with a binary Yes/No answer, is it better to use one checkbox or two radio buttons? As per usual: It Depends™. The consensus however seems to be that requiring an explicit “No” is the determining factor to avoid the simple checkbox. Over at CSS-Tricks Chris …
Continue reading ““Yes or No?” — One Checkbox vs Two Radio Buttons”
Adam Silver, who works at/with the fine folks at GOV.UK: Tabs should only look like tabs if they behave like tabs otherwise it can be in disorienting and confusing for users. Shown above is the old layout that featured the tabs (which are actually links, here). The new version still has the links in place …
Very nice video by Sam Selikoff in which he sets up a web manifest to make his site feel more app-like. Great production quality. There are some tweaks I’d suggest though: Fixate the header using position: sticky; instead of position: fixed;. No need for that extra margin on the content then. Update: See note below …
Continue reading “8 Tips to Make Your Website Feel Like an iOS App”
When double clicking a form’s submit button your form will be sent twice. With a tad of JavaScript this can be prevented from happening.
Great talk by Stéphanie Walter (starting at 39:00): With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need …
Continue reading “Enhancing User Experience With CSS Animations”
George Cave takes a look at the UX of the LEGO Interface Panels These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces. The UX of LEGO Interface …