Twofold Journey: Leveling Up At Hashnode

Introduction

Well here we are reflecting on my time at Hashnode the previous year. I have officially completed two years at Hashnode and as a part of ongoing ritual where I document the experience, here is another one.
And also, in first quarter of 2023, I got promoted to a Senior Software Engineer so it was a great year from career prospects.

Here are the previous reads for those interested :-

Lets straight away dive into what all was I involved in the last year.

Blog UX improvements

This began in the end of year 2022 around first week of December. If you have been using hashnode as your blog provider for a while, you might have noticed that the design an year ago vs how it looks right now is different. Our designers worked on an overhaul for the same.
I got to collaborate with Kieran Roberts , Girish Patil and Vamsi Rao on these. We do things now in a much better way than we did for this one honestly (in terms of the DX). It was a set of huge PRs that was reviewed and merged in early weeks of 2023.
I specifically got to work on the comments sidebar and bits of the floating toolbar for each article. In the floating toolbar, the logic empowering how the click on the heart works and hits our backend API in an optimistic way was something I enjoyed building.

Also there were not only UI facing changes but also significant database modeling and re-syncing changes. We almost got everything right. But the Friday deployment curse did catch up to us.

Since there were a lot of changes that were done in a short period of time, the following weekend, I spent time on evaluating if everything is functioning smoothly. Thats when I encountered that we missed syncing one important field to our db model which resulted in a reset of a particular model field for all users. Luckily, we patched it the next day by running a script which took care of merging the new field values with the old one and restoring data to consistent state.

Blog performance improvements

After the UX overhaul, I got to spend some time in assessing areas where we can improve performance aspects of our blog. This included lazy loading resources which do not need to be shown above the fold, primarily the images and embeds + dynamically loading components which are needed on interaction and some bits about optimizing LCP elements. We actually did a twitter space where around the 18:50 mark, we start sharing the updates for the performance.

Undisclosed POC

This was a new project from ground up. I collaborated with Sai Krishna Prasad Kandula on this for almost 2.5 months. This included white boarding db models, flows, UI and then bringing them to life and keeping them accessible to our internal team for feedback. But whats the future for it ? Its something which is being now proactively evaluated by us and might even be in the upcoming roadmap 🤞.

Hashnode Pro

I got to work on the Focus mode in our editor which is a part of our Hashnode Pro offering. Collaborated with Joshua 'Navi on this one and possibly our first collab 👊. I became a fan of zustand when we worked on this since we introduced that while building this feature.

Also contributed in building the landing pages for hashnode.com/ai and hashnode.com/pro. The one section that took most time for me was the AI section of the hashnode.com/pro page . Enter framer motion 🤌.

Login/logout patches for hashnode blogs

I swear I needed cookies at this time to solve cookie related issues. Again got to collaborate with Girish Patil on this one. This was solved in 2 phases and since then we haven't had any specific complains where a user login/logout on their blogs was not working as expected. The initial fix was strictly applied for me and Girish and later on for everyone.

NextJS middleware is honestly a powerful thing. I think after enough discussion and what ifs , we decided that middleware is the best place for these fixes to exist. We used the req.cookies API at the time to solve this. But their cookies API at that time was something which worked very differently than if you are used to the `req.headers.set` approach. Later on I think we ditched that API and just used headers API since it worked as expected and had lesser unknowns.

Subscriber Modal

As part of our newsletter feature, we allow users of Hashnode to enable a subscriber modal to be shown at the end of each of their article's. This was primarily built by Kieran Roberts. There were two parts to this feature. Showing up the modal and taking action when the user interacts with the modal. It's the second part where I got to contribute along with Kieran. When the user lands up back on the article after creating their account on Hashnode, there were a set of checks that were needed to be done to let the user know about what exactly happened and what they can now expect. This was communicated via different toasts based on internals states.

Meeting the folks at Bangalore

Got to meet the folks during mid of the year at Bangalore and work alongside them ✨. This is always a refreshing thing to do. We also did a nearby morning trek together ⛰️.

Kicking off component library

This was primarily initiated and implemented by Rajat Kapoor and the designers - Pritam Paul and Joshua 'Navi . I got to contribute on things like handling how the local development can work with this library without publishing this as a package. As of now, We have been following the local + publishing pre-patches flow for some while to do rapid development. We still have to make efforts to make it consumable throughout Hashnode. But I am glad efforts were started in this direction.

RHPC - Reduce Home Page Clutter

Yes quite a code word there. This was the first project that was done after kicking off the component library so most of the components got made during this project.

This is where we restructured our feed layouts from 3 to 2 column and also redesigned the feed UX + right sidebar + notifications and profile menu.

However, the project's execution didn't go as smoothly we expected it to go. There were some user facing quality issues at the end (which we quickly patched) but nevertheless I specifically had two learnings/realizations post this :-

• Things were not streamlined enough for everyone to know where we can make that tradeoff of quality and speed.

• Having more amount of engineers involved in the same project doesn't necessarily mean more output. Sometimes less is more and identifying these early on is better.

