Preface

I’m mostly a hobby developer u2013 I’ve learned mostly by taping together bits of code found all over the internet for years now. This space is mostly for remembering the cool and useful shit I run across, but hopefully you can find something useful in here!

Tools

• VS Code u2013 More or less the god of code editors at this point. I was resistant to moving to something so “heavy”, only to find once I tried it it is incredibly fast on top of being packed with useful stuff.
• Codekit u2013 All sorts of fun things out of the box. Compass, local servers, sass compilation & more. I use VSCode more these days to cover these needs, but I relied on Codekit for years.
• RunJS - JavaScript playground for your desktop

Setting Up Your Editor

VS Code

• Mac Setup Guide for VS Code - Comprehensive guide for setting up VS Code on Mac
• Bracket Pair Colorizer - Extension for making bracket pairs easier to identify

Building a Portfolio or Blog

CMS Options

• Prose - The lightest you can get – Edit files directly in your repository with a web editor
• Kirby - File-based CMS that’s developer-friendly

Portfolio & Self Promotion

• How To Create An Amazing Profile ReadMe With GitHub Actions - Tutorial for creating an impressive GitHub profile

CSS

• Modern CSS - Practical modern CSS solutions for today’s layouts
• Learn CSS - Comprehensive guide by web.dev
• Animista - CSS animation library with customizable presets
• Simple SCSS Playbook - Practical SCSS techniques

Typography

• TypeNugget - Typography tool for creating and testing font combinations
• Type Scale - Visual calculator for creating type scales

Variable Fonts

• Introduction to variable fonts on the web - Getting started with variable fonts
• Fixing Variable Font Inheritance - Working with Variable Font properties
• Getting the most out of Variable Fonts on Google Fonts - Tips for optimizing variable font usage

Grid

• A CSS grid tool (there are many!) These are super useful when trying to take the idea in your head and put it in a grid. This one is nice since you can create a codepen and modify it from there.
• Controlling leftover grid items
• Complex CSS Grid layout in only a few lines

Color

• Solarized - Nice writeup on how color works in the Solarized color scheme
• Collection of color schemes - Various syntax highlighting color schemes
• Opacity in Hexadecimal - Guide for working with ARGB or RGBA color schemes

Visual Assets & Art

• CSS Doodle u2013 Draw complex patterns & visuals in pure CSS.

Web Fonts

• Recursive - Variable font for code & UI with extensive customization options

Static Site Generators

• Next.js u2013 Can’t beat em? Join em. Got bullied into writing React, but Next is pretty ok.
• Jamstack u2013 A great starting point for learning about static site generators and what is out there.

11ty

• Build an eleventy site from scratch
• 11ty.rocks u2013 Some great eleventy tips & beginner resources.
• Use Airtable as a backend for an eleventy static site

Git

• Questions:
  • Remove .DS_Store from Git

Site Speed & Testing

• Google Developers u2013 Pagespeed Insights

Examples & Inspiration

• The Making of a Dumpster Fire - Detailed creative process behind a popular interface
• Shirley Wu Interview - GitHub interview with data visualization engineer