Friday Frontend: Diversion Into Design Edition
Welcome to December! Crazy how fast this year has gone by. Hope it’s been a good one for you!
Living on the front-end, even the most engineering-focused among us can find ourselves bleeding over into some design work, at least on the interaction front, and it behooves us to be constantly thinking about what makes for good design.
Have a great week!
KBall from ZenDev
CSS & SCSS
An excellent, thorough e-book on CSS Animation, released for free on github. The web version has links to lots of codepens too, so you can just click over and try things. Great!
This is a tour de force showing the power of CSS Variables. The author makes a point that really stood out to me, and something I want to think about a lot more: CSS Variables allow styling to be made much more logical and mathematical. They then show fascinating examples across a wide range of usecases. Very very cool.
While the engineer in me loves the power of features like CSS Grid and CSS Variables, the creative tinkerer in me is absolutely in love with CSS Shapes. These are going to seriously open the doors to tons of more artistic layouts and just random sections on the web.
CSS Resets are historically a way to strip out browser-specific stylesheets and create a common base to develop a design on top of. This article takes a look at what resets are in use right now, as well as an interesting trend to use “resets” to create less of a pure “reset” but also a full “base” with a set of utilities as well.
I didn’t know much about interaction media queries, but they make total sense for exactly the usecase explored in this article: Showing ‘on-hover’ content in a different way for touchscreen devices where hover is meaningless. And they’ve got pretty good browser support too!
Some very cool things in the works for the world’s most popular frontend framework. By now you’ve probably all heard about hooks, but I think the upcoming concurrent mode is at least as interesting. Being able to render complex components outside of the main thread is going to be a HUGE step forward for user experience, particularly on slow-cpu mobile devices.
Nice little lookthrough with pro and con lists for each of 5 libraries you can use to do HTTP Requests. I’ve been using axios a lot myself… their con for it is “Quite tricky to use”. Not sure I agree… certainly to do complex things there is some complexity, but basic requests are just that - basic.
Framework routers are a great example of the way that best practices and concepts have cross-pollinated across the front-end ecosystem. The Angular router looks an awful lot like vue-router, which looks an awful lot like react-router, which in turn looks an awful lot like the Ember router which I believe started the whole thing. What that means is - if you master one, picking up the others will be a breeze. This article happens to do examples in Angular, but even if you’re not using Angular the concepts it covers will be useful to you in any other SPA framework that has a router.
This is a interaction/design opinion piece, but it highlights something that I think is really valuable to think about. We often as front-end developers and designers make decisions based on how we use the web. But not everyone does things the same way. Users are not solely keyboard or mouse users, but often switch fluidly between them, and approaching tools like focus rings assuming users are all 1 or the other can lead us astray.
Also a user experience/design focused piece, this one is a really interesting counterargument to the trend of attempting to simplify everything. The piece argues that friction, or complexity, can actually have value in and of itself. I’m not sure I agree, but what I definitely do think is that mindless pursuit of simplicity can be bad - the complexity of your interface is inextricably linked to the complexity of the problem your users have to solve. You want to abstract or remove away any and all unnecessary complexity, but if you start removing necessary complexity you are also removing utility.
Ok, I think this is actually very not awesome, because it means we’ll be down to essentially just 2 different browser variants (see this article for an explanation of why this matters), but it is a very big deal for web developers.
Ever open up your developer console on a site like Facebook and notice that they pre-fill your console with a bit red STOP and some other interesting info? Wonder how they style their ‘stop’ so it is big and red? This article dives into the tools you have at your service to tinker with and manipulate the console.