I came clean about my long-running and ongoing battle with chronic depression last year in a blog post on my personal site. But don't worry, things are no worse than they were then and this post is about something else. This post is about designing empathetic user experiences.… Read article “Preventing Suicide with UX: A Case Study on Google Search”
A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy.
But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.… Read article “Having fun with link hover effects”
The web has grown bigger. Both in expansiveness and weight. Nick Heer's "The Bullshit Web":
The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we’re simply occupying that extra bandwidth with more stuff.
Nick clearly explains what he means by bullshit, and one can see a connection to Brad Frost's similarly framed … Read article “Slow Websites”
Styling and accessibility are often at odds with each other. Scott O'Hara has this repo that shows how the two can work really well together in the context of form controls.
The trade-offs between native and styled controls remind me of Eric Bailey's case study on focus styles:
… Read article “Short note on the accessibility of styled form controls”A common misconception is that the focus style can only use the outline property. It’s worth noting that
:focusis a selector like any other, meaning that it accepts the full
Like many, many others, I'm in the pool of leveling up my JavaScript skills and learning how to put React to use. That's why Brad Frost resonated with me when he posted My Struggle to Learn React."… Read article “A Quick Roundup of Recent React Chatter”
The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow. In fact, both properties make up the line-clamp property, which is a shorthand for combining them.… Read article “max-lines”
The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property.… Read article “block-overflow”
The offset-anchor property defines a point within the box it is applied as the anchor that moves along the offset-path.
That's kinda wordy, so let's break that down a bit.… Read article “offset-anchor”
The line-clamp property truncates text at a specific number of lines.
The spec for it is currently an Editor's Draft, so that means nothing here is set in stone because it's a work in progress. That said, it's defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk of being dropped in the Candidate Recommendation.… Read article “line-clamp”
VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line.
We talk a lot about Vue around here, from a five-part series on getting started with it to a detailed implementation of a serverless checkout cart
But, like anything new, even the basics of getting started can … Read article “VuePress Static Site Generator”