Frontend Digest 1/2024

Frontend Digest is back!

Frontend Digest is back! Nobody asked for it but I'm sure everyone needs that. After a couple of months of radio silence, we're back with fresh thought-provoking bits, whatchamacallits, memes, and more! We're going to try and keep it interesting - you might be able to find some easter eggs in the future episodes. If you have any suggestions on how can we make this better, or you want to contribute yourself, feel free to reach out to the Frontend Digest editorial office. But for now, let's grab a cup of coffee and enjoy a summary of what's happened in the frontend universe over the last few days.

💎 Highlight of the Week

How To Center a Div - finally! A comprehensive answer to the most burning issue in CSS world. How the heck do we center a div?! In his beautiful and interactive tutorial, Josh covers all of the modern approaches to centering elements in CSS. The author himself says "Honestly, this turned out to be way more interesting than I initially thought 😅", so why don't you give it a try?

🎭 Drama of the Week

Express.js spam PR screenshot

Express.js repo has been spammed with random Pull Requests after a popular YouTube tutorial used it as an example for contributing to open source. You can read the full story here. It's opened up a discussion wether beginner programmers should even be encouraged to contribute to open source. Or any "ordinary" developer for that matter. What do you think?

📎 Thought-Provoking Bits

• React Libraries for 2024 - opinionated React Libraries for 2024 cheatsheet by Robin Wieruch

• Build an AI app in 5 minutes! - YouTube - Learn how to build your first AI application using Next.js, React, Vercel, and v0. Super impressive how quickly you can build this kind of thing nowadays.

• FIX NEXT.JS ROUTING TO HAVE FULL TYPE-SAFETY - how to make Next.js app router fully type-safe

• Prop drilling in React makes it difficult to debug and follow your code. - nice visualisation of how you can use composition to avoid prop drilling in your React application.

• NEXT.JS APP ROUTER MIGRATION: THE GOOD, BAD, AND UGLY - case study of Flightcontrol rebuilding their dashboard from scratch with Next.js App Router.

• Open Sourcing the Remix Website | Remix - The Remix website is now open source, let the Pull Requests flow. Aren't they afraid of spam PRs?

• Wes Bos (@wesbos) on X - narrowing types with .flatMap()

• Deep Cloning Objects in JavaScript, the Modern Way - It’s been a long time coming, but we finally now have the built-in `structuredClone` function to make deep cloning objects in JavaScript a breeze

• Next.js App Router Authentication (Sessions, Cookies, JWTs) - foundations of session based authentication through cookies in the Next.js App Router

• React Tip: use composition to easily extend your components while keeping them close for modification - another React composition tip using compound components pattern

• The Golden Rule of Assertions - a test must fail if, and only if, the intention behind the system is not met

• I Waited 3 Years For This Router. It STILL Blew My Mind. - YouTube - seems like Theo is excited about Tanstack Router

• The Two Reacts — overreacted - UI = f(data)(state) - great explanation of client/server boundaries in React applications by the one and only Dan Abramov

• React Server Components: the Good, the Bad, and the Ugly - YouTube - response to the "React Server Components: the Good, the Bad, and the Ugly" article by Lee Robinson from Vercel

• Wes Bos (@wesbos) on X - nice visualization of client/server boundaries in React Server Components world

• How I'm Writing CSS in 2024 | Lee Robinson - Notes on the state of the CSS ecosystem and tooling.

• Storybook for Design Systems - YouTube - Document design with Storybook components for colors, typography, and icons.

• Kind of annoyed at React - Just a little ranty rant about my fave JS library, ya know.

• Next.js App Router Caching: Explained! - YouTube - how caching works in Next.js App Router

• How Prisma leveraged Kapa.ai to enhance developer experience and scale support

• The Query Options API | TkDodo's blog - Tanstack Query Query Options API

• Build a Next.js app in Storybook with React Server Components and Mock Service Worker - Develop, document, and test RSC applications in isolation, using MSW to mock network requests

• How to Write Better Test Names | Epic Web Dev - Discover the importance of well-named test cases and learn five tips to help improve your test naming strategy in JavaScript.

📦 Useful Whatchamacallits

• Plane.so - Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.

• A 'CSS reset' for TypeScript - A 'CSS reset' for TypeScript, improving types for common JavaScript API's

• shittier - npm - Shittier is a code formatting tool that aims to make your code look as terrible as possible. It is the exact opposite of popular tools like Prettier, which focus on improving code formatting and readability. Shittier embraces chaos, messiness, and con.

• v0.dev by Vercel Labs - Generate UI with simple text prompts. Copy, paste, ship.

• Tailwind CSS Color Generator | UI Colors - Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color.

• Vercel's engineering style guide - Vercel's engineering style guide. Contribute to vercel/style-guide development by creating an account on GitHub.

• Turn yourself into a mini-figure

• PrismaFast- Free AI DB Schema Generator - PrismaFast - PrismaFast - Free AI DB Schema Generator, Visualizer, Modeler, and more! Experience database design like never before - free and effortless.

🤠 Weekly Meme