
I have been a dedicated [Nova](https://nova.app) user for over three years. I switched over from [VSCode](https://code.visualstudio.com) after tiring of the slow performance and "uncanny valley" interface. I'm a sucker for a well-done native app, and Panic really hit the sweet spot with Nova: a beautiful, minimal editor that felt right at home on macOS. It was also extremely fast to boot, indexing files and rendering 50,000 LOC+ without even breaking a sweat on the M1 Pro.

Unfortunately, I've been looking for an alternative as of late due to the high frequency of Nova crashes and lack of updates from Panic. Still, the editor scene hasn't changed much from what it looked like half a decade ago, with a smattering of Electron apps, Coda/Nova, some stalwarts such as Sublime Text and TextMate, and, of course, the venerated Vim/Emacs/Neovim trio.

I'm not one to spend a lot of time messing around with my tooling; I just want whatever editor I use to have a shallow learning curve and be _performant_. Somehow, looking for a new editor last week, I came across Zed's [tweet](https://twitter.com/zeddotdev/status/1636034629848403968):

> Zed is officially in public beta for macOS! We've been building Zed in Zed for a year now, and here's what we're loving most about it... 🧵

Since then, I've been playing around with and [customizing](https://github.com/noahbuscher/zed) the editor to see what living with a Rust-powered, minimal editor could look like.

### Install & Setup

Zed was very simple to set up; after downloading the '.dmg,' I had an instance ready to code in a matter of seconds. That's instant points over terminal-based editors. I will note here that Zed is currently _only_ available on macOS. [Support](https://github.com/zed-industries/community/issues/174) for Linux and Windows, according to the team, is:

> [...] planned, but it is not being prioritized in the short term.

Customizing the editor was also very straightforward. They have a default editor configuration that you can use, but I found it easier to open a custom settings file and see what was available via their beautiful autocomplete.

![Zed's settings page with autocomplete open](/media/posts/zed/zed-autocomplete.png)

There are a few things that I was surprised I wasn't able to customize yet, such as:

- Setting the interface's font
- Setting the interface's font size, independently of the editor
- Enabling (or disabling) icons or colors for the file tree view
- Allow hiding hidden files

### Performance

This is where Zed really shines. Loading a `package-lock.json` with over 7500 lines is instantaneous—quite literally. Even Nova would take at least a few hundred ms to parse and color a blob of that size, however, Zed doesn't even flinch. There is also zero scroll lagging, autocomplete delays, etc. that I could notice in any of my testing. I'm not sure of the actual numbers, but in my initial testing, Zed felt like the fastest editor I've ever used.

That is to be expected, of course: the editor was written in Rust and, as stated in their docs, performance was a top concern while developing the app over the course of this past year. Put another way, VSCode is a 2000's Land Rover Discovery with tons of buttons and features, whereas Zed is a sleek McLaren F1 - minimal, extremely fast, and with three front seats. Why three front seats?

### Multiplayer

Zed's big bet is on multiplayer. The editor comes with first-class support for real-time pairing, bundled right into the editor. By no means do you _need_ to use the feature in order to derive a lot out of Zed, however, as more people hop on the Zed bullet train, I can see it becoming an integral part of many people's (and companies') workflows.

As stated by the team:

> [Multiplayer] makes it easy to have nuanced, real-time conversations about any part of your codebase, whether the code in question was committed last year or hasn't yet been saved to disk.

VSCode does have [Live Share](https://code.visualstudio.com/learn/collaboration/live-share), but it feels tacked on to the interface, whereas in Zed, pairing feels just like any other feature within the editor: seamless. It almost invites you to collaborate with your team.

### Ecosystem

As Zed is still in public beta, there is surely a lot coming down the pipeline. For the time being, however, there were a few features I definitely missed from Nova:

- No extension market (1st or 3rd party)
- No way to add/edit themes (it comes pre-bundled with a number, however)
- No dark/light mode based on system
- Limited git integration
- No markdown preview
- Limited language support
- No spellcheck

I could not find anything regarding Zed Industries' plan for supporting extensions (if there even is one), however, I hope they do allow for writing extensions with a scripting language such as JavaScript. Forcing developers to build in Rust may be good for performance, but in a world where _everyone_ is building VSCode extensions, it will cripple the marketplace's offerings from the start.

Besides the aforementioned list, Zed really has most of the niceties I'm used to built right in. I have come across a few small bugs, which is to be expected at this stage of development, but none of which have detracted me from getting my work done.

### Recap

Zed is a fantastic editor - it's eye-wateringly fast, extremely minimal (and beautiful), has a talented team behind it, and is a natural transition for anyone who has familiarity with both terminal and GUI-based editors. However, in a world that is dominated by the free, open-source VSCode, I am curious to see how Zed's extension ecosystem grows and what Zed Industries' plan is for monetizing their product.

For the time being, I have found the editor a pleasure to work with, and I will be using Zed as my daily driver moving forward. If you're tired of VSCode's large size, cluttered interface, and slow performance, I urge you to [download](https://zed.dev/download) Zed's beta and give it a try. I think you'll be pleasantly surprised.


Zed Public Beta - First Impressions


After discovering the [Fake Receipt font](https://typodermicfonts.com/fake-receipt/) via Adam Ho's [portfolio](https://www.adamho.com/), I instantly knew what I needed to do. Once I downloaded the font, the website was designed and live within an hour. It dynamically populates the date and useragent for an even more "authentic" receipt experience.

[Check it out!](https://receipt.noahbuscher.com)

![Receipt website](/media/work/receipt.png)


Receipt Linktree


So you've set out to create a new portfolio for yourself. You start gathering inspiration from platforms like [Godly](https://godly.website) and [Minimal Gallery](https://minimal.gallery), draw some rectangles in Figma, and open your text editor. You pause. There's thousands of ways to build your website, how do you decide which to go with? You want your website to be beautiful for the users, but you also want to be able to quickly add new posts and case studies.

You decide you want to have a dynamic website (good choice!), but the dozens of CMS options weigh on you. Do you pick headless or full-stack? What if you just make a theme? So many choices.

I was faced with the same dilemma a few months ago. I finally had the motivation to create a new personal website, but wasn't sure where to start. I decided to keep things simple, I'd write it with a library I knew very well: React. That only solved half of the equation, however. When it came time to decide how to power the dynamic content on the site, I knew I wanted it to be free, easy to use, and open source. A static site powered by Next.js and markdown was the obvious choice.

[View the source on GitHub](https://github.com/noahbuscher/markdown-portfolio-tutorial).

To get started on creating your portfolio, run the following commands. I'm using [pnpm](https://pnpm.io), but feel free to use `yarn` or `npm`!

```text
pnpm dlx create-next-app@latest --typescript
```

`cd` into your new project and run the following commands to install the necessary packages and bootstrap Tailwind:

```text
pnpm install dayjs
pnpm install gray-matter react-markdown tailwindcss postcss autoprefixer -D
pnpm dlx tailwindcss init -p
```

That's a _lot_ of packages. Let's break them down...

- [gray-matter](https://www.npmjs.com/package/gray-matter) will be used to parse "front-matter" from our markdown files (we'll read more about this later!)
- [react-markdown](https://www.npmjs.com/package/react-markdown) is a React component to render markdown content
- `tailwindcss postcss autoprefixer` are requirements for [installing Tailwind](https://tailwindcss.com/docs/guides/nextjs) for Next.js

Phew! Let's continue our setup by finishing the Tailwind install...

Add the following to the `module.exports` in the generated `tailwind.config.js` file:

```text
content: [
	"./pages/**/*.{js,ts,jsx,tsx}",
	"./components/**/*.{js,ts,jsx,tsx}",
	"./layouts/**/*.{js,ts,jsx,tsx}",
	"./utils/**/*.{js,ts,jsx,tsx}"
],
```

To bring the styles into your project, add the following to the `styles/globals.css` file:

```text
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Great! Finally, let's create our new directories by running the following in the root:

```text
mkdir _projects
mkdir public/projects
mkdir layouts
mkdir components
mkdir utils
```

We're finally ready to start coding!

To get started, create a new layout file, `ProjectCard.tsx` in the `components` directory. This component will be displayed for each project on the home page's grid.

In `components/ProjectCard.tsx` add:

```tsx
import React from "react";
import Image from "next/image";
import Link from "next/link";

const ProjectCard = ({
  title,
  description,
  slug,
  photo,
}: {
  title: string;
  description: string;
  slug: string;
  photo: string;
}) => (
  <Link href={`/project/${slug}`}>
    <div className="flex-1 flex flex-col gap-2">
      <Image
        src={photo}
        alt={title}
        width="0"
        height="0"
        sizes="100vw"
        className="w-full h-full aspect-square object-cover"
        priority
      />
      <h3 className="text-black font-bold text-xs">{title}</h3>
      <p className="text-gray-500 text-xs">{description}</p>
    </div>
  </Link>
);

export default ProjectCard;
```

Now we need a place to display all of our project cards. Create a new layout called `Grid.tsx` in the `layouts` directory.

In `layouts/Grid.tsx`, add the following:

```tsx
import React from "react";
import ProjectCard from "../components/ProjectCard";
import type { Project } from "../layouts/Project";

const Grid = ({ projects }: { projects: Project[] }) => (
  <div className="flex flex-col gap-12 max-w-screen-md mx-auto">
    <h2 className="text-black font-bold text-lg">Projects</h2>
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      {projects.map(({ meta }) => (
        <ProjectCard
          key={meta.slug}
          title={meta.title}
          description={meta.description}
          slug={meta.slug}
          photo={meta.photo}
        />
      ))}
    </div>
  </div>
);

export default Grid;
```

Let's add a demo project now! In the `_projects` at your root, create a new file. The name doesn't matter, but I find it helpful to make it the same as the URL slug. In that file, add soemthing similar to the following:

```md
---
title: Example Project
slug: example-project
date: February 1, 2023
description: Just an example project!
photo: /projects/example-project.jpg
---

Something about Example Project...
```

The area between the `---`'s is called "front-matter", and it's what we brought `gray-matter` in to parse for us. Everything under the second seperator is the content of the case study. It can be any valid markdown.

Save the file and let's move on to tying things together!

In your `pages/index.tsx` file that Next.js generated, replace the content with the following. Feel free to ignore the missing `Project` type for now. We'll add that soon!

```tsx
import React from "react";
import path from "path";
import { promises as fs } from "fs";
import matter from "gray-matter";
import dayjs from "dayjs";
import Grid from "../layouts/Grid";
import type { Project } from "../layouts/Project";

const PROJECTS_DIR = "_projects";

export async function getStaticProps() {
  const projectsDir = path.join(process.cwd(), PROJECTS_DIR);
  const files = await fs.readdir(projectsDir);

  const postPaths = files.filter((file) => {
    const ext = path.extname(file);
    return ext === ".md";
  });

  const projects = await Promise.all(
    postPaths.map(async (file: string) => {
      const contents = await fs.readFile(path.join(projectsDir, file), "utf8");
      const parsed = matter(contents);

      const project = {
        content: parsed.content,
        meta: parsed.data,
      };

      return project;
    })
  );

  const sortedProjects = projects.sort((a, b) =>
    dayjs(a.meta.date).isAfter(dayjs(b.meta.date)) ? -1 : 1
  );

  return {
    props: {
      projects: sortedProjects,
    },
  };
}

export default function Home({ projects }: { projects: Project[] }) {
  return (
    <main className="mx-10 sm:mx-0 my-10">
      <Grid projects={projects} />
    </main>
  );
}
```

This may look a little confusing if you've never seen `getStaticProps` before, but you can read more about it [in the Next.js docs](https://nextjs.org/docs/basic-features/data-fetching/get-static-props). All it's doing here is getting an array of Projects that we then use `dayjs` to sort from a human-readable date in the metadata and pass that array as a prop to our `Grid`.

Now just run `pnpm dev` and you should see your project on the home page!

![Our first project rendered to the home page](/media/posts/markdown-portfolio/example-project-home.png)

Feel free to add more projects and see how it sorts by date and adds them to the grid.

Now, if you try and click on a project, you'll notice it takes you to a `404` page. Let's go ahead and add a single project layout by creating a file called `Project.tsx` in `layouts`. In `Project.tsx`, add the following:

```tsx
import React from "react";
import Image from "next/image";

export type ProjectMeta = {
  title: string;
  description: string;
  slug: string;
  date: string;
  photo: string;
};

export type Project = {
  meta: ProjectMeta;
  content: string;
};

const Project = ({
  project,
  renderedProjectContent,
}: {
  project: Project;
  renderedProjectContent: string;
}) => (
  <div className="flex flex-col gap-8 max-w-screen-md mx-auto">
    <h2 className="text-black font-bold text-lg">{project.meta.title}</h2>
    <h3 className="text-gray-500 text-md">{project.meta.description}</h3>
    <Image
      src={project.meta.photo}
      alt={project.meta.title}
      width="0"
      height="0"
      sizes="100vw"
      className="w-full h-full"
      priority
    />
    <div
      className="flex flex-col gap-8"
      dangerouslySetInnerHTML={{ __html: renderedProjectContent }}
    />
  </div>
);

export default Project;
```

⚠️ Note the `dangerouslySetInnerHTML`. It's ok to use here as the only user's content that will be rendered there is your's. This is not a great practice, however, and you should not do this on a platform that other's are able to post content to.

In the next step, we are going to be writing a utility to generate that HTML. To do so, create a new file called `markdown.tsx` in the `utils` directory and add the following:

```tsx
import React from "react";
import Link from "next/link";
import * as ReactDOMServer from "react-dom/server";
import ReactMarkdown from "react-markdown";

const Img = ({ ...props }: any) => (
  <img className="rounded-md max-w-screen-lg mx-auto w-full" {...props} />
);

const Text = ({ children, node }: { children: React.ReactNode; node: any }) => {
  if (node.children[0].tagName === "img") {
    const image: any = node.children[0];
    return <Img src={image.properties.src} />;
  }

  return (
    <p className="flex-1 flex-grow w-full text-sm leading-7 max-w-screen-md mx-auto">
      {children}
    </p>
  );
};

const Anchor = ({ children, href }: any) => (
  <Link href={href} className="inline underline">
    {children}
  </Link>
);

export const renderMarkdownToHTML = (markup: string) => {
  return ReactDOMServer.renderToStaticMarkup(
    <ReactMarkdown
      components={{
        p: Text,
        img: Img,
        a: Anchor,
      }}
    >
      {markup.trim()!}
    </ReactMarkdown>
  );
};
```

This component uses `react-markdown` to enable us to define JSX component mappings for markdown elements! Feel free to get creative here and expand upon what's already in there.

So far so good! We're getting close. Now we just need to create a new file called `[slug].tsx` in `pages/project` that will pull that new component in. In `[slug.tsx]`, add the following:

```tsx
import React from "react";
import { promises as fs } from "fs";
import path from "path";
import matter from "gray-matter";
import ProjectLayout from "../../layouts/Project";
import { renderMarkdownToHTML } from "../../utils/markdown";
import type { Project } from "../../layouts/Project";

const PROJECTS_DIR = "_projects";

export async function getStaticProps({ params }: { params: { slug: string } }) {
  const projectsDir = path.join(process.cwd(), PROJECTS_DIR);
  const files = await fs.readdir(projectsDir);

  const projectPaths = files.filter((file) => {
    const ext = path.extname(file);
    return ext === ".md";
  });

  const projects = await Promise.all(
    projectPaths.map(async (file: string) => {
      const contents = await fs.readFile(path.join(projectsDir, file), "utf8");
      const parsed = matter(contents);

      return {
        content: parsed.content,
        meta: parsed.data,
      };
    })
  );

  const project = projects.find((p) => p?.meta?.slug === params.slug);

  const renderedProjectContent = renderMarkdownToHTML(project?.content!);

  return {
    props: {
      project,
      renderedProjectContent,
    },
  };
}

export async function getStaticPaths() {
  const projectsDir = path.join(process.cwd(), PROJECTS_DIR);
  const files = await fs.readdir(projectsDir);

  const projectPaths = files.filter((file) => {
    const ext = path.extname(file);
    return ext === ".md";
  });

  const projects = await Promise.all(
    projectPaths.map(async (file: string) => {
      const contents = await fs.readFile(path.join(projectsDir, file), "utf8");
      const parsed = matter(contents);

      return {
        content: parsed.content,
        meta: parsed.data,
      };
    })
  );

  const paths = projects.map((project) => ({
    params: { slug: project?.meta?.slug },
  }));

  return {
    paths,
    fallback: false,
  };
}

const Project = ({
  project,
  renderedProjectContent,
}: {
  project: Project;
  renderedProjectContent: string;
}) => (
  <main className="mx-10 sm:mx-0 my-10">
    <ProjectLayout
      project={project}
      renderedProjectContent={renderedProjectContent}
    />
  </main>
);

export default Project;
```

Similar to the `index.tsx` page, we are grabbing the list of projects again, however this time we are filtering to find the single project whose slug matches that in the dynamic page's URL. Then, we are defining a function called `getStaticPaths` that is another special Next.js feature to dynamically create the static paths for generated content (in this case, our Projects!). You can read more about that [in the Next.js docs](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths).

Great! If you go back to the home page and click a project, you should now see it takes you to a single project page!

![A single project page](/media/posts/markdown-portfolio/example-project-single.png)

That's really all you need to get started! You now have a simple markdown-powered portfolio. You can use this as a jumping-off point to continue building out the (easy-to-update) portfolio of your dreams! Here's some ideas to get you started:

- Use [next-sitemap](https://www.npmjs.com/package/next-sitemap) to generate a sitemap to all of your dynamic routes to make it easier for search engines to index your site
- As you probably noted, some of the code we wrote isn't very [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself); maybe extract some of the repeated code into more utils
- Add a navbar and footer
- Add more pages to tell visitors about yourself or how to get in touch with you

Looking foward to see what y'all create!

[View the source on GitHub](https://github.com/noahbuscher/markdown-portfolio-tutorial).


Create a Markdown-based Portfolio with Next.js

Impala

Lush Hike


Soukie Modern approached me in mid-2022 regarding their need to modernize their existing online shop, as they were looking to start leveraging e-commerce to show potential buyers their expansive collection of vintage and contemporary Moroccan rugs.

After some time getting to know the company and the founder, Taib Lotfi, I set out to design a website as expressive and beautiful as their offerings.

![Soukie Modern shop page](/media/work/soukie-modern/soukie-shop.jpeg)

Given the large format and level of detail of the rugs, having large product images front-and-center was definitely at top of mind throughout the design process. We wanted potential buyers to see each rug in as much detail as possible.

![Soukie Modern product page](/media/work/soukie-modern/soukie-product.jpeg)

![Soukie Modern workshops page](/media/work/soukie-modern/soukie-workshops.jpeg)

![Soukie Modern footer](/media/work/soukie-modern/soukie-footer.jpeg)

To develop the website, I settled on using Next.js Commerce, an amazing solution that offers a fantastic starting point for e-commerce sites. Given that Soukie had their products on Shopify, it was just a matter of configuring the `shopify` package to fit the needs of a retailer with hundreds of product offerings and building a gorgeous web interface around that.


Soukie Modern

Desert Walk


After having effectively not touched my site in over two years, I knew I needed to put in the work to design and develop something. Unfortunately, that is much easier said than done. I've gone through at least four (and likely more) revisions of designs before settling on what you're using now.

It's not perfect - far from it. I'm not about to break into a preachy "just ship it" rant, however it was out of my comfort zone to publish this without getting all the bells and whistles figured out. Ironically enough, that longing to figure out what I wanted out of a site, along with going back and forth on what it should look like, served as inspiration. I attempted to make the site extremely flexible, with a modular feed/blocks concept that's a cross between a blog, portfolio site, and social platform. As I attain new interests, I can create new post styles that will incorporate nicely into the site's context, creating what I hope one day will be a collage of me.

![Photo preview on the new site](/media/posts/new-beginnings/website.jpeg)

From a technical perspective, the site is rather uninteresting. It's a React site built on Next.js and styled with Tailwind CSS. For dynamic content, I opted to not go with a CMS and instead just a `/posts` directory of markdown files. I am able to attach metadata to posts using `gray-matter`'s YAML-style header and serve the pages/posts with SSG. If you're curious, the site is set in Monument Grotesk by [Dinamo](https://abcdinamo.com/typefaces/monument-grotesk).

I hope you enjoy looking around the site, and I'm excited to see what 2023 has in store.


New Beginnings


I worked with designer [Coleman Tharp](https://colemantharp.com/) to build a React Native iOS app that allowed users to customize Spotify playlists with images from their camera roll and Unsplash prior to the feature being added to the Spotify app.

<div className="bg-black w-full rounded-md">
	<video width="250" height="auto" controls className="mx-auto">
		<source src="/media/work/prism/prism-walkthrough.mp4" type="video/mp4">
		Your browser does not support the video tag.
	</video>
</div>


Noah Buscher

Senior SWE, Dave

Noah Buscher

Senior SWE, Dave

Hey, I’m Noah Buscher: a web developer and designer based in Palm Springs, CA. Currently working at Dave.

Zed Public Beta - First Impressions

Posted on March 20, 2023

Create a Markdown-based Portfolio with Next.js

Posted on March 7, 2023

New Beginnings

Posted on January 10, 2023