Joel M Turner

Guest on Cloudinary DevJams #36: Astro migration, Cloudinary video and cover transforms, Lambda builds, and a portfolio walkthrough with Sam Brace and Jen Brissman.

Use Astro's first-party fonts in astro.config for local or provider fonts, variables, and fallbacks—the supported upgrade from the astro-font package.

Use Web Awesome web components with Tailwind v4 on the same site.

Custom web component for flipbook-style zine viewing in a modal.

Optimize font loading in Astro with the Astro Font package.

Converting my site from Next.js to Astro and Svelte, styled with Panda CSS.

Guest on Cloudinary DevJams #17: Instagram-to-Cloudinary automation, code review, open-source Jamstack work, and gallery demos with Sam Brace and Becky Peltz.

Understand dimensions vs metrics, then how field, legend, axes, and controls fit together in any chart.

Quick tip: move VS Code extension data folders (e.g.

Senior frontend guide for new feature tickets: scope with design and API, reuse patterns, define "done," and know when to refactor.

Fix 500 errors instead of 404 on static Next.js on Netlify when hitting missing dynamic routes.

Build a React one-time password (OTP) input with 6 separate fields.

Quick tip: client-side redirect in Gatsby without a lambda.

GitHub Action to fetch Instagram posts by hashtag and upload images to Cloudinary, then trigger a Netlify build.

Build a React hook for sequential animation states with configurable durations.

Create an animated SVG pictorial fraction (water fill) in Svelte.

Build a single line chart in React with @vx (visx).

Getting started with web accessibility in React.

Front-end ticket checklist for staying organized across projects.

Productivity practices for front-end dev: window management with Better Touch Tool, Spaces for app grouping, and systems that help ship without burning out.

Build a bar chart in React with @vx (visx) charting primitives.

Build an inline editable text input with React Hooks.

React useDims hook that returns width, height, top, and left of a DOM element.

Build reusable React layout components with Flexbox and CSS Grid.

Build an auto-advancing image slider in React with hooks.

Build a React image gallery with CSS Grid.

Quick tip: working with GraphQL fragments in Gatsby.

Part 3 of the Gatsby Avatar series.

Part 2 of the Gatsby Avatar series.

Build an Avatar component in Gatsby with TypeScript.

Build an animated CSS timer icon that runs forward and backward.

A curated set of my best hand lettering and sketches from 2016.

Playing with type through hand lettering and sketching.

Promo images inspired by Post Modern Jukebox's Eviction Tour in Portland.

Quick look at nesting selectors in Sass.

How to choose which decisions to make yourself and which to automate.

How a daily routine can create more freedom instead of constraint.

A look at the Doctor's companions in Doctor Who—how they've changed across the show and what makes each era's TARDIS team memorable.