Today I'm happy to announce my new open-source project called Strum, which is available as version 1.0.0 right now!

```bash
npm i @strum/react
```
You can read a little about the story behind Strum here on the blog, or get started right away by checking out the [documentation website](https://strum.design/) or visiting the [GitHub repo](https://strum.design/).

## What is Strum?

Strum is a design system that primarily consists of accessible React components, base styles, design tokens such as colors and spacers, and atomic classes that allow you to use these styles in your app. It's built to have interchangeable light and dark modes, so if you use Strum's design tokens to style your custom components, you can be certain that the components are going to look great when you switch color schemes.

It's built with a number of technologies, but one of its defining features is that it is styled with [Vanilla Extract](https://vanilla-extract.style/), a zero-runtime TypeScript styling solution. This also gives Strum access to atomic styles using [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles/). Your components can take on sizes, colors, font varieties, and many other styles using either a simple `vars` object, or by using a primitive `<Box />` component that takes design tokens as props.

You can use Strum in any React environment by just loading in a single CSS file and importing whichever components you want, but if your application already uses Vanilla Extract, you can take advantage of Strum's features in your own `.css.ts` files.

## Why a new design system?

There are so many great design systems and component libraries available, so why did I decide to tackle this on my own with far less time and fewer resources? The main reason is honestly my obsession with Vanilla Extract. As a styling solution, zero-runtime styles with a TypeScript preprocessor is where I want to live for the foreseeable future. Alongside Tailwind, I think it's one of the only options that has a chance at surviving long-term, avoiding the performance problems of CSS-in-JS and also the DX problems of simple preprocessors. On paper I think Tailwind is great, but in practice I don't enjoy using it.

Because I've chosen to align with Vanilla Extract as my preferred styling solution, I started refactoring all of my personal sites to use it. Along the way I ended up with a pretty nice folder of components and atomic styles that worked for multiple websites, and the name of that folder was `strum-design-system`. The idea for breaking Strum into its own installable system was simply that I didn't want to maintain clones of that folder in multiple repos. As you can probably imagine, turning a personal component library into something that everyone can use was a major undertaking that ate up quite a few weekends.

There are a few design systems built with Vanilla Extract, such as [Braid](https://seek-oss.github.io/braid-design-system/) and [degen](https://degen-xyz.vercel.app/), but they weren't exactly what I was looking for in terms of look and feel. Strum started as a fork of degen and shares much of its architecture, but components and styles were essentially created from scratch.

### Priorities

Accessibility is perhaps my highest priority while building Strum. The library is a bit opinionated on styles and required props in order to enforce better practices, so I'm always looking for feedback on what's working and what's not working for users. If you see accessibility requirements that could be improved, I'll always treat these with the highest priority on our [GitHub issues](https://github.com/colinhemphill/strum).

I think Strum looks *amazing*, but I'm willing to compromise on how it looks in order to make components as accessible as possible. After that, my focus will be on improving end user performance by trimming fat and making smarter architecture choices. I think the developer experience is pretty solid, but this is something I'll keep looking into, especially the `<StrumProvider />` architecture which enables light/dark modes and accent color selection.

## What's next?

There are more components that are on my roadmap for version 1.1.0. Most of all, I need to round out my form components with radios and checkboxes to make the library truly viable. From there I'll keep poking away at optimizations to improve performance, fixing any bugs that come up, and maybe one day I'll actually start *using* the library on this website 😅

One day I'd also love for a developer to be able to pass in their own CSS variables according to Strum's theme contract, which would enable fully customizable color schemes and design tokens like spacers. This might be more of a 2.0 goal, however!

Strum Design System is a React component library written with Vanilla Extract. It is beautiful, versatile, accessible, and atomic, with zero-runtime styles.

Introducing the Strum Design System for React

On June 6th I will be starting a new position at [Bitly](https://bitly.com/) as a Senior Front End Engineer for the Link Experience team! You may know Bitly as the website that provides those `bit.ly/****` short links you see all over the place, but there’s a lot more going on behind the scenes.

## My Role at Bitly

Link Experience is responsible for the core Bitly product where users can create and manage shortened links. Much of my hands-on work will be similar to what I’ve been doing, focused on building beautiful and accessible user experiences in React and TypeScript. Ultimately my role will be to lead technical planning for front end initiatives, help set standards for modernizing our systems, and to collaborate and mentor alongside a talented and diverse group of engineers, designers, and product managers. I had fun and interesting conversations with many different people at the company, and am excited to start making cool things with them!

While Bitly has offices in New York, Denver, and San Francisco, I will continue to work fully remote from Austin. I’m excited about the steps they’ve taken to become "remote first" by reducing meetings and enabling comfortable working hours for folks in any time zone. In addition to many great benefits that are common in engineering these days, Bitly also has unlimited ad-hoc mental health days, half-day Fridays, great company employee resource groups, support for professional development such as company-sponsored conferences, and **quarterly** hack **weeks** for both engineering and design!

## Many Thanks to The Zebra

When I was looking to transition out of my first job, it was a little difficult to find a company that would be willing to take me on. While I had technical expertise and good architectural skills, I had almost no experience working day-to-day with a team of engineers, reviewing code, or writing tests, and was used to a very informal process where I just kind of... did whatever I needed to in order to get my work done. After submitting applications and great coding exercises to a few different companies, I was turned down at later stages because my background was a bit more risky (and perhaps because I was so very very nervous).

The Zebra was at the top of my list for places that I wanted to work, not because car insurance is glamorous, but because it seemed like a mature company both in product and in culture. Not only did they take a risk that many others weren’t willing to take, but they also followed through on the promises that were made. The "best place to work" wasn’t just a title they added to their careers page, but a tangible thing I could experience as an employee.

Alongside the amazing directors, managers, and individual contributors that I worked with at The Zebra, I was able to do some exciting things there, and I’m truly proud to look back at the work we were able to accomplish. They understood my career goals and my personal aspirations, and worked hard to provide opportunities to help me reach them. It was always collaborative and never competitive.

If you were part of CX2, the Auto Funnel Team, or Team Odyssey, you can know without a shadow of a doubt that you made showing up to work a great experience for me, and I hope that I was able to do the same for you. Everyone I worked with across teams lived out the company values and made me feel that "All Stripes Welcome" was true. Thank you to all of my once and future Front End Friends, even if you spell "front end" wrong. 😉

### Embracing the Front End

After more than 3 years working as a full-time engineer with a front end focus, I was able to prove to myself that React and TypeScript and styles and state management and buttons and forms and screen readers and SSR and SSG and all those little things that make the modern front end ecosystem what they are today are the best parts of the web. I love making such a direct impact on the people who use the websites that I build.

A few years ago it was TypeScript that was always on my mind—the thing I would advocate for above all other architectural decisions. At this point I can’t go back. If you want to know what’s on my mind these days, it’s definitely [Vanilla Extract](https://vanilla-extract.style/)! 🧁

## Next Steps

Before making the transition I’ll be taking a few much needed weeks off, so if you’re local and want to hang out during that time, please reach out! With Elden Ring finally behind me, I plan to spend some time with my new Canon R6 to continue working on my amateur photography skills.

<Lightbox
  alt="A photo of a small stuffed zebra wearing a shirt with The Zebra logo on it"
  rounded
  src="https://media.graphassets.com/PxAMzCpHSRaYOvHJBtvT"
  width={1920}
  height={1280}
/>

Colin has accepted a new position at Bitly as a Senior Front End Engineer! Thank you to The Zebra for all of the amazing experiences.

An Announcement: My New Position at Bitly!

I don’t usually purchase many games in the same year that they release, especially not full-priced AAA releases. This past year was a little different, in no small part because I started subscribing to Game Pass for PC, which has provided access to lots of Microsoft platform exclusives that I wouldn’t normally play as a PS5 owner. Game Pass also has tons of great indie games that would be much more affordable to pick up individually, but are part of a saturated market where at some point you have to start being more selective about what you purchase. For the other stuff, my workplace has provided a substantial monthly credit that I’m now allowed to use towards game purchases, which has funded many of the bigger titles.

And so for the first time ever, I feel like I’ve played most of the major yearly releases that could fill out a whole top 10 list. And thus, I feel like I should write down my personal top 10 video games of 2021!

## My 2021 in Games

Ever since my job went fully remote, I’ve preferred console gaming since it gets my away from my office and the desk where I spend most of the day working. As such, most of my gaming this year happened on the PlayStation 5, and I filled out the rest on my PC when I had no other option. My Switch didn’t get much attention this year since many of the first-party releases were widely panned, and I’m not personally interested in the 2D Metroid franchise (or really any Metroidvania games). I managed to pick up every giveaway on the Epic Games Store in 2021, so much of what I played also came from that rapidly expanding library.

## My Personal Top 10

For what it’s worth, I did not complete every game on this list. However, if it appears on the list I’ve played enough to know that I want to see it through to the end.

### #10 Deathloop

I’m typically a fan of immersive sims, including Arkane’s own Dishonored series and Prey, as well as the recent Deus Ex games. Deathloop might be my least favorite of all of them. It has a strong start with fun banter between interesting characters. As it starts to unpack the looping mechanics, what seems like infinite possibility starts to feel like a funnel leading you to a single solution. What initially feels like a big living world starts to feel like little isolated maps with pre-scripted interactions in a few different time intervals. As I started to hear that the story beats and ending were particularly uninteresting, my interest faded somewhat.

### #9 Unpacking

Unpacking is a beautiful little game with immersive storytelling that is truly unique. I also have to applaud the folks who worked on the sound design, because I hear that there are over [14,000 foley samples](https://twitter.com/SanatanaMishra/status/1456120197081821185) which make ever thump and slide on each surface and for each item feel unique and natural. _It’s on Game Pass!_

### #8 Psychonauts 2

Psychonauts 2 is a pretty long game, so while I haven’t completed it I got invested in their storytelling right out of the gate. I’m not typically a fan of this type of throwback platformer, and I have no nostalgic connection to the original game, but the sequel did a great job of luring me in with interesting world designs, great characters, and meaningful explorations of human personality and mental health. It also has Jack Black. _It’s on Game Pass!_

### #7 Returnal

Returnal was severely hamstrung at launch because it lacked any form of save points for progression in a given run. This meant that if the PS5 crashed or tried to update while the game was suspended, your progress in a very lengthy run would be completely gone. I never felt comfortable leaving the game, so if I didn’t have 2+ hours in a single sitting, I wouldn’t play it.

While the action feels absolutely perfect, and the combat, environments, and subtle storytelling are very neat, I had to put it down as it got more difficult and the risk of losing a run became greater. Since they’ve added saves in the last few months I haven’t had a chance to revisit, but I hope to soon!

### #6 Hitman 3

I tried my best to get into the 2016 Hitman reboot. Journalists and reviewers I tend to strongly align with loved it, and continued to love it through Hitman 2. This year when the new one came out, I kept hearing great things. When I heard it described as “Tony Hawk’s Pro Murderer”, I think it finally unlocked what I needed to do to have fun in the game.

There _was_ a bit of a learning curve, but once I started to let loose and get weird with it, Hitman finally clicked for me in a big way. I especially loved some of the maps in Hitman 3 like Dartmoor and Berlin, which add fun twists to the formula. But since Hitman 3 allows you to unlock every map from the previous games, I was able to get back some of what I lost in the years where I wasn’t in love with this series.

### #5 Ratchet And Clank: Rift Apart

In contrast, Ratchet and Clank is a series that I have been a fan of since the PS2 years. While Rift Apart doesn’t radically expand on the formula, I think it’s far and away the best Ratchet and Clank game in a very long time, and maybe the best overall. It’s also a fantastic showcase for what the PS5 is capable of in terms of graphical fidelity, fast SSD load times, and the adaptive controller triggers. The new characters were a great addition to the series as well, and elevated the story beyond the childishness that the series can sometimes fall into.

### #4 Guardians of the Galaxy

There is no greater surprise on this list than my #4 pick. While I enjoy the Deus Ex games from Eidos Montréal quite a bit, their take on Guardians of the Galaxy looked absolutely terrible right up until the release date. Furthermore, I absolutely _despise_ the whole Marvel thing, and all Disney properties are more or less banned in my house. So here we are in 2021 with all of those journalists I trust raving about Guardians of the Galaxy. Sure enough, this game is great. It has decent action that maybe got a little tiring, but I could not be happier with the storytelling and the character portrayals.

### #3 The Forgotten City

This is a short indie game that I’ll probably be thinking about for years. What started as a Skyrim mod years ago still maintains a little bit of that charming jankiness, but they tell a fantastic story with top tier video game writing. The Forgotten City also has the smartest looping mechanics of any game I’ve played (loops were very popular this year), and it’s absolutely loaded with quality-of-life features that make it really enjoyable to engage with those mechanics.

One of the endings can be a little hokey, but even at its most cliché, The Forgotten City offers an emotional ride that is likely the most intriguing story in 2021 games. _It’s on Game Pass!_

### #2 Resident Evil Village

I have no attachment to the Resident Evil franchise, but I really liked the direction they took it with Resident Evil 7. I was happy to hear that reviews of Village were great, and described exactly what I was hoping for in a horror game: a campy romp through different styles of B Movie horror. I’ve played a chunk of this on stream and plan to complete the rest on stream too, but I just keep thinking about how much I don’t necessarily have the energy to stream.

### #1 Inscryption

Go play this game. I’m begging you.

## Honorable Mentions

### Things I Played

- **The Ascent.** This was a neat game that has good twin stick shooter combat and a dense cyberpunk world elevated by great music and visuals. Unfortunately, it was also loaded with bugs that eventually caused me to drop off. I’m not sure how much has been patched at this point, but I think it would be very difficult to get back into it. _It’s on Game Pass!_
- **Kena: Bridge of Spirits.** This past year I was absolutely not in the mood for this type of platformer. Mechanically, it’s not too far removed from character action games you would have seen on the PS2. Visually, it’s one of the most beautiful games out this year. I’m looking forward to seeing what else this studio can do now that they’ve taken their animation expertise to the games industry.
- **Forza Horizon 5.** While I don’t particularly enjoy the zany energy and enthusiastic “very online” writing of this game, it’s good stupid open-world driving fun even for people like me who don’t care about cars in the slightest. _It’s on Game Pass!_

### Things I Didn’t Play

There are also a number of things that came out this year that I simply haven’t had a chance to touch yet, but I’ve either watched my wife play them or heard good things from reviewers I align with.

- **The Artful Escape.** Mechanically it doesn’t seem too interesting, but the art, premise, and voice cast seem wild. _It’s on Game Pass!_
- **Sable.** Great looking atmosphere in a chill game about making deliveries. _It’s on Game Pass!_
- **Chicory: A Colorful Tale**. Awesome soundtrack and fun coloring mechanics, alongside a deep exploration of impostor’s syndrome and feeling like you don’t have any creative energy left.
- **Loop Hero.** I just picked this one up for free on Epic Games Store, and am looking forward to trying it out.
- **Halo Infinite.** I simply don’t have a PC capable of playing it, and the cloud streaming experience wasn’t great for me. Otherwise I’d be working through the campaign on it! _It’s on Game Pass!_
- **Solar Ash.** I was a big fan of Hyper Light Drifter, and this seems like a cool direction for the studio. A little Jet Set Radio, a little Shadow of the Colossus.
- **Overboard.** Another neat time loop where you play as a very murdery lady trying to do more murder to cover up her murder.
- **Guilty Gear Strive.** If I were still invested in fighting games, I would have loved to throw down on GG this year.
- **Scarlet Nexus.** I tried out the demo, and the combat is very fun. If I can turn off my brain for some weird teen anime nonsense I’ll probably try it out. _It’s on Game Pass!_
- **Tales of Arise.** I simply didn’t have the energy for a lengthy JRPG in 2021.
- **Wildermyth.** Unfortunately I will never be able to get past my distaste for the art direction of this game. Despite how many great things I hear, I don’t know if I can see myself ever playing it. It’s shallow, but for now I just have to hope that they do a sequel and invest some time into developing a new art style for it.

## Dishonorable Mentions

Maybe better described as “I wish I liked this more”.

- **New Pokémon Snap.** A trite and monotonous take on the original N64 game with almost no positive innovations on the formula. What worked at a short length in the original has been overextended and forced into endless repetition in order to pad the length, and the interactions in each map are too involved and too obtuse to be enjoyable.
- **Death’s Door.** I felt really good about this game from this start, but grew colder on it as I progressed, completing the game with a fairly sour opinion on it. I was primarily bothered by the world exploration, but also let down by the lack of variety in combat, weapons, and abilities. While I love that adorable little bird, and the art is fantastic, I also found the world and characters to be fairly lifeless and uninteresting.
- **Skatebird.** While I’d consider this more on the “toy” side in that it’s a small sandbox experience, I was excited to give it a shot because birds are great. The skateboarding is awful and the bird breeds are simply palette swaps of the same bird model. At least it has a dedicated “screm” button. _It’s on Game Pass!_
- **Twelve Minutes.** I’m begging you to _not_ waste your time. _It’s on Game Pass!_

## Final Thoughts

Unfortunately 2021 was also the year I got into Genshin Impact in a big way, so I spent lots of my free time wrapping up the current story content and grinding away to level characters, weapons, and artifacts. Needless to say, I could have played much more other stuff if I wasn’t still playing Genshin 😅

I also replayed Mass Effect and Mass Effect 2 because of the release of Mass Effect Legendary Edition. I didn’t include that here since it’s all nearly identical to the original releases, but it’s nice to have a console copy with improved visuals and the whole series in one convenient package. I’m still working through a Mass Effect 3 playthrough with that save file.

I also started out Ghost of Tsushima with the release of the PS5 director’s cut this year. While it is a bit of a throwback to old Ubisoft-style open world games, and much of the side stuff feels pretty monotonous, I’m still enjoying it quite a bit.

Is 2022 the year I finally try Death Stranding? Lots of people changed their minds on it in 2021 after Director’s Cut came out 🤔

Colin talks about 2021 in video games, and describes his top 10 from the year as well as honorable and dishonorable mentions.

Colin’s Top 10 Video Games of 2021

Implementing a syntax highlighter can elevate the look and feel of code snippets in your Next.js application to that of your favorite desktop editor. These highlighters can also add tremendous burden on client load times and lead to a poor experience for many users. Today we‘ll look at a static generation method that does all the work up front to provide a lightweight and snappy experience for the user!

## Static Syntax Highlighting

When you start your journey towards implementing a syntax highlighting solution, you can avoid a lot of mistakes that I made trying to figure out what works best. The end product will look something like this example TypeScript snippet:

<CodeSnippetHeader text="components/Example.tsx" />

```tsx
interface Example {
  text: string;
}

const Example: React.FC<Example> = (props) => {
  const { text } = props;

  return <div>{text}</div>;
};

// an example of a comment
export default Example;
```

You may notice that the code snippet matches my website styles, and I’m also able to provide alternate themes for dark and light modes if I so desire.

### The Tech Stack

To accomplish the type of snippets I use on this blog, we‘ll be working with the following tech stack:

- **Static Markdown files or a headless CMS**. While this blog uses [Hygraph](https://hygraph.com/), you can plug in any headless CMS as long as it allows you to write markdown as a content type. For this tutorial we‘ll just be using local `.md` files stored in your Next.js project.
- [MDX](https://mdxjs.com/). A Markdown compiler that allows you to render JSX, including custom components. This is so powerful!
- [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote). Light utilities that allow Next.js to statically load MDX and then properly hydrate on the client.
- Either [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) to tokenize the code blocks and provide styling classes.
  - MDX uses [Rehype](https://github.com/rehypejs/rehype) internally, and provides access to Rehype plugins that we‘ll be using for these highlighters.

## Solution

And finally, here‘s how to implement these tools in your Next.js project.

### Setup

As a prerequisite, you need a working Next.js app with a page where you would like to load the Markdown content. If you‘re starting from scratch, you can use [Create Next App](https://nextjs.org/docs/api-reference/create-next-app) to get a starter project up and running. Once this is ready, install the dependencies we‘ll be using.

```bash
npm i --save next-mdx-remote rehype-highlight
```

**Highlight.js or Prism?** For this tutorial we‘ll be using Highlight.js, but both options have their merits. If you decide to use Prism instead, simply replace `rehype-highlight` with `@mapbox/rehype-prism`, and then use Prism stylesheets instead of the linked Highlight.js stylesheets.

### Adding the Markdown

Start off by creating your first Markdown file! We‘ll create a `posts` folder in your Next.js project and add an example blog post to it.

<CodeSnippetHeader text="posts/example.md" />

````markdown
# My Example Blog Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

```tsx
const test = "test";

interface Test {
  myProp: string;
}
```
````

### Serializing the Markdown

In your Next.js page, we‘ll use the `getStaticProps` feature to pass a set of props to the main page component. In production, `getStaticProps` typically runs at build time, so if you use it properly, Next.js will code split so that none of the dependencies used here are sent in client bundles. Load your Markdown file, then serialize it using `next-mdx-remote`:

<CodeSnippetHeader text="pages/blog/example.jsx" />

```jsx
import { serialize } from "next-mdx-remote/serialize";
import path from "path";

export const getStaticProps = async (ctx) => {
  // if this is a dynamic route, you can get the post id from ctx.params
  // and use that to load the expected Markdown file
  const post = await fs.readFile(
    path.join(process.cwd(), "posts", "example.md"),
    "utf-8"
  );
  const mdxSource = await serialize(post);

  return {
    props: {
      mdxSource,
    },
  };
};
```

### Rendering the Markdown

You‘ll now import the `MDXRemote` component and use that to render your serialized MDX.

<CodeSnippetHeader text="pages/blog/example.jsx" />

```jsx
import { MDXRemote } from "next-mdx-remote";

// ...getStaticProps code from earlier

const Page = (props) => {
  const { mdxSource } = props;

  return (
    <>
      <div className="blog-post">
        <MDXRemote {...mdxSource} />
      </div>
    </>
  );
};

export default Page;
```

If you open `localhost:3000/blog/example` you should now see the Markdown content rendered!

<Lightbox
  alt="A screenshot showing an example from Colin‘s blog where the Markdown has now been rendered on a page"
  src="https://media.graphassets.com/wSgRytEwT32mrG9Rw8pA"
  width={2032}
  height={1167}
/>

If your app includes any styles for `pre` or `code` tags you may see those styles applied, but at this point you cannot style individual syntax tokens. Let‘s take care of that part now!

### Highlighting the Code

We‘ll now add the Rehype plugin to add syntax highlighting to the serialized code blocks. Make the following small modification where you called the `serialize()` function:

<CodeSnippetHeader text="pages/blog/example.jsx" />

```jsx
import rehypeHighlight from "rehype-highlight";

export const getStaticProps = async (ctx) => {
  //...
  const mdxSource = await serialize(post, {
    mdxOptions: { rehypePlugins: [rehypeHighlight] },
  });
  // ...
};
```

If you view the page, you probably won‘t see any immediate changes. However, if you open the inspector, you should see that Highlight.js has now added classes for tokens within your code block!

<Lightbox
  alt="A screenshot of the same blog post with the Google Chrome inspector open, showing that classes have been added to various tokens in the code syntax"
  src="https://media.graphassets.com/EBYKJRDQQNaV6j72Geun"
  width={2032}
  height={1167}
/>

All that‘s left is to use those classes to apply a theme.

### Adding Styles

Head to the [download page](https://highlightjs.org/download/) on the Highlight.js website. There you have a number of options depending on how you want to load your styles. You can either use their provided CDN to load a stylesheet, or you can download a CSS file for your desired theme and load that with the built-in CSS support in Next.js (which enables hot reloading).

If you‘re downloading a theme, follow the Next.js documentation for [adding a global stylesheet](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet) to the `pages/_app.js` file. Note that this will load the stylesheet for the entire app, not just your blog post. You‘ll have to explore CSS Modules or a CSS-in-JS solution if you want to only apply it to a particular page or component.

<CodeSnippetHeader text="pages/_app.jsx" />

```jsx
import "../styles/hljs.css";
```

Now that the app knows what the Highlight.js classes should look like, you will see a properly highlighted code block.

<Lightbox
  alt="A screenshot displaying that the syntax on the blog post has now been highlighted with various colors"
  src="https://media.graphassets.com/fPYLhZXvQ8mDKijgKNzN"
  width={2032}
  height={1167}
/>

### Wrapping Up

Because `getStaticProps` runs at build time to pre-render a page, both the serialization and highlighting of your Markdown is completed before the client ever arrives at your website, resulting in fast load times and no bulky client-side dependencies like Highlight.js or Prism. Since the JSX comes back with the syntax classes ready to go, all the client needs is a stylesheet! And thanks to the work of `next-mdx-remote`, the hydration and rendering of that serialized MDX is extremely simple to implement.

## Next Steps

Although this article is not intended to be a tutorial about MDX, the fact that you‘re rendering your markdown with it opens up tons of possibilities that I want to... *highlight* 😉

Let‘s try a small example of adding a header to your snippets. Create a quick component for that:

<CodeSnippetHeader text="components/CodeSnippetHeader.jsx" />

```jsx
const CodeSnippetHeader = (props) => {
  const { children } = props;

  return <div className="code-snippet-header">{children}</div>;
};
```

Now go back to your post, and we‘ll add that component to your markdown.

<CodeSnippetHeader text="posts/example.md" />

````markdown
# My Example Blog Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<CodeSnippetHeader>lib/myTestFile.ts</CodeSnippetHeader>

```tsx
const test = "test";

interface Test {
  myProp: string;
}
```
````

Make sure there is a line break before and after your component declaration.

If you load the page now you should see an error like this:

```shell
Error: Expected component `CodeSnippetHeader` to be defined: you likely forgot to import, pass, or provide it.
```

This is simply because `MDXRemote` needs to know how to reconcile what it saw in your Markdown file with a component in the Next.js project. You can do this with the `components` prop:

<CodeSnippetHeader text="pages/blog/example.jsx" />

```jsx
import { MDXRemote } from "next-mdx-remote";
import CodeSnippetHeader from "../components/CodeSnippetHeader";

const Page = (props) => {
  const { mdxSource } = props;

  return (
    <>
      <div className="blog-post">
        <MDXRemote
          {...mdxSource}
          components={{
            CodeSnippetHeader,
          }}
        />
      </div>
    </>
  );
};
```

Now if you refresh the page, you should see the header component rendered at the position you placed it in your Markdown. You can edit this component and add styles to make it look however you want, then these changes will be reflected anytime MDX renders the component that it sees in your markdown! You can pass props to this component just like you would normally, so if you‘d prefer to have a `text` prop instead of using `children`, for example, you could do that.

Remember earlier when I mentioned the Next.js `<Image />` component? You could add `Image` to the `components` object and easily incorporate optimized images into your Markdown! I‘ve done that for this blog, meaning my CMS-hosted Markdown can use the built-in image optimization capabilities as if I were invoking the component directly.

## Final Caveats

Syntax highlighting at build time does provide less flexibility than a client-side implementation, so you may sacrifice certain features available to a tool like [React Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) in order to gain these performance benefits. If you find the features lacking for your needs, you can follow the run time directions in the [MDX Syntax Highlighting](https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-at-run-time) documentation to switch over to using React Syntax Highlighter. Be sure to use one of the async build options to defer the initial load—this may require use of the [Dynamic Import](https://nextjs.org/docs/advanced-features/dynamic-import) feature in Next.js.

However, if you simply want to display a few lines of lovely highlighted code, this static export method is a simple and efficient way to spice up your snippets.

Learn how to implement ultra-fast syntax highlighting for your Next.js application using MDX (Markdown) and Highlight.js or Prism!

Fast Static Syntax Highlighting for Markdown in Next.js

## The Importance of a Beautiful Résumé

If you're a developer with a focus on the front end, your professional résumé is an opportunity to display your skills to a potential employer from the moment they receive your application. Since a role you are applying for is likely to involve the implementation of beautiful, accessible, and user-friendly designs, it's important that your résumé reflects these skills.

Many front end devs might choose a tool like Photoshop or InDesign to generate great looking résumés, but maintaining these documents and modifying content often requires complete reorganization when layouts no longer fit the way they did before. There are also plenty of ways to manage a portfolio website, but these services rarely include features for interacting with a recruiter or hiring manager.

## A Modern Approach to Developer Résumés

When your strengths lie in front end web development, what‘s stopping you from generating your résumé using a web app? Today we‘ll look at a Next.js project template that I created to help you get started with a digital résumé. This résumé will feature:

- Static generation using Next.js to minimize load times, maximize Lighthouse scores, and optimize core web vitals
- A deployment on Vercel for continuous deployment, a high-performance edge network, and a free HTTPS domain
- TypeScript for an excellent developer experience
- Integration with a CMS to modify your résumé anytime and anywhere
- PDF export to create a lovely printable version of your résumé—perfect for sending to recruiters
- A secret link that will reveal private information not visible on the public résumé

This tutorial and the application you will be deploying is based off my [Next.js Static Generated Résumés project on GitHub](https://github.com/colinhemphill/nextjs-resume). You can see an example of the final product at [https://resume.colinhemphill.com](https://resume.colinhemphill.com).

## Creating Your Own Static Résumé

### Set Up Your Prismic CMS

The bulk of the work in creating your résumé will come from setting up a CMS. Unfortunately there is not much of a shortcut for this. In the future, certain headless CMS services may provide templates which will initiate an example repository in one step, but for now you will need to create your models and documents manually.

Start by creating an account on [Prismic](https://prismic.io/), which is one of my favorite headless CMS options. Once you have an account, create a repository and name it "Résumé" or whatever makes sense to you.

From the left nav, go to the "Custom Types" page and then click the "Create new" button. Name the new repeatable type "Personal Information", which will automatically assign an API ID of `personal_information`. Next, you will create fields for the schema as listed in the [CMS Setup Documents](https://github.com/colinhemphill/nextjs-resume/blob/main/README-CMS.md) for the résumé generator. Once you have completed "Personal Information", continue setting up the remaining schemas and then create at least one document for each.

### Deploy the Application

Next, you will need an account with [Vercel](https://vercel.com/), which links with either a GitHub, GitLab, or Bitbucket account. Go ahead and create a Vercel account using one of those services if you haven't already done so. Vercel is an incredible service with a generous hobby tier, so I think you will definitely find yourself using it for a long time to come!

Once that‘s done, you can instantly deploy your own résumé site! [This link](https://vercel.com/) will guide you through creating a repository with your connected GitHub, GitLab, or Bitbucket account, clone the résumé app to the repo, and then collect the required environment variables. There are three required environment variables which will tie your Prismic repo to your Vercel deployment. To find these, go to your Prismic dashboard, then click Settings > API & Security.

- `NEXT_PUBLIC_CMS_INTEGRATION` set this to "prismic" to tell the app that you‘re using a Prismic integration
- `CMS_ENDPOINT` copy the "API Endpoint" from your Prismic settings
- `CMS_KEY` generate a new access token in the Prismic settings page and copy the "Client Secret"

Once these values are entered into the Vercel deployment wizard, your application will be created and deployed! If all goes according to plan, you can now visit the provided Vercel link and see your résumé in action.

### Setting Up a Deploy Webhook

Since your website is statically generated at build time, Vercel needs to know when you make a change to the CMS so that it can generate a new deployment. To do this, go to your Vercel project, then click Settings > Git. Scroll down to "Deploy Hooks" and create a new hook named "Prismic Updates". Copy the provided URL.

Now go back to your Prismic settings and click "Webhooks" in the left nav. Click the "Create a webhook" button and enter the URL you copied from Vercel. This will tell Prismic that any time you make an update to the CMS, it should fire off a request to Vercel to create a new deployment.

### Modifying Your Résumé

The application features a beautiful layout, WCAG AA accessible colors, and a proven content layout that has everything you should need. However, no two developers are the same, and you should feel free to adjust the application to suit your needs and to show off your personal skillset! When you went through the deploy wizard, you had to clone the project to a personal repository. You can now clone that project locally and modify it as required.

For further details on how to work with the local project, check out the [documentation](https://github.com/colinhemphill/nextjs-resume#customize-your-r%C3%A9sum%C3%A9).

Finally, you have the option to generate a secret link which will display the résumé with additional private information that is not accessible to the public. See the [private link documentation](https://github.com/colinhemphill/nextjs-resume#private-link) to learn how to set that up.

## Wrapping Up

With only a few clicks you can deploy a new statically generated résumé on Vercel, and modifying the content of your résumé through a headless CMS service is incredibly simple. By completing this guide, you should have your own HTTPS web application that loads incredibly fast on any device, scales well across devices, follows best practices for SEO and accessibility, and generates a PDF that you can send to a potential employer.

If you have any suggestions for improving the résumé generator, please feel free to open an issue on the GitHub repo.

Professional front end developers can take their résumé to the next level with a fast static website built with Next.js and a headless CMS!

Blog Posts

Front End Web Development, Music Production, Audio Engineering, and Podcasting

Introducing the Strum Design System for React

An Announcement: My New Position at Bitly!

Colin’s Top 10 Video Games of 2021

Fast Static Syntax Highlighting for Markdown in Next.js

Creating a Static Résumé Website and PDF Generator With Next.js

Blog Postsself.__wrap_b(":Rmsm:",1)

Front End Web Development, Music Production, Audio Engineering, and Podcastingself.__wrap_b(":R16sm:",1)

Introducing the Strum Design System for Reactself.__wrap_b(":Roosm:",1)

An Announcement: My New Position at Bitly!self.__wrap_b(":Rp8sm:",1)

Colin’s Top 10 Video Games of 2021self.__wrap_b(":Rposm:",1)

Fast Static Syntax Highlighting for Markdown in Next.jsself.__wrap_b(":Rq8sm:",1)

Creating a Static Résumé Website and PDF Generator With Next.jsself.__wrap_b(":Rqosm:",1)

Blog Posts

Front End Web Development, Music Production, Audio Engineering, and Podcasting

Introducing the Strum Design System for React

An Announcement: My New Position at Bitly!

Colin’s Top 10 Video Games of 2021

Fast Static Syntax Highlighting for Markdown in Next.js

Creating a Static Résumé Website and PDF Generator With Next.js