6 min read
Introducing abimaelbarea.com/blogDecision 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
But the most important point was that It could be an exciting experience, and I wanted to go through this process
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:
|Frontend Framework||Nextjs (React)||12.1.6|
|CSS||PostCSS with CSS Modules||8.4.5 / 3.0.0|
|Content Management System||NextMDXRemote||4.0.3|
|Progressive Web App||NextPWA||5.5.2|
|Search Engine Optimization & Open Graph||NextSeo||5.4.0|
|Analytics||Google Analytics and Vercel Analytics||-|
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
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.
On October 2022, the second most active maintainer of Emotion published this article: Why We're Breaking Up with CSS-in-JS
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.
One day, I remembered a Syntax episode where they talked about something called MDX, and I stopped my CMS research and learned about MDX. During that investigation, I jumped on a fantastic article by Kent C Dodds where he said he was using MDX for building a modern website
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?
Indeed it was, and as I always say, it’s crucial to choose the right technology to solve your problems. In my case, moving to an MDX-based solution would significantly reduce the project's complexity
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.
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.
This topic haunted me for a while... By the end of the summer, with the rise of the AI Art Generators, something clicked for me, and I decided to try Midjourney
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.
Now, I’m using webp for the site images and jpg for the Open Graph versions.
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.
When creating something, you have an idea of your end goal. Still, the path to reach that goal needs to be built; to do that, it’s crucial to be flexible and resilient
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!
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.