Senior Product Engineer in Portland. Astro/React/TypeScript blog, dev tips (TIL), illustration & zines, and side projects.https://joelmturner.com/https://joelmturner.com/blog/cloudinary-devjams-episode-36/https://joelmturner.com/blog/cloudinary-devjams-episode-36/Guest on Cloudinary DevJams #36: Astro migration, Cloudinary video and cover transforms, Lambda builds, and a portfolio walkthrough with Sam Brace and Jen Brissman.Mon, 18 May 2026 00:00:00 GMThttps://joelmturner.com/blog/astro-font-loading/https://joelmturner.com/blog/astro-font-loading/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.Tue, 31 Mar 2026 00:00:00 GMThttps://joelmturner.com/blog/webawesome-tailwind-4-same-site/https://joelmturner.com/blog/webawesome-tailwind-4-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.Sat, 20 Dec 2025 16:14:07 GMThttps://joelmturner.com/blog/zine-viewer-web-component/https://joelmturner.com/blog/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.Mon, 17 Nov 2025 18:43:03 GMThttps://joelmturner.com/blog/astro-font-optimization/https://joelmturner.com/blog/astro-font-optimization/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.Sun, 04 Feb 2024 18:43:03 GMThttps://joelmturner.com/blog/nextjs-astro/https://joelmturner.com/blog/nextjs-astro/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.Fri, 29 Dec 2023 20:13:34 GMThttps://joelmturner.com/blog/cloudinary-devjams-episode-17/https://joelmturner.com/blog/cloudinary-devjams-episode-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.Tue, 23 May 2023 00:00:00 GMThttps://joelmturner.com/blog/chart-parts-anatomy-of-a-chart/https://joelmturner.com/blog/chart-parts-anatomy-of-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.Thu, 02 Feb 2023 07:27:30 GMThttps://joelmturner.com/blog/quick-tip-code-extension-data/https://joelmturner.com/blog/quick-tip-code-extension-data/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.Fri, 08 Jul 2022 05:56:36 GMThttps://joelmturner.com/blog/working-feature-senior-frontend-developer/https://joelmturner.com/blog/working-feature-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.Wed, 06 Jul 2022 04:28:59 GMThttps://joelmturner.com/blog/static-nextjs-netlify-500-errors-404-errors/https://joelmturner.com/blog/static-nextjs-netlify-500-errors-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.Sun, 03 Jul 2022 04:19:41 GMThttps://joelmturner.com/blog/react-one-time-password-input-component/https://joelmturner.com/blog/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.Sat, 26 Mar 2022 05:07:58 GMThttps://joelmturner.com/blog/gatsby-client-side-external-redirect/https://joelmturner.com/blog/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.Tue, 02 Nov 2021 05:16:08 GMThttps://joelmturner.com/blog/instagram-cloudinary/https://joelmturner.com/blog/instagram-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.Mon, 01 Nov 2021 16:08:43 GMThttps://joelmturner.com/blog/sequential-interval-react-hook/https://joelmturner.com/blog/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.Thu, 08 Apr 2021 00:00:00 GMThttps://joelmturner.com/blog/svelte-animated-water-svg-pictorial-fraction/https://joelmturner.com/blog/svelte-animated-water-svg-pictorial-fraction/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.Mon, 04 Jan 2021 00:00:00 GMThttps://joelmturner.com/blog/create-a-single-line-chart-in-react-with-@vx/https://joelmturner.com/blog/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.Thu, 23 Jul 2020 00:00:00 GMThttps://joelmturner.com/blog/beginning-web-accessibility-react/https://joelmturner.com/blog/beginning-web-accessibility-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.Mon, 13 Jan 2020 00:00:00 GMThttps://joelmturner.com/blog/front-end-ticket-checklist/https://joelmturner.com/blog/front-end-ticket-checklist/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.Fri, 10 Jan 2020 00:00:00 GMThttps://joelmturner.com/blog/productivity-practices-front-end-development/https://joelmturner.com/blog/productivity-practices-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.Mon, 30 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/data-vis-react-bar-chart-vx/https://joelmturner.com/blog/data-vis-react-bar-chart-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.Tue, 17 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/inline-text-edit-react-hooks/https://joelmturner.com/blog/inline-text-edit-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.Mon, 16 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/react-hooks-usedims/https://joelmturner.com/blog/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.Fri, 13 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/react-layout-components/https://joelmturner.com/blog/react-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.Thu, 12 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/react-hooks-useslider/https://joelmturner.com/blog/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.Wed, 11 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/build-gallery-react-css-grid/https://joelmturner.com/blog/build-gallery-react-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.Tue, 10 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/quick-tip-graphql-fragments/https://joelmturner.com/blog/quick-tip-graphql-fragments/Quick tip: working with GraphQL fragments in Gatsby. Reuse fields across queries, colocate fragments with components, and keep your schema in sync.Mon, 09 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/avatar-component-gatsby-3/https://joelmturner.com/blog/avatar-component-gatsby-3/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.Sun, 08 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/avatar-component-gatsby-2/https://joelmturner.com/blog/avatar-component-gatsby-2/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.Sat, 07 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/avatar-component-gatsby-1/https://joelmturner.com/blog/avatar-component-gatsby-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.Fri, 06 Sep 2019 00:00:00 GMThttps://joelmturner.com/blog/animated-css-timer-icon/https://joelmturner.com/blog/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.Sat, 11 Nov 2017 00:00:00 GMThttps://joelmturner.com/blog/handlettering-best-of-2016/https://joelmturner.com/blog/handlettering-best-of-2016/A curated set of my best hand lettering and sketches from 2016. Highlights from a year of practice and finished pieces.Mon, 16 Jan 2017 00:00:00 GMThttps://joelmturner.com/blog/playing-with-type/https://joelmturner.com/blog/playing-with-type/Playing with type through hand lettering and sketching. Experiments and practice with letterforms and composition.Fri, 26 Jun 2015 00:00:00 GMThttps://joelmturner.com/blog/pmj-artwork/https://joelmturner.com/blog/pmj-artwork/Promo images inspired by Post Modern Jukebox's Eviction Tour in Portland. Fan artwork and design after seeing Scott Bradlee and the band live.Fri, 12 Dec 2014 00:00:00 GMThttps://joelmturner.com/blog/sassy-with-sass/https://joelmturner.com/blog/sassy-with-sass/Quick look at nesting selectors in Sass. Organize styles and avoid repeating selector strings. Reference and examples from the Sass Basics course.Fri, 03 Oct 2014 00:00:00 GMThttps://joelmturner.com/blog/decisions-we-make/https://joelmturner.com/blog/decisions-we-make/How to choose which decisions to make yourself and which to automate. Focus on what matters and streamline the rest.Tue, 21 Jan 2014 00:00:00 GMThttps://joelmturner.com/blog/daily-routine-freedom/https://joelmturner.com/blog/daily-routine-freedom/How a daily routine can create more freedom instead of constraint. Personal take on structure and what it unlocks.Fri, 17 Jan 2014 00:00:00 GMThttps://joelmturner.com/blog/doctors-companions/https://joelmturner.com/blog/doctors-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.Mon, 25 Nov 2013 00:00:00 GMT