abimaelbarea.com a year later
Lessons learned after a year of developing a personal website
Almost a year ago, I published the first version of my blog, and since then, many things have changed. So, it’s time for a quick update.
What's new
I added new sections:
- Home: a short presentation of myself
- Publications: information about different publications I’ve done
- Contact me: an experimental contact page, based on the idea of linktr
I tried to improve the interactions of existing areas:
- Top right menu: a new mobile version
- Blog filters: some filter buttons (query-params based) to select post categories
The article or post page has received a few updates, too:
- Info/Warn/Error boxes: I’ve gotten feedback from people that they didn’t get them. I felt like the usability was confusing, and I didn’t like the design
- ChatGPT: after the release, I had the idea of asking questions and posting the answers, but I wanted to do it in a different way. I ended up choosing Share Tech Mono to have a more “robotic” style
- Reading time: a few people asked me how long this post is. When I shared with them, I thought that having a reading time estimation could be handy
- Web Share: I wanted to have a way to share the post and I chose to explore the web share API
SEO, Design and Accessibility
The three of them have been my biggest weakness in this year. When I released the website, I didn’t understand their importance, so I did a quick integration to mark the task as done in my to-do list.
Over time, I managed to understand how important they are. It took me a while!
-
SEO: I collected the first set of keywords without using the Google Search Console and Google Trends. I have optimized the keywords I use, and surprisingly, after MANY changes, people are starting to find my blog using Google.
-
Design: my CSS is an absolute mess; it’s duplicated, I don’t follow nice standards, and the fancy CSS variables I defined when started, turned out to be useless. But it works! I 100% did premature optimization.
- Accessibility: I like accessibility, which is very important; I know first-hand that people can leverage the benefits. Of course, most of the year, my blog wasn’t accessible.
Nextjs
I chose NexJS for different reasons: community, popularity, flexibility, simplicity, and, of course, how easy is the deployment process with Vercel.
Then, NextJS 13 and the famous app router came into place. I watched videos, I consumed content from their Dev Rels, and they got me. I was ALL-IN for the migration.
It wasn’t easy at all. I was a super early adopter, and the initial documentation was... My knowledge of server components was limited, and it was hard. I spent about 8+ hours working on that and ended up with quite a big PR (considering the repo size).
They have introduced more fancy features, and I decided to transition to them, so I managed to replace:
- NextSitemap ---> Next Sitemap
- NextSeo ---> Next Metadata
Also, I decided to remove two libraries because I consider it wasn’t completely unnecessary without an audience, and they were causing me more headaches than benefits:
Automation
Over the years during my career, I've seen how much time could be saved in maintenance having the right setup. I spent a bit investigating this topic.
I started adding a very nice Github Action to create a Project Diagram. It was a way of self-documenting the project and visually representing the volume of files. It turned out that I NEVER checked that 🤦, and it was annoying because it triggered an unnecessary build on Vercel. I could have done better at improving the config, but I decided just to remove it.
ESLint and Stylelint were game-changers. I receive constant feedback while coding or developing. Prettier completed the combo, formatting the code in case I missed it. Adding all of them to the pre-commit validation was very important to me because once the code is pushed, the bad practices become tech debt.
On top of that, I wanted to understand my progress better. I wasn't using the releases and package.json versions properly until last month, which bothered me. I already had commitlint on the commit-msg validation husky stage. So, I just added a Github Action to generate a CHANGELOG file based on my commit messages.
I updated Github rules around PRs to close the circle and added codeQL validations and dependabot. This one is more useful than I thought; minor and patch versions are straightforward updates without external interaction. So, it saves me time.
Conclusions
Creating a product on your own is very hard. I now have more respect and empathy for solopreneurs and small business owners. And I learned a few things:
- Create deadlines, commit to them, and deliver on time
- Use Analytics tools to understand what's working and what's not
- Be flexible and adapt to the needs based on your learning
- Reset priorities when necessary and postpone unnecessary tasks
- Beware of premature optimization
- Promotion of your content through social media and SEO is very important
Next (Technical) Steps
They’re not necessarily in order:
- Improve First Content Paint
- Load YouTube iframes async
- Optimize images for different devices
- Auto-generate Open Graph Imagines using a Vercel function
- Huge refactor/analysis of CSS (I think it might be a good time)
- Explore the possibility of integrating a section with slides
- Add a new section or some update on the Home to display my experience and CV