import mdx from "@astrojs/mdx";

import tailwind from "@astrojs/tailwind";

import sitemap from "@astrojs/sitemap";

// https://astro.build/config

export default defineConfig({

});

publishDate: "10 Jan 2023"

description: "Level up your job search with a dynamic app NFT resume that will wow any employer."

tags: ["web3", "nfts", "tutorials", "web development"]

---

import pinnie from "../../assets/pinnie.png";

import OutLinkButton from "../../components/OutLinkButton.astro";

Despite the current market conditions, web3 jobs are still on the rise. But competition is at an all-time high. Sure you can build a portfolio of projects to help display your skills, but that’s what everyone else is doing too. What can you do to stand out among the crowds of developers out there like yourself? How are you thinking outside the box?

As said in Justin’s tutorial, you can use a free Pinata account to do all of this, but to truly harness the full user experience of this app, using a paid account with a Dedicated Gateway will make this app much faster than if you used a public gateway or depended on external sources. Here is an example of the application through Steve’s Dedicated Gateway:

<iframe

/>

/>

Awesome! Resume app is done, time to turn it into an NFT. Following the guide, Steve created a simple smart contract to deploy the App NFT in a way that he could keep updating it with new versions, very handy if you ever have an update in experience or education. Also keep in mind you can do your own smart contract customization here to do cool stuff, like mass airdrop your NFT to a list of wallets or ENS addresses!

```json

{

}

```

publishDate: "18 May 2022"

description: "Learn how to scan and mint real life objects on Solana"

tags: ["web3", "nfts", "tutorials", "web development"]

---

import medium from "../../assets/medium.png";

import OutLinkButton from "../../components/OutLinkButton.astro";

Once viewing it in the web browser, we can download the model by clicking “export.”

From there we want to select the GLTF format and start the download!

Ok so we got our 3D file for our environment, now lets do some 3D objects as well! The process is pretty similar, except for 3D objects we’ll switch to the “photo” mode instead of the LiDAR mode. The photo mode will take a bunch of different pictures and put them together to make a 3D model! In the video below you can see what the process looks like as I scan one of my prized possessions, a 1930's edition of Moby Dick illustrated by Rockwell Kent.

Let’s log into Pinata and upload our file. Really simple, just click on the upload button in the top left, give it a name, and upload!

Then we just need to choose a subdomain and make sure its available. If it is, click next!

Then using a wallet like Phantom, click on “Add / Connect wallet, select “import private key,” then paste in our keypair from earlier. Once it’s in your wallet you will want to click on the settings icon in the bottom right, scroll down to “change network” and set it to “Devnet.” Once you do that, go back to your NFTs page and you should see it!!

## Conclusion

publishDate: "02 May 2023"

description: "I spent two days with zero access to my cell phone or computer, and this is what I discovered"

tags: ["social media", "tech philosophy", "personal"]

---

import substack from "../../assets/substack.png";

import OutLinkButton from "../../components/OutLinkButton.astro";

	image={substack}

/>{" "}

It was a Thursday afternoon at the chiropractor. I was still on my paternity leave, helping my wife take our kids so our youngest could get some adjustments. Like most dads I sat around, waited, and scrolled on my phone. Halfway through I could tell my wife was miffed, and I thought it was due to our appointment being fifteen minutes late. In reality, my son had been trying to get my attention for several minutes, I ignored him, and he gave up. When she told me later that day I could vividly see it happen, like I was there, but I wasn’t.

---

title: "How to Run Your Own Public IPFS Gateway"

description: "Learn how to run a public IPFS gateway with a custom domain using Digital Ocean"

tags: ["IPFS", "Gateway", "Dedicated Gateway", "Hosting", "Digital Ocean"]

---

<aside>

⚠️ Warning! This guide will show you how to make a public IPFS Gateway that can access any CID on IPFS, which means it has the potential to be abused. Please be cautious and look into ways you can secure your gateway.

