[Robin]: This week I realized that I wasn’t solving a design problem at the right level. Here’s the scene: I found myself sat my desk, struggling to add some new features to this one page. Yet there’s so many directions that we could take this design! We could do this thing on hover, or when you a click an icon, or when you do x, y, and z. This feature started to haunt me. It felt like I was no longer sweating the details in Figma and moving the pixels around, but the pixels were beginning to move me around, the details sweating me.
My designs fell apart as I realized I had no idea what I was doing.
I needed to change my approach. I closed my designs in Figma and moved into the browser. I needed to prototype this idea in a more realistic environment. I relearn this again and again. Sometimes a prototype is the only way you can convince yourself that an idea is terrible or that an idea is the most fantastic thing you’ve ever thought of before.
This particular design I was working on was based entirely on hover states and as soon as I cobbled the prototype together I realized I’d made a terrible mistake. This design wouldn’t work at all, it just doesn’t feel right and no visual design or mockup could show me that in Figma. Because visually things looked just fine.
Sometimes we need to move around a bit when designing interfaces. We need to take things from a static environment into a dynamic one to see how realistic they are. Most of the time we probably don’t need a complex prototyping environment to figure out this one tiny problem, but sometimes we absolutely do. It’s the only way to see if this darn thing will work.
A reminder to myself: sometimes the feeling of a design is far more important than visuals alone.
? Links from around the web
Three CSS Alternatives to JavaScript Navigation
Blake Lundquist shows some interesting navigation design patterns — and thinks through those that don’t require JavaScript at all. Why’s that though? Well, Blake writes:
It is considered best practice to use a progressive enhancement approach, building webpages for users with the oldest and least capable technology first, then introducing additional enhancements as support allows. If you can provide a quality experience for users with basic technology, then you might consider whether or not your webpage even requires JavaScript functionality at all. Leaving JavaScript out of the navigation can ensure that users are able to navigate your website even if JavaScript is disabled or network issues prevent scripts from loading — which are definitely wins.
One idea is to put the menu on a separate URL and page like {website-name}.com/menu, which is what the Susty website does:
The other idea that Blake doesn’t make note of in this post is adding all the links in the footer and then pointing directly to that element with a link at the top of the page. Although on some sites I have found that pattern to be a little disorienting. Where am I? Who am I? How do I get back to where I was? Ohhhh I’m at the bottom of the page now? Huh.
Did you know about the backdrop-filter CSS property?
If not, not to worry because Uriel Bitton wrote this handy post about how to use it and — spoilers! — it’s one of those CSS properties that has a big impact on how fancy your UI looks. Here’s Bitton’s example:
See that glassy effect on the card there? That’s what backdrop-filter does, like so:
.container {
backdrop-filter: blur(10px);
}Isn’t that so neat? Just a single line of CSS that completely changes the feeling of the UI. In a follow-up post, Geoff riffs on this note and recommends that we should use @supports whenever we use this property to make sure there’s a good fallback for browsers that don’t support backdrop-filter:
.container {
background: rgba(0, 0, 0, 0.8);
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.container {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}Smart stuff. But what else can backdrop-filter do? Well, I’m glad you asked because I preempted your question by two years — back in 2018 I ranted about how excited I was about this property and all the other filters you can use besides the blur() function:
Each of these boxes have different filter functions applied to them and as you can see if you checkout the demo in Chrome or Safari it’s pretty nifty. You can alter the contrast, the opacity, saturation, and a whole bunch more.
Also, I hope Firefox supports these filters soon.
Building a blog with Next.js
Pankaj Parashar has a great tutorial for the ol’ blog where he writes about how do just that. He writes:
With the introduction of Next.js in recent years, combined with the popularity of React, there is a new avenue to explore for static blogs. Next.js makes it super easy to build static websites based on the file system itself with little to no configuration required.
I really like the whole setup that Pankaj sets up at the end; a markdown-powered lean, mean, blogging machine!
Custom focus rings using :focus-within
The other day Jonnie Hallman wrote about how he’s using the :focus-within CSS pseudo class in a recent project:
While looking into focus states, I came across the CSS pseudo class :focus-within, which has a very Zen-like name to it. This handy selector does exactly what it says by letting you style an element when the focus exists within the element.
The example Jonnie gives is with this bit of code:
label:focus-within {
outline: 2px solid blue;
}What this says is: “whenever an element inside is focused, apply these styles to the label element.” And not so long ago we also made an almanac entry where Chris made a nifty demo:
In this demo the whole page changes color and the label that wraps the input also changes color which can help folks focus on the input they’ve selected. Also, on this note, I’ve found that this pseudo class is great and tidying up a bunch of code and avoiding weird CSS hacks with padding and margin to get things looking the way that you want them to.
CSS leaning card effect
Another day, another fabulous demo from Lynn Fisher. This time it’s this card effect that replicates shadow and light direction in a rather striking way:
This effect is made with a whole bunch of linear-gradients and pseudo elements, so it’s worth taking a gander at the code there to see how Lynn did this.
Rough Notation
Here’s a tiny JavaScript library called Rough Notation by Preet Shihn that lets you make handwritten-styled annotations on a webpage that can also be animated, like this one example I’ve captured here from the docs:
There’s a ton of different effects and animations you can toggle on or off but I really like this style in general. I’m going to try and squeeze this into the next dumb side project I work on for sure.
Sponsor
Tower
Trying to remember all those Git commands? Afraid of using Git’s advanced features as things might break? There’s a better way to work with Git. A tool trusted by thousands of developers and designers, making them more productive: meet Tower!
Sponsor
WooCommerce Day is July 28!
…and it’s literally the biggest sale that WooCommerce offers all year. So, if you’re planning to purchase any WooCommerce products, mark your calendar for July 28th because that’s when the action starts. Until then, start making your shopping list.
[Chris]: Sometimes when I see cutting edge tech that, through its existence, suggests that my job might be automated away, I scoff. Not my job, I think. I don’t just build basic websites that can be built by some fancied up robotic brick-layer. My job requires nuance and emotion and love, in addition to complex technical prowess, that automation is nowhere near replicating.
So this tool where I describe my app and it builds it? Fun demo, but it doesn’t threaten me. (Also: LOL nice subreddit placement.)
But then I think about just my own (relatively) short career in building websites. In the early days, I thought I’d just build websites for other people as a career. That market still exists, but it’s nothing like what it used to be. The low-end of the market is almost entirely gone, replaced by commoditized and centralized super sites that either replace the need for having a site at all, or help people build the site nearly as easy as ordering McDonald’s from a touch screen and for about the same price.
I’ve already watched the industry change dramatically. Certain jobs that used to exist just don’t anymore. But jobs in the tech industry are growing, not shrinking, so if there is a problem, it is masked by overall growth.