Git Product home page Git Product logo

petemillspaugh.com's Introduction

Hey, thanks for poking around my repo! I wrote about myself and my digital garden on petemillspaugh.com/about, so I'll use this space to touch on the technical bits.

React, Next.js

React and Next are the frontend framework and meta framework I know best. I really enjoy working with both. I plan to move from the legacy /pages directory to /app.

MDX

I'm using MDX with next-mdx-remote for written content.

Components

Components are a spectrum from low-level building blocks like Blockquote to highly composed components like Garden. It's hard to draw a line in the sand between component-library-components that might live in /components/lib and bespoke components that are reused just once or not at all. So I mixed them all in one /components folder. Credit to Josh Comeau's wonderful React course for this structure.

I rely on unstyled component libraries like Radix UI for my underlying component primitives when it comes to complex implementations like Popover and Switch. I love getting accessibilty and usability out of the box with these sorts of libraries.

Styled Components

I like the flexibility of CSS-in-JS and the colocation of markup + styles with styled-components. I also prefer writing vanilla CSS to writing utility classes, e.g. with Tailwind. I'm considering moving away from CSS-in-JS, though, maybe to CSS modules.

Code snippets

I use Code Hike to drop code examples in my MDX. It's fantastic.

Animation

I use react-spring for the Edison bulb in the top right corner of my garden, which I wrote about here. I'd like to play more with Framer Motion like I did in weeksofyour.life (loading UI).

Backend

This is a static site, but there is some stuff that happens server-side. Email newsletter signup/verification/distribution is one. I used val.town to write custom email subscription logic, which I wrote about here. Signup is in the footer, in case you're interested!

Domain registrar

Cloudflare is my domain registrar of choice. They don't mark up domains and come with the expected features (SSL, etc.).

Deployment

I deploy on Vercel. Automatic preview deployments on PRs are really handy for a static site like this.

Analytics

I use Vercel Analytics to track # of visitors, page visits by URL, referrers, countries, operating systems, and browsers. These are just curiosity/vanity metrics for meβ€”I'm not interested in collecting or doing anything with individual user data. I might migrate from Vercel to Plausible or another alternative at some point.

Monetization

No plans to ever monetize. My garden is for fun, learning, and meeting friends on the Internet!

petemillspaugh.com's People

Contributors

pmillspaugh avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.