– Blog

Hannah's Tech Blog
-
Frontend Development Insights

Discover practical frontend development tutorials, JavaScript guides, React tips, and web accessibility insights. Learn modern CSS techniques, performance optimization strategies, and best practices for building responsive, user-friendly websites.

Browse by topic using the tags below to find tutorials on HTML5, CSS3, JavaScript, React, Next.js, accessibility, performance optimization, and more web development topics.
Click this button to show or hide the topic filters.

Back to Basics: Popovers and the Popover API

From complex positioning libraries to the elegant HTML Popover API - how modern web standards are revolutionising popover and overlay components.

HTMLCSSJavaScript+7 more

Building Open Source: Presenting EventSeats for small theatre groups and community events

A seat-booking system for small theatre groups and community events.

Open SourceTheatreCommunity+1 more

AI Image Generation: When Hype Meets Reality

My journey implementing AI image generation for my blog - from Gemini regional restrictions to DALL-E billing surprises and fake "free" tiers

AIBlogDevelopment+3 more

Back to Basics: Modern Modal/Dialog Components

Exploring the evolution from complex div-based modals to the elegant HTML dialog element - why modern web standards make everything simpler and more accessible.

HTMLCSSJavaScript+8 more

The Great Migration: Chasing Performance from Gatsby to Next.js

Why I moved my personal site from Gatsby to Next.js. A story about chasing performance, untangling old code, and the lessons learned along the way.

Next.jsGatsbyReact+5 more

2024: A Year in Review

Reflecting on a year of personal loss, professional growth in tech, and unexpected transformations

PersonalBlogFitness+1 more

Exercise and Me: A Journey to Physical and Mental Well-being

Explore the transformative benefits of exercise on both body and mind from a frontend developers perspective.

ExerciseFitnessMental Health+2 more

The Cost of Accessibility in React: What You Need to Know

Learn about the hidden costs of accessibility in React and how they play into performance and SEO. Discover tips for creating more inclusive, discoverable, and performant content.

ReactAccessibilitySEO+3 more

Dipping into the Role of Tech Lead

Explore my journey and insights gained from stepping into the role of an interim tech lead, handling challenges, and discovering personal and professional limits.

BlogPersonalTech Lead+2 more

The Value of Kindness

Discover how kindness, a quality that costs nothing, can transform your career and workplace as a frontend developer.

KindnessDevelopmentTeamwork+2 more

Styled Components with React: Syntax Tips and Tricks in 2022

Discover advanced tips and tricks for using styled-components in React. Learn about theming, best practices, and new techniques in 2022.

BlogStyled-ComponentsTheming+3 more

Introducing Light and Dark Mode Toggler on My Website

Discover the new light and dark mode feature on my website, offering a personalized reading experience and improved accessibility. Learn how I implemented this feature using React, Gatsby, and Tailwind CSS.

BlogPersonalLight and Dark Mode+3 more

Career Changes - whats new in 2021?

When determining your self worth means a change in direction.

Connecting Gatsby to Squidex Using gatsby-source-graphql

Learn how to connect Gatsby to the Squidex CMS using the gatsby-source-graphql plugin and OAuth authentication.

BlogCMSSquidex+4 more

Implementing a Netlify Function with Greenhouse Job Board API POST Request in Gatsby

Learn step-by-step how to implement a Netlify Lambda function to send a POST request to the Greenhouse Job Board API using Gatsby and Axios.

BlogNetlifyLambda+5 more

Migrating from .md to .mdx files in Gatsby

Migrating from .md to .mdx files in Gatsby a how to guide

BlogFirst postPersonal