DEV Community: Simon Porter

Adding Vercel analytics to your static Astro site

Simon Porter — Mon, 08 Apr 2024 23:42:00 +0000

Vercel analytics is a great way to track your Astro site usage if you're already using Vercel for hosting, and the hobby plan bundles it for free!

There are some limits for the hobby plans, but if you're just getting started with a project, it certainly beats involving something heavy like Google Analytics. Vercel's analytics script comes in at a tiny 1.1kb with no extra account setup. For that you get page views, unique visitors, and referrers.

As you grow you may find your analytics needs increase, but for a simple site, this is a great way to get started.

Installation

It's a one click process to enable it in your account. So let's head on over to our Vercel dashboard > select the project we want to enable analytics for > select the analytics tab and then hit the Enable button to get started.

We then have a couple of different options to configure it for either server or hybrid output modes.

Option A - Using Vercel's adaptor

Vercel has written up the instructions for adding the analytics script to your Astro site when using their adaptor in their documentation. This is the easiest way to get started, as it fits right alongside your Astro config.

First, use astro to install the Vercel adaptor, or manually install it with:

pnpm astro add vercel
# or manually install
pnpm add @vercel/astro

Then specify the Vercel adaptor in your Astro config and enable the analytics feature:

// for static/ssg output
import vercel from '@astrojs/vercel/static';
// for server/ssr output
// import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'static',
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
  }),
});

After deploying this to change to production, we'll see the Vercel adaptor load our 1.1kb analytics script from the CDN https://cdn.vercel-insights.com/v1/script.js

Option B - Manual install

This option is good for when we're running our Astro site in static output mode ¹ and don't want to involve the Vercel adaptor into our flow. static is the default mode for Astro, and it's the most performant way to run your site as all our pages are pre-rendered at build time.

To do this, we just need to add an additional script into our common Head or common Layout:

<script>
  import { inject } from '@vercel/analytics';
  inject();
</script>

After adding this, we should start to see the analytics data in our Vercel dashboard. Loading the site also shows us the request being made to the https://${ourDomain}/_vercel/insights/script.js endpoint to load the tiny 1.1kb script.

And with that we're done!

ℹ️ note
If a user of your site has a decent Adblocker, or is using a privacy focused browser, they may not be tracked by the Vercel analytics script.

In my testing Brave seemed to still block the custom domain hosted script.js file too.

Thanks for reading! 💜 This article was originally published on simonporter.co.uk

SSG is static site generation. It's a way to pre-render your site at build time, and serve the static files to users. This is in contrast to SSR or 'server' mode (server-side rendering) where the server generates the HTML on each request. ↩

Pre-Push Time Saver

Simon Porter — Thu, 25 May 2023 00:00:00 +0000

Git has a range of hooks that you can use to protect yourself against mistakes, or ensure code standards are kept across your team. I recently had a need to add a pre-push hook to save myself some time when pushing up new PR's.

Our test suite can take quite a while to run, so I'll typically push up, and then move onto other things to come back in a little bit after CI has finished in case tweaks are needed that I missed or didn't run into locally.

Occasionally, I'll be working on a part of the code that looks okay in VSCode, but then fails our typechecking or lint checks because a part of my change broke a file I didn't have open. This pre-push hook makes sure I don't forget to run typechecking before I push up any changes, and will block the push if it fails. Meaning I get a much quicker feedback loop locally rather than needing to wait for CI.

While this does slow down my initial pushes, it's saved me more times than it probably should have and let me fix things up before the CI gets a chance to run.

How to install

To get this running in a project, we can create a file in .git/hooks/pre-push and make it executable with chmod +x .git/hooks/pre-push:

#!/bin/zsh

cmd="yarn run typecheck" # replace with your typechecking/linting command

echo "running typecheck before push..."
eval $cmd
result=$?
if ! eval "$cmd"; then
echo "Failed typecheck! Fix before pushing or force push: \`git push --no-verify\`" >&2
exit 1
fi

