A background image for the simonporter blog

Weekend Reading

*ust imploding, zod, TS, new libraries and releases, sprinkled with a bit of inspiration.

3 min read

hello folks!

A fairly quiet week this week in the land of React. Lots of folks seem to be gearing up for conferences and presentations, and the Easter holidays continued. So perhaps people were enjoying some time unplugged.

Elsewhere the *ust foundation tried to implode on itself and we had a new Chrome release, so let's jump in.


Anthony found a neat little trick I'd not seen before in GitHub, the ability to generate tables from slash commands! Neat.

Devon shows off some of the new React Aria design system we mentioned last week. I want to give this a try, as it does look super neat.

This is a nice little idea to help onboard new developers to your team if using VSCode. A file that recommends extension installation when opening the project.

Problem: Your team is using VS Code, and you want to make it easy for all your developers to use the same extensions. Solution: Create .vscode/extensions.json When developers open the project, they'll get a prompt to install the recommend extensions.

Image
2.2K
Reply

Delba gives a real tidy overview of the new file based metadata API that Vercel released last week. Still wanting to give the new API a try!

New in Next.js: File-based Metadata API 1. Drop an Icon or OG image into `/app` and Next.js will auto-generate robot-friendly metadata for you. 2. Generate image, robots, sitemap, and manifest files using type-safe APIs.

An overview of special metadata files like favicon.ico, icon.png, and the auto-gened output e.g. a <head> tags with filled-in attributes. More details in the following tweets.
1.1K
Reply

Dominik (of React Query) was on This Dot Media this week discussing what it's like to maintain a successful open source project. This one's currently on my "to-watch" list.

Freecodecamp had an article about Git branching commands. I still struggle with my Git-fu, and prefer to rely on VSCode, but still need to reach for the CLI on occasion. Which inevitably involves a Google 😅 Hopefully more articles like this can cement some knowledge.

GitHub announced it's first 20 contributors to receive it's $20K grant to attempt to create sustainable open source. Some recognizable names in the list, most notably TRPC of course!

Trash has been tweeting quite a few TS tips recently. Completing Matt's Total TypeScript course seems to have rekindled some TS ❤️ Love this TS magic.

Speaking of, Matt has released his new TS helper library, shoehorn. To help with types during testing when you aren't working with a complete data set

🚀 I shipped another library! 🚀 Testing with TypeScript can be extremely painful. Types that make sense in application code can make your _testing_ life a living hell. So, I shipped a library to help!

import { fromPartial } from "@total-typescript/shoehorn";

it("Should get the user", () => {
  getUser(
    // Lets you pass a partial object without
    // a type annotation!
    fromPartial({
      body: {
        id: "123",
      },
    }),
  );
});
435
Reply

Josh has been testing out a new way of working that I'd not heard of before. It rings true from the occasions this has happened to me, but I hadn't thought of doing it intentionally. Sounds interesting!

So, I typically stop working when I reach a natural end point near the end of the day. When I finish some meaningful chunk of work. For the past week, I've been taking a totally different approach, and it's been working *way* better 😮

496
Reply

This Week In React

Congrats Seb on 20K subscribers! 😱 My top picks for TWIR:

Interesting RFC from Vercel on integrating third-party scripts using next/third-parties (and next/script)

With create-react-app officially dead (according to the new React docs) it's interesting to see the framework popularity on netlify and how this will change this year.

Nice reminder from ClarityDev on the most common mistakes when using react. A lot here I try and keep in the forefront, but sometimes forget in the moment. A useful list to print out!


CSS Weekly

A nice rundown of the experimental support for text-wrap: balance by Ahmed

Ryan shows off intersection observers with sticky headers. Pretty neat!

Atlas Icons has 2.7K free icons for use, including a Figma library, very cool.

Until next time. Thanks for reading!