Introduction

Hello, I'm excited to share some updates about Logarithmic Spirals. In this post, I'll be discussing the recent technical upgrades I've implemented, including a shift to Node 18 for the build pipeline and the resolution of some complex development challenges. These changes are part of my ongoing effort to enhance the functionality and user experience of the site.

Enhancing Code Reliability: Unit Testing and Node Upgrade

At Logarithmic Spirals, I've been focused on continuous improvement and innovation. A critical step in this process was upgrading the site's build pipeline to use Node 18. This change had a significant impact on the codebase and my approach to testing. To do this, I had to set up a custom build image. AWS Amplify has a documentation page titled Custom build images and live package updates which covers how to set a custom build image. The build image I ended up using is public.ecr.aws/docker/library/node:lts-hydrogen.

My decision to upgrade to Node 18 was driven by the need to enhance the build pipeline. This was a crucial move, as it allowed me to update all the source code dependencies from those compatible with Node 16 to Node 18 compatible versions. This transition was fundamental in modernizing the codebase and adopting new functionalities.

1. Dependency Modernization: The shift to Node 18 enabled me to update the site's dependencies, aligning tools and libraries with the latest standards. This was a key step in ensuring the site stays current and secure.

2. Adopting Jest for Testing: A significant advantage of moving to Node 18 was the ability to use Jest as the testing framework. Unit testing is useful because it gives you confidence that minor changes don't break major functionality in your project. When you follow the Gatsby Unit Testing documentation, there isn't any information available about Jest compatibility between different versions of Node. To save myself time, I realized upgrading Node and using the latest version of Jest was probably the simplest thing to do.

3. Impact on Gatsby: With the site built on Gatsby, ensuring compatibility with the updated Node version was crucial. This meant validating that Gatsby and its ecosystem worked seamlessly with Node 18, ensuring optimal performance.

Interestingly, while the upgrade to Node 18 brought many benefits, it also introduced new challenges, specifically hydration errors. These errors started appearing in production builds as a direct consequence of the updated build environment. In the following section, I'll delve into how I addressed these hydration errors, turning challenges into opportunities for further enhancement. Originally, I had planned to write a post on developing a Gatsby site with Node 16. However, the recent updates make such an effort inconvenient.

Solving Hydration Errors: Dark Mode Toggle Fixes

In my previous post Creating a Blog with Bulma & Gatsby: The Power of Dark Mode, I discussed how I implemented the dark mode toggle you can see in the site's navbar. When I initially developed this feature, my site was getting built on Node 16, as that was the latest version supported by DigitalOcean and AWS for static site development. At the time, production deployments didn't show any console errors. However, after upgrading the site to include unit tests, the subsequent version update for Node caused console errors to be logged in production builds.

The errors turned out to be hydration errors. Specifically, I was seeing error code 418. These occur when the client-rendered code doesn't match the server-rendered code. The reason for this was the dark mode toggle requires the window object, which is only available in browsers and is not available when the site's static code is built.

To fix this, I turned to Gatbsy's documentation on Using Client-Side Only Packages. The solution ended up being Workaround 4: Load client-side dependent components with loadable-components.

A Fresh Look: Redesigning the Home Page

Another change I made recently was a redesign of the homepage to make it more visually engaging.

In the above image, you can see a comparison of the old home page on the left to the new home page on the right. The new home page features a large banner image with the site's logo as well as preview images for the latest blog posts.

Rerouting Blog Posts

As Logarithmic Spirals has grown from its origins as a straightforward blog to a multi-dimensional website, I've been keenly aware of the need to evolve its content structure. This growth journey has recently culminated in a significant update: moving all blog-related content from the root directory to a dedicated /blog path.

Originally, the entire website was a blog, with posts and navigation directly under the root directory (/). This structure worked well when the focus was solely on blogging. However, as I expanded to include features like a photo gallery, an about page, and more, the need for a more organized and segmented website structure became evident.

