Weekend Reading

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.

Anthony Shew

@anthonysheww

Me: "Ugh, I don't feel like drawing a markdown chart."

Me, 1.5 seconds later: "Oh, yeah, GitHub slash commands!"

I'm a sucker for unexpected convenience.

15:10 PM - 08 Apr 2023

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.

Devon Govett

@devongovett

Here's how easy it is to build a drag and drop reorderable list with React Aria Components, including multiple selection, keyboard accessibility, screen reader announcements, and touch support. 🤯

react-spectrum.adobe.com/react-aria/Gri…

Same API also works with other components like Table.

16:34 PM - 10 Apr 2023

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.

Cory House

@housecor

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.

16:10 PM - 10 Apr 2023

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!

Delba

@delba_oliveira

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.

17:25 PM - 11 Apr 2023

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.

trash

@trashh_dev

did you know you can use key remapping to filter out types you don't want?

here we can filter out any property that isn't of type number.

its pretty handy.

23:29 PM - 12 Apr 2023

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

Matt Pocock

@mattpocockuk

🚀 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!

07:04 AM - 13 Apr 2023

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!

Josh W. Comeau

@joshwcomeau

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 😮

23:37 PM - 13 Apr 2023

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!