DEV Community: mohammad mohagheghian

tailwindCSS's classes order pattern "best practice" 🍃

mohammad mohagheghian — Mon, 06 Feb 2023 19:43:50 +0000

Using patterns 📊 in your codes is always a pretty great thing👍 because your code looks much better 👀, in the future, you won't be confuse 🧠, and other developers 🧑‍💻 that contribute to your project will understand it better, especially in open source projects 📖.

Some patterns are confusing 🧠, and hard to remember 😡 since one of the goals of the tailwindCSS is not to be complicated 🦾, I try a lot to make as much as easy, and easy to customize 🖌️.

I also made a GitHub repository for you guys to be able to contribute and make it better. 😉

Basics

Let's take a look at it.

You may say what is special about this piece of code 🤔💭, the answer is that during coding we have no pattern and methodology we just type class names that we thinking of, and this will make our code dirty 💩.

Logic

the logic behind orders and patterns is we go from outside to inside 📥. It means first we define positions, after that margin, padding, outline, and border, and then we define element inner styles like display, align-items, background-color, text-color, font properties, etc. 🚌 Next we define class names like transitions, animations, and external CSS classes.

Responsive

Some developers prefer to use media queries at the end of the string which is not perfect 🔔 because it's easier to have all media queries of one element in one look 👁️. like below.

Orders

The most important thing in this pattern is orders but how do we categorize them in groups, and what are the categories? 👆

1. position, inset, top, bottom...

Including position, inset, top, left, bottom, and right.

1️⃣ position => absolute, relative, static...
2️⃣ inset => inset-2, inset-4...
3️⃣ top => top-6, top-10...
4️⃣ right => right-6, right-10...
5️⃣ bottom => bottom-6, bottom-10...
6️⃣ left => left-6, left-10...

<div className="absolute top-10 right-10">
   <h1>Position</h1>
</div>

2. Margin, Padding, outline, and border

the Order of the directions are clockwise 🔃, like: mt-0 => mr-0 => mb-0 => ml-0

1️⃣ Margin
2️⃣ Padding
3️⃣ Outline
4️⃣ Border

<div className="my-10 p-24 outline-none border-2">
   <h1>Margin, Padding, Outline, and Border</h1>
</div>

3. Height, width, min and max-width, and min and max-height

1️⃣ width => w-10
2️⃣ height => h-10
3️⃣ min-width => h-5
4️⃣ min-height => h-5
5️⃣ max-width => h-16
6️⃣ max-height => h-16

<div className="w-10 h-4 min-h-2 max-w-36 max-h-10">
   <h1>Width, Height, min-..., and max-...</h1>
</div>

4. Display (grid or flexbox items in addition)

The order in this category does not matter 🫠, because it may be different. 🛫

<div className="flex items-center justify-content flex-col">
   <h1>Flex, and Grid</h1>
</div>

5. Background-color, and box-shadow

1️⃣ background color
2️⃣ box shadow
3️⃣ drop-shadow

<div className="bg-red-900 shadow-xl drop-shadow-lg">
   <h1>background-color, and box-shadow, and drop-shadow</h1>
</div>

6. Text, and font

First, we define text color, then text font-size, and last but not least font-weight.

1️⃣ color => text-red-600, text-white...
2️⃣ font-size => text-lg, text-3xl...
3️⃣ font-height => leading-9, leading-5...
4️⃣ font-weight => font-semibold, font-medium...

<div className="text-red-600 text-sm leading-4 font-semibold">
   <h1>Color, font-size, font-height, and font-weight</h1>
</div>

these most common classes, so for more classes you can add them at the end of the category.

7. Transitions, and animations

1️⃣ transition => transition-all duration-750...
2️⃣ animation => animate-spin

<div className="transition-all duration-1000 animation-ping">
   <h1>Transition, and Animation</h1>
</div>

8. Filters

Due to a large number of cases, it's not great.

<div className="backdrop-blur-lg">
   <h1>Filters</h1>
</div>

Conclusion

I developing a react project with this method, and after finishing it I will share the link here. So be sure to save it 😉😈.

keep in touch

Keep Coding Y'All 👨🏻‍💻

Auto Dev.to's posts updater on GitHub readme

mohammad mohagheghian — Sat, 04 Feb 2023 19:29:04 +0000

To show your latest dev.to posts in the GitHub page readme is awesome 🌈, because:

Show you're actively creating blogs ✍️
Github page's viewers become familiar with your Dev.to blog 🚀

But how to achieve this:

1. The first step is ( Create a username repo )

Make a repository in your GitHub page with your own username - if you haven't created that yet.
like this: https://github.com/vito-mohagheghian/vito-mohagheghian

And will appear in your profile like this.

2. Edit `readme.md` File

Copy/Paste the code below, where you wanna your latest blogs appear in the readme.md file.

they won't appear in preview mode.

## Latest Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

3. Create a `.github` folder

Clone your repository in your device using git clone [your repo's address].
like this git clone https://github.com/vito-mohagheghian/vito-mohagheghian.git

Make new a new folder named .github and inside of this, make a new folder named workflows, then create a new folder like this: blog-post-workflow.yml

Modify .yml file

Copy/Paste the code below and just replace your dev.to username with mine in feed_list.

name: Latest blog post workflow
on:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'
  workflow_dispatch:

jobs:
  update-readme-with-blog:
    name: Update this repo's README with the latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@v1
        with:
          max_post_count: "3"
          remove_duplicates: true
          feed_list: "https://dev.to/feed/vitomohagheghian"

You can also change max_post_count and remove_duplicates values.

Push Changes to github

push changes you made with the following commands.

git add .

git commit -m "add workflows"

git push

Run Github Actions

Now go to your GitHub repository, and go to the Actions tab.

You will see your workflow below 'all workflows', then click on Run workflow, and run it.

Congratulation 🎓, You have your own auto Github blog posts updater 🦄.

Keep in touch

Keep Coding Y'All 👨🏻‍💻

The Best Way to import images in ReactJs, and NextJs 🚀

mohammad mohagheghian — Sat, 04 Feb 2023 16:20:54 +0000

Importing images was always a pain in the neck 👔 especially importing them with long paths in multiple lines, so I searched 🔎 a lot to find the best ones and then tested them to ensure, they were the best to use in daily projects 👍. So after spending hours 🕝 using it on different projects, I finally discover the answer for daily usage. 😀

certainly, it's not the best answer for use in different projects, so I will create posts for each situation soon.

without any interrupting let's get into it. ✍️

Make Index file

In the public folder create a new file index.js, or index.tsx, or any folder you want to export its existing images.

there are lots of third packages, which you can use to import, but I prefer to import them manually! lightness.

Import/Export Images

then export them like below:

Import In React Components

and instead of importing images with long paths, now you import them like below:

SVGs

You can also make file SVGs, and return SVG elements like react components.

Conclusion

It may not be the best for specific projects ⚠️, but for regular react projects is OK.

If you know a better way than this one 🕵️. please 🙏 comment it 💭 below to let others and I know 👍.

keep in touch 👋

Keep Coding Y'All 👨🏻‍💻

The Easiest way to create React NPM packages

mohammad mohagheghian — Mon, 09 Jan 2023 19:34:21 +0000

In this tutorial I will be showing you how to create UI react NPM packages, which is the most easiest one to transform ideas to packages and modules. This will definitely help you to make your own packages without limitations. ⚗️

However, It's not efficient for modules or some non-UI packages. ⚠️

Getting Started

This tutorial is a step-by-step guide, so don't worry about anything, I will cover everything you need.

If you are ready, let's get started. 🚀

1. Install Create-react-library

First, we have to install a package called create-react-library, so open up your terminal, and install it, using npm or yarn.

# This package requires node >= 10
npm install -g create-react-library
# or
yarn global add create-react-library

If yarn global didn't work check this out.

2. Create react library

then run using npx run this command.

npx create-react-library

after entering the package name, etc. You need to choose the package manager and template(default: JavaScript).

I have to mention that during running this command yarn install will somehow break, so you can manually run it by yourself

3. Enter the folder

then enter your directory using:

cd (your package name)

4. Install node modules dependencies

If your yarn install broke, you can run it now.

# using npm
npm install
# using yarn
yarn install
# or simply 
yarn

5. Install Example folder node modules dependencies

After that enter the example folder, this is like a usual react app, in which you can develop and test your package. Cool, Right?
then run yarn install again.

cd example/

yarn install
# or 
npm install

6. Start developing

Now everything is alright, and you simply need to split or open a new terminal to run the package.

So now you have two terminals one for running the package, and one for running the /example react app.

both of them will run with:

yarn start
# or 
npm start

now you can open your VSCode(if you're using that) with the terminal in main / root, using this command:

code .

7. Deployment

Now you have to make a new NPM account.

then back to your terminal, and run

npm init

And enter the information, then you need to authorize, and log in to your account using the terminal using the command:

npm login

After that Just run go to your IDE, and open package.json, and change this "private": true, to this "private": false,.

everything is okay for running this command and publishing your package.

npm publish

My packages

I developed some simple packages with this method, you can check them in my NPM account, and there are GitHub links, so you check codes, too.👍

Hope you enjoy it. 🧑‍💻👩‍💻💖

I would like to see your packages, so leave me the link to your npm packages in the comments 💬.

My Github page 🌈
My Portfolio 🚀

How to count the lines of code you wrote in VS Code?

mohammad mohagheghian — Sat, 07 Jan 2023 16:48:28 +0000

Knowing the number of lines of code is interesting, and sometimes important. There are many tools out there, but the best one in my opinion is:

VS Code Counter

After installing, press CTRL + SHIFT + P then search for count

click the first one, then it will create new a folder like this,

Your results.txt the file would be like this:

the point is in .VSCodeCounter the folder these records will save by their date. 😉

keep in touch

Keep Coding Y'All 👨🏻‍💻

Real-world Chrome extensions for web developers

mohammad mohagheghian — Sat, 07 Jan 2023 09:00:53 +0000

I was interested to know what extensions other developers use in order to make the process easier. However some of them were pretty useless, and the most of the times I didn't use them.

So I decide to create a post to share you my chrome [brave] extensions, I'm using for web development, so let's jump into.

I have to add it, that they're not in order.

1. Picture-in-Picture Extension (by Google)

It's really useful during watching tutorials, or some videocasts. with having one monitor.

2. Wappalyzer - Technology profiler

You probably sometimes become curious about which technologies are they using in web apps. this one will help you know that. it's highly recommended.

3. Live color picker

you certainly want to know which color is it!? right! this will help you find out.

4. Dark Reader

We hate light modes, right? with this make everything dark. This problem with this one is that it just make everything dark, even the dark mode websites. 😂

5. Redux DevTools

The best redux dev tools, It's highly recommended if you're using ReduxJs.

6. React Developer Tools

No need to introduce. I rarely use it. You know I prefer the classic one.

7. Enable Right Click for Google Chrome

In fact, I'm not using another one, but I can't find that, but they're the same.

8. Grammarly

If your English is not perfect like me, use this one.

9. Super Simple Highlighter

You're going to fall in love with this one. It's pretty useful, during reading docs, articles, blogs, presentations, podcasts, and meetings.

10. Responsive Tester

last but not least, I always use this one for testing, and it's just awesome.

Conclusion

the purpose of creating this post was to show you which extensions are really used in my daily coding.

keep in touch: My Portfolio

Keep Coding Y'All 👨🏻‍💻

Create a Windows 11 in React.js

mohammad mohagheghian — Tue, 03 Jan 2023 15:54:08 +0000

I always thought that what if that we could make online windows on the web? however, at that time I wasn't able to make it done!

So this summer, I decide to make it and be the first one, coded that independently by myself,

but then I realize another team did that 🥲
I'll share the link below to check it out, back to story it was a little disappointing, but I figure that I could start developing my new one, and whenever I got stuck I could get help from the existing one, and also learn new things.

and the reason I didn't publish that by this time is the revolution is taking place in Iran.

The technologies I used are:

ReactJs 🎓
TypeScript 💙
Redux 💖
Styled Components 💇‍♂️
framer-motion 💪

Check it Online

I know, you can't wait for taking look at it, so here you go. make sure you're using Desktop.

Wins-11 Online

Github page

and make sure you like the repo if you like it.

Github Repo

also there's a document on the GitHub page.

Short description

the general things are the same as windows, but details are working at them so don't worry about that.

and the funny 😂 thing about this was that by the time I finished coding when Microsoft updates some UI, so there must be some changes.

But it's not over!

I plan to make real-world widows where you're able to create accounts, upload files, make folders install apps from the store, and be somehow a VPN or something like that, in which you're like using a virtual machine.

Conclusion

I really appreciate reading this dumb post to the end. 🙏
hope you enjoy and inspire you for making everything web apps you want 🤞.

DEV Community: mohammad mohagheghian

tailwindCSS's classes order pattern "best practice" 🍃

Basics

Logic

Responsive

Orders

1. position, inset, top, bottom...

2. Margin, Padding, outline, and border

3. Height, width, min and max-width, and min and max-height

4. Display (grid or flexbox items in addition)

5. Background-color, and box-shadow

6. Text, and font

7. Transitions, and animations

8. Filters

Conclusion

Auto Dev.to's posts updater on GitHub readme

1. The first step is ( Create a username repo )

2. Edit readme.md File

3. Create a .github folder

Modify .yml file

Push Changes to github

Run Github Actions

The Best Way to import images in ReactJs, and NextJs 🚀

Make Index file

Import/Export Images

Import In React Components

SVGs

Conclusion

The Easiest way to create React NPM packages

Table of contents:

Getting Started

1. Install Create-react-library

2. Create react library

3. Enter the folder

4. Install node modules dependencies

5. Install Example folder node modules dependencies

6. Start developing

7. Deployment

My packages

How to count the lines of code you wrote in VS Code?

VS Code Counter

Real-world Chrome extensions for web developers

1. Picture-in-Picture Extension (by Google)

2. Wappalyzer - Technology profiler

3. Live color picker

4. Dark Reader

5. Redux DevTools

6. React Developer Tools

7. Enable Right Click for Google Chrome

8. Grammarly

9. Super Simple Highlighter

10. Responsive Tester

Conclusion

Create a Windows 11 in React.js

The technologies I used are:

Check it Online

Github page

Short description

But it's not over!

Conclusion

2. Edit `readme.md` File

3. Create a `.github` folder