Small Fixes with AI

As a developer, I often find myself making small tweaks and improvements to my website. Recently, I leveraged GitHub Copilot to help me solve several UX and responsive design issues. In this post, I'll walk through the improvements we made together and what I learned along the way.

Theme Toggle Enhancement

One of the first issues I tackled was the theme system. My site had a dark/light theme toggle, but there were a few problems:

Default Theme Issue: The site was always defaulting to dark mode instead of light mode.
Theme Flash: Users experienced an annoying flash between themes when navigating between pages.
Inconsistent Toggle Placement: The theme toggle button wasn't ideally positioned in the UI.

Creating a Better Default Theme Experience

I improved the theme system by updating the theme initialization logic to:

Always default to light mode if no stored preference exists
Remove the system preference detection that was forcing dark mode
Apply the theme immediately during page load to avoid flashing

Eliminating Theme Flash

To prevent the theme from flashing between page navigations, I implemented a solution using Gatsby's browser APIs to set the theme before the initial render:

Creating a Dedicated Theme Toggle Component

I extracted the theme toggle from the navigation bar into its own component for better organization:

I then positioned this toggle in the header next to the site title, making it more accessible and visible.

Responsive Design Improvements

Fixing Mobile Header Layout

The theme toggle was overlapping with the site title on mobile screens. I addressed this by:

Adding responsive styles to the title bar component
Creating mobile-specific styles for the theme toggle
Shifting the profile photo and title to the left on mobile screens
Adding proper spacing to prevent overlap

Fixing Gallery Images on Mobile

The gallery images weren't displaying properly on mobile devices. I improved this by:

Updating the image query to use responsive breakpoints
Implementing proper CSS class-based styling instead of inline styles
Setting appropriate image dimensions for different screen sizes
Using the correct object-fit properties

CSS Transitions for Smoother Experience

To create a smoother visual experience when switching themes, I added CSS transitions:

Lessons Learned

Working with AI on these improvements taught me several valuable lessons:

React Best Practices: The importance of proper dependency arrays in useEffect hooks and how to handle ESLint warnings appropriately.
Mobile-First Thinking: Always consider how components will behave on smaller screens and implement responsive designs from the start.
Theme System Design: Creating a robust theme system requires careful planning around initial load, state management, and transitions.
Component Organization: Extracting functionality into dedicated components improves code organization and maintainability.

Conclusion

AI tools like GitHub Copilot can significantly speed up the process of making small but impactful improvements to your website. By collaborating with AI, I was able to quickly identify issues, implement solutions, and learn best practices along the way.

These small fixes have greatly improved the user experience of my site, especially on mobile devices. The theme toggle now works seamlessly, the layout is responsive across all screen sizes, and the transitions between themes are smooth and pleasant.

Have you used AI to help with your development work? I'd love to hear about your experiences in the comments below!