exit 0

VSCode integration

To get this working in VSCode, we also need to add the push command to the git.commandsToLog setting inside our VSCode preferences. This allows us to view the error log on failure from within VSCode too.

With these two things in place, we're off to the races!

ℹ️ note
In case you ever need to "just get it pushed", you can force push
your branch by using the --no-verify flag: git push --no-verify

This article was originally published on simonporter.co.uk

Weekend Reading

Simon Porter — Sat, 15 Apr 2023 22:30:00 +0000

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.

// Detect dark theme var iframe = document.getElementById('tweet-1644719245690048513-711'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1644719245690048513&theme=dark" }

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.

// Detect dark theme var iframe = document.getElementById('tweet-1645465276874407938-23'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1645465276874407938&theme=dark" }

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.

// Detect dark theme var iframe = document.getElementById('tweet-1645459301249458177-842'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1645459301249458177&theme=dark" }

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!

// Detect dark theme var iframe = document.getElementById('tweet-1645840553597362176-4'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1645840553597362176&theme=dark" }

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.

// Detect dark theme var iframe = document.getElementById('tweet-1646294594135691268-565'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1646294594135691268&theme=dark" }

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

// Detect dark theme var iframe = document.getElementById('tweet-1646409044620460033-70'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1646409044620460033&theme=dark" }

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!

// Detect dark theme var iframe = document.getElementById('tweet-1646658776890580994-99'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1646658776890580994&theme=dark" }

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!

Weekend Reading

Simon Porter — Sat, 08 Apr 2023 09:00:00 +0000

Hello folks!

Happy Easter weekend for those celebrating! Whether it's family time, work, or stuffing your face full with your own body weight in chocolate - let's take a moment to look back over the past week.

Lot going on in the Twitter-verse as usual, quite a bit of Vercel/Next.JS news, and more fun and games with server components.

Let's jump in shall we?

Ben was at it again with server components. He's now updated his simple-rsc repo (co-authored with Dan himself) to have a fresh README and annotated all source code to help explain what's happening. Super useful if you wanted to get an idea of what's going on under the hood.

// Detect dark theme var iframe = document.getElementById('tweet-1642629178871742471-588'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1642629178871742471&theme=dark" }

There was a very cool tip from Meng on using Midjourney for web vector graphics. I love this idea, as it's often the problem that as a frontend developer you'll have a great idea, but it needs some illustrations or vectors to really come to life. I have a hard enough time keeping up with and constantly learning JS without adding graphic design to my plate 😅 this is a super nice shortcut!

// Detect dark theme var iframe = document.getElementById('tweet-1642619090337427460-877'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1642619090337427460&theme=dark" }

Bun is going to have RSC support in v0.6.0

// Detect dark theme var iframe = document.getElementById('tweet-1642821108402630657-601'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1642821108402630657&theme=dark" }

JP Camara blogs about their experience hunting down a performance bottleneck when using Tanstack Table, and ultimately, the 1000x speed improvements they gained with a one line change. Really love the way they set out the article and followed the train of thought. Great little read and a stellar result.

Some nice Array functions are in Stage 4,a nd already shipped with Chrome 110.

// Detect dark theme var iframe = document.getElementById('tweet-1643428683909066753-621'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1643428683909066753&theme=dark" }

Simon reminds us he has some free Tailwind content just by signing up to his mailing list. If you're interested in dipping your toes into Tailwind, this could be worth a quick punt.

// Detect dark theme var iframe = document.getElementById('tweet-1643390840298156032-238'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1643390840298156032&theme=dark" }