Since we’ll be using DigitalOcean you can head over there to create an account and buy a Droplet. You definitely don’t need anything crazy, I just got the following:

/>

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

/>

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:

publishDate: "04 Nov 2023"

description: "Experience the power of decentralized storage, encryption, and token gating with this tutorial"

tags: ["ipfs", "lit-protocol", "encryption", "token-gating"]

---

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.

```jsx

const uploadFile = async (fileToUpload) => {

};

```

```jsx

const uploadFile = async (fileToUpload) => {

};

```

```jsx

const accessControlConditions = [

];

```

```jsx

const accessControlConditions = [

];

```

```jsx

const accessControlConditions = [

];

```

tags: ["programming", "vim", "neovim", "terminal"]

---

In a [previous blog post](https://stevedylan.dev/posts/why-i-learned-vim) I talked about why I learned Vim, and how it boosted my speed and productivity. In some ways it’s true, but I don’t think I had a grasp on the whole picture. After I watched [this video](https://youtu.be/5wy2iLU5fs0?si=uZ2e6_EUFkrk4Vrp) I realized it wasn’t necessarily just Vim/Neovim, but my terminal based workflow that was at play. I recently gave [Zed](https://zed.dev) another try as it has some attractive features, including [a whole page in their docs dedicated to Vim.](https://zed.dev/docs/vim) It is minimal with Vim keybindings enabled, as well as pretty speedy since its GPU enable and built on Rust. Nevertheless I still felt clumsy, and I realized why: the terminal. With my current terminal workflow I’m able to easily switch between different projects without having multiple code editor windows opened, and I have better access to CLI tools that compliment my developer workflow. I just can’t replicate that outside of the terminal right now.

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.

publishDate: "08 Mar 2023"

description: "How the Arc web browser is paving the way for the future of consumer computers"

tags: ["arc", "web browsers", "tech philosophy", "internet"]

---

/>

## 20 Years of the Same Thing

## Tabs, Folders, and Spaces

/>

One of the fundamental differences between Arc and other browsers is how it handles tabs. Instead of a row of tabs at the top of a window, Arc keeps them all in a sidebar. I genuinely believe there is a strong UX decision being made here: organization is simply easier to accomplish with a side menu than it is with a top menu. Beyond that, Arc uses a “Pinned Tabs” and “Today’s Tabs” approach to organizing your website. You may often feel hesitant to close a website because you might need it later. If you do, you can move it to the pinned tabs. When you feel like you don’t need it, then you can remove it from pinned tabs. Anything that stays in today’s tabs can be automatically cleared after a certain amount of time, or you can click a button to wipe them all out. This is powerful because it makes the decision of what is important and what isn’t easy for people to make.

/>

Of course, you may have lots of websites that you need to keep pinned, and for that, Arc has Folders and Spaces. Folders work like any other bookmark folder, where you can store as many as you want with sub-folders as well. This can be useful if you have a lot of sites that need to be referenced for a project. Folders work to a degree, but even still, you can have too many folders. That’s where spaces come in. Spaces are designed to be different workspaces for whatever you do on the internet. You could have a shopping space, an entertainment space, a developer space, anything really. You can customize the appearance, name, icon, and of course, the pinned tabs and folders for each one. Arc makes it simple to swipe between spaces and re-organize them to fit your needs.

/>

Favorites are special in that they are in nice little squares are the top of the sidebar no matter what space you are in, so for instance if you use Spotify a lot then that would be an ideal favorite app or website. They also have a preview feature when you hover over them for selective sites, e.g. Google Calendar will show you a brief schedule window.

## Split View

/>

Another killer feature on Arc is split views. With a few clicks, you can easily have side-by-side panels of two different websites. You can even pin these dual tabs if you have to reference them quickly. You can actually do more than just two; depending on how big your screen is, you can go crazy! Personally, I use this all the time when reading an article while taking notes or moving information from one app to another. The Arc team recently released vertical splits as well, perhaps enough persuasion to get a vertical monitor.

## Peek View

Peek is a new feature for Arc but perhaps one of my favorites. When you click on a link, instead of taking you to a new tab or taking you off the current site, a smaller window pops up and allows you to see the content, where you can either close it or expand it into a full tab. You could be browsing Twitter, see someone reference an article, take a quick peek, and be done! It's a great way to reduce tab clutter, with a world-class UX.

## Easels

/>

Easels are something completely unique to Arc and have some pretty impressive abilities. The concept is like internet chalkboards. You can snip pieces of websites, add them to an easel, then add other things like your images, text, shapes, etc. Arc provides a great shortcut (that can be customized), where all you have to do is hold down Command and Shift, then click & drag across the screen to select what you want to snip. Then it will prompt what easel you want to add the snippet to, or if you want to make a new one. Easels can also be made public and shared with other people!

The craziest part? They feature a LIVE mode. Let’s say you take a snippet of the weather of your hometown from Google and save it to your easel. At any time, you can visit the easel and press the “play” button, and Arc will update the easel in real-time! I’ve used this feature to track packages and share research with my team. Others have used it to make personalized dashboards to feature live info. You really need to try it for yourself!

## Boosts

/>

Arc has an affinity to bring back the excitement of the internet from the 90s, both in design and in customization. Not only does Arc feature themes for your browser to personalize your experience, they give you the ability to do “Boosts” to websites. Boosts are simply CSS or JS injections to websites so you can customize the color of a website or give it additional functionality.

/>

As someone who is obsessed with customizing the personal computer environment, I absolutely love Boosts. [Nord](https://nordtheme.com/) is one of my favorite color palettes, and I use it for as many ports as I can. With Boosts, I’ve been able to customize all my regular sites to give it some flare. This comes a bit naturally for me since I have some web development experience and know how to snag CSS selectors easily, however, there are possibilities for Boosts to become a marketplace feature where non-technical users could save and use Boosts made by others.

publishDate: "24 Apr 2025"

description: "My history, experience, concerns, and hope for Base as a viable L2 solution"

tags: ["base", "blockchain", "ethereum"]

---

A couple of weeks ago I watched [Vitalik: An Ethereum Story](https://ethereumfilm.xyz) with my wife, and if you haven't watched it yet I would highly recommend it. The creators did such a good job documenting the life of Ethereum, its creator Vitalik, and the core principles and values surrounding it. A wave of nostalgia took over me as I recalled the feelings I experienced when I watched my first smart contract go live on Rinkeby; a simple and very inefficient store of "posts" like a guestbook. When I saw messages recorded onchain show up on my humble website, I suddenly realized why blockchain and more specifically Ethereum could change everything. It's why I decided to dive into this field of work and why I'm still passionate about it today.

The push of coins is an attempt to rebrand tokens to be just ordinary content. The idea is that instead of posting a photo on socials, turn it into a coin. Every coin can have a photo associated with it, so why not? Instead of "liking" a post you can buy a certain amount. Zora was the first platform making this push as they pivoted from standard NFT posts to coins. I'm not here to convince you whether coins are good for the space or not. Experimentation is part of building onchain and it's how we move forward. The true controversy in my opinion is how Base has been pushing this narrative.

Protocols and tools are built to solve problems. In the case of Ethereum it created a sandbox where the possibilities are endless. Of course Vitalik and the creators had motives for building it, primarily to help democratize internet infrastructure and promote individual autonomy. Outside of some general principles that they believed in, the team was pretty hands off. It was up to the people to decide what they would build. They built things like decentralized governance, tokens, loans, etc. People saw the ways our internet society was broken and came up with solutions only possible because of blockchain and Ethereum. The Ethereum foundation or it's founders don't push people to use it in a certain way, they just provide the tools and let the builders build.

My issue with Base and the coin narrative is that it's pushing a particular agenda and use-case of blockchain. In their opinion it’s how they'll solve the issues they see in the web2 creator economy. That's a big opinion to carry and push upon your followers, and I would argue that it violates the relationship between a blockchain organization and its users. Coins are an interesting experiment, but they're also being pushed by a few individual companies, some that so happen to be financially invested by Coinbase. I want to assume the best of all parties involved, but when it comes to money, capital, and how some people can get absolutely wiped by tokens, the hair on my neck stands up. Vitalik once wrote about what he sees as the values of Ethereum but also the blockchain community at large, and he included the following:

publishDate: "07 Oct 2022"

description: "Storage ain’t sexy, but if web3 is gonna take a leap, it's one of the biggest problems we need to solve for."

tags: ["tech philosophy", "web3", "ipfs", "nfts"]

---

import bueno from "../../assets/bueno.png";

import OutLinkButton from "../../components/OutLinkButton.astro";

The traditional way of sharing files over the internet is through centralized servers. For example, if you write up and send a Tweet, the data is sent to Twitter’s servers. Then when other users want to see that Tweet, the servers pass that information to them. It’s a direct up and down motion.

Rather than straight up and down, IPFS is up, down, and side to side. IPFS is a decentralized network of nodes that share content with each other. If we imagine a Twitter run on IPFS, every user would have their own IPFS node that would upload data to the network, and as it is requested by other users, the data is passed from node to node. Rather than one company holding and owning that data, everyone owns that data. IPFS gives users the ability to own their data.

## How does IPFS protect your NFTs?

publishDate: "24 Sep 2024"

description: "A quick walkthough of how I built a guestbook for my website"

tags: ["programming", "developer tools", "pinata"]

---

When I was first getting started in web development I remember seeing someone's website and was immediately impressed by one thing: a guestbook. You could sign in with Github and leave a message, similar to someone's Facebook wall back in the day. I thought that was the coolest thing but had no idea how to build it. Fast forward to this weekend, I was reminded how cool that was and I decided to build it for my own website.

tags: ["programming", "next", "ipfs", "product"]

---

"I don't know why this isn't working" is a question I get often, and I usually respond with "could you share your code with me?" Next thing you know I get a cell phone image of someone's fingerprint covered laptop screen with a blur of code on it. I wish this wasn't the first time, and I certainly hope it's the last, but to be honest there was a problem.

While this library does have several themes to choose from I decided to stick with a light theme (blasphemy I know haha). A simple GitHub light theme with reduced opacity actually does a decent job. Definitely looked into trying to customize it a bit more but the way it handles syntax highlighting isn't as good as something like shiki. This might be something I look into down the road.

When it comes to actually uploading the content after the user has put their code in I used the built in API routes in Next.js, simply passing in the `content` of the file, `name` if one given, and `lang` for the language used from the dropdown menu. As mentioned earlier I'm using Pinata/IPFS for uploading the content and there is a convenient API route for JSON objects, so its a simple plug and post operation.

Along with viewing the content we can also enable some fun stuff like copying it to clipboard, downloading it as a file, or sharing the snippet with a link!

## API + CLI

Request:

```bash

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

          --data '{

            "content": "console.log(\"hello world!\")",

publishDate: "06 Dec 2022"

description: "There are so many new blockahins appearing and they all need a solution to off-chain storage"

tags: ["web3", "ipfs", "tech philosophy"]

---

import medium from "../../assets/medium.png";

publishDate: "27 Oct 2024"

description: "Learn about Succinct, SP1, and how the innovation of Precompiles changed the zkVM space"

tags: ["zk", "succinct", "precompiles", "zkVM"]

hidden: true

---

In the last few years the terms "zk" or "zero knowledge proofs" have been buzzing and for good reason. It's a relatively new piece of tech in cryptography that allows someone to prove something without revealing the information itself, which has massive implications for not only the blockchain space but for privacy and trusted code. While zk's are powerful, they also come at a cost. The majority of real-world use zero knowledge proofs are computationally expensive and inefficient, and in order to truly scale and make a difference, the cost needs to come down. This is where [Succinct](https://succinct.xyz/) comes in, a company that specializes in zkVM technology and makes it accessible to developers. Not only has Succinct built [SP1](https://blog.succinct.xyz/sp1-is-live/), an zkVM that allows you to write zero knowledge proofs in Rust, but they have also revolutionized efficiency with Precompiles.

publishDate: "08 June 2023"

description: "Learn how to use ChatGPT and Pinata to make a custom web photo zine with zero developer experience"

tags: ["web development", "ai", "chatgpt"]

---

import medium from "../../assets/medium.png";

import OutLinkButton from "../../components/OutLinkButton.astro";

First, you’ll want to sign up for an account with Pinata. I would recommend choosing the Picnic plan for this project as we will utilize its speed and flexibility for hosting our content. Once you have an account, you’ll want to start uploading all your images to be used for the zine. In this demo I’ve selected some of my favorite images from a trip I took a few years ago.

Once you have your content uploaded, you can click on the preview button to see your photo. Copy the URL for that image and paste it somewhere for later and repeat the process for however much content you want to put in your zine.

## ChatGPT

It will respond with several questions, so simply provide the answers like you see below.

Below my last answer I went ahead and gave ChatGPT the content of text and image links, and just like that it generated the html content to start with. If it doesn’t finish generating all the code at once, you can click “continue generating” and it will keep going where it left off. Also be sure it includes all your content, make sure it knows you have zero programming knowledge and it needs to write everything on its own. Once it does this there should be a copy button at the top of the code box, so go ahead and click that:

## Replit

Now to actually paste our code and see what it does, we will be using an online code editor called [Replit](https://replit.com). Just sign up for a free account, and in the top right corner you will want to click “Create Repl.”

After that you will want to select the HTML, CSS, and Javascript template and give your project a name.

Once you’re in your repl project, delete out the starter HTML and paste in your own code from ChatGPT, then hit CMD/CTR + S to save it. After that you should see on the right side your project:

You can also change the size of your webview by clicking and dragging the pane to shrink it more towards a mobile view if that’s what you’re after.

Now your project will likely not be perfect right out of the gate, and you will want to make some changes. Since ChatGPT keeps that conversation history, you can go back and forth with it for the changes you want.

The key is to make sure you are precise in what changes you want, and that ChatGPT gives you the updated code afterwards. Once you’ve gotten your zine looking the way you want it, click on the little dropdown arrow next to the index.html file and click “Download.”

After you have download the file, go ahead and upload it to Pinata just like you did for your image files. Then just click on that file to see your zine. You can view mine with this link:

[A Venture to the North East](https://stevedylanphoto.mypinata.cloud/ipfs/QmWAUQfKhJ19kZqcJLP6nPbHFRToiaFquGJ71gJEA4cRVT)

## Gateway tip

Now here’s the bonus info: if you wanted to make this a weekly update, Pinata provides a pretty neat way to do that. First you would of course need to give ChatGPT your code and the update content and it could swap it out for you (or you could even take your hand at changing it in Replit!), and once you have uploaded the new index.html to Pinata, you can click on the “more” button next to the file and select “Set gateway as a root”

What this will do is redirect my base url “https://stevedylanphoto.mypinata.cloud” to the new index.html file that was uploaded. I could keep updating it with each new file every week with a new photo zine, as well as improve it over time. Of course if you don’t like the “mypinata.cloud” domain for your zine, you could very easily use your own domain like “stevephotozine.com” and it would work exactly the same. My personal photography website is stevedylanphoto.com, so I just used “zine.stevedylanphoto.com” as a dedicated domain for this zine. Check it out:

VSCode is the exact opposite. There's loads of extra stuff all around the editor that's pure distraction. I mean, be real, who is using the minimap thing? What about that extra bar on the right with a bunch of icons that you'll never use? It's so aggressive that I wanted to get out as soon as I opened it. However, there are solutions to this! You can simply go to the View menu, then Appearance, and from there toggle all those nasty bits off. Now you can get VSCode looking more like this: