My 2020 Blogging Journey

My 2020 Blogging Journey

ยท

17 min read

I wanted to start blogging in Aug of 2020. I decided to use @hashnode for my blog. It was the best decision that I made.

I wrote 27 technical articles so far. Most of them are about frontend web development.

A thread ๐Ÿงต about each of these articles including the stats below ๐Ÿ‘‡

This started as a Twitter thread. But it became so long that I decided to turn it into a blog post.

๐—”๐˜‚๐—ด ๐Ÿญ๐Ÿญ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—”๐—ฑ๐—ฑ ๐—ง๐˜†๐—ฝ๐—ฒ๐˜€๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ ๐˜๐—ผ ๐˜†๐—ผ๐˜‚๐—ฟ ๐—ก๐—ฒ๐˜…๐˜.๐—ท๐˜€ ๐—ฝ๐—ฟ๐—ผ๐—ท๐—ฒ๐—ฐ๐˜ (๐Ÿญ/๐Ÿฎ๐Ÿณ)

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...

This is that article.

As you can see, it's a very short article with a bunch of screenshots pasted together...

At the time of writing this tweet, this article has got about ๐Ÿฎ๐Ÿด๐Ÿฑ views. I myself have referred to it many times.

I decided to write even more articles at that time. And then my journey of tech blogging took off...

๐—”๐˜‚๐—ด ๐Ÿญ๐Ÿฎ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ข๐—ฝ๐˜๐—ถ๐—บ๐—ถ๐˜‡๐—ฒ ๐—ฌ๐—ผ๐˜‚๐—ฟ ๐—ช๐—ฒ๐—ฏ๐˜€๐—ถ๐˜๐—ฒ ๐—™๐—ผ๐—ฟ ๐—ฆ๐—ผ๐—ฐ๐—ถ๐—ฎ๐—น ๐— ๐—ฒ๐—ฑ๐—ถ๐—ฎ ๐—ฃ๐—น๐—ฎ๐˜๐—ณ๐—ผ๐—ฟ๐—บ๐˜€ (๐Ÿฎ/๐Ÿฎ๐Ÿณ)

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...

The result of this is the following article.

At the time of writing this tweet, this article has got around ๐Ÿฎ๐Ÿต๐Ÿฐ views...

๐—”๐˜‚๐—ด ๐Ÿญ๐Ÿฑ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—–๐—ฟ๐—ฒ๐—ฎ๐˜๐—ฒ ๐—–๐˜‚๐˜€๐˜๐—ผ๐—บ ๐— ๐—ฎ๐—ฟ๐—ธ๐—ฑ๐—ผ๐˜„๐—ป ๐—ฃ๐—ฎ๐—ฟ๐˜€๐—ฒ๐—ฟ (๐Ÿฏ/๐Ÿฎ๐Ÿณ)

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.

At the time of writing this tweet, this article has got around ๐Ÿฑ๐Ÿฎ๐Ÿญ views.

๐—”๐˜‚๐—ด ๐Ÿญ๐Ÿฒ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—œ๐—บ๐—ฝ๐—ผ๐—ฟ๐˜ ๐—ฆ๐—ฉ๐—š๐˜€ ๐—ถ๐—ป๐˜๐—ผ ๐˜†๐—ผ๐˜‚๐—ฟ ๐—ก๐—ฒ๐˜…๐˜.๐—ท๐˜€ ๐—ฃ๐—ฟ๐—ผ๐—ท๐—ฒ๐—ฐ๐˜? (๐Ÿฐ/๐Ÿฎ๐Ÿณ)

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.

Up until today...

This article has been getting at least around 10 organic views for this article from Google every single day since then.

At the time of writing this tweet, the article has around 2.2K views...

