Ben Holmes articles - 36 total
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 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-flat bundling and towards dynamic module imports. Let's see the latest trends and what they mean for us.
I'm building a new home outside of DEV. Here's why (and where to find me!)
I've grown my audience on DEV for over 2+ years. Now, I'm ready to start my journey of self-hosting, newsletters, interactive posts, and more!
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 (fetch, localStorage, Dates...) the easy way with Jest
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
Introducing my new personal site, a static SPA built without a framework 🚀
Aka building my own static site generator from scratch (don't try this at home)
Flexbox diehards: Here's some concrete examples of when CSS grid is just 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. Plus, a thank you!
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 what if you want string values too?
How much CSS should you know to use a CSS framework?
CSS frameworks are an amazing tool for beginners, but what if you've never written a stylesheet yourself?
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?