View this email in your browser

Heya,

For the past few weeks, I've been deep into a new project packed with frontend components, using React and Next.js. As much as I love working with frontend, backend, and APIs, I’ve always felt there’s been a disconnect between these parts—lots of repetition and frustration when connecting them all together.

But guess what? I think I've finally cracked a decent workflow that ties everything together in a way that feels really smooth. The key? An API-first approach that lets me design my API upfront, keep everything in sync across the frontend and backend, and even spin up a mock dev server to test things out before diving into the backend work.

Here’s how I’m doing it:

• TypeSpec to define my OpenAPI specification—it's been a game-changer! TypeSpec is ridiculously simple to learn but powerful, making writing specs a breeze compared to manually working with OpenAPI YAML.
• Prism to turn the OpenAPI spec generated by TypeSpec into a fully functional mock server. This way, I can get started on the frontend even when the backend isn't ready yet.
• ReactQuery to handle data fetching in the frontend app (even when using server-side rendering with Next.js!).
• OpenAPI React Query Codegen to generate an abstraction layer for ReactQuery, covering all my endpoints and, importantly, keeping my types consistent across both frontend and backend.

In short, I finally have an API-first full-stack workflow that feels frictionless and keeps everything in sync. I’m excited to share more about it with you. You’ll find references to these tools in this newsletter, along with lots of other curated content as usual. If this is a topic that interests you, just reply to this email—I might even write a more detailed post on my blog to dive deeper into this approach!

Now, let's jump into this week's content and keep the inspiration flowing.

See you in the next one, awesome full-stack friend! 👋
— Your editor, Luciano

“The science of today is the technology of tomorrow“

— Edward Teller , Physicist

Should masonry be part of CSS grid? — If you've admired Pinterest-style layouts, Ahmad Shadeed's latest article is going to be a great read! It dives into how CSS Grid now supports native masonry layouts, eliminating the need for JavaScript hacks. While the feature is currently Firefox-exclusive (so some interactive previews might not work in your browser), the author includes handy videos as an alternative. Read article

How to fetch data in React — If you’ve used React, chances are you’ve fetched data from a component. While it seems simple (just use the fetch API), the devil is in the details—doing it right is more involved than you’d think! Robin Wieruch unpacks the nuances of data fetching in React, covering libraries and best practices to help you fetch not just correctly, but consistently and concisely. The article also explores fetching in the server VS fetching in the client... A great read to level up your React game! Read article

575 Million Hours Clicking Cookie Banners — Cookie banners are everywhere, but do they really improve privacy? Legiscope’s article dives into this controversial topic, examining the hidden costs of these pop-ups and whether they actually serve their intended purpose. Do you hate cookie banners, think they serve a good purpose, or have a different take altogether? I’d love to hear your thoughts: reply to this email and let me know what you think! Read article

Prism: turn OpenAPI specs into a mock servers — Working with APIs often involves testing and debugging, and that’s where Prism shines. This toolset simplifies API mocking and contract testing, supporting OpenAPI v2, v3.x, and even Postman Collections. It lets you spin up life-like mock servers directly from your API specs and serves as a validation proxy for ensuring contract compliance. I used it last week while working on a React frontend project and absolutely loved how easy and powerful it is—definitely worth a look! View Repository

New CSS that can actually be used in 2024 — CSS is always evolving, but which new features are worth using in 2024? Thomas Orus cuts through the noise and highlights the CSS advancements that are practical and ready for real-world use. From better layout controls to powerful design utilities, this guide showcases features that will make your styling more efficient and your code cleaner. With plenty of practical examples, the article clearly shows why these features are quite cool. Read article

Pagefind — Static low-bandwidth search — If you're looking to improve search functionality on your website without relying on external services, Pagefind might be just what you need. This lightweight, client-side search engine is designed specifically for static sites, with a setup that's so minimal it’s almost too easy. While I’m a big fan of OramaSearch (another great open-source alternative), I’m really intrigued by how Pagefind targets static websites and simplifies the process. I’m looking forward to trying it out, possibly for my personal website... Read article

Beautiful focus outlines — Focus outlines are super important for accessibility, but they often get ignored or styled in ways that can actually hurt usability. This article breaks down why focus outlines matter and shows you how to style them right without messing with your design. With lots of practical examples, you’ll learn how to make your site easier to navigate for everyone while keeping it looking sharp. Read article

The Pragmatic Programmer: From Journeyman to Master

by Andrew Hunt, and David Thomas

Ward Cunningham Straight from the programming trenches, The Pragmatic Programmer cuts through the increasing specialization and technicalities of modern software development to examine the core process--taking a requirement and producing working, maintainable code that delights its users. It covers topics ranging from personal responsibility and career development to architectural techniques for keeping your code flexible and easy to adapt and reuse. Read this book, and you'll learn how to Fight software rot; Avoid the trap of duplicating knowledge; Write flexible, dynamic, and adaptable code; Avoid programming by coincidence; Bullet-proof your code with contracts, assertions, and exceptions; Capture real requirements; Test ruthlessly and effectively; Delight your users; Build teams of pragmatic programmers; and Make your developments more precise with automation. Written as a series of self-contained sections and filled with entertaining anecdotes, thoughtful examples, and interesting analogies, The Pragmatic Programmer illustrates the best practices and major pitfalls of many different aspects of software development. Whether you're a new coder, an experienced program.

Hang on, there's more stuff here:

• Revamping a Five-Year Old Node.js Project
• Caching Astro fetch Requests
• Essential tsconfig.json options you should use
• Inline event handlers still fire when passed to React's dangerouslySetInnerHTML
• How to Set Up Next.js 15 for Production in 2024
• tiny-static-map
• TypeSpec: Describe APIs
• TanStack Query (React Query)
• OpenAPI React Query Codegen
• Is Serverless making a comeback in the enterprise? (podcast)

👋 That’s all for this week. See you next Monday!

Greetings from your full stack friends Luciano & Andrea