๐—”๐˜‚๐—ด ๐Ÿญ๐Ÿฒ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—–๐—ฟ๐—ฒ๐—ฎ๐˜๐—ฒ ๐—ก๐—ฒ๐˜„ ๐—–๐—ผ๐—ฑ๐—ฒ๐—ฃ๐—ฒ๐—ป๐˜€ ๐—ฎ๐—ป๐—ฑ ๐—–๐—ผ๐—ฑ๐—ฒ๐—ฆ๐—ฎ๐—ป๐—ฑ๐—ฏ๐—ผ๐˜…๐—ฒ๐˜€ ๐—œ๐—ป๐˜€๐˜๐—ฎ๐—ป๐˜๐—น๐˜† ๐—ช๐—ถ๐˜๐—ต ๐—ญ๐—˜๐—ฅ๐—ข ๐—ฐ๐—น๐—ถ๐—ฐ๐—ธ๐˜€ (๐Ÿฑ/๐Ÿฎ๐Ÿณ)

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 Reactjs, you can just go to react.new and you are done. I decided to list down all such URLs in a blog post.

The result is the following very short article...

At the time of writing this tweet, this article has got around ๐Ÿญ๐Ÿญ๐Ÿฐ views.

๐—”๐˜‚๐—ด ๐Ÿญ๐Ÿด, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ฃ๐—ฟ๐—ฒ๐˜ƒ๐—ฒ๐—ป๐˜ ๐—ฅ๐—ฒ๐˜ƒ๐—ฒ๐—ฟ๐˜€๐—ฒ ๐—ง๐—ฎ๐—ฏ๐—ป๐—ฎ๐—ฏ๐—ฏ๐—ถ๐—ป๐—ด ๐—”๐˜๐˜๐—ฎ๐—ฐ๐—ธ๐˜€ ๐—ช๐—ถ๐˜๐—ต ๐—ฃ๐—ฟ๐—ผ๐—ฝ๐—ฒ๐—ฟ ๐—ป๐—ผ๐—ผ๐—ฝ๐—ฒ๐—ป๐—ฒ๐—ฟ, ๐—ป๐—ผ๐—ฟ๐—ฒ๐—ณ๐—ฒ๐—ฟ๐—ฟ๐—ฒ๐—ฟ, ๐—ฎ๐—ป๐—ฑ ๐—ป๐—ผ๐—ณ๐—ผ๐—น๐—น๐—ผ๐˜„ ๐—”๐˜๐˜๐—ฟ๐—ถ๐—ฏ๐˜‚๐˜๐—ถ๐—ผ๐—ป - (๐Ÿฒ/๐Ÿฎ๐Ÿณ)

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.

At the time of writing this tweet, this has got around ๐Ÿญ.๐Ÿฒ๐—ž views

HackerNoon link of the same article.

At the time of writing this tweet, this has got around ๐Ÿฐ๐Ÿฌ๐Ÿณ views on HackerNoon...

๐—”๐˜‚๐—ด ๐Ÿฎ๐Ÿฌ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—•๐—ฎ๐—ฏ๐—ฒ๐—น ๐—ฃ๐—น๐˜‚๐—ด๐—ถ๐—ป ๐—ง๐—ผ ๐—ฅ๐—ฒ๐—บ๐—ผ๐˜ƒ๐—ฒ ๐—–๐—ผ๐—ป๐˜€๐—ผ๐—น๐—ฒ ๐—Ÿ๐—ผ๐—ด๐˜€ ๐—œ๐—ป ๐—ฃ๐—ฟ๐—ผ๐—ฑ๐˜‚๐—ฐ๐˜๐—ถ๐—ผ๐—ป (๐Ÿณ/๐Ÿฎ๐Ÿณ)

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...

At the time of writing this tweet, this article has got around ๐Ÿญ๐Ÿฐ๐Ÿณ views...

๐—”๐˜‚๐—ด ๐Ÿฎ๐Ÿฏ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—˜๐—บ๐—ฏ๐—ฒ๐—ฑ ๐—ฌ๐—ผ๐˜‚๐˜๐˜‚๐—ฏ๐—ฒ ๐—ฉ๐—ถ๐—ฑ๐—ฒ๐—ผ๐˜€ ๐—ถ๐—ป๐˜๐—ผ ๐—ฌ๐—ผ๐˜‚๐—ฟ ๐— ๐—ฎ๐—ฟ๐—ธ๐—ฑ๐—ผ๐˜„๐—ป ๐—˜๐—ฑ๐—ถ๐˜๐—ผ๐—ฟ (๐Ÿด/๐Ÿฎ๐Ÿณ)

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 article is the first and the last ๐Ÿ˜…article in which I wrote something new that I learned that day.

This article is about the CSS property hyphens which I did not know about then.

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.

At the time of writing this tweet, this article has got around ๐Ÿฒ๐Ÿญ๐Ÿฌ views.

๐—”๐˜‚๐—ด ๐Ÿฎ๐Ÿต, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—–๐—ฟ๐—ฒ๐—ฎ๐˜๐—ฒ ๐—ฌ๐—ผ๐˜‚๐—ฟ ๐—ข๐˜„๐—ป ๐—ฆ๐˜‚๐—ฝ๐—ฒ๐—ฟ ๐—ฆ๐—ถ๐—บ๐—ฝ๐—น๐—ฒ ๐—จ๐—ฅ๐—Ÿ ๐—ฆ๐—ต๐—ผ๐—ฟ๐˜๐—ฒ๐—ป๐—ฒ๐—ฟ (๐Ÿญ๐Ÿญ/๐Ÿฎ๐Ÿณ)

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.

This is the article which I wrote.

At the time of writing this tweet, this article has got around 1.6K views...

In the following days, I got covid and decided to take a break from everything.

After about a month later, EpicReact.Dev got released and I immediately bought it. It was the best decision ever...

๐—ข๐—ฐ๐˜ ๐Ÿฑ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐— ๐˜† ๐—ฅ๐—ฒ๐˜ƒ๐—ถ๐—ฒ๐˜„ ๐—ผ๐—ณ ๐—ž๐—ฒ๐—ป๐˜ ๐—–. ๐——๐—ผ๐—ฑ๐—ฑ๐˜€'๐˜€ ๐—˜๐—ฝ๐—ถ๐—ฐ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜.๐——๐—ฒ๐˜ƒ: ๐—œ๐—ป๐˜๐—ฟ๐—ผ๐—ฑ๐˜‚๐—ฐ๐˜๐—ถ๐—ผ๐—ป (๐Ÿญ๐Ÿฏ/๐Ÿฎ๐Ÿณ)

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.

At the time of writing this tweet, this article has got around 2K views...

๐—ข๐—ฐ๐˜ ๐Ÿด, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—๐—ฎ๐˜ƒ๐—ฎ๐˜€๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ ๐—ฌ๐—ผ๐˜‚ ๐—ก๐—ฒ๐—ฒ๐—ฑ ๐—ง๐—ผ ๐—ž๐—ป๐—ผ๐˜„ ๐—™๐—ผ๐—ฟ ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ (๐Ÿญ๐Ÿฐ/๐Ÿฎ๐Ÿณ)

Before writing about the #EpicReactDev workshops, I wanted to write about Javascript concepts that I wish I had learned before starting to learn Reactjs...

This was the longest article and most read article that I have ever written. It even got featured on @hashnode

At the time of writing this tweet, this article has got around 6.9K views.

More than the views, I got personal messages from people thanking me for writing this. It felt really good ๐Ÿ™‚

๐—ข๐—ฐ๐˜ ๐Ÿญ๐Ÿฌ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—›๐—ผ๐˜„ ๐—œ ๐—š๐—ฎ๐˜ƒ๐—ฒ ๐—” ๐— ๐—ผ๐—ฑ๐—ฒ๐—ฟ๐—ป ๐—Ÿ๐—ผ๐—ผ๐—ธ ๐—™๐—ผ๐—ฟ ๐—›๐—ฎ๐—ฐ๐—ธ๐—ฒ๐—ฟ๐—ก๐—ฒ๐˜„๐˜€ ๐—™๐—ฒ๐—ฒ๐—ฑ (๐Ÿญ๐Ÿฑ/๐Ÿฎ๐Ÿณ)

I took a very long break from coding the previous month. To get back to it, I decided to make a few fun projects.

For funsies, I tried to redesign the HackerNews website and this article is a result of that in which I showed the demo of the redesigned website.

I am attaching a few screenshots of the website.

1.jpeg

2.jpeg

3.jpeg

4.jpeg

At the time of writing this tweet, this article has got around 4.6K views.

๐—ข๐—ฐ๐˜ ๐Ÿญ๐Ÿฎ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—™๐˜‚๐—ป๐—ฑ๐—ฎ๐—บ๐—ฒ๐—ป๐˜๐—ฎ๐—น๐˜€: ๐—œ๐—ป๐˜๐—ฟ๐—ผ ๐˜๐—ผ ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—ฅ๐—ฎ๐˜„ ๐—”๐—ฃ๐—œ๐˜€ (๐Ÿญ๐Ÿฒ/๐Ÿฎ๐Ÿณ)

This was the "first" article in the series of articles based on #EpicReactDev.

In this article, I wrote about raw React APIs like React.createElement() and ReactDOM.render() methods.

At the time of writing this tweet, this article has got around 1.2K views.

๐—ข๐—ฐ๐˜ ๐Ÿญ๐Ÿฑ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—™๐˜‚๐—ป๐—ฑ๐—ฎ๐—บ๐—ฒ๐—ป๐˜๐—ฎ๐—น๐˜€: ๐—จ๐—ป๐—ฑ๐—ฒ๐—ฟ๐˜€๐˜๐—ฎ๐—ป๐—ฑ๐—ถ๐—ป๐—ด ๐—๐—ฆ๐—ซ (๐Ÿญ๐Ÿณ/๐Ÿฎ๐Ÿณ)

This was the second article of the series. In this, I wrote about JSX - what is it, how to use it, how to add props to JSX elements.

I also wrote about interpolation in JSX and spreading props. The outline of this article is mostly based on the React Fundamentals workshop of #EpicReactDev.

This has got around 716 views.

๐—ข๐—ฐ๐˜ ๐Ÿญ๐Ÿณ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ฅ๐—ฒ๐˜ƒ๐—ฎ๐—บ๐—ฝ๐—ฒ๐—ฑ ๐—š๐—ถ๐˜๐—›๐˜‚๐—ฏ ๐—๐—ผ๐—ฏ๐˜€ ๐—ช๐—ฒ๐—ฏ๐˜€๐—ถ๐˜๐—ฒ ๐—จ๐˜€๐—ถ๐—ป๐—ด ๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป ๐—™๐—ฟ๐—ผ๐—บ ๐—™๐—ฟ๐—ผ๐—ป๐˜๐—ฒ๐—ป๐—ฑ ๐— ๐—ฒ๐—ป๐˜๐—ผ๐—ฟ (๐Ÿญ๐Ÿด/๐Ÿฎ๐Ÿณ)

I decided to do a @frontendmentor challenge and I wanted to choose a challenge that requires using some sort of APIs.

I chose GitHub jobs clone website and this article is a result of that showcasing the demo of that.

The design also has a dark theme which I wanted to try.

5.jpeg

6.jpeg

7.jpeg

8.jpeg

I used Next.js, Tailwind CSS, React Query to make this site. At the time of writing this tweet, this article has got around 2.9K views and it also got featured on @dailydotdev

This was the first-ever site in which I used Tailwind CSS and React Query...

9.jpeg

10.jpeg

11.jpeg

12.jpeg

Needless to say, I never went back. These two became my most favorite tools/packages after Next.js. I decided to include these in all of my future projects.

I even made myself a boilerplate template with all of these pre-configured - which later became an open-source repo.

๐—ข๐—ฐ๐˜ ๐Ÿญ๐Ÿต, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—™๐˜‚๐—ป๐—ฑ๐—ฎ๐—บ๐—ฒ๐—ป๐˜๐—ฎ๐—น๐˜€: ๐—–๐—ฟ๐—ฒ๐—ฎ๐˜๐—ถ๐—ป๐—ด ๐—–๐˜‚๐˜€๐˜๐—ผ๐—บ ๐—–๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜๐˜€ (๐Ÿญ๐Ÿต/๐Ÿฎ๐Ÿณ)

This article is again a part of my review of EpicReactDev workshops. In this, I wrote about creating components, prop-types, React Fragments, etc...

At the time of writing this tweet, this article has got around 375 views.

๐—ข๐—ฐ๐˜ ๐Ÿฎ๐Ÿฎ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—™๐˜‚๐—ป๐—ฑ๐—ฎ๐—บ๐—ฒ๐—ป๐˜๐—ฎ๐—น๐˜€: ๐—ฆ๐˜๐˜†๐—น๐—ถ๐—ป๐—ด ๐—”๐—ป๐—ฑ ๐—›๐—ฎ๐—ป๐—ฑ๐—น๐—ถ๐—ป๐—ด ๐—™๐—ผ๐—ฟ๐—บ๐˜€ (๐Ÿฎ๐Ÿฌ/๐Ÿฎ๐Ÿณ)

In this article, I wrote about basic styling methods and also about handling forms in React.

At the time of writing this tweet, this article has got around 421 views.

๐—ข๐—ฐ๐˜ ๐Ÿฎ๐Ÿฒ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—›๐—ผ๐—ผ๐—ธ๐˜€: ๐— ๐—ฎ๐—ป๐—ฎ๐—ด๐—ถ๐—ป๐—ด ๐—ฆ๐˜๐—ฎ๐˜๐—ฒ ๐—ช๐—ถ๐˜๐—ต ๐˜‚๐˜€๐—ฒ๐—ฆ๐˜๐—ฎ๐˜๐—ฒ ๐—›๐—ผ๐—ผ๐—ธ (๐Ÿฎ๐Ÿญ/๐Ÿฎ๐Ÿณ)

This article is about 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 about 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.

At the time of writing this tweet, this article has got around 1.3K views.

That's it for October. In that month, I wrote a total of 10 articles - at least 2 every week.

๐—ก๐—ผ๐˜ƒ ๐Ÿฎ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—˜๐—ฎ๐˜€๐—ถ๐—น๐˜† ๐——๐—ฒ๐˜๐—ฒ๐—ฐ๐˜ ๐—ข๐˜‚๐˜๐˜€๐—ถ๐—ฑ๐—ฒ ๐—–๐—น๐—ถ๐—ฐ๐—ธ ๐—จ๐˜€๐—ถ๐—ป๐—ด ๐˜‚๐˜€๐—ฒ๐—ฅ๐—ฒ๐—ณ ๐—›๐—ผ๐—ผ๐—ธ (๐Ÿฎ๐Ÿฏ/๐Ÿฎ๐Ÿณ)

I was doing a project in which I had to close the modal/dialog whenever I clicked at any place outside of it. I made a custom hook for this using useRef...

In this article, I wrote about the same explaining the process which I took to make this hook.

At the time of writing this tweet, this article has got around 1.3K views.

๐—ก๐—ผ๐˜ƒ ๐Ÿฑ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐Ÿฏ ๐—ฆ๐—ถ๐—บ๐—ฝ๐—น๐—ฒ ๐—ฆ๐˜๐—ฒ๐—ฝ๐˜€ ๐—ง๐—ผ ๐—ฆ๐—ฒ๐˜๐˜‚๐—ฝ ๐—”๐˜‚๐˜๐—ต๐—ฒ๐—ป๐˜๐—ถ๐—ฐ๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ถ๐—ป ๐—ก๐—ฒ๐˜…๐˜.๐—ท๐˜€ (๐Ÿฎ๐Ÿฐ/๐Ÿฎ๐Ÿณ)

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

