import type { SiteMeta } from "@/data/siteMeta";

import siteConfig from "@/site-config";

import "../styles/global.css";

type Props = SiteMeta;

	>skip to content

</a>

	>

		<svg

			id="sun-svg"

			aria-hidden="true"

			focusable="false"

			stroke-width="1.5"

		</svg>

		<svg

			id="moon-svg"

			aria-hidden="true"

			focusable="false"

			stroke-width="1.5"

import { Image } from "astro:assets";

IPFS has proven to be the decentralized storage protocol of choice by many blockchain developers, and one of the crucial tools used to access content on IPFS are [Gateways](https://www.pinata.cloud/blog/what-is-an-ipfs-gateway). IPFS Gateways are like bridges between the IPFS protocol and the HTTP protocol that we use everyday to browse websites. There are lots of different options to choose from when it comes to IPFS Gateways, and in this post we’ll show you how to host and build your own!

<aside>

## Requirements

## Setting Up the Server

	alt="digital ocean droplet creation"

	width={1920}

	height={1080}

/>

For the authorization select SSH Keys, then copy and paste the contents of `~/.ssh/rsa.pub` and paste it in as a new key.

	alt="digital ocean ssh key creation"

	width={1920}

	height={1080}

/>

After the droplet has been created, you will actually want to turn it off, go to the Network settings, and enable IPV6. Once enabled turn it back on and try to SSH into it with the following command with the IPV4 address of the server:

Now that your IPFS node is setup and we can use the gateway, these next steps will help you assign a domain to the gateway and make it public. First you will need to acquire a domain name which you can get from multiple providers like Namecheap. For this tutorial we’ll use the example `[domain.com](http://domain.com)` (very original). After purchasing the domain you will want to go into the advance DNS settings through your domain provider, and there we’ll add some records so we can use `[ipfs.domain.com](http://ipfs.domain.com)` as our gateway domain. You can get the IPV4 and IPV6 addresses from your Digital Ocean console.

You can use a DNS checker for `[ipfs.domain.com](http://ipfs.domain.com)` to make sure everything is propagating but it can take some time depending on your provider.

As you saw in the last url we used, we’re still using http which is a no go in today’s standards. In order to fix that we need to get an SSL certificate for our domain. Thankfully its pretty straight forward with a package called certbot. You can install it with `sudo nnap install certbot --classic` then run the command `sudo certbot --nginx -d [ipfs.domain.com](http://ipfs.domain.com)`. It should walk you though some questions you can answer, then it should issue a certificate for your domain. Last step is to go back to your domain provider and add this DNS record:

Now you can test it out with `[https://ipfs.domain.com/ipfs/QmVLwvmGehsrNEvhcCnnsw5RQNseohgEkFNN1848zNzdng](https://ipfs.domain.com/ipfs/QmVLwvmGehsrNEvhcCnnsw5RQNseohgEkFNN1848zNzdng)`. Congrats!! You just setup your own public IPFS gateway. But, something isn’t quite right: its super slow isn’t it? Let’s talk about that.

## Further Steps

Another thing you have to consider when hosting an IPFS gateway yourself is abuse. The unfortunately piece of a decentralized network is that there is plenty of people out there who want to abuse public gateways by hammering them with requests for files or use your gateway for phishing content. When that happens you have to keep up with a list of CIDs to block from your gateway or risk it have it taken down by domain registrars. You can check out a list of CIDs to block by IPFS [here](https://github.com/ipfs/infra/blob/master/ipfs/gateway/denylist.conf), however it is no longer being maintained making it even more difficult to keep up yourself.

ogImage: "https://assets-global.website-files.com/629e4fe96456f8219203e7f1/6545bfa112815d6340466066_20231103_How%20to%20Encrypt%20and%20Decrypt%20Files%20on%20IPFS%20Using%20Lit%20Protocol%20and%20Pinata.jpeg"

---

The most popular method used for sharing files off-chain in Web3 is IPFS, and there are some [good reasons for that](https://www.pinata.cloud/blog/why-ipfs-is-the-storage-solution-for-web3-developers). However it does not come without its own share of problems, and one of those is the ability to share private files. IPFS is a public network so anyone with a CID can access and download that content, and this hinders projects that may want to token gate content or create subscriptions to content. With that said, encryption has proven to be one solution to this problem. Remarkably, the solution of [asymmetric encryption](https://www.okta.com/identity-101/asymmetric-encryption) is used in blockchain all the time and can be reused for the purpose of token gating. [Lit Protocol](https://litprotocol.com/) is a decentralized middleware client that enables access controls to help extend asymmetric encryption to token gating based on crypto ownership, such as owning an NFT, ERC-20 token balance, or simply designating a recipient address. In this post, we’ll show you how you can combine the best of both worlds and create an app that will encrypt content, upload it to IPFS, and then given an encrypted CID, decrypt it.

## Why IPFS?

```jsx

const uploadFile = async (fileToUpload) => {

```

At the top of our `try` statement but underneath our `setUploading` state, we’ll initialize the `LitNodeClient` using the `ceyenne` network, connect our app to that network, then get the `authSig`. Lit Protocol is a decentralized network middleware that helps us do some cool token gating and lets us do encryption. In these few statements, we create a client that connects to that middleware network and then gets a signature from the user. This signature will be used for signing the encrypted files.

```jsx

// Then we turn it into a file that will be accepted by the API endpoint

```

All together we should have an upload function that looks like this:

```jsx

const uploadFile = async (fileToUpload) => {

```

One thing to note is that there is a file size restriction when using the Next API routes, so if you have larger files you may want to move uploading to the client side and utilize pre-signed JWTs which we talk about in [this post.](https://www.pinata.cloud/blog/how-to-upload-to-ipfs-from-the-frontend-with-signed-jwts)

```jsx

const accessControlConditions = [

```

```jsx

const accessControlConditions = [

```

You can even do a simple check if the recipient is a particular wallet address.

```jsx

const accessControlConditions = [

```

With these building blocks, you could easily build a standalone token gating app, or build a custom solution for your holders. The possibilities are endless!

At the core of my workflow is [Tmux.](https://github.com/tmux/tmux) This tool allows you to create multiple terminal sessions, windows, and panes in just one terminal emulator window. Instead of having a terminal open for every project I might be in, I can just have one. A Tmux session will look like any other terminal window, the difference is the ability to disconnect and then re-attach to that same session. So I can be working on something, leave it, then come right back to it.

<video

></video>

Additionally I can create multiple panes and windows inside a session. I generally create a session per project, and each session might have two windows (e.g. one for a client side repo, the other for a server side repo). This both helps keep projects unified yet organized.

<video

></video>

Where it gets really good is having a solid session manager, and that’s where [Josh Medeski’s Sesh](https://github.com/joshmedeski/sesh) comes into play. With this I can easily change between different sessions, and thus easily switch between different projects. This has become essential to my workflow as I often might be working on 2-3 different projects at a time, all with multiple windows and panes each. Each one can be unique to what I’m working on as well.

<video

></video>

## Neovim Plugins

The first is [Telescope](https://github.com/nvim-telescope/telescope.nvim), which is a no brainer for most people already using Neovim. It allows me to quickly jump to different files, search a string through my entire project, or sort through diagnostic issues. It’s incredibly powerful and extensible, and I would highly recommend getting familiar with all its abilities.

<video

></video>

Another one I use fairly often is [Neo-tree](https://github.com/nvim-neo-tree/neo-tree.nvim). I know some people are anti-file-tree but I personally really enjoy it. It is setup to appear in the middle of my screen, and I use it to help navigate where a file might be, edit a file name, add new files, etc. Since the majority of my work is in JavaScript / Next.js, it’s helpful to distinguish which `page.tsx` or `route.ts` file I’m currently working on.

<video

></video>

Having an LSP (Language Server Protocol) and completions setup is also essential for a good workflow in Neovim. This is what provides hints, completions, diagnostics, or even docs for the language you’re working in. Cannot state how helpful these are when working in a typed language like Typescript or Go. I would also say it’s beneficial to learn how to set it up manually, and [Typecraft's video](https://youtu.be/S-xzYgTLVJE?si=xG7c-Yx0fkxRHwx0) does a great job showing how it’s done.

<video

></video>

These two are on the smaller side but are still really great to use. The first is [Tmux Navigator.](https://github.com/christoomey/vim-tmux-navigator) This allows you to navigate between an open Neovim pane and a Tmux pane without using a Tmux prefix. For example, instead of navigating with `Ctrl + b - l` I can just use `Ctrl - l`. It’s the same mapping for switching between Neovim panes and Tmux panes, which is a huge quality of life improvement. The other small mention is [blame.nvim.](https://github.com/FabijanZulj/blame.nvim) With this tool I can hit `Space-b` to see line by line who changed what when. This is great when working with other people on a project and you’re trying to find out what changed when. There’s also the LazyGit plugin for Neovim, but it deserves its own section.

For the longest time I just used git in the command line for handling any of my git needs, but a lot of that changed when I started working on more team oriented projects. Handling git conflicts was a nightmare, as well as going through git history to see what changed at each commit. LazyGit changed all of that. This tool really simplifies things like cherry picking commits, handling conflicts, and viewing rich history. There’s so much it can do that I haven’t even touched the surface on, and I would recommend [this video](https://youtu.be/CPLdltN7wgE?si=7XqMjlwpi5tmWFpA) by its creator to see what’s possible (if you’re like me you’ll also learn more about git itself from it).

<video

></video>

## Bringing it All Together

Let’s do a run through of what starting and managing a project might look for me with this workflow. First `t` to start my Tmux session manager, then navigate to my dev folder. There I’ll run a command like `npx create-next-app@latest`. Once the repo is created I’ll `cd` into it and run `nvim` which will greet me with a telescope window of all the files that I can fuzzy find through. Then I might open a split pane to the right with Tmux so I can have a terminal to run commands like `npm run dev`.

<video

></video>

If the project has multiple repos like a server/client combo or I’m referencing another repo, I’ll create a new window with the same pane setup. As I work and make changes, I’ll open LazyGit in one of my Tmux panes and run `ctrl-b + z` to make it full screen. From there I’ll add my commits and push them up, or make a branch that I can merge main into if I’m already working on a shared project.

<video

></video>

Back in my main Next.js window I might open another split pane below the right one so while the dev server is running I can make test API calls from the terminal with httpie, maybe pipe the results into jq then into a file.

<video

></video>

This is the flexibility of a terminal based workflow that is hard to replicate on something like VSCode or Zed. It’s not even an editor issue in my opinion: it’s a development environment issue. Do code editors like VSCode take out out of that environment? Sorta, not totally, but it’s definitely not the same.

When it comes to enabling writing in an app beyond just a text area there are many library choices out there. For Snippets I went with `@uiw/codemirror` for several reasons. For starters it was pretty easy to use and setup, had it running in no time.

```typescript

function App() {

}

export default App;

```

async function fetchData(cid: string) {

	try {

		const res = await req.json();

		return res;

	} catch (error) {

	const cid = params.cid;

	const data = await fetchData(cid);

	return (

			<Header />

			<Footer />

		</main>

	);

```typescript

<CodeMirror

	height="100%"

	width="100%"

	value={content}

![gif of share page](https://res.cloudinary.com/df9dofjus/image/upload/v1722565319/Screenshot-Arc-08-01-2024-22-24_muxrrg.gif)

## API + CLI

Since there isn't really any authentication in this app and anyone can upload snippets as much as they want, I figured "why not make the API accessible?" Anyone can make an API request to the app to make a snippet and use the data returned to make the link!

Request:

```bash

curl --location 'https://www.snippets.so/api/upload' \

          --header 'Content-Type: application/json' \

```

Returns:

```json

{

}

```

Link:

```

https://snippets.so/snip/bafkreiccdt64k6d4wjgz5ebqee4rvmkauoiygc5egwtssl2zqq3o74zlti

```

Immediately I was mesmerized by the speed and powers demonstrated by The Primeagen's early videos. I was already a keyboard maximalist from [previous jobs](/posts/why-i-learned-vim) where I learned speed = productivity, so it was a no brainer that I had to learn it. Started with the basic motions and Vim tutor, and I had the advantage that I was just learning programming on the side instead of doing it full time. Within a few weeks I was in Vim consistently, writing and learning to code. The tweaking of my Vim RC eventually led to discovering Neovim thanks to [chris@machine](https://www.youtube.com/@chrisatmachine) and his early videos.

For the next several years I stuck with Neovim and I loved it, and I owe a mass amount of my productivity to it. There were countless hours spent configuring it like many of us do. I eventually got to a point where I didn't adjust my config much, but that soon didn't matter.

## What Changed

Every now and then I would update a plugin in Neovim and everything would break, and I would have to spend time fixing it instead of getting work done. This resulted in slimming down my config more and more, but there was still so much that went into making all the basics work. I stuck with it because it was still better than using VSCode, which I did try for a two week sprint to see if it could be any better. It was also key to a [terminal based workflow](/posts/a-terminal-based-workflow) that other editors couldn't really match.

One of the biggest things that has stood out to me using Zed so far is how “everything just works.” There are so many features of an IDE or text editor that people take for granted until they have to set it up themselves in something lower level like Neovim. LSP (language server protocol) is certainly one of them. If you’re not familiar it’s the hints or errors that show up while you’re writing up your code, giving you deep insights to your repo on a language level. When you setup LSP in Neovim it’s a lot of work, and sometimes it can be a bit harder to figure out why it might be bugging out. However it does give you way more control and the option to do a lot of customization. With Zed LSP just works. There are configurations you can make to edit some things, but as a whole it just zips out of the box. There are already keybindings for things like “show definition”, “go to definition”, or even code actions. The only downside is outside of an extension you can’t use your own LSP that’s installed on your machine, but there’s always a pretty large language support that I haven’t had this issue yet.

<Image

	src="https://dweb.mypinata.cloud/ipfs/QmNkysZ5Roy723sphUST8abmHakKR86K2YHXeeVTU22ASH"

	alt="header image"

	aspectRatio={9 / 16}

/>

<video

></video>

Finally there’s Git integrations. What normally required multiple plugins in Neovim is again ready out of the box with Zed, including feature like toggling Git Blame, viewing diffs, and gutter symbols showing the status of edited lines.

<video

></video>

If I had to make a crude comparison, it’s similar to Linux and Apple. Linux will give you far more control over every piece of your software and hardware at the cost of spending time to configure it. Apple will give you less control but it will likely run smoother.

Zed also features an assistant panel where you can access several AI models via API, including OpenAI, Ollama, and Anthropic. Just requires a few lines of config to get started.

<video

></video>

One feature that I think is particularly nice is the inline assistant, where you can select some lines of code and use `ctrl-enter` to trigger a request to be made to your code via the AI assistance configuration mentioned previously. If you like the results then you can confirm and keep coding.

<video

></video>

### Zed ≠ Neovim

			"shift-j": "editor::MoveLineDown",

			"shift-k": "editor::MoveLineUp"

		}

]

```

			"ctrl-k": ["workspace::ActivatePaneInDirection", "Up"],

			"ctrl-j": ["workspace::ActivatePaneInDirection", "Down"]

		}

]

```

Something else I would recommend to anyone who is trying to migrate from Vim/Neovim to Zed is checking out the [default Vim keymap](https://github.com/zed-industries/zed/blob/340a1d145ed15e39a4a27afc5a189851308fb91d/assets/keymaps/vim.json#L4). There's so much there that acts as a helpful reference of what's supported and what you may want to adjust!

### Reduced UI

Zed already has a pretty nice minimal UI, but I prefer something closer to my Neovim setup. Thankfully Zed offers these options, such as disabling the tab bar, scroll bar, reduced toolbar, and relative line numbers

```json settings.json

		"show": false

	},

	"toolbar": {

}

```

{

	"context": "Editor && VimControl && !VimWaiting && !menu",

	"bindings": {

	}

}

```

<video

></video>

Speaking of Telescope, one big replacement is project wide search. While Zed doesn't have a fuzzy find feature, the project wide search is excellent. It will show all results in a multibuffer view which is pretty slick, and allows you to jump between that view and the buffer itself pretty easily.

<video

></video>

The terminal toggle is pretty similar to something like VSCode but there are some other hidden ways to get a better terminal experience. One of them is a shortcut to toggle the bottom terminal to be full screen, but even better is opening a terminal as a buffer in the main editing view.

{

	"context": "Editor && VimControl && !VimWaiting && !menu",

	"bindings": {

	}

}

```

<video

></video>

One of the big things I had to leave behind was Tmux and switching projects. While it isn't a perfect replacement, Zed has a "switch projects" feature which works really well and makes it pretty easy to switch contexts. You just won't get the exact same control and layout setup that you can get with Tmux

```

<video

></video>

## Should You Use Zed?

Of course, my time in retail was limited. It’s a hard job to sustain and justify over a long period of time, and I wanted something more regular. I heard banking was a good transition from retail, so I got a position as a teller at a local bank. Just like retail, banks work with data. A lot of data. From day one I had to learn how to use their software to access all that data, and it was not the best experience at first. We used a web GUI nicknamed "white screen" where you had to do a whole bunch of clicking to navigate or get access to anything. It wasn't the keyboard speed I was used to at my previous job. I found ways to get sort of fast, but nothing amazing.

Several years go by in that role and it started to take its toll on my mental health. It was 2020, my first son was just born, and while waiting in the car for my wife finish to a doctor's appointment (no plus ones back then), I stumbled upon the opportunity of programming via YouTube. I wanted a career change, and programming sounded interesting. After just one weekend of deep diving into web development basics, I was hooked. This began my journey of becoming a self-taught developer, which you can read more about [here](https://stevedylan.dev/posts/my-developer-journey). It was a rough but exciting time, as I would wake up early to learn and write code, go to work, help out my wife with our new son, then stay up late into the night to keep going.

		title: "Raycaster Extension",

		description:

			"The fastest way to send a cast on Farcaster. A Raycast extension that allows you to sign into your Farcaster account and send casts with optional images via IPFS. ",

		link: "https://www.raycast.com/stevedylandev/raycaster",

		tags: ["raycast", "developer tools", "productivity"],

	},

		title: "Pinata-go-cli",

		description:

			"A Go rewrite of the Node.js CLI for Pinata, allows fast and extensive uploads to Pinata. Also includes helpful features for listing files and other API functionalities. ",

		link: "https://github.com/PinataCloud/pinata-go-cli",

		tags: ["developer tools", "ipfs"],

	},

	<body>

		<SkipLink />

		<Header />

			<slot />

		</main>

		<Footer />

				target="_blank"

				rel="noopener noreferrer"

				aria-label="Link to repos"

			>, to writing

			<a

				class="cactus-link inline-block"

	<section class="mt-16">

		<h2 class="title mb-4 text-xl">Extras</h2>

		<ul class="space-y-4 sm:space-y-2">

			<li>

				<a

					href="https://ethglobal.com/showcase/cosmic-cowboys-3q0co"

					target="_blank"

					rel="noopener noreferrer"

					class="cactus-link inline-block"

				</a>:

				<p class="inline-block sm:mt-2">EthGlobal 2023 hackathon winning project</p>

			</li>

					target="_blank"

					rel="noopener noreferrer"

					class="cactus-link inline-block"

				</a>:

				<p class="inline-block sm:mt-2">My personal photography portfolio</p>

			</li>

					target="_blank"

					rel="noopener noreferrer"

					class="cactus-link inline-block"

				</a>:

				<p class="inline-block sm:mt-2">

					Where I'm currently working as Head of Developer Relations

	<div class="space-y-6">

		<h1 class="title">Videos</h1>

		<p>Here are some samples of video content I've produced to help users!</p>

	</div>

</PageLayout>

@font-face {

}

@font-face {

}

@tailwind base;

@layer base {

	:root {

		color-scheme: light;

		--theme-bg: #000000;

		--theme-menu-bg: rgb(0, 0, 0 / 0.85);

	}

	:root.dark {

		color-scheme: dark;

		--theme-bg: #000000;

		--theme-menu-bg: rgb(0, 0, 0 / 0.85);

	}

	"compilerOptions": {

		"baseUrl": ".",

		"paths": {

		}

	},

	"exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]