DEV Community: Rohidul Islam

React Tailwindcss TypeScript Vite Starter Template

Rohidul Islam — Sun, 28 Nov 2021 19:55:24 +0000

This is a starter template for React + Tailwindcss + TypeScript + Vite.

Project Structure

How to use this template?

Use Templete

You can use this template by just creating a new repo with this template by clicking on the "Use this template" button.

Clone this repo

You can also clone this repo.

git clone https://github.com/rohid-hub/react-tailwindcss-typescript-vite-template.git

Installation

After cloning the repo go to the directory and run

yarn

Then run the dev server by running

yarn dev

After this go to htpp://localhost:3000 and you should see this screen.

If this template helps you then please don't forget to give this repo a star ☺️

Thank you

Github Repo

How my article got ranked at no.1 position on google within 2 days 🤯

Rohidul Islam — Sat, 27 Nov 2021 17:04:53 +0000

What happened?

2 days ago I wrote an article on Top 10 vscode extensions for react developers. And now that article is ranked at no.1 position on google for this keyword.

It was unexpected for me. Maybe for some of you, it's not that excited. Maybe ranking at the top position on google search is pretty common and easy for you. But I'm not an SEO expert or not even a regular blogger. So how did my article got ranked on google? 🤔

Truly speaking I have no idea how it happened.

Because I don't know how it happened, therefore it's not going to be a tutorial post where I'm going to teach you how you can rank your blogs on google, rather it's going to be how I manage to rank on google and what I did and I will be sharing my journey with you guys. Maybe somehow it might help you who knows.

Who am I? 🙂

Let me introduce myself before we start. Hi 👋, My name is Rohid. I do multiple things like web development with React, Next.js, Unity Game Development, React native or flutter mobile development, etc. Yeah, my life's a mess. And also I'm from Bangladesh 🇧🇩.

So how it was started?

2 days ago I just finished building my personal blog site. I always wanted to build a blog site but I never got time to build it. So finally finished building that site. It was built with Next.js and GraphCMS as CMS. I don't know SEO so I never spend my time building a custom blog site because you know how hard it is to rank a custom site. But I eventually did. I might write an article on how I managed to create a blog site with next.js. Let me know In the comment section.

Let's get back on track. So I finally managed to build a blog site now I have to make content for that. So I decided to write an article on what extensions I use in my daily life for React or nextjs development. It was 4 am on the morning instead of going back to bed I decided to finish that article. So I started writing that article. It was 6 am when I finished writing. I'm exhausted at that time. So I decided to go to bed. I didn't post that article because I want to read that one more time after I wake up. After I woke up. I read it once again and published it on my site and also on dev.to. I posted on dev.to because there is no way google going to recommend my article from a new website. I posted that article on dev.to and backlinked that to my website.

After that, I started getting comments and reactions from dev.to website. In day 1 I got around 100 views plus 10+ reactions on that article. I can't explain how excited I was. I checked google and searched for that article to see if it ranked or not and unfortunately I checked 2-3 pages but I couldn't find that article 😂. On the second day in the morning, I checked dev.to stats and show that the article got 600+ views and 50+ reactions 🤯. I was amazed. My profile pic doesn't get that much attention 😅. Again I checked google but I was the same as before. I couldn't find my article anywhere. I was happy but at the time sad as well.

But at night I was working on my website. I was integrating google analytics. So I don't know but for some reason, I searched on google "Top 10 VSCode Extensions for React" And guess what? The first result was my article from dev.to.

It was ranking on the no.1 position on google. I opened incognito mode to see If it's actually ranking or not. And it's actually ranking on the no.1 position on google. I can't tell you how surprised I was. There were 1,610,000+ results for that keyword and my article was ranking at the top just imagine.

I quickly took a screenshot and posted that on my Facebook account.

So what I did right? 🤔

As I said I don't know exactly what was the main reason. Before writing that article I was learning who to write a good article. How other people right article. I was trying to find some common patterns. And I found one interesting point. Maybe this could be the reason.

Here as you can see google trying to give users what they want before they click any link. That's why I tried to write my article in a way where Google can easily find all the extensions at the beginning of the article.

So what I did was I before explaining what each extension do I provided a list of all the extensions. From here google found all the answers it needs to make a list.

I think this strategy works for me in this case. I will suggest you try this strategy by yourself and please let me know if it works for you as well.

And also If you think there are some other reasons that you think could be the reason to rank on no.1 on google then please share that. I think we all love to know that from you.

Conclusion

This was my first experience. So I'm super excited. It gave me motivation for writing more blogs. I'm a full-time developer so I don't have that much time to write articles. But when these things happen, it just gives so much motivation. I'm excited to make more content for you guys. I'm an introvert so I usually don't share my stuff with anyone. But It feels actually great now I'm sharing this.

I don't know if this article helps you or motivates you. But please let me know what you feel, how can I improve my writing, your story. I really want to hear from you guys.

Also, let me know If you want me to share the development process of the blog/portfolio site.

here is the link - rohid.dev

It's still under development. So you can expect some uncompleted stuff.

I don't know why anyone gonna read this far 🙂. But let me know you did. You are awesome 😊

Thank you so much. See you soon 😊

Top 10 VSCode Extensions for React

Rohidul Islam — Thu, 25 Nov 2021 06:05:00 +0000

What will be covered here?

We will be covering 10 essential visual studio code extensions for React developers. These extensions will help you code faster, cleaner and easier.

Top 10 VS Code Extensions for React

ES7 React/Redux/GraphQL/React-Native snippets
Prettier – Code formatted
Bracket Pair Colorizer
Auto Rename Tag
VSCode React Refactor
ESLint
npm Intellisense
TabOut
change-case
EditorConfig for VS Code

ES7 React/Redux/GraphQL/React-Native snippets Extension

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code

Install It

Prettier – Code formatted

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Prettier – Code formatted

Install It

Highlight Matching Tag

This extension highlights matching opening and/or closing tags. Optionally it also shows the path to tag in the status bar. Even though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.

Highlight Matching Tag

Install It

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Auto Rename Tag

Install It

VSCode React Refactor

This simple extension provides JSX refactor code actions for React developers.

VSCode React Refactor

Install It

ESLint

ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

Install It

npm Intellisense

It autocompletes npm modules in import statements.

npm Intellisense

Install It

TabOut

This extension allows you to tab out quotes, brackets, etc.

Install It

change-case

A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.

change-case

Install It

EditorConfig for VS Code

This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.

Install It

So these are the top 10 vs code extensions for React developers. Hope this article helps you with finding some best extensions for your React application development. These extensions can increase your productivity. Let us know if there are other extensions that you use in your daily life for React development. We love to use them as well. Goodbye for now, see you soon 😊

To see more blogs, visit my blog site

Hello, World! in 10 different languages 🔥🔥

Rohidul Islam — Thu, 05 Aug 2021 12:15:41 +0000

1. Python

print("Hello World!")

2. Java

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

3. JavaScript

console.log("Hello, World!")

4. C Sharp

using System;
class Hello {         
    static void Main(string[] args)
    {
        Console.WriteLine("Hello, World!");
    }
}

5. Swift

print("Hello, World!")

6. Dart

void main() {
  print("Hello, World!");
}

7. Go

package main
import "fmt"
func main() {
    fmt.Println("Hello, World!")
}

8. C++

#include <iostream>
using namespace std;
int main()
{
    cout<<"Hello, World!";
    return 0;
}

9. C

#include <stdio.h>
int main(void)
{
    printf("Hello, World!");
}

10. Kotlin

fun main(args: Array<String>) {
    println("Hello, World!")
}