Zod is a Typescript package that lets you declare your data types and do runtime type checking.
Lots of possible utilities for this library. Validation and type guards come to mind first, but Zod also includes a lot of helpful methods such as default and transform.
import { z } from 'zod'\n\nconst Post = z.object({\n id: z.string().uuid(),\n title: z.string().min(1),\n body: z.string()\n})\n\n// Declare the type\ntype Post = z.infer<typeof Post>\n\nconst myPost = {\n id: 'c2cffa40-8169-4e9b-bce4-af21bc17b033',\n title: 'Validate schemas and declare types with Zod',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'\n}\n\nPost.safeParse(myPost)\n\n// {\n// success: true,\n// data: {\n// id: 'c2cffa40-8169-4e9b-bce4-af21bc17b033',\n// title: 'Validate schemas and declare types with Zod',\n// body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'\n// }\n// }Useful libraries for coloring programming language syntax.
Lowlight and Refractor are two interesting libraries that wrap highlight.js and Prism respectively.
From Titus Wormer:
Virtual syntax highlighting for virtual DOMs and non-HTML things.
Instead of returning a HTML string with <span>s and class names, it returns an array of objects that you can use to create HTML or anything else really. Super useful for creating React components without using something like dangerouslySetInnerHTML.
In any Typescript project you will inevitably end up working with an unknown data type that you need to know its correct type to proceed with confidence. One strategy for ensuring type correctness is with type guards.
According to the Typescript docs:
A type guard is some expression that performs a runtime check that guarantees the type in some scope.
In practice, a type guard is simply a function that accepts some value as an argument and returns a boolean. The function also has a special return type in this format: value is SomeType. If the function returns true, then the value passed in is the type SomeType. If the function returns false, then it’s not. This is especially useful for narrowing a union type or validating data returned from an API.
Some basic type guards can make any project more readable and reduce duplicated code. Starting with a few native JavaScript data types we can have the building block type guards for more complex types.
The following are type guard examples for the most basic and common data types: array, boolean, null, number, object, string, undefined.
function isArray(value: unknown): value is Array<unknown> {\n return Array.isArray(value)\n}\n\nfunction isBoolean(value: unknown): value is boolean {\n return typeof value === 'boolean'\n}\n\nfunction isNull(value: unknown): value is null {\n return value === null\n}\n\nfunction isNumber(value: unknown): value is number {\n return typeof value === 'number'\n}\n\nfunction isObject(value: unknown): value is Record<string, unknown> {\n return typeof value === 'object' && !Array.isArray(value) && value !== null\n}\n\nfunction isString(value: unknown): value is string {\n return typeof value === 'string'\n}\n\nfunction isUndefined(value: unknown): value is undefined {\n return typeof value === 'undefined'\n}These basic type guards are super helpful in variety of use cases — notably when discerning an optional type while also improving readability. The first statement uses a reusable type guard and is easier to read.
if (isUndefined(foo)) {\n // Do something\n} else {\n // Do something else\n}\n\n// versus\n\nif (typeof foo === 'undefined') {\n // Do something\n} else {\n // Do something else\n}Consider the following nested type for a Song:
type Song = {\n title: string\n album: Album\n}\n\ntype Album = {\n name: string\n releaseDate: string\n band: Band\n}\n\ntype Band = {\n name: string\n members: string[]\n startYear: number\n endYear: number | null\n}For example:
const song: Song = {\n title: 'Tomorrow Never Knows',\n album: {\n name: 'Revolver',\n releaseDate: '5 August 1966',\n band: {\n name: 'The Beatles',\n members: [\n 'John Lennon',\n 'Paul McCartney',\n 'George Harrison',\n 'Ringo Starr',\n ],\n startYear: 1960,\n endYear: 1970\n }\n }\n}While we could write a single type guard to check this song object, it’s much easier to break up the object into its primary parts starting with the most deeply nested object. In this case, that’s the members array.
function isMembers(value: unknown): value is string[] {\n if (!isArray(value)) {\n return false\n }\n\n return value.every((item) => isString(item))\n}Now we have all the pieces to move up to the Band object by using our basic type guards along with our isMembers type guard.
function isBand(value: unknown): value is Band {\n if (!isObject(value)) {\n return false\n }\n\n return (\n isString(value.name) &&\n isMembers(value.members) &&\n isNumber(value.startYear) &&\n (isNumber(value.endYear) || isNull(value.endYear))\n )\n}Next, let’s move up to the Album object.
function isAlbum(value: unknown): value is Album {\n if (!isObject(value)) {\n return false\n }\n\n return (\n isString(value.name) && isString(value.releaseDate) && isBand(value.band)\n )\n}Finally, we can write our Song type guard. And it’s trivial to check for list of songs as well.
// Song type guard\nfunction isSong(value: unknown): value is Song {\n if (!isObject(value)) {\n return false\n }\n\n return isString(value.title) && isAlbum(value.album)\n}\n\n// Song list type guard\nfunction isSongList(value: unknown): value is Song[] {\n if (!isArray(value)) {\n return false\n }\n\n return value.every((item) => isSong(item))\n}What's great about this technique is that it is easy to reason about. They're also easy to write tests for. Also, you never have to worry about the argument type since we just label that as unknown and you never have to cast an object in order to read a property off of it.
This layering approach works well when objects aren't too large. For larger and more complicated types, it might be a good idea to create a JSON Schema file and validate it in your type guard with a library like Ajv.
Ryan Florence gives an excellent summary of different caching and build strategies for your website or app.
The most exciting aspect of this whole video is the stale-while-revalidate cache control header. This allows server side rendered sites the ability to always be served from a CDN (besides the very first request) similarly to static site generated pages.
Unfortunately, not many CDNs currently support this. Out of the large CDNs including CloudFront, Cloudflare, and Fastly, it seems that just Fastly supports it fully, while Cloudflare "supports" in a partial and imperfect way. Smaller networks like Vercel also support it.