At the time of writing this tweet, this article has got around 880 views.

๐—ก๐—ผ๐˜ƒ ๐Ÿญ๐Ÿฌ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ง๐—ต๐—ฒ ๐—Ÿ๐—ถ๐—ณ๐—ฒ๐—ฐ๐˜†๐—ฐ๐—น๐—ฒ ๐—ผ๐—ณ ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—›๐—ผ๐—ผ๐—ธ๐˜€ ๐—–๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜ (๐Ÿฎ๐Ÿฑ/๐Ÿฎ๐Ÿณ)

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 a countless number of times. I am very glad that I wrote this.

๐—ก๐—ผ๐˜ƒ ๐Ÿญ๐Ÿฏ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐Ÿฏ๐Ÿฌ+ ๐—š๐—ถ๐˜ ๐—–๐—ผ๐—บ๐—บ๐—ฎ๐—ป๐—ฑ๐˜€ ๐—ง๐—ต๐—ฎ๐˜ ๐—œ ๐—™๐—ฟ๐—ฒ๐—พ๐˜‚๐—ฒ๐—ป๐˜๐—น๐˜† ๐—จ๐˜€๐—ฒ (๐Ÿฎ๐Ÿฒ/๐Ÿฎ๐Ÿณ)

This is the article that took the least effort to write. In this article, I have just listed down the most frequent Git commands that I use in my daily workflow.

This article also got featured in @hashnode 's Become A Better Dev In 2021 e-book. If you haven't checked it out, check out that ebook. It's really good.

At the time of writing this tweet, this article has got around 4K views - which is surprising considering the amount of time that I spent writing it.

๐—ก๐—ผ๐˜ƒ ๐Ÿฎ๐Ÿญ, ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฌ - ๐—ก๐—ฒ๐˜…๐˜.๐—ท๐˜€ ๐—ฆ๐˜๐—ฎ๐—ฟ๐˜๐—ฒ๐—ฟ ๐—ง๐—ฒ๐—บ๐—ฝ๐—น๐—ฎ๐˜๐—ฒ ๐—ช๐—ถ๐˜๐—ต ๐—”๐˜‚๐˜๐—ต๐—ฒ๐—ป๐˜๐—ถ๐—ฐ๐—ฎ๐˜๐—ถ๐—ผ๐—ป + ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐Ÿญ๐Ÿณ + ๐—ง๐˜†๐—ฝ๐—ฒ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ + ๐—ง๐—ฎ๐—ถ๐—น๐˜„๐—ถ๐—ป๐—ฑ ๐—–๐—ฆ๐—ฆ ๐Ÿฎ + ๐—˜๐—ฆ๐—Ÿ๐—ถ๐—ป๐˜ (๐Ÿฎ๐Ÿณ/๐Ÿฎ๐Ÿณ)

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.

Right now, the repo just crossed 150 stars on GitHub and has been forked 16 times.

Link to the GitHub Repo:

Link to the live demo:

Screenshot 2020-12-31 at 11.31.25 AM.png

I recently discovered Fauna DB and I liked it very much. This also has a generous free tier to it. I have replaced Prisma + Postgres with Fauna DB in this template since then.

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.

Screenshot 2020-12-31 at 11.38.19 AM.png

Screenshot 2020-12-31 at 11.38.32 AM.png

Screenshot 2020-12-31 at 11.38.42 AM.png

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.

Screenshot 2020-12-31 at 11.41.54 AM.png

Audience Overview Audience Overview.png

Acquisition Overview Acquisition Overview.png

Behaviour Overview Behaviour Overview.png

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...

I don't assume anyone reading this very long thread completely. But if you did, you are a legend. Hopefully, this thread inspires at least one person to start blogging ๐Ÿคž

If you have any questions that you want to ask, my DMs are always open.

Did you find this article valuable?

Support Bhanu Teja Pachipulusu by becoming a sponsor. Any amount is appreciated!

ย