Events |10/29/2022-7 min read

Introducing abimaelbarea.com/blog

Decision and struggles while creating my first blog from scratch.

I wrote my first blog post a few years ago; Deloitte published it. I was working there at that time, and I appreciate that opportunity and especially their help during the process:

Clean Architecture Deloitte Spain

It took me a while to write the second one, but I finally did it and published it on Medium:

How To Use video In Angular? Medium

Then, I continued writing on Medium for some publications; I even explored DEV Community:

How to Make a Component Compatible with Angular Forms? DEV Community

But some questions came to mind: What if I own my content in a personal blog? What if I build it from scratch?

Why should I create my blog?

I thought about it for quite a while. These were the potential benefits of having my blog:

• Having a playground for doing experiments
• Controlling how to display the content: colors, spacing, typography
• Improving my knowledge about static websites
• Learning about SEO, Open Graph, RSS
• Accessing to all the Analytics information

How did I decide to build it?

Let’s talk about engineering. In the table below, you can see a summary of the tech stack that I used:

Why Nextjs and React?

I had doubts before starting, so I explored the possibility of doing it in Vue using Nuxt or React with Nextjs. Both combinations fitted my needs, and to be honest, I wanted to explore Vue and Nuxt.

I finally decided on React because I already knew the framework, allowing me to focus on learning and improving in different areas

I chose Nextjs because:

• It is one of the most popular frameworks for building React-based websites
• I loved the idea of switching between Static Rendering and Server Side Rendering
• The routing system based on folders was very intuitive
• The deployment using Vercel was relatively easy

Why Typescript?

Using Typescript was a straightforward decision. Having an extra layer of security and validation types on building time was a must. I wanted clarity on the codebase and the potential of types.

Why PostCSS and CSS Modules?

This is an exciting question. My choices were CSS-in-JS using libraries like Emotion or StyledComponents vs. CSS Modules. This one took me a while because both alternatives seemed nice. Still, I chose CSS Modules for two reasons:

• I was working on another project with CSS-in-JS tools
• I wanted to stay as close as possible to CSS while keeping the benefits of CSS encapsulation

Once I decided, I realized that CSS Modules were the default configuration of Nextjs. They included it through a module of PostCSS, which was even better news, because I had the potential to PostCSS out-of-the-box.

Why MDX?

When you’re building a website, you need a place to store the content, and of course, the first thing that came to my mind was a Content Management Systems (CMS). I didn't want to spend time building my database and an API to access the content, so a Headless CMS seemed the better choice. And that’s what I did. I spent time learning about Strapi and Contentful and was excited about it.

I was pretty excited, as a developer I know how to read and write a markdown file, and that was a plain, basic static file. But with MDX, I could add custom references to my components and then implement an easy mapper to make the connection with my code. That was sick! I didn’t need a database, a server, a cms, or anything. I could write my content using markdown, and Nextjs will create a Static website. What? Was that even possible?

Other Considerations

At some point, I decided that I wanted my blog to be a Progressive Web APP (PWA), it kind of makes sense because I was looking for a way of having access from my phone launcher in a click. And it was an exciting experience because I had no clue how to make a Nextjs website as PWA.

Search Engine Optimization (SEO) was a huge challenge. I wasn’t expecting it but I was fortunate to find NextSeo. The library completely changed my life because I had a template of what parameters to provide, which was vital for researching and learning more about the topic.

Regarding Analytics, I initially went with Google Analytics, but in a last-minute decision, I decided to add Vercel Analytics too while writing this post. I am making this move to learn about both platforms and decide which one fits better my needs and expectations.

Design

I have a strong background in UX. I worked in a Software Engineering and Usability laboratory for many years. So, my relationship with design is pretty close. I learned Photoshop, Sketch, and Figma.

For developing this blog, I decided to use Figma and export the content using SVG format to optimize the sizing of the files. But I struggled to create an outstanding image from scratch, and it took me ages to make one for this post.

After more than 6 hours in front of the Midjourney Discord without blinking, I learned what I should write to get the images I expected, and I recreated all of them.

Before Midjourney

After Midjourney

Now, I’m using webp for the site images and jpg for the Open Graph versions.

Conclusions

Creating something from scratch is challenging. Suddenly I wasn’t just a Full Stack Developer. I needed to become a Software Architect, Designer, Product Owner, Project Manager, Content Creator, and SEO Specialist. For a while, it was overwhelming, but soon it became like a game and a challenge, and I loved the process.

The open-source challenge

When I started, I was super afraid of showing my code. At the same time, I wanted to be transparent and honest with my potential audience. And it could be beneficial to reference me and others who wish to explore how I did it. So, after thinking about it, I decided I MUST make the code public.

This decision was hard because I would be fully exposed. In the beginning, I tried to follow all the fantastic scrum/kanban techniques. So, I set up my Trello board with tickets, created small PRs, and wrote clear commits. I started having problems pretty soon: the acceptances criteria weren’t clear enough, requirements were continually changing, and the design was different every 2 seconds.

Following this process was complicated, and I decided to adapt. I still had my goals and was using semantic commits, but I was more in an exploratory mode. So, I apologize in advance if the commit history isn’t perfect enough. I thought it was lovely to keep it to remind myself that I’m not perfect and must work on creating a better version of myself every day!

What’s next?

This is just the beginning of an exciting journey. As I said at the beginning of this blog post, this website is my playground. I have many ideas to improve it, like

• Adding code validation tools like ESlint, Prettier, Husky, etc
• Huge refactor/analysis of CSS. The goal is to include the new trends, subgrids, and container queries

So, if you liked this post and want to learn more about how I build my blog and my thoughts behind every decision, please stay tuned.