Delivering Video with Cloudinary & Exploring Astro
Guest on Cloudinary DevJams #36: Astro migration, Cloudinary video and cover transforms, Lambda builds, and a portfolio walkthrough with Sam Brace and Jen Brissman.
Joel M Turner
Senior Product Engineer in Portland. Astro/React/TypeScript blog, dev tips (TIL), illustration & zines, and side projects.
Latest posts
Fonts in Astro: Optimize Performance of Fonts via Astro
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.
WebAwesome and Tailwind v4 in the same site
Use Web Awesome web components with Tailwind v4 on the same site. Fix styling friction after moving from Panda to Tailwind with the right config and layer order.
Zine Viewer Web Component
Custom web component for flipbook-style zine viewing in a modal. Vanilla HTML, CSS, and JavaScript—no framework. Drop-in script tag for any page.
Astro Font Loading: Optimizing Performance with astro-font
Optimize font loading in Astro with the Astro Font package. Preload fonts, control font-display, and reduce layout shift (CLS) for better Core Web Vitals.
Why I Migrated from Next.js to Astro (Svelte Islands & Panda CSS)
Converting my site from Next.js to Astro and Svelte, styled with Panda CSS. Notes on the migration, what stayed, and what changed for a faster, simpler stack.
Retrieving Instagram Content with Cloudinary — DevJams #17
Guest on Cloudinary DevJams #17: Instagram-to-Cloudinary automation, code review, open-source Jamstack work, and gallery demos with Sam Brace and Becky Peltz.
Chart Parts: Dimensions, Metrics, and What Makes Up a Chart
Understand dimensions vs metrics, then how field, legend, axes, and controls fit together in any chart. Intro anatomy with diagram and video—before you build or pick chart types.
Quick Tip: VS Code Extension Folder Location
Quick tip: move VS Code extension data folders (e.g. Local History) into .vscode so you don't have to add them to .gitignore. Keeps workspace clean for the team.
Working on a New Feature as a Senior Frontend Developer
Senior frontend guide for new feature tickets: scope with design and API, reuse patterns, define "done," and know when to refactor. Questions to ask before writing code.
Static Nextjs Netlify 500 Errors Instead of 404 Errors
Fix 500 errors instead of 404 on static Next.js on Netlify when hitting missing dynamic routes. Solution: return pageFound false in getStaticPaths. Includes workaround link.
React One Time Password Input Component
Build a React one-time password (OTP) input with 6 separate fields. Auto-advance on type, Backspace support via useKeyPressEvent. Includes CodeSandbox and parent state pattern.
Gatsby Client-Side External Redirect
Quick tip: client-side redirect in Gatsby without a lambda. Pass redirectTo via page context and use useEffect to set window.location. Handy for S3/CloudFront.
Instagram to Cloudinary
GitHub Action to fetch Instagram posts by hashtag and upload images to Cloudinary, then trigger a Netlify build. Node script, no gatsby-source-instagram needed.
Sequential Interval React Hook
Build a React hook for sequential animation states with configurable durations. Simulate a pulse cycle (rest, tick, exit, enter) for heartbeat-style UI. Includes CodeSandbox.
Animated SVG Water Pictorial Fraction in Svelte
Create an animated SVG pictorial fraction (water fill) in Svelte. Percentage-based progress so the shape fills or drains. Learn Svelte with a small data vis component.
Create a Single Line Chart in React with @vx
Build a single line chart in React with @vx (visx). Time on x-axis, metrics on y-axis, data points on the line. Use as a base for multi-line charts. Includes CodeSandbox.
Beginning Web Accessibility in React
Getting started with web accessibility in React. Add eslint-plugin-jsx-a11y, learn WAI-ARIA roles and semantics, and try no-mouse-days to find gaps.
Front-End Checklist for Ticket Completion
Front-end ticket checklist for staying organized across projects. Clean up debuggers and logs, refactor, test, verify on published URL, update Jira. Copy into Todoist and ship.
Productivity Practices for Front End Development
Productivity practices for front-end dev: window management with Better Touch Tool, Spaces for app grouping, and systems that help ship without burning out.
Bar Chart in React with @vx
Build a bar chart in React with @vx (visx) charting primitives. Step-by-step with scales, bars, and axes. Includes CodeSandbox and a base for more chart types.
Build an Inline Edit Text Input With React Hooks
Build an inline editable text input with React Hooks. Click to edit, Enter to save, Esc to cancel. Step-by-step tutorial with working CodeSandbox example.
React Hooks: useDims
React useDims hook that returns width, height, top, and left of a DOM element. Uses useLayoutEffect and getBBox for SVG. Handy for layout and measurement.
Build Reusable React Flexbox and CSS Grid Layout Components
Build reusable React layout components with Flexbox and CSS Grid. Boolean alignment props, gap support, grid templates, full props reference, and CodeSandbox examples.
React Hooks: useSlider
Build an auto-advancing image slider in React with hooks. Slides through an array on an interval. Includes working CodeSandbox example and minimal hook implementation.
Build a React Gallery With CSS Grid
Build a React image gallery with CSS Grid. Simple grid layout with same-size images, minmax for responsiveness, and size props (s, m, l). Uses Gatsby Image.
Quick Tip: GraphQL Fragments in Gatsby
Quick tip: working with GraphQL fragments in Gatsby. Reuse fields across queries, colocate fragments with components, and keep your schema in sync.
Create an Avatar Component in Gatsby with TypeScript Part 3: Adding Types
Part 3 of the Gatsby Avatar series. Add TypeScript types to the Avatar component: prop types, optional image url, and type-safe Gatsby Image integration.
Create an Avatar Component in Gatsby with TypeScript Part 2: Gatsby Image
Part 2 of the Gatsby Avatar series. Optimize the avatar with Gatsby Image, sharp plugins, and GraphQL for fast, responsive images. Step-by-step plugin setup.
Create an Avatar Component in Gatsby with TypeScript Part 1
Build an Avatar component in Gatsby with TypeScript. Part 1 sets up a placeholder image and basic styling as the foundation for Gatsby Image and types in parts 2 and 3.
Animated CSS Timer Icon
Build an animated CSS timer icon that runs forward and backward. Pure HTML and CSS—no SVG or GIF. Scale with font-size and control animation direction in the browser.
My Best Hand Lettering and Sketches of 2016
A curated set of my best hand lettering and sketches from 2016. Highlights from a year of practice and finished pieces.
Playing with Type
Playing with type through hand lettering and sketching. Experiments and practice with letterforms and composition.
Post Modern Jukebox Art
Promo images inspired by Post Modern Jukebox's Eviction Tour in Portland. Fan artwork and design after seeing Scott Bradlee and the band live.
Getting Sassy With Sass: Nesting
Quick look at nesting selectors in Sass. Organize styles and avoid repeating selector strings. Reference and examples from the Sass Basics course.
Choosing the Decisions We Make
How to choose which decisions to make yourself and which to automate. Focus on what matters and streamline the rest.
Creating a Daily Routine for Freedom
How a daily routine can create more freedom instead of constraint. Personal take on structure and what it unlocks.
The Doctor's Companions
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.