RyanClementsHax/ryanclements.dev

My personal website! :D

ryanclements.dev

• Setup
• Developing
  • Debugging in VSCode
• Linting
• Testing
  • Lighthouse
• Upgrading dependencies
• Deployment
• SEO
• Media
  • Optimizing gifs
• Docs
  • ADRs

Setup

1. (Recommended) Use VSCode and install the recommended extensions

2. Run npm run install to install all of the dependencies

3. Create a .env.local file and put the following keys in it

   BEEHIIV_PUBLICATION_ID="<beehiiv publication id>"
   BEEHIIV_API_KEY="<beehiiv api key>"

4. Create a .env.production.local file and put the following contents in it

   NEXT_PUBLIC_VERCEL_URL=ryanclements.dev

   • This is to get around how we cannot get the public url of the site easily within Vercel

Developing

Run npm run dev to start a dev server

Run npm run format <files> to format the files given

Run npm run format:all to format all of the files

Run npm run print-browser-support to print out all the browsers this project is configured to support as specified in the .browserslistrc

You can use feeder.co's Chrome extension RSS Feed Reader when testing the rss feed

Docs for rss can be found here

Debugging in VSCode

See the Next.js docs for how to do this

Linting

Run npm run lint:all to lint all of the files

Run npm run lint:js <files> to lint the specified files via eslint

Run npm run lint:js to lint all of the js/jsx/ts/tsx files

Run npm run lint:styles <files> to lint the specified files fia stylelint

Run npm run lint:styles:all to lint all of the css/scss files

Testing

Run npm run test to run the jest tests

Run npm run type-check to run type checking

Run npm run test:all to lint all files, type check, and run jest tests

Lighthouse

It is recommended that you get this extension to help run lighthouse tests

Upgrading dependencies

Run npx npm-check -u to get an interactive shell of everything that can be upgraded.

Deployment

Deployment is handled by Vercel on merge to the main branch

SEO

You can use opengraph.xyz for general social card debugging.

You can use Facebook's OG debugger tool to help debug card creation when sharing on Facebook. The docs for this can be found here.

You can use Twitter's Tweet Composer to test link rendering. See this post for more details and this troubleshooting guide for help.

You can use this tool to test iOS link rendering.

Media

Optimizing gifs

First install ffmpeg.

sudo apt update && sudo apt upgrade
sudo apt install ffmpeg

Then run npm run media:optimize-gifs to transform them in place to .mp4 and .webm files.

Consult chrome's developer guide for efficient video formats for further details.

Docs

ADRs

I use MADR to record architectural decisions in the docs/adr folder.