Friday Frontend: Beginning of December Edition

Hey there,

It’s planning/roadmapping season and I am totally slammed at work right now. Consequently, a short version of the newsletter this week. Hope you are all staying safe and well.

Best,

KBall from ZenDev

CSS & SCSS

How to Make an Area Chart With CSS

While I highly recommend getting comfortable with SVG and using it for your charting (it is sooooo much more powerful than HTML for that purpose) this article highlights that for a lot of simple charts you can achieve what you need with just HTML and CSS.

How to Add Text in Borders Using Basic HTML Elements

Useful technique for a useful design pattern. I don’t see this pattern very often, but that may be because many folks don’t know how to do this.

Thinking Like a Front-end Developer

Useful walkthrough of the approach and thought process of implementing a design.

A centered CSS navigation with fit-content

Super simple quick-hit technique for centered navigation.

JavaScript

Lots of Ways to Use Math.random() in JavaScript

Whimsical, fun article exploring many use cases for incorporating randomness into your websites.

React component code smells

I love the idea of code smells, because it encapsulates the point that there are patterns that can sometimes be useful, but when you see them they are frequently indications of larger problems in the codebase. This list seems solid to me.

Other Awesomeness

Attention Is My Most Valuable Asset for Productivity as a Software Developer

The big picture message here I think is true for just about any domain, but especially software engineering. Attention and focus are your most valuable assets for productivity. The techniques the author describes are useful ones, but they may not be the right ones for you, or they may be incomplete. For example, the more you move up in your career the less you can avoid meetings, because influence becomes a bigger part of your job, and much of influence happens in meetings. But you can still do things like consolidate them together in blocks, preserve blocks of focused time, and develop rituals for yourself to refocus your attention.

RUTHLESSLY ELIMINATING LAYOUT SHIFT ON NETLIFY.COM

A useful example for the types of thinking involved in improving your front-end performance. Optimize for the common case, prevent layout shift, and inline the bare minimum necessary for first render.

Creating websites with prefers-reduced-data

I’m super excited about the new prefers-reduced-data media query, because it provides tooling to make it easier to help the millions of people on slow web connections or limited data phones all around the world. This blog post explores some of the simple 80/20 changes you can make that will quickly improve your site or app for these users.

Some design principles are universal

Useful set of core principles for those of you who like me are adjacent to design but not well trained in it. Or if you’re a designer but still early on in your journey improving your craft.