A background image for the simonporter blog

Weekend Reading

Here's a list of interesting reads for your weekend pleasure.

2 min read

Hello folks!

It's been a week of React Server Components, so plenty of reading to go around about it!

Maybe worth trying your hand with Next.js 131 to see what the fuss is about?


Kent hosted Dan and Joe for a 2 hour live stream to put forward his concerns. Plenty of familiar names turned up to listen in too. Don't have 2 hours spare? Catch my recap from earlier this week.

Dan was already looking for best ways to pitch RSC's. Plenty of information to skim through in this Twitter thread.

i need to start collecting ways to pitch react server components. this feels like 2014 when some of us found react for the first time and were wondering how to help it click for more people. i’ll just drop some of them in the thread but lmk if any particular one helps

837
Reply

Dan started playing with Remix some more (Kent's influence? 😁) and had some ideas for the Remix team on implementing React transitions.

And for those who have a lot of free time this weekend, Ryan did a 5 hour long in depth stream about server components.

Matt's secret on understanding TypeScript is out of the bag!

Speaking of which, Matt was also putting final touches on his new TS library, 'untypeable'. When you want to type something you don't and won't control.

On the verge of releasing a library that lets you type API's that don't have types. 🔥 tRPC-style route-builders ❤️ Type-safe data access 🪄 Disappears from the bundle at runtime It's called 'untypeable'.

// Create a tRPC-style router definition
const userRouter = u
  .router()
  .add("/user/:id", {
    GET: u
      .input<{
        id: string;
      }>()
      .output<User>(),
    PUT: u.input<User>().output<User>(),
  })
  .add("/user", {
    POST: u
      .input<{
        name: string;
      }>()
      .output<User>(),
  });import type { userRouter } from "./router";

// Create a client from the TYPE of the router,
// meaning that the router never gets bundled
const fetchFromRouter = createClient<typeof userRouter>(
  async (path, method, input) => {
    // Fetch from server in here
  },
);

// Type-safe data access!
fetchFromRouter("/user", "POST", {
  name: "John Doe",
});
580
Reply

Zach had a great tip I've not seen before for using Zod for local env type safety. We've had people onboard to our team before and miss required env vars to get things running, this would solve that problem for sure!

Since Zod seems to be all the rage right now, wanted to share a pattern that I've really enjoyed using. Just create `env.ts` at the base of your app and validate all your environment variables with Zod! It's basically `env.local.example` on steroids

Image
396
Reply

This Week In React

My top picks, make sure to subscribe!

Josh outlines some common mistakes he's seen during his time teaching. I always enjoy Josh's writing style. How many do you remember making, or are making at the moment? 😅

Alex writes about how important component composition is to avoid prop drilling. I couldn't agree more with this, keeping components small and composable, and thinking about your component layout more than just how to get data to the component is key for good clean maintainability going forwards. This, ironically, is a good mentality to have for RSC's too!2

Zod, the TS first schema validator that is literally everywhere right now, just released a new version. Super neat looking .ip() included which I can't wait to try out.


And finally, in CSS Weekly:

Šime writes an interesting article about the pros and cons of using the ::marker pseudo selector for custom bullet points in lists. It's not as simple as it first seems.

Daniel writes about the proper use of alt text for accessibility, something I'm likely failing on with my blog and will need to revisit. Do you?

Here's a neat little app for testing custom scroll bars. I really like the simple design here too.

Footnotes

  1. This blog is built with Next.JS 13 and RSC, and it was an interesting set up and shift in thinking. Worth giving a go.

  2. While you can't import server components in child components with RSC, you can pass them as props using the standard {children} prop!