# 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 :- %[https://blog.lakbychance.com/one-planet-later-at-hashnode] %[https://blog.lakbychance.com/500-commits-later-at-hashnode] 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](@kieran6roberts) , @[Girish Patil](@evilhead) and @[Vamsi Rao](@vamsirao) 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. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704622248499/4b966b9a-6034-4ee5-8870-5e92b025a2d6.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704622432034/dcc0a10c-9aa3-417b-8f8c-088dc40eeacc.gif align="center") 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. ![](https://javascriptgorilla.files.wordpress.com/2016/07/65093758.jpg align="center") 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. ![](https://media3.giphy.com/media/l0Iy69RBwtdmvwkIo/giphy.gif align="center") ## 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.** %[https://twitter.com/hashnode/status/1620754081206734849] ## Undisclosed POC This was a new project from ground up. I collaborated with @[Sai Krishna Prasad Kandula](@sai_krrishhh) 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](@joshuanavi) 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. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704623492891/7651aa4e-2d23-4270-be32-5e9a9fd0d737.png align="center") 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** 🤌. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704623641342/c4afeccd-1a0b-4d37-b768-ee7bcfbe76db.gif align="center") ## 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](@evilhead) 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](@kieran6roberts). 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. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704624350837/73884002-c559-49ab-a756-d3545792ae4d.png align="center") ## 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 [⛰️](https://emojipedia.org/mountain). ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704625035970/78c02d8e-8f16-46d3-8fa7-cb4d81ebe8cf.jpeg align="center") ## Kicking off component library This was primarily initiated and implemented by @[Rajat Kapoor](@rajatkapoor) and the designers - @[Pritam Paul](@UXpaul) and @[Joshua 'Navi](@joshuanavi) . 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. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704625428417/98f99334-5655-4a57-8433-ccaf813e7a73.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704625401677/f810230d-42ac-4126-999a-1b47a79b48c2.png align="center") ## Headless Hashnode [**Headless Hashnode**](https://hashnode.com/headless) 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**](https://github.com/Hashnode/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** %[https://twitter.com/Lakbychance/status/1656901555818299392] The second one was for **headless hashnode** and the anime lovers (JJK fans) are going to love it . %[https://twitter.com/Lakbychance/status/1714485323839815848] 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). ![](https://media4.giphy.com/media/zDi4BCYVupi6xX9FIA/giphy.gif align="center") ## 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. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704628956775/4ba74722-4f13-4e31-ba0e-9ea568cd35d7.png align="center") * 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. %[https://twitter.com/hashnode/status/1732364075009450328] * Another one was **font-optimisation** for blogs which I covered in this tweet %[https://twitter.com/Lakbychance/status/1730546425098850329] ## 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.** %[https://blog.lakbychance.com/the-detective-side-of-being-a-software-developer] 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. %[https://twitter.com/Lakbychance/status/1711400113589965236] 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 %[https://twitter.com/Lakbychance/status/1679888619820187648] 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](@unclebigbay) ) * **Migrating from twin.macro to simple tailwind setup for blogs** (done by @[Jannik Wempe](@JannikWempe) ) - 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](@kieran6roberts) ) 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 :- %[https://blog.lakbychance.com/code-reviews-a-zoomed-out-approach] ## 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 💯.