Kicking Off 2024

Exciting Enhancements and Fresh Tutorials on ICodeIt!

Happy New Year!

Today marks the first day of 2024. After a rejuvenating morning walk and a refreshing cup of water, I'm energized and eager to share with you the first issue of the new year.

I hope you've had a wonderful break and are recharged for the exciting opportunities that await us in the year ahead.

During my break, I dedicated some time to enhancing my homepage at icodeit.com.au. As I mentioned last year (which feels like only a few weeks ago, but was indeed in 2023), I refreshed the site using the Hugo theme and Tailwind CSS, and was quite pleased with the results. However, there were a few subtle yet impactful details that needed refinement — improvements to the styling of code snippets in posts, image captions, a "copy button" for code snippets, and some reference blocks, to name a few.

While Hugo might support such customizations, delving into a new template language and tackling technical aspects that might not be widely used elsewhere seemed daunting, especially given my familiarity with JSX and Markdown.

This led me to consider Next.js, which piqued my interest after experiencing their engaging tutorial (Next.js Tutorial). This inspired me to aim for a similar learning experience for my readers. Thus, I decided to transition icodeit.com.au to Next.js, and it has been an enlightening journey. The overall convention over the configuration approach, particularly the intuitive folder-based routes, has been a standout feature.

This journey's highlight is exploring MDX (Markdown eXtension) support. Since most of my content is already in Markdown, integrating it with React has brought numerous UI-building benefits.

The Art of Document Writing

Here's a glimpse of an article snippet. At the beginning, there are meta tags for SEO, followed by an InfoBox React component, and then regular markdown content:

---
title: "Modularizing React Applications with Established UI Patterns"
date: 2023-02-16T15:46:12+11:00
description: "Exploring effective UI design solutions in frontend development..."
cover: "/posts/images/modularizing-react-apps/evolution-1.png"
---

<InfoBox>
  *Originally published on [MartinFowler.com](<https://martinfowler.com/articles/modularizing-react-apps.html>)*
</InfoBox>

Discussing React applications, it's important to note that what we refer to as React applications are essentially front-end applications using React for views...

This format allows me to seamlessly integrate React components into my Markdown content, enhancing the reader's experience.

For more straightforward content, the InfoBox component can be implemented as follows:

export const InfoBox = ({ children }: { children?: React.ReactNode }) => {
  return (
    <div className="p-4 border-l-4 ...">
      {children}
    </div>
  );
};

In cases where the content includes Markdown strings, I use unified and its plugins to transform the Markdown into appropriate HTML:

import React from "react";


export const InfoBox = ({ children }: { children?: React.ReactNode }) => {
  let content;

  if (typeof children === "string") {
    content = unified()
      .use(remarkParse, { fragment: true })
      .use(remarkToRehype)
      .use(rehypeStringify)
      .processSync(children)
      .toString();
  } else {
    content = children;
  }

  return (
    <div className="p-4 border-l-4 ...">
      {content}
    </div>
  );
};

Here's an example of the final rendering in the InfoBox, showcasing italicized text and a link:

Introducing the New icodeit.com.au

I've launched several free tutorials on icodeit.com.au as a testament to this new format. These tutorials strike a balance between a comprehensive book and an informative blog post, offering step-by-step guidance on engaging topics without overwhelming detail.

I'd love to hear your preferences for content types. Please let me know if you have any suggestions for improvement or if you spot any errors. Your feedback will help refine the content, which I'll gladly share in future updates.

---

Looking forward to your thoughts and wishing you a fantastic start to the new year!