My 2020 Blogging Journey

July 2021: Retrospective & Income Report

May 2021: Retrospective & Income Report

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.

Table of Contents

𝗔𝘂𝗴 𝟭𝟭, 𝟮𝟬𝟮𝟬 - 𝗔𝗱𝗱 𝗧𝘆𝗽𝗲𝘀𝗰𝗿𝗶𝗽𝘁 𝘁𝗼 𝘆𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 (𝟭/𝟮𝟳)

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.

Add Typescript to your Next.js project

It's very easy to add typescript to a Next.js project. In this post, I will list out steps on how to do so. First, let's create a new Nextjs project my-ts-app # Create a directory with name `my-ts-app` mkdir my-ts-app # Change directory to `my-ts-ap...

https://blog.bhanuteja.dev/add-typescript-to-your-nextjs-project

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.

Optimize Your Website For Social Media Platforms

Have you ever wondered how twitter automatically shows the preview of the link in a tweet that you post. For example, take the following tweet that I posted very recently. It's the first ever blog post that I have written and it is published on Hashn...

https://blog.bhanuteja.dev/optimize-your-website-for-social-media-platforms

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.

Create Custom Markdown Parser

Every developer would have come across some sort of a markdown editor atleast once in their life. If you have edited/written a README file in github/gitlab, you most probably would have used a markdown editor without even knowing. Even the editor whi...

https://blog.bhanuteja.dev/create-custom-markdown-parser

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.

How to Import SVGs into your Next.js Project?

Next.js is my go-to framework for building any type of frontend applications. It has many things pre-configured right out of the box. For example, you have built-in support for css, css modules, sass etc. It also comes with built-in support for envir...

https://blog.bhanuteja.dev/how-to-import-svgs-into-your-nextjs-project

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

The result is the following very short article.

Create New CodePens and CodeSandboxes Instantly With ZERO clicks

Your browser does not support the audio element. SPEED 1X CodePen.io and CodeSandbox.io are the two most popular online tools that are used for rapid prototyping of web applications without ever leaving the browser. Very recently, CodePen and CodeSandbox released a "feature" to create new pens and sandboxes using short and readable urls.

https://blog.bhanuteja.dev/create-new-codepens-and-codesandboxes-instantly-with-zero-clicks

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.

Prevent Reverse Tabnabbing Attacks With Proper noopener, noreferrer, and nofollow Attribution

Now and then, when you click on a link on a website, the link will be opened in a new tab, but the old tab will also be redirected to some other phishing website where it asks you to login or starts downloading some malware to your device. In this bl...

https://blog.bhanuteja.dev/noopener-noreferrer-and-nofollow-when-to-use-them-how-can-these-prevent-phishing-attacks

At the time of writing this tweet, this has got around 𝟭.𝟲𝗞 views

HackerNoon link of the same article.

Prevent Reverse Tabnabbing Attacks With Proper noopener, noreferrer, and nofollow Attribution | Hacker Noon

https://hackernoon.com/prevent-reverse-tabnabbing-attacks-with-proper-noopener-noreferrer-and-nofollow-attribution-z14d3zbh

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.

Babel Plugin To Remove Console Logs In Production

I have faced the problem of having to remove javascript console logs manually in production. I want to have those logs during development, but not in production. There are two ways to achieve this., a messy way would be to comment out the console log...

https://blog.bhanuteja.dev/babel-plugin-to-remove-console-logs-in-production

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.

Embed Youtube Videos into Your Markdown Editor

This is the second part of the series How I made a Markdown Editor with the ability to embed YouTube Videos, CodePens, Code SandBoxes, etc. If you haven't read the first part, read it here and come back. In this article, we will specifically see how ...

https://blog.bhanuteja.dev/embed-you-tube-videos-into-your-markdown-editor

𝗔𝘂𝗴 𝟮𝟲, 𝟮𝟬𝟮𝟬 - 𝗧𝗜𝗟: 𝗛𝘆𝗽𝗵𝗲𝗻𝗮𝘁𝗲 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 𝗷𝘂𝘀𝘁𝗶𝗳𝘆 𝘁𝗲𝘅𝘁 (𝟵/𝟮𝟳)

This article is the first and the last 😅article in which I wrote something new that I learned that day.

TIL: Hyphenate when you justify text

Sometimes, when you set text-align to justify, you see the irregular spacing between letters so that the text can be properly justified. Take a look at the below picture. p { text-align: justify; } You can easily fix this by just hyphenating th...

https://blog.bhanuteja.dev/til-hyphenate-when-you-justify-text

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.

Why you should start using HSL color format

Look at the picture above and see if you can tell that they are different shades of red color? You can, right? Now, look at their hex and RGB values below, now can you tell the same thing by looking at these values? Or can you tell if there is any re...

https://blog.bhanuteja.dev/why-you-should-start-using-hsl-color-format

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.

Create Your Own Super Simple URL Shortener