Lee released a new video detailing the new Next.JS App router (what I'm using with this blog!) which gives a nice look over the features in a quick 15 minute review.

Ben isn't the only one jumping into RSC's, vite had an update about their vite-rsc experiment which now supports mutations, very cool stuff.

// Detect dark theme var iframe = document.getElementById('tweet-1643626567405322244-258'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1643626567405322244&theme=dark" }

CSS Selector nesting got added to Chrome Beta this week! Slowly but surely moving it's way to the prime time.

// Detect dark theme var iframe = document.getElementById('tweet-1643607943386914816-149'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1643607943386914816&theme=dark" }

The Adobe React Spectrum team dropped a brand new design system, React Aria Components. Unstyled, and built on top of React Aria hooks, this looks like a neat design system if you like the composable and customizable kind (rather than off the shelf such as Mantine or MUI).

// Detect dark theme var iframe = document.getElementById('tweet-1643988004577619971-997'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1643988004577619971&theme=dark" }

Zod, more Zod. I can't get enough of Zod at the moment as I'm working on adding it to more of our production code at work at the moment. Such a neat library, and Vercel just added it into Next for router type safety. Amazing.

// Detect dark theme var iframe = document.getElementById('tweet-1644112096475619328-947'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1644112096475619328&theme=dark" }

Speaking of Next.JS, version 13.3 was released this week with a few new cool features. I can't wait to try out the File Based Metadata API and Dynamic OG Images. Lot of buzz on Twitter for the Parallel Routes and Interception too.

This Week In React

My top picks for TWIR:

Theo's recap about the Twitter spaces with Dan, Ryan, and a bunch of other clever people, is a great watch. I 💯 agree with the take on Vercel/Next.JS and the hype and excitement that it brings. I also agree with the 'use client' name, but not so much 'use interactive' either 😅 but, luckily, this is just naming semantics. I think something as simple as 'use browser' could be equally as descriptive. It's not that it runs in server or client, but it's targeting the browser, Theo's 'interactivity'.

I still haven't solidified my mental model on refs. They feel like the dark arts, and I'm sure I'm missing a lot of useful use cases. This article from Nadia was a good read, that I'm sure I'll need to refer back to again!

Jim writes about types in JS files by using JSDoc instead of TypeScript. While I think even for personal, quick projects, I'd much prefer to use TS, it's always interesting to see other ways of doing things. And while the JSDocs don't float my boat right now, who knows if it could be a good solution for a particular case in the future. (and hey, more zod!)

CSS Weekly is back but we're out of time for this week. See you on the other side!

Weekend Reading

Simon Porter — Sat, 01 Apr 2023 09:18:00 +0000

Hello folks!

Back again with another instalment. Where did that week go? I hope your week was filled with merges and closed Jira's.

We had quite a few releases this week, from Vanilla Extract to VSCode. Developers keep churning out the next GPT app, so plenty more of them too. And Twitter didn't disappoint for another week with some long but interesting threads.

Oh, and of course, the small matter of releasing the Twitter algorithm to the public where all hell broke loose, as probably expected.

Let's jump in shall we?

VSCode released their March update this week, nothing overly exciting, but the TS/JS switch case completions is nice.

Vanilla Extract added cascade layer support. I still haven't played with this style of CSS yet, but it looks interesting!

// Detect dark theme var iframe = document.getElementById('tweet-1640576883573276672-954'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1640576883573276672&theme=dark" }

Tyler, of ui dot dev, announced a new React course is on the way. Neat looking intro page, might be worth a watch as it sounds exciting.

// Detect dark theme var iframe = document.getElementById('tweet-1640820940018728960-987'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1640820940018728960&theme=dark" }

Theo laments the database performance of Prisma in his latest video. It feels like the migration has begun to DrizzleORM.

Josh shares some more coolness with the :has() selector. There's so much neat stuff this can do, I only wish it had more support so I could dig into it at work.

// Detect dark theme var iframe = document.getElementById('tweet-1640699471905390594-443'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1640699471905390594&theme=dark" }

Dan reminds us they're still working on the React Forget compiler, the promise-land of not needing fiddly useEffects and array dependencies.

// Detect dark theme var iframe = document.getElementById('tweet-1640842748243714050-512'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1640842748243714050&theme=dark" }

If you've been playing with next 13 as I have, you might have ran into a few problems here and there. Lee posted a thread with the most common questions/gotchas and what's coming next!

// Detect dark theme var iframe = document.getElementById('tweet-1641109623154388992-965'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1641109623154388992&theme=dark" }

A new week, a new GPT app. DomainsGPT got a fair amount of eyes this week it seemed 👀

Wes was asking whether people prefer enums over as const. Surprisingly well split actually given a lot of Twitter TS stars seem to be in the avoid camp.

// Detect dark theme var iframe = document.getElementById('tweet-1641481020720525317-570'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1641481020720525317&theme=dark" }

I haven't had time to watch it this week but Ben recorded a stream session with Dan where they built out RSC's in a micro framework and go in depth on the inner workings. Sounded super cool, can't wait to watch. 4 hours though! 😅

Seb's having a week off from This Week In React this week, so that's all we've got! Until next time.

Weekend Reading

Simon Porter — Sat, 25 Mar 2023 21:00:00 +0000

Hello folks!

Another week come and gone, and the tech world is still abuzz with GPT-4. Though it does seem to have calmed down a bit doesn't it? 😅

In other news, bit of a hiccup for GitHub this week as they had to roll their SSH private key after accidentally exposing it in a public repo, yowch. Twitch layoffs continued in a horrendous fashion.

Still, plenty of React and JS news to keep us sidetracked. Grab your drink, pull up a chair, lets have us some weekend reading!

Gajus points out a quick tip to make our DX easier with TypeScript. I can't believe how many times I've been sent to the type definition files rather than the proper code, when it's such an easy fix!

// Detect dark theme var iframe = document.getElementById('tweet-1636641120477384705-736'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636641120477384705&theme=dark" }

Seb posed a question on variable naming and whether you should avoid one letter names. 219 replies, and 210k views. We apparently care a lot about our variable names! So why is it so hard? 😅

// Detect dark theme var iframe = document.getElementById('tweet-1638146370191208449-918'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1638146370191208449&theme=dark" }

Dominik notes that React Query v5 is just around the corner! There's some neat stuff in this release but I also love the object properties by default, and switching back isLoading/isInitialLoading.

// Detect dark theme var iframe = document.getElementById('tweet-1637763194021093379-37'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1637763194021093379&theme=dark" }

Daishi has published a learning "course" for Zustand v4. As he notes, it's such a small library that he's released it fairly cheap.

// Detect dark theme var iframe = document.getElementById('tweet-1638177097528246274-832'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1638177097528246274&theme=dark" }

Tim, the lead from Vercel, announces that create-next-app will now ask if you want to get started with Tailwind CSS instead of CSS modules. This got mixed reactions on Twitter, as it alwasy does when someone mentions Tailwind, but this seems like a nice DX improvement to me. You still don't have to use it if you hate it that much.

// Detect dark theme var iframe = document.getElementById('tweet-1636654046474805249-217'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636654046474805249&theme=dark" }

Dan is still being given grief about RSC's from a lot of folks on Twitter. It's a difficult spot to be in, because it's brand new and they want to gauge how best to implement it, and not all the pieces are in place yet. I love this summary from Dan Jutan of Astro and Solid.

// Detect dark theme var iframe = document.getElementById('tweet-1639283519863005187-6'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1639283519863005187&theme=dark" }

PlayWright released 1.32 this week, which brought with it UI mode and time travelling debug, akin to Cypress. Earlier they made React Testing Library a first class citizen, and this could now mean it's well worth a look if you weren't enjoying Cypress, or wanted to try it on a new project.

This Week In React

My top picks for TWIR:

Pretty neat mapping of all the available React APIs with some background reading behind them. Interesting way to document this information, hope to see more of it!

Brad writes about a list of React's more eccentric hooks, with a few common ones that shouldn't be used all that much thrown in too. No surprises useEffect makes the list, which I feel gets overused as an easy escape hatch quite a lot.

Both Vite and Prettier had some new releases this week. I don't think there's anything earth shattering here but it's nice to see some TS 5.0 support in Prettier already.

There's an interesting read about signals vs observables on the builder.io blog this week, which is fairly topical given I've been diving into React Query lately. Didn't pay too much attention to the signals hype as I had too much on, but this is a nice rundown for anyon who missed it.

Josh wrote about his feelings on AI and the future of development. Definitely match his sentiment that AI isn't going to be getting people fired anytime soon, but it can be a huge help if used properly.

See you next week!

Slicing Data with Tanstack Query

Simon Porter — Sat, 25 Mar 2023 14:00:00 +0000

I've been working with Tanstack Query for a while now and I'm a big, big, fan. I love how it works within my apps, nestled amongst my standard React code without needing a tonne of boilerplate, and how it takes care of the hard bits of caching for me.

Nobody wants to roll their own solutions to these hard problems¹, and Tanstack Query "just works" for the projects I've used it on.

Big props to TkDodo for his continued support!

Slicing Data

Lately, I've been looking at slicing data with the select feature. TkDodo explains this on his blog: React Query Data Transformations but I thought I'd write up my learnings² and talk about how to use them with TypeScript.

The select feature behaves like a redux selector. That is, it lets you take a larger piece of state, and slice it to extract just the parts you're interested in.

Quick Example

View the sample on Codesandbox!

The above example uses the useGetUser() custom hook which calls useQuery to request User data from our backend.

    export function useGetUser<T = User>({
        userId,
        options
    }: {
        userId: number;
        options?: {
            select?: (user: User) => T;
        };
    }) {
    return useQuery({
        queryKey: ["user", { userId }],
        queryFn: async () => {
            return dataOne as User;
        },
        ...options
    });
    }

We've then created a custom useGetGender() hook which uses select to slice off just the gender value from this data.

    const selectGender = (user: User) => user?.gender;

    export function useGetGender({ userId }: { userId: number }) {
        return useGetUser({
            userId,
            options: {
                select: selectGender,
            },
        })
    }

This is really powerful!

You can re-use the same state and slice off the bits you want without needing to make extra requests to other endpoints for the exact same data. Preventing more request waterfalls³ and potentially reducing rerenders⁴.

TypeScript Settings

You may have been expecting some Generic Gymnastics in the code above, in order to type the return values and support all options with UseQueryOptions<>.

For the most part, the recommendation is to let TypeScript do it's thing and infer the values for you. I know, cheating right?

    return useQuery({
        queryKey: ["user", { userId }],
        queryFn: async () => {
            return dataOne as User;
        },
        ...options
    });

This is lying to TS to tell it we're returning a User, but unless you plan on adding Zod, this is about the best you can do.

This then lets TS infer the return of our own custom hook, because useQuery infers what data it will return from the queryFn and so our custom hook infers the same return type.

This makes sense, but what about the select ReturnType? That doesn't return the same data, and we could have multiple select's returning different data couldn't we?

We could always return what we need for this particular select, but that won't work for others with other data types.

    export function useGetUser({
        userId,
        options
    }: {
        userId: number;
        options?: {
            select?: (user: User) => string // Help??;
        };
    }) {

Rather than start making unions for each data type you want returned, the solution is to use a generic on the custom hook to adjust the Return Type with a default.

This way if we use a select function in another custom hook, the return type of the select is passed through.

Otherwise, if no select is used, it defaults to the data we expect (the User).

Considerations

This isn't the only way to set these up though. You could go full hog and provide all the Generics, all the time, and type all the options (with UseQueryOptions<>) but... it's not recommended.

TkDodo has said that new Generics will be introduced in v5, and if you are currently only provide the existing ones, this may break on upgrade.

I'm happy with the trade offs from the above setup though, most inferrance with least duplication.

"There are only two hard things in Computer Science: cache invalidation and naming things." - Phil Karlton ↩
In my initial blog post, I write about why I wanted to write about my learnings. To cement my knowedge mostly, and if it's beneifical to others, that's a plus too! ↩
Take a look at the GTMetrix blog for an explanation of request waterfalls. ↩
It's actually a little more involved than that, while it can help, you should be aware of render optimizations in React Query first. ↩

Weekend Reading

Simon Porter — Sat, 18 Mar 2023 21:35:00 +0000

Hello folks!

It was a different acronym that took over this week, it seems that there was nothing but GPT-4.

"GPT-4 has changed our lives!", "GPT-4 is blowing my mind!", whilst others preferred to focus else where 😅

// Detect dark theme var iframe = document.getElementById('tweet-1636355189652291585-125'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636355189652291585&theme=dark" }

Still, there was still some good stuff to be catching up on with React and TypeScript, so get your coffee, put your feet up, and let's catch up with some weekend reads.

Adam was looking to gauge iterest in adding ESM/TS support for TailWind config, which after a 65% poll in favour, ended up being implemented on his birthday! Happy birthday Adam 🎂 but this is pretty neat.

It was always possible to import the TailWind Types via comment for VS Code intellisense¹, but this makes it a firm feature which is a move in the right direction for sure. Hopefully more libraries follow suit.

// Detect dark theme var iframe = document.getElementById('tweet-1636113129691029507-852'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636113129691029507&theme=dark" }

Kent absolutely won the troll game with so much GPT-4 going around. Pure joy 😆

// Detect dark theme var iframe = document.getElementById('tweet-1636206739820519424-10'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636206739820519424&theme=dark" }

I really love this style of info dumping. Short bursts via whiteboard from Ben with his WhiteboardTheWeb series.

If you aren't following already, it's well worth a go. This weeks is on point with React Suspense and Client/Server side fetching.

// Detect dark theme var iframe = document.getElementById('tweet-1636427842236866560-845'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636427842236866560&theme=dark" }

Matt meanwhile was having fun with React types and running into some problems. So much so that Dan jumped on to ask how he could help fix them.

It's so great to see this work in the open and the boffins coming together to work on solutions. Catch Matt's live stream replay for the full rundown.

Speaking of TypeScript, we had TS 5.0 release this week! There's a few new interesting features, my fave being the const params is now a thing (goodbye as const!) and decorators.

Not sure how I feel about decorators, as it reminds me far too much of OOP that we shy away from in JS-land, but I'm willing to be swayed.

Another big release this week was the new React docs finally going live from beta. This has been a multi year project and it's great to see it finally come to fruition.

It's a huge resource for learning all about React from simple to advanced concepts. I've really enjoyed the beta docs for some time, but you can find them now on react.dev.

Julien had an interesting take on Generics with React Query options. Reading Tkdodo's recommendations made me pause for thought, we've been happily using the Generic version to allow for all options to be provided just for future proofing, but perhaps inference (and basically more zod) is the way to go.

// Detect dark theme var iframe = document.getElementById('tweet-1636740585473077250-566'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636740585473077250&theme=dark" }

This Week In React

My top picks for TWIR:

Andrew writes about his experience learning react and remix and the web APIs. It's a nice reminder that you don't need to stay in the same technology just because. There are web APIs available to us, even if we're mostly writing React. Same goes for some CSS and TailWind I find.

A history of hooks by Brad is a nice little reminder of how we got to where we are today. Let's just skip over the 2016 period as the dark days 😆

And that's all she wrote!

If you imported this line above your tailwind module.exports, it would allow for this: /** @type {import('tailwindcss').Config} */ ↩

Weekend Reading

Simon Porter — Sat, 11 Mar 2023 00:00:00 +0000

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 13¹ 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. // Detect dark theme var iframe = document.getElementById('tweet-1631885118355718144-456'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1631885118355718144&theme=dark" }

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!

// Detect dark theme var iframe = document.getElementById('tweet-1633811575818579968-964'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1633811575818579968&theme=dark" }

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.

// Detect dark theme var iframe = document.getElementById('tweet-1634128647173861376-169'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1634128647173861376&theme=dark" }

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!

// Detect dark theme var iframe = document.getElementById('tweet-1633429660389318656-611'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1633429660389318656&theme=dark" }

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

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.

// Detect dark theme var iframe = document.getElementById('tweet-1632472849960280064-359'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1632472849960280064&theme=dark" }

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.

Have a wonderful weekend!

My blog is built with Next.JS 13 and RSC, and it was an interesting set up and shift in thinking. Worth giving a go. ↩
While you can't import server components in child components with RSC, you can pass them as props using the standard {children} prop! ↩

It's all about the frameworks

Simon Porter — Fri, 10 Mar 2023 15:27:00 +0000

We've built PHP!

This week Kent hosted a live stream with Dan and Joe from the React core team to hash out what RSC's are all about. There's quite a lot of buzz and confusion around this new feature.

Dan has been super active on Twitter trying to answer questions and explain RSC's.

// Detect dark theme var iframe = document.getElementById('tweet-1631875392532279305-799'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1631875392532279305&theme=dark" }

Briefly, RSC's allow React components to be rendered on the server, including data fetching. To be a server component though, they cannot hold state or produce side effects (e.g. useState and useEffect).

This means less code gets sent to the client, so faster load times, and potentially faster data fetching if your server is located with your DB.

Confusing components

At a high level, this makes sense. The devil's in the details! The tricky part is these RSC's are tightly bound to the frameworks right now, and so you really need Next.JS to play with this new tech¹.

Many folks in stream chat were expecting more. Docs? Examples? Repos? But it seems we're still too early for that just yet, and even Next.JS classes this as beta. That does signal things could change but these calls for comments are a good way to put the feelers out and see what's what.

The confusion comes over how exactly they work. Like kids in a toy store, we want things, and we want them now! RSC's bring a new mental model² to the table, and we're going to need to get on board with that before we decide if they're cutting the mustard.

The best place for this right now is Dan's Twitter feed.

// Detect dark theme var iframe = document.getElementById('tweet-1633574036767662080-130'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1633574036767662080&theme=dark" }

Serverside concerns

So what's the problem?

The waterfall

Due to RSC's being nested among Client Components, it's going to be easier to end up with a server-side waterfall. As the tree gets parsed, one RSC can trigger a request, then as the tree progresses, more requests get triggered. Unlike Remix where server data is gathered at the route loader.

The solution is to de-dupe requests via a new fetch(). Next.js is doing this already, and means a query key can avoid waterfalls where possible.

Patching fetch

There was some buzz a while ago about React patching fetch. Muscling in on browser API's for React wasn't taken too kindly.

They're not patching fetch, though it will be a custom fetch that the frameworks will need to provide if they want, but it's ultimately a decision for the implementor.

Cache headers and accessing req object

Can we access the full request object with this custom fetch, and can we set custom headers?

This had a bit of back and forth but ultimately it sounds like, maybe. Depends on the framework 😄 The discussion was around the benefit of being able to do that in the first place and why it's needed.

'use client'

In Next.JS components are RSC by default, and you need to add the use client directive to function as they do today. This "opt out", rather than in, is seen as annoying and not overly clear what type of component you're dealing with from a DX perspective.

Dan did acknowledge this and mentioned it was a bit of a trade off. For the given benefits, this seemed like the best option, though they did try others and liked those worse. Perhaps it will improve as more and more people start to use them.

More than a feeling

Overall, there was a sense of excitement. Still some trepidations from chat, and Kent didn't seem 100% won over, but he did seem more appeased.

Many of these conversations seem to start with comparisons of frameworks though. "Remix does it like this", "Astro does it like this" which I think is wrong sort of questions. The real question is "how does this improve my life as a React developer", "what are the possibilites"? And does it improve UX as well as DX? For me?

Yes, I think it will. But it won't come overnight and not without a bit of work on your mental model.

Shopify did attempt this with Hydrogen but abandoned it in favour of Remix. ↩
For most React developers certainly. Though if you use Astro or Remix, there are some comparisons here. ↩