The python environment setup cheatsheet
A checklist for setting up your Python 3 environment in any editor
Blog Archive
To be honest, I don’t blog as much as I make videos these days :) This is my archive of old posts and (maybe) future thoughts.
Building serverless applications with Fauna + GraphQL
Let's learn how "serverless" and "GraphQL" compliment each other when building frontend-focused web apps.
Understanding single page apps & client-side routing
Let's get some clarity on what single page apps are, how they work, and where they differ from server-side routing.
Grabbing subsets of JS object properties with... GraphQL?
It's easy to grab keys out of JSON objects, but what if we want to grab entire, nested sets of object keys without destructuring?
Sexy, accessible show-hide animations in any web framework
It's easy to build fancy fade transitions, but how do we include keyboard-ists and screenreaders in the mix?
Want CSS variables in media query declarations? Try this!
Let's see why CSS variables / custom properties fail in media queries + some workarounds to try
Picture perfect image optimization for any web framework
Image optimization is never fun to deal with. Let's learn how the picture element + 11ty can save any static site from bloated load times.
How ES Modules have redefined web development
The world has been moving away from "pancake" bundling and towards dynamic module imports. Let's see the latest trends and what they mean for us.
4 Git shortcuts that define my workflow
Here's 4 bash snippets that let me push, pop, and pull my way to victory as a web dev!
4 Conference talks that changed my perspective as a web dev
Let's explore architecture complexity, when abstractions are bad, how React Hooks work, and the importance of SvelteJS
Another way to understand JavaScript's array.reduce
I struggled with understanding array.reduce for a while. So I found my own way of explaining it that clicks 💡
A shiny-on-hover effect that follows your mouse (CSS) ✨
Using CSS variables + any frontend framework to add a metallic shine to your UI
Mocking browser APIs in Jest (localStorage, fetch and more!)
Turns out, Jest gives you access to all sorts of browser APIs (fetch, localStorage, etc) that you can mock at a moment's notice! Let's see how.
Leaving Notion to build a second brain in VS Code
Why I'm ditching my favorite notetaking app to get organized, write everything down, and build a second brain.
The web dev tools that helped me get s*** done in 2020
From the burning ashes of 2020, I've unearthed some gems that really improved my life as a dev. Let's talk notes, git snippets, state machines, and FP!
NextJS, Contentful CMS, GraphQL, oh my!
Let's pull CMS data the easy way with GraphQL. We'll explore NextJS, Contentful, and GraphiQL from a beginner's perspective!
Understanding the spectrum of CSS frameworks
We've come a long way from Bootstrap. Let's explore the CSS framework spectrum from utility classes to all-in-one component powerhouses.
Building a sexy, mobile-ready navbar in any web framework
Let's build a slick navbar you can use in React, Svelte, or vanilla ES6 JS. We'll create an animated hamburger dropdown as well!
Writing a state machine in one line with TypeScript
State machines aren't just a nice library (hi XState); they're a way of thinking about your state. Let's jump into an example using TypeScript.
Before building your next static site with React, consider this
Here's when templating libraries like Pug might be better than a bunch of components
Use flexbox? Here's when CSS Grid is better
Everyone's talking about CSS Grid, but when is it really better than what you're already doing?
How you can (sort of) write SASS @mixins in plain CSS
CSS variables are super powerful. Let's see how they can make repeated styles less DRY
The power of SvelteJS: building an animated image carousel in <30 lines of code ✨
Let's make a carousel of images that fade between each other, all in 30 lines of code.
The web dev tools that helped me get s*** done in 2019
A rundown of my favorite web dev tools in 2019 feat. Netlify, Svelte, CSS vars, and Contraste
HTML5 tags - how do they work, and which ones should I use?
Whether you've seen HTML or not, it may feel unclear when to use each element, or even what elements are available these days.
What I learned planning and building an MVP as a frontend dev at Peloton
As a frontend dev with little industry experience, these are some lessons learned in the project development process.
Using Typescript string enums? Consider string literals!
Enums are a great way to standardize your types. But if you want those string values, is this the best solution?
How to revert your git commits without panicking
When your code turns to 💩 but you've already committed, how do you go back?
How using CSS variables helped me cut down on JavaScript
Styling with JavaScript is pretty convenient, but how can CSS replicate that logic?
Git + GitHub Best Practices for Teams (Opinionated)
A collection of thoughts on using Git to its fullest when working on a project team
Let CSS frameworks empower you, not control you
CSS frameworks are super useful for the building blocks of a website, but when is it best to start adding custom styles?
A neat DIY solution to animating on scroll (for any framework)
AOS libraries sure are slick, but why add dependencies when it an be simple to implement yourself?
Why SvelteJS may be the best framework for new web devs
Every new programmer starts with vanilla JS and DOM manipulation. But in the component-driven world of modern web dev, is that the best way to start?
Why I'm using Surge and not GitHub Pages
Everyone's making a static site these days, and most use GitHub Pages to get up and running fast. Here's why Surge is also worth a look 👀