In this article, we will see how to create a simple URL shortener. We will be using Netlify Redirects and a package called netlify-shortener. I have always wanted to create my own URL shortener and use it to shorten all my links. But I always felt li...

https://blog.bhanuteja.dev/create-your-own-super-simple-url-shortener

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.

React Fundamentals

In this article, I will discuss very basic React fundamentals. Knowing basic javascript is good enough to follow along with the article. Even though you have been working with React for some time, you might learn some new things or justifications for...

https://blog.bhanuteja.dev/react-fundamentals

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.

My Review of Kent C. Dodds's EpicReact.Dev: Introduction

Hello World 👋 Welcome to the new series that I am starting on React called My Review of Kent C. Dodds's EpicReact.Dev. This is the first article in this series and I will start it off with the introduction to what this series will be about. This ser...

https://blog.bhanuteja.dev/epic-react-introduction

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

Javascript You Need To Know For React

Hello World 👋 Welcome to the second article of the My Review of Kent C. Dodds's EpicReact.Dev series which is based on the workshop material from EpicReact.Dev by Kent C. Dodds. In the previous article, you looked at the different topics that are go...

https://blog.bhanuteja.dev/epic-react-javascript-you-need-to-know-for-react

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.

How I Gave A Modern Look For HackerNews Feed

Hello World 👋 I made a website showing Hacker News and gave it a modern look. Before we dive into what all I used to make it, let's see some visuals of how the website looks. By the way, the website is at hn.bhanuteja.dev. Let's get to it. Here are ...

https://blog.bhanuteja.dev/how-i-gave-a-modern-look-for-hackernews-feed

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.

React Fundamentals: Intro to React Raw APIs

Hello World 👋 Welcome to the third article of the My Review of Kent C. Dodds's EpicReact.Dev Series which is based on the workshop material from EpicReact.Dev by Kent C. Dodds. If you haven't read the previous articles of the series yet, please go a...

https://blog.bhanuteja.dev/epic-react-react-fundamentals-part-1

𝗢𝗰𝘁 𝟭𝟱, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗝𝗦𝗫 (𝟭𝟳/𝟮𝟳)

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.

React Fundamentals: Understanding JSX

Hello World 👋 Welcome to the 4th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and unders...

https://blog.bhanuteja.dev/react-fundamentals-understanding-jsx

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 the GitHub jobs clone website and this article is a result of that showcasing the demo of that.

Revamped GitHub Jobs Website Using Design From Frontend Mentor

Hello World 👋 Welcome to another project showcase. This time, I will be showing the GitHub Jobs project that I did very recently. The design is from FrontendMentor.Io. The website is available at jobs.bhanuteja.dev. Let's start with some visuals of...

https://blog.bhanuteja.dev/i-revamped-github-jobs-website-using-design-from-frontend-mentor

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

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.

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.

React Fundamentals: Creating Custom Components

Hello World 👋 Welcome to the 5th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and unders...

https://blog.bhanuteja.dev/react-fundamentals-creating-custom-components

𝗢𝗰𝘁 𝟮𝟮, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: 𝗦𝘁𝘆𝗹𝗶𝗻𝗴 𝗔𝗻𝗱 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 𝗙𝗼𝗿𝗺𝘀 (𝟮𝟬/𝟮𝟳)

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.

React Fundamentals: Styling And Handling Forms

Hello World 👋 This is the 6th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and understo...

https://blog.bhanuteja.dev/react-fundamentals-styling-and-handling-forms

𝗢𝗰𝘁 𝟮𝟲, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀: 𝗠𝗮𝗻𝗮𝗴𝗶𝗻𝗴 𝗦𝘁𝗮𝘁𝗲 𝗪𝗶𝘁𝗵 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗛𝗼𝗼𝗸 (𝟮𝟭/𝟮𝟳)

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.

React Hooks: Managing State With useState Hook

Hello World 👋 Hooks are special types of functions in React that you can call inside React functional components. They let you store data, add interactivity, and perform some actions, otherwise known as side-effects. Below are the most common hooks ...

https://blog.bhanuteja.dev/react-hooks-managing-state-with-usestate-hook

𝗢𝗰𝘁 𝟮𝟵, 𝟮𝟬𝟮𝟬 - 𝗛𝗼𝘄 𝘁𝗼 𝗖𝗿𝗲𝗮𝘁𝗲 𝗮 𝗥𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗟𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲 𝗛𝗼𝗼𝗸 (𝟮𝟮/𝟮𝟳)

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.

donavon/use-persisted-state

A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state. use-persisted-state is not a hook itself, but is a factory that accepts a storage key and an optional storage provider (default = localStorage) and returns a hook that you can use as a direct replacement for useState.

https://github.com/donavon/use-persisted-state

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

How to Create a Reusable LocalStorage Hook

https://blog.bhanuteja.dev/how-to-create-a-reusable-localstorage-hook

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.