1. Dedicated Blog Space: The transition to a /blog path for all blog content has created a specific area exclusively for articles. This clear delineation not only enhances the ease of access for readers but also helps in neatly segregating the blog from other diverse content on the site.
2. Improved User Experience: A more segmented structure allows for a smoother and more intuitive navigation experience. Visitors can now effortlessly explore different aspects of the site, whether it’s delving into blog posts, browsing the gallery, or learning more about us on the about page.
3. Reflecting Growth: This structural shift mirrors the evolution of Logarithmic Spirals. I’ve grown from a simple blog to a website with varied content, and the site's architecture now reflects this diversity and maturity.

The migration of the blog posts to the /blog path involved a two-part technical process:

1. Code Update for /blog Route Creation: The first step was updating the site’s code. This was crucial for properly establishing all blog pages and navigation elements within the new /blog route, ensuring the structural integrity and functionality remained intact. Now when the static blog pages are built, they're under the '/blog' route rather than the / route.
2. Implementing 301 Redirects in AWS Amplify: Next, I implemented 301 permanent redirects for the existing blog URLs using AWS Amplify. This ensured that any old links would seamlessly redirect to their new addresses under /blog. These redirects are vital for maintaining search engine rankings and providing a smooth transition for users, effectively communicating to search engines and visitors that the content has a new permanent home. AWS Amplify's User Guide has a section titled Using redirects which contains specific instructions I used to perform this step.

This intricate process was about more than just moving content; it was about maintaining a seamless, reliable, and intuitive user experience, indicative of my commitment to the evolving needs of my audience and the digital landscape.

A Note on the Use of Generative AI

Since the inception of Logarithmic Spirals, generative AI has been an integral part of the journey. It's crucial to me to be transparent about its use, not only as a valuable tool but as a fundamental component in various aspects of this site.

Generative AI, like ChatGPT, has been instrumental from the start – aiding in coding, content creation, SEO strategies, and even in designing visual elements such as this article's hero image. The efficiency and innovation brought by AI has been significant, but with this comes a responsibility to acknowledge its role openly.

The use of AI, particularly in content generation, poses important questions about originality and authenticity. It's essential to me to address these concerns head-on, ensuring that the use of AI is clear to my audience. This transparency is vital for two reasons: it upholds the integrity of the content and it invites a discussion about the evolving intersection of AI and human creativity.

I plan to delve deeper into this topic in an upcoming post, exploring not only how AI has been shaping Logarithmic Spirals since day one but also considering the ethical implications and future potential of generative AI in the digital realm. This exploration will offer insights into the complexities and possibilities that AI presents for content creators and consumers alike.

Stay tuned for an in-depth examination of the role of AI in the creative and technical processes of digital content creation.

Teaser: Exciting Things on the Horizon

As I continue to grow and evolve Logarithmic Spirals, I'm excited to give you a glimpse into the future developments I have in store. My commitment to innovation and creativity is leading me down some fascinating paths.

One area I'm particularly enthusiastic about is exploring ways of integrating audio into the experience of visiting Logarithmic Spirals. This venture is not just about diversifying content; it's about creating a richer, multi-sensory experience for visitors. The goal is to add an auditory dimension that complements and enhances the site, offering new ways for you to engage and connect with the content.

In addition, I'm preparing to share my experiences with generative AI, which has been a cornerstone in developing Logarithmic Spirals. Since the site's launch, AI has played an integral role in various aspects of its growth. I plan to delve into how AI has influenced everything from coding to content creation, providing insights into the benefits, challenges, and ethical considerations of using AI in the digital creative process.

Keep an eye out for these developments. They're shaping up to be not just enhancements to the site, but transformative elements that redefine how Logarithmic Spirals is experienced.

Conclusion

As I wrap up this post, I reflect on the busy and productive period it’s been at Logarithmic Spirals. Upgrading to Node 18 and solving those hydration errors were challenging, but immensely satisfying. These steps were vital to enhance the site’s functionality and keep it up-to-date with the latest web technologies.

Looking forward, I'm genuinely excited about what's next. I'm especially eager about integrating audio into the site, a step that promises to add a new layer of engagement for you. Also, I'm planning to delve deep into my experiences with generative AI, showcasing its impact on web development. These are more than just updates; they're about taking Logarithmic Spirals to new heights of innovation and user experience.