back button Back to blog

Dev Roundup, Dec 2022

My collection of interesting, useful, and trending content for software developers. The Dec 2022 edition.

Noah MatsellDecember 30, 2022
Copy URL

This is my first crack at creating a dev roundup. Let's see how it goes! Some highlights for this edition include the useReducer hook, fonts, layout animations, animated and fluid CSS grid, and more!

From around the Web 🕸

Fun with the useReducer hook

This new article, part of the React "beta" docs, is a deep dive into the useReducer hook. It's filled with useful advice. One of the highlights for me is a performance tip:

React saves the initial state once and ignores it on the next renders. Although the result of createInitialState(username) is only used for the initial render, you’re still calling this function on every render. This can be wasteful if it’s creating large arrays or performing expensive calculations.

To solve this, you may pass it as an initializer function to useReducer as the third argument instead:

A challenge with using the useReducer hook in Typescript is getting your state, actions and payloads typed correctly. This article by Alex Bespoyasov provides a great overview of setting up your types correctly:

Building a Blog

The past month I've been building a Next.js markdown blog, I've found lots of wonderful resources through the blogs of Swizec and Kent's blogs.

Blazing Fast Tweet Embeds

Building a Tweet Embed API

Optimizing Web Fonts in Next.js 13

Lydia Hallie's extremely thorough analysis of the challenges, solutions, and techniques to optimizing fonts in Next.js. Covers concepts like FOUT, FOIT, Font-Face Descriptors, and the @next/font module.

Everything about Framer Motion layout animations

Maxime Heckel's Blog with a dedicated deep dive into all the different types of layout animations. This article is a one stop shop foreverything you could possibly want to know about layout animations using Framer Motion.

CSS Animated Grid Layouts

Recently, all three major browsers have added support for animating grid layouts. Supporting interpolation for grid-template-columns and grid-template-rows allows grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition.

Notable Tweets 🐦

This thread is a gold mine of outstanding and useful technical blog posts:

Theo - avatar
Theo - @t3dotgg
What are the best (technical) blog posts and articles you've read this year?

A nice performance tip for resource intensive event handling:

Alex Sidorenko avatar
Alex Sidorenko @asidorenko_
How to update React components on scroll or mousemove with good performance and without refs?

Colocate the state with the parts of the UI that need to change.

Tweet media

For Software Developers looking to improve their writing:

Ankur💻🎧💪 avatar
Ankur💻🎧💪 @TheAnkurTyagi
I'm excited to release a guide on technical writing.

This is a comprehensive guide to getting started with the technical writing for developers.

A Software Developer’s Guide to Writing.

If you have any questions, comment below.

Retweet for Karma.

Very cool solution to improve title wrapping to avoid situations like single word in the last line, making the title more “balanced”:

For those moments where you want to tell Prettier how to format/wrap content:

A good resource for visualizing different system architectures:

Ruben Casas 🦊 avatar
Ruben Casas 🦊 @Infoxicador
You (probably) don't need Micro-Frontends

This is the "Distributed and Decoupled Spectrum"

Make sure that you explore all the other options before trying to implement a fully distributed system

Tweet media

A very nice fluid grid system with Tailwind. This effect is deceptively tricky to achieve:

MapleLeaf 🍁 avatar
MapleLeaf 🍁 @heyImMapleLeaf
tailwind fluid grid columns🪄

grid grid-cols-[repeat(auto-fill,minmax(theme(width.64),1fr))] p-2 gap-2

change the width.* value for larger or smaller columns

Adding Custom Styles - Tailwind CSS

Tweet media

Like this post?

Sign up and get notified when new posts are published!