We also had a Engineering Alignment call and also published a Product Coding Guidelines as part of our PR template to go through before raising a PR for review. It was something I made as notes for myself while working on different features and bugs at hashnode and have been wanting to make it accessible to our engineering members.

Discussions

Taking all the learnings from the previous project, we got into developing Discussions. We wanted our users to explore what other users think about the articles on our feed and indulge in healthy discussions for the same. So we made it easier for the users to post the comments straight from hashnode.com via this feature.

This is my favorite piece of work in 2023. We were proactive in pushing things behind feature flags to prod from day one. I got to work on refactoring our feed cards to be able to handle new discussion related CTAs and links. Also got to work on new Commenting system UI implementation + integrating our new GQL APIs with it.

Headless Hashnode

Headless Hashnode is our newest offering from hashnode and a really powerful one. It allows you to totally own the frontend of your blog and start creating them on your own subpaths (for eg /blog).

I think most of my tinkering around here happened to improve the lighthouse scores for our starter-kit around performance, accessibility and SEO. This was purely pouring in the experience earned while working on the blogs offering and making sure that our starter kit also benefit from the same.

Social media marketting

Okay thats a made up category for a Software engineer but hey I did create two videos to promote Hashnode features. The first one was for focus mode

The second one was for headless hashnode and the anime lovers (JJK fans) are going to love it .

It feels nice to have this sense of freedom to be creative and promote the work done by your company in your own way.

Hashnode Fitness challenge

Well, as of writing this, I am not as fit as I was when I secured the 3rd place in the September fitness challenge for Hashnode. I will start the routine soon. For me, this included running 5kms every morning and I achieved probably my peak fitness of 2023. Oh how the winters make me super lazy (smartly blaming winters).

Quick wins

So we also introduced a notion of quick wins and sharing them with others. I think as part of this I have few of them to highlight :-

• Solve users' problems directly via social media / GitHub - At Hashnode, we often reach out to users on Twitter or other platforms when they encounter issues and help them resolve their problems.

  

• Added a perf related improvement to cut the loading time of our /users api by 300ms . Example of small change -> big impact.

• Our Vercel builds were constantly failing due to massive size of our assets. But solving that would have taken more engineering efforts. And the builds were running for like 20 mins only to fail later which resulted like in like at least 30 mins of daily time being wasted just to deploy our changes. So, I went through the official troubleshooting docs here and some GitHub issues and found that this was prominent if you had BUILD_CACHE being used (the default setting). So we simply turned it off and now our builds don't fail and take an average of 10-15mins, a tradeoff, we were happy with.

• Introducing Dark mode toggle straight from the editor. As much as it became easy for a user to switch themes, it also became easy for the devs to quickly test theme related changes in the editor. A win-win for both the parties.

• We removed the Write button from our dashboard header some time back as it was not optimized to work for different blogs but the users gave us feedback that it should be there. So I got to work on re-introducing it + adding the capability to retain the context of the blog for which the button was clicked so that a user doesn't land up on the editor and needs to reselect the blog. The article is automatically created for them based on from which blog dashboard they clicked the button.

Hashnode Internal Hackathon

We also had our first internal hackathon at Hashnode where all our team members went onto develop and ship really cool things. My favorites are the Webhooks and the Cmd+K features which were also winners of this hackathon.
I personally got to work on three things out of which two made to production.

• One of them was the EditorV2 overhaul in terms of design and accessibility.

• Another one was font-optimisation for blogs which I covered in this tweet

Weird bugs

I have already shared some stuff in the following article which focuses on debugging issues at Hashnode. These were mostly dealt with in 2022.

In 2023, I have not yet compiled a list of what bug fixes I got to work on except one for which I wrote a twitter thread. This one was UI specific and needed us to a have a zoomed out perspective. I mean literally, I could only replicate it for zoom of 90% on browsers and that helped us narrow down the cause.

There have been some recent ones which I will probably keep for future articles.

Code reviews

I posted a tweet that compared how my GitHub activity looks over my tenure here

One can see that the amount of time spent in reviews has increased for me. Its now balanced with what I work on. For this year, it spanned across features, bug fixes, migrations , refactors etc. Some highlights can be

• Table of contents (done by Ayodele Samuel Adebayo )

• Migrating from twin.macro to simple tailwind setup for blogs (done by Jannik Wempe ) - My biggest code review yet. I took my good time for this.

• Discussions, Blog UX improvements and Security Patches

• Accessibility improvements (done by Kieran Roberts )

And just more miscellaneous stuff I can't remember as of now. And this is not just something I have to do as a reviewer. It's a shared responsibility of all our engineering team members. Over time, I feel as a team, we have become open to reviewing more code and building context around problems. This is necessary to keep unblocking people and ship stuff out there.

Also I wrote another article on how having a broader perspective during code reviews can help sometimes :-

What's cooking ?

Well I have been working on another migration now with an approach similar to how we built Discussions and besides the UI work, it also involves creating new GQL APIs which I have been wanting to do for some time. It's going well as of now and I hope our users will enjoy the revamped experience ✨.

Besides this, I am thankful for a wonderful year I had at Hashnode and being able to collaborate with amazing folks here 💯.