It was when I just started learning React and started exploring Next.js and TypeScript. I was surprised to see how easy it was to add TypeScript to a Next.js project.
I thought to write a blog post about it to show it to others - more importantly for me to refer back to it when needed. I didn’t want to spend time creating a blog. I wanted to start blogging right away.
Fortunately, I heard about @hashnode from a friend of mine and decided to give it a try. The selling factor for me about @hashnode was the ability to bring my own domain for my blog and the automatic backup of the articles on my own GitHub repo.
At that time, I didn’t know that I was gonna write more than 1 article or that even anyone would wanna read the things that I write. But regardless, I went ahead and published my first article.
On the first day, the article has got around 20 views.
My main motive for writing articles was that they would act as a journal for whatever I was learning - so that I can get back to those when in need. So, I was more than happy with even 20 people reading it.
I was developing a website at that time. I noticed that when my website link is shared on platforms like Twitter.
I don’t see any previews that I usually get when I share other links. I started exploring more about this and found out about meta tags and open graph protocol and also how some of the platforms like Twitter look for their own custom meta tags.
I decided to write an article about my findings and how/what meta tags to add to the website to make the platforms show nice previews for the website links that are being shared. I also added the tools that you can use to validate these tags in the article.
I decided to write my first ever tutorial on how to create a markdown editor with the ability to embed YouTube videos, code sandboxes, code pens, etc.
I didn’t know about MDX back then. That is a story for another time. In the markdown I know, it is not directly possible to embed things like YouTube videos and other things. But in one of my projects, I had this requirement.
So it seemed like a good tutorial that will be helpful to others and of course as a reference to me in the future. I decided to split this into two articles. In hindsight, this was a mistake. I should have just written the article in a single go.
The first article in this two-part series is the following article.
This is the article that has got the most organic views from Google among all the other articles that I ever wrote until today.
Like all my other articles, this article came out of my need. I got a use-case where I had to use and import SVGs into my Next.js project. I searched around and found many solutions. Two solutions stood out for me - SVGR and babel-plugin-inline-react-svg.
I found the babel plugin to be easier to use and ended up using it. I then wrote about it in the following article detailing how people can use it in their own projects.
This is a very short article that I wrote when I found out that CodePen and CodeSandbox launched short URLs that can be used to set up sandboxes with your favorite framework configured. For example, to create a sandbox with React.js, you can just go to react.new and you are done. I decided to list down all such URLs in a blog post.
This article came out of my search for the meaning of ‘rel’ attribute for anchor <a> tags. Turns out that there is a security risk for not adding noopener/noreferrer value to ‘rel’ attribute when you set the link to open in a new tab.
I ended up writing the article about the same detailing what each of the values noopener, noreferrer, nofollow mean and when should you use each of them. I recently cross-posted this article to HackerNoon.
To my surprise, it is marked as a #hackernoon-top-story which I think is pretty amazing.
I always find myself leaving console logs in production which I should not.
I started looking for a solution to this problem and found a babel plugin that you can use to remove console logs automatically when deployed to production. I ended up writing a very short article detailing how to use this plugin.
Remember the 3rd article where I started a 2-part tutorial series about creating a custom markdown editor.
This is the other part. I wrote this after writing 4 other completely unrelated articles. I should have written both of these in a single article or I should have written this immediately after the first one.
At the time of writing this tweet, this article has got around 𝟭𝟯𝟭 views.
This is the article on which I have spent a huge amount of time to write among all of the previous 9 articles that I have written until then.
This article is about the HSL color format and why I think more people should start using it. I found the HSL color system to be more intuitive and closer to how humans perceive color. I wrote about what each of H, S, and L mean in HSL, and how easy it is to create color schemes like Complementary Colors, Split Complementary Colors, Different shades of the same color using HSL color system.
This blog post came out when I came across the following quoted tweet from @kentcdodds
The tweet contains a link to a youtube video where he explained about the npm package that he made which can be used to create a super simple URL shortener. I found the concept behind it to be genius. They are making use of Netlify Redirects to create a URL shortener.
My immediate reaction was that why didn’t I think of that. Nevertheless, I ended up using the same package to create my own URL shortener to shorten many of my links. I ended up writing an article about the same, hoping that more people would benefit from this package.
At the time of writing this tweet, this article has got around 𝟱𝟳𝟯 views.
This was the final article in the month of August.
I wrote a total of 11 articles in that month, a feat which I am never going to repeat. I had no schedule when I was writing these articles. I wrote and published articles whenever I felt like it - which was a mistake on my part.
I eventually figured out that consistency is far more important than writing a lot of articles at once. Eventually, I stuck to the schedule of writing 2 articles per week which helped me a lot more than writing whenever I felt like it.
It is a lot better to write a single article every two weeks than writing 10 articles in a week and then not writing anything for more than a month or two.
I now strongly believe that Consistency is the key to get things done or to get better in anything including writing.
𝗦𝗲𝗽 𝟮, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 (𝟭𝟮/𝟮𝟳)
I just found out about EpicReact.Dev workshops by @kentcdodds just then. I found that the source code of these workshops is open-source.
I decided to go through them on my own before the course is actually released. This article is a result of that. I went through the React Fundamentals workshop and wrote about what I learned in my own words – mainly to reinforce what I learned.
It was then I decided to buy #EpicReactDev as soon as it gets released. And I did just that later.
I publicly committed to writing articles based on what I learned in #EpicReactDev workshops. This article is a result of that.
This has nothing more than the topics that will be covered in #EpicReactDev workshops. I have learned so much more from watching the videos than I did when I went through the open-source material on my own.
So many people messaged me saying that they want to buy this license, but wanted to know if it was worth it. My answer is always a huge YES. It definitely is. Many people started following along with what I wrote about these workshops and many told me that they found these articles to be very helpful.
This 👇 is the first article when I publicly committed to it.
This article is about the useState hook in React. I wrote about what it is, and how to use it. I also wrote about Functional Updates in useState and when it can be useful. I finally ended the article by explaining Lazy Initialization and also using this with objects.
At the time of writing this tweet, this has got around 358 views.
This article is about creating a reusable local storage hook that syncs the state to local storage automatically. I saw this example in the #EpicReactDev
I usually use use-persisted-state package for my projects for this purpose because of some of the features that the package has. Nevertheless, it was good to explore how to make a custom one when required.
In all of my previous Next.js projects, I have set up my own authentication in a custom Node backend. I know that I could use services like Auth0, but it was too expensive for me after a couple of users. Hence I decided to make my own. @benawad ’s YouTube videos helped me a lot in this regard.
This is the video that I referred to.
It was then, I discovered an open-source package called NextAuth.js which made it super simple to set up authentication in Next.js projects. I immediately tried it and it was so easy to set up. It also has providers for most of the OAuth providers like Google, GitHub, etc.
It even has a provider for setting up password-less login. You can also bring your own database.
The following article came as a result of this – showing how easy it is to set up auth in Next.js
This is again something that I learned from #EpicReactDev workshops.
In this article, I wrote about the life cycle of useEffect hooks in functional components. It was a little difficult for me to get the hang of useEffect hook when I was learning it for the first time. This video from #EpicReactDev workshops made it so simple.
At the time of writing this tweet, this article has got around 2.3K views. I myself have referred to this article countless times. I am very glad that I wrote this.
This is the final article of the month of November and the year 2020.
I created a Next.js starter template with things like Authentication, TypeScript, Tailwind CSS, ESLint, Prettier, React Query, Prisma with Postgres pre-configured. I made it open-source and wrote an article on how to deploy it to Vercel.
This article also got featured on @dailydotdev
At the time of writing this tweet, this article has got around 3.7K views.
I haven’t written any article in the month of December 2020 due to my other commitments. Hopefully, I will get back to it soon from 2021.
I have attached the stats of all the articles that I have written in 2020.
I have a total of around 48K page views until now. I never thought that anyone would be interested in reading what I write. But unless you try, you never know. The worst thing that can happen is you end up getting good at writing and reinforce the concepts that you write.
This wouldn’t have been possible without @hashnode and I have nothing but gratitude towards them.
If you are a developer and you don’t have a blog yet. There is no time better than now to start a blog and write down your thoughts.