Friday Frontend: Many Types of Design Edition

Hey there,

Congratulations, you made it to the end of July! I hope you’re holding in there and doing okay.

This week what stood out to me was the many different ways that we use the word “design”. In the ‘Other Awesome’ section we have articles about software design, organizational design, design thinking and information architecture, and very tactical form design. All fascinating articles in their own right, and all very different.

Best,

KBall from ZenDev

P.S. I’m on vacation next week and will not be writing/sending this newsletter. Talk to you next on August 15!

CSS & SCSS

Understanding CSS Multiple Backgrounds

This is a phenomenal article. It starts with super basics, how does the CSS background property work, and then builds up with simple stacking, and then keeps adding and adding until you get elaborate CSS illustration entirely using backgrounds on a single element. Wow.

Bold on Hover… Without the Layout Shift

Super simple fix to a very common problem - the shifting layout that happens when you make some text bold on an interaction.

Why CSS Grid Layout doesn't replace the framework's grid

This is a take on a question I was asked constantly when CSS Grid was just coming out and I was responsible for a framework with a grid system. I don’t entirely agree with the author’s response -- many framework grid systems are overengineered & bloated compared to CSS grid, and you should stop using them. However, the core point of having a common set of grid utilities that can be reused that is slightly more abstracted than the raw CSS is true; those should just be built with CSS grid, taking advantage of its power, and I just haven’t seen too many good examples of that yet.

Modern CSS grid solutions to common layout problems

Speaking of the power of CSS Grid, this article shows just how easy it is to implement solutions to many common layout problems now that we have CSS Grid. Your options for creating scalable, responsive grid systems are just an order of magnitude more powerful today than they were in traditional framework grids.

JavaScript

Svelte <3 TypeScript

Oooh, this is exciting! Now that I’m completely used to having the power of types in my code, I was not looking forward to going back to playing with Svelte and not being able to use them… but as the title indicates, there is now first class TypeScript support for Svelte! Awesome!

Data Structures You Should Know as a JavaScript Developer

Less of a JavaScript specific post and more of a post about software development that happens to use JavaScript, but given how many of us come to web development from non-traditional backgrounds, this is a useful refresher on some extremely commonly useful data structures.

What the Fork is Memoization

Similar to the previous in that the concept is not JavaScript specific even though the examples all are -- if you’re not already super comfortable with memoization, you definitely should read this post. This is one of the most frequently valuable concepts I’ve ever learned in software development -- often using memoization can be the difference between software that takes forever and a half to run and software that runs quickly and elegantly.

React: 50 shades of state

An exploration of the different types of state that live in a front-end application, with examples and tools drawn from React to illustrate. The examples and the tooling part at the end are React specific, but the conceptual model around different types of state will be useful to anyone thinking about state in the frontend.

A Mental Model to think in TypeScript

Long article -- a bit more than I was expecting based on the title, but a very solid introduction to some of the new concepts you may encounter moving from JavaScript to TypeScript, especially if you’ve never worked in a strongly typed language before.

Other Awesomeness

Your design reveals your assumptions about people

Super interesting article looking at the ways that our assumptions about people influence the ways we self-organize and design the things we create. 

Design Docs at Google

The company I work at now uses engineering design docs in a very similar way to this -- unsurprisingly as we have a lot of former Googlers -- and I’ve found it to be an incredibly useful tool that I’m surprised I hadn’t seen more before.

Fast design will kill your product

Useful list of questions to ask when you’re considering that request for “Just add another button right here”. Also helpful for front-end developers who are feeling frustrated with how long sometimes simple changes can take to happen in design.

Form design

A useful gathering of best practices when it comes to form design, organized by element/type of interaction, and handily annotated with links to all sorts of research on where these best practices came from.