My new space on the internet opens it's doors

The new version of my site brings a minimalist design into the mix and aims to showcase myself, my thoughts and my writings. It has been a journey to get here but finally I opened the door wide.

In the makings

I've always struggled with finishing side projects. While I can say I love experimenting and trying out new things thus forming my own opinions, which usually leads to a lot of unfinished products, as shipping a good enough product requires a lot of work, which requires a lot of time, time I cannot afford to spend on these projects.

To be honest is the good old trap that it's always something you can do to improve it. So I'm glad that I forced myself to finish this new version of my persoanl space no matter how many challanges I had to face, time wise.

In the making of this space I used technologies that I've enjoyed using lately, including:

• Next.js (v11)
• Tailwind CSS (Recently switched from styled-components / emotion)
• next-mdx-remote
• GreenStock Animations
• Zustand (Light state management)
• Deployed with Vercel

Next.js 11

Next.js is one of my favorite tools to use lately, vercel team is killing on the developer experience (DX). I probably can name just a few things that made the making of this website simple and intuitive, these being their Page Router, their getStaticProps for Static Site Generation, as well as Image Component and Optimization.

When it comes to under-the-hood optimizations next is one of the best for sure. Their Image component gives you a big helping hand in preventing Cumulative Layout Shifts (CLS) by providing a fixed width and height to the media, loading it as it reaches the viewport and serving it using modern formats like WebP when supported, all these makes the page be really fast as we all know media is one to provide a big performance hit to most websites.

Tailwind CSS

For a long time I've been a fan of CSS-in-JS solutions like styled-components or emotion and I thought tailwindcss is just bootstrap, so I was reticent of trying it out, all until @karlhadwen introduced me to it, since then I've used tailwind in a few projects and I can say I have a strong opinion on the matter, I love it.

In short, tailwindcss allows you to have a good, reliable and really thought out system design while making the development process fast, simple and intuitive.

There is a small learning curve in using it, mostly by rewiring your existing CSS knowledge into CSS utility classes. The transition can be easier by using IDE tools like IntelliSense for Tailwind CSS. As a small example we can look at how we can convert some CSS:

margin-left: auto;
margin-right: auto;
padding: 80px 12px;

into tailwind utility classes:

<section className="mx-auto py-20 px-3" />

MDX

As a developer, my personal favorite way of writing content is markdown so it was an easy decision on how I want my data to be sourced. next-mdx-remote along with getStaticPaths from next.js allows you to treat your .mdx files as you would treat any data in your application, being able to query it and statically build it from remote sources.

This approach keeps your mdx files separated from your application, in my case I chose to store my content into a top level folder /data.

More then this next-mdx-remote makes it simple to use remark and rehype plugins which enhances the content processing, pairing this with tailwind prose utility class makes you have a fully featured blog with a few lines of code.

const mdxSource = await serialize(content, {
  mdxOptions: {
    remarkPlugins: [
      require('remark-code-titles'),
      require('remark-slug'),
      require('remark-autolink-headings'),
      require('remark-prism'),
    ],
    rehypePlugins: [require('mdx-prism')],
  },
});

<div className='prose max-w-none w-full'>
  {content}
</div>

GreenStock Animation (GSAP)

gsap is a fast and robust library that can be used in a lot of environments, including react. I've chose to go with GreenStock for animations over something like framer-motion (which I've also used in the past) because it makes the developer job simple and has a big impact on the user. Over the years gsap team released multiple useful plugins for easly creating animations along their core tween and timeline functions.

Over time I've heard multiple opinions that are against using gsap with react but I find it's usage being very simple, as the exemple below will illustrate:

useLayoutEffect(() => {
  if (introComplete) {
    const tl = gsap.timeline();

    // using a react ref instead of a class name
    tl.to(headerRef.current, {
      y: 0,
      duration: 0.1,
      ease: 'expo.out',
      delay: 0.11,
    });
    // awaiting gsap to finish the animation and do something
    tl.then(() => setLocalAnimationComplete(true));
  }
}, [introComplete]);

Zustand

All I can say about zustand is that it is a very well thought library and a persoanl favorite when it comes to a light global state management solution. It's based on flux principles and it pairs really well with react as it has an API based on react-hooks pattern. It only renders components when changes are done to part of the state that it's being used in that particular component, and it does not wrap your application in Context Providers.

The usage is intuitive and simple (which you might get that it's a theme among all the tools I use), let's look on how we can create a store with zustand:

export const useStore = create(
  combine(
    {
      introComplete: false,
    },
    (set) => ({
      setIntroComplete: () => set({ introComplete: true }),
    })
  )
);

to use our state in a component we make use of the useStore hook:

const {  introComplete } = useStore();

Conclusion

The new version is a personal slice of the internet, a place to share my writings and post things I learn along my journey. Here it is, I hope you will enjoy your time spent with me and if you want to disagree with anything I say, feel free to shoot me a DM on twitter @chirila_ and I would be happy to debate.