Easily Detect Outside Click Using useRef Hook

https://blog.bhanuteja.dev/easily-detect-outside-click-using-useref-hook

𝗡𝗼𝘃 𝟱, 𝟮𝟬𝟮𝟬 - 𝟯 𝗦𝗶𝗺𝗽𝗹𝗲 𝗦𝘁𝗲𝗽𝘀 𝗧𝗼 𝗦𝗲𝘁𝘂𝗽 𝗔𝘂𝘁𝗵𝗲𝗻𝘁𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 (𝟮𝟰/𝟮𝟳)

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

3 Simple Steps To Setup Authentication in Next.js

In this tutorial, we will see how to easily set up authentication for Next.js apps. yarn create next-app next-auth This will create a new Next.js application. You can remove unnecessary files and make the structure as below. My pages/index.js just contains the following I will be using SQLite as my database for this tutorial, but next-auth supports all of the popular databases.

https://blog.bhanuteja.dev/3-simple-steps-to-setup-authentication-in-nextjs

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

The Lifecycle of React Hooks Component

In this article, we will see the order in which different useEffect callbacks and cleanups happen. We will also see how it differs when the app mounts, unmounts, updates. This image is taken from github.com/donavon/hook-flow. I took the example shown in this article from React Hooks workshop in EpicReact.Dev by Kent C.

https://blog.bhanuteja.dev/the-lifecycle-of-react-hooks-component

𝗡𝗼𝘃 𝟭𝟯, 𝟮𝟬𝟮𝟬 - 𝟯𝟬+ 𝗚𝗶𝘁 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀 𝗧𝗵𝗮𝘁 𝗜 𝗙𝗿𝗲𝗾𝘂𝗲𝗻𝘁𝗹𝘆 𝗨𝘀𝗲 (𝟮𝟲/𝟮𝟳)

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.

Become a better dev in 2021 - Hashnode Book

Essential advice and tips for those who are getting into web development in 2021. Get a web dev roadmap, figure out skills to learn in 2021, and understand mistakes to avoid through easily digestible chapters. Learn how to learn and ask questions effectively, and grow as a developer through a set of hand-picked articles from Hashnode.

https://hashnode.com/better-dev-2021

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.

30+ Git Commands That I Frequently Use

In this article, I will list out all the git commands that I use very frequently. This is not in any way a complete list, just the commands that I use very often. This is intended to be used as a quick reference to perform an action that you want.

https://blog.bhanuteja.dev/30-git-commands-that-i-frequently-use

𝗡𝗼𝘃 𝟮𝟭, 𝟮𝟬𝟮𝟬 - 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗦𝘁𝗮𝗿𝘁𝗲𝗿 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗪𝗶𝘁𝗵 𝗔𝘂𝘁𝗵𝗲𝗻𝘁𝗶𝗰𝗮𝘁𝗶𝗼𝗻 + 𝗥𝗲𝗮𝗰𝘁 𝟭𝟳 + 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 + 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦 𝟮 + 𝗘𝗦𝗟𝗶𝗻𝘁 (𝟮𝟳/𝟮𝟳)

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.

Next.js Starter Template With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint

Next.js has become my go-to framework for almost every project that I make. So, I made a starter template that I can just use and get started easily. In this article, I will show you how to use the starter template that I made and deploy it with Verc...

https://blog.bhanuteja.dev/nextjs-starter-with-authentication-react-17-typescript-tailwind-css-2-eslint

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

Link to the GitHub Repo:

pbteja1998/nextjs-starter

A starter project for next js with authentication - Contains React 17 + Typescript + Tailwind CSS 2 + React Query 3 + GitHub Auth + LinkedIn Auth + Password-less Auth + Fauna DB + ESLint + Prettier + Husky - pbteja1998/nextjs-starter

https://github.com/pbteja1998/nextjs-starter

Link to the live demo:

Nextjs Starter

Find info about nextjs-starter template features. Open an issue on GitHub if you face any problems. Go through the frequently asked questions for your questions. Instantly deploy a next-starter site to a public URL with Vercel.

https://next-starter.bhanuteja.dev/

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.

Fauna | The data API for modern applications

Announcing controls for Data Residency in US and EU, SOC 2 compliance, and new GTM leadership! Read More -> Sign Up © 2021 Fauna, Inc. All Rights Reserved. Fauna is a flexible, developer-friendly, transactional database delivered as a secure and scalable cloud API with native GraphQL.

https://fauna.com/

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.

Audience Overview

Acquisition Overview

Behaviour Overview

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.

Hashnode: Everything you need to start blogging as a developer!

100 days ago, I published my first blog post on a new and unfamiliar platform called Hashnode. Today, publishing articles on Hashnode is a routine, a hobby, a great joy. I am super stoked to share that my #tech blog on @hashnode has crossed ✨58000+✨ page views in less than 48 hours.

https://pbt.im/join-hn

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.