DEV Community: Shuvo

Why Traditional Tutorials Don't Work for Learning Git

Shuvo — Wed, 13 May 2026 04:57:00 +0000

If you've tried learning Git through videos or articles and still feel confused, you're not alone. The problem isn't you - it's the way Git is usually taught.

The Problem with Traditional Git Tutorials

Most tutorials focus on explaining commands instead of helping you understand how Git actually works in real situations.

They are passive (watching instead of doing)
They focus on syntax, not workflows
No real problem-solving scenarios
No feedback when you make mistakes

Why This Approach Fails

1. Git is Conceptual, Not Just Commands

Git involves understanding history, branches, and changes - not just memorizing commands.

2. No Muscle Memory

Watching tutorials doesn't build the habit of actually using Git commands.

3. No Real Context

Real development involves conflicts, mistakes, and workflows - tutorials rarely simulate this.

Traditional Learning vs Effective Learning

Method	Result
Watching tutorials	Temporary understanding
Reading docs	Good reference, low retention
Interactive practice	Real understanding

A Better Way to Learn Git

The most effective way to learn Git is through hands-on, interactive practice.

Learn a concept
Apply it immediately
Make mistakes and fix them
Repeat with real workflows

Stop Watching, Start Practicing

If you want to truly understand Git, you need to use it - not just watch someone else use it.

Frequently Asked Questions

Are tutorials useless for learning Git?
Not useless, but incomplete. They should be combined with hands-on practice.

Why does Git feel confusing?
Because it involves abstract concepts that require practice to fully understand.

What is the best way to learn Git?
The best way is practicing real workflows instead of relying only on passive learning.

Learn Git Basics in 5 Minutes (Quick Guide)

Shuvo — Wed, 13 May 2026 04:53:45 +0000

Want to learn Git fast? This 5-minute guide covers the essential Git concepts and commands you need to get started. No fluff - just the basics that actually matter.

What is Git?

Git is a version control system that helps you track changes in your code, collaborate with others, and manage different versions of your project.

3 Core Git Concepts

Repository (Repo)

A project folder tracked by Git.

Commit

A snapshot of your changes.

Branch

A separate line of development.

Essential Git Commands

Command	Description
`git init`	Initialize a new repository
`git add .`	Stage changes
`git commit -m "message"`	Save changes
`git status`	Check current state
`git branch`	View branches
`git checkout -b feature`	Create and switch branch
`git merge`	Merge branches

Basic Git Workflow

Make changes to your files
Run git add .
Run git commit -m "message"
Repeat as you build your project

Important: Reading Isn't Enough

You can't learn Git just by reading. You need to actually use the commands in real scenarios.

The fastest way to learn Git:

Learn a concept
Practice it immediately
Repeat with real workflows

Practice Git in Minutes

Instead of just reading, start practicing Git commands interactively and build real confidence.

Frequently Asked Questions

Can I learn Git in 5 minutes?
You can understand the basics in 5 minutes, but mastering Git requires practice.

What should I learn first in Git?
Start with repositories, commits, and basic commands like add and commit.

Is Git hard for beginners?
It can feel confusing at first, but becomes easy with hands-on practice.

Git Commands Senior Developers Actually Use

Shuvo — Wed, 13 May 2026 04:48:34 +0000

Want to use Git like a senior developer? It’s not about knowing hundreds of commands - it’s about mastering a small set of powerful ones and using them confidently in real workflows.

What Makes These Commands “Senior-Level”?

Senior developers don’t just run commands - they understand how Git history works, how to fix mistakes, and how to manage clean workflows. These commands reflect that mindset.

1. `git status`

Always Know What’s Happening

Check your current state before doing anything. Senior devs constantly use this.

2. `git log --oneline --graph --decorate`

Visualize History

See your commit history in a clean, readable format.

3. `git checkout -b feature-name`

Work in Branches

Create isolated environments for features and fixes.

4. `git merge`

Combine Work Safely

Merge branches when features are complete.

5. `git rebase`

Clean Up History

Rewrite commit history to keep it linear and clean.

6. `git stash`

Save Work Temporarily

Quickly store changes without committing.

7. `git reset`

Undo Changes

Move back to a previous state when needed.

8. `git restore`

Fix Mistakes Safely

Restore files without affecting commits.

9. `git pull --rebase`

Avoid Messy Merges

Keep history clean when pulling updates.

10. `git diff`

See What Changed

Understand exactly what modifications were made.

Practice These Commands Like a Pro

Reading commands isn’t enough - you need to actually use them in real workflows.

10 Git Mistakes Beginners Make (And How to Avoid Them)

Shuvo — Wed, 13 May 2026 04:40:12 +0000

Why Beginners Struggle with Git

Git isn’t just about commands - it’s about understanding how changes, history, and branches work together. Without hands-on practice, these concepts feel confusing.

10 Common Git Mistakes

1. Trying to Memorize Commands

Many beginners try to memorize Git commands instead of understanding what they actually do.
How to fix: Focus on workflows, not commands. Practice using Git in real scenarios.

2. Not Practicing Enough

Watching tutorials without actually using Git leads to shallow understanding.
How to fix: Use interactive practice to apply what you learn immediately. GitMission is great for that.

3. Ignoring Branching

Branching is a core concept, but many beginners avoid it.
How to fix: Practice creating, switching, and merging branches regularly.

4. Fear of Breaking Things

Beginners often hesitate because they’re afraid of making mistakes.
How to fix: Git is designed to recover changes - experiment freely.

5. Not Understanding Commits

Treating commits like random saves instead of meaningful checkpoints.
How to fix: Make small, descriptive commits that reflect logical changes.

6. Skipping Git Fundamentals

Jumping into advanced topics without understanding basics.
How to fix: Master repositories, commits, and staging first.

7. Confusion Between Git and GitHub

Many beginners mix up Git (tool) and GitHub (platform).
How to fix: Understand Git as the system, GitHub as a hosting service.

8. Poor Commit Messages

Using vague messages like 'update' or 'fix'.
How to fix: Write clear messages describing what changed and why.

9. Not Learning How to Undo Changes

Beginners panic when something goes wrong.
How to fix: Learn commands for undoing commits, restoring files, and fixing mistakes.

10. Avoiding Real Workflows

Only learning isolated commands instead of real use cases.
How to fix: Practice full workflows like feature development and merging.

The Real Secret to Learning Git

The biggest mistake is relying only on passive learning.

Learn a concept
Practice it immediately
Repeat with real scenarios

Learn Git Without These Mistakes

Instead of struggling through trial and error, you can learn Git the right way through structured, hands-on practice.

Functional tabs with only CSS (No JavaScript)

Shuvo — Wed, 04 Jun 2025 01:34:42 +0000

This article demonstrates how to create functional tabs using only CSS, without any JavaScript. The tabs will allow users to switch between different content sections seamlessly, showcasing the power of CSS for interactive elements.
Original article: wtfcodes.com

Basic setup:

To get started, we will create a typical HTML structure for our tabs and apply some basic styles to make them visually appealing.

<div class="tabs-wrapper">  
  <nav class="tabs-nav">
    <div class="tab-item">
      <span>Tab A</span>
    </div>
    <div class="tab-item">
      <span>Tab B</span>
    </div>
    <div class="tab-item">
      <span>Tab C</span>
    </div>

  </nav>

  <div class="tab-content" id="tab-a-content">
    I am Tab A content
  </div>
  <div class="tab-content" id="tab-b-content">
    I am Tab B content
  </div>
  <div class="tab-content" id="tab-c-content">
    I am Tab C content
  </div>
</div>

body{
  font-family: Arial;
  padding: 1em;
}

.tabs-nav{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  user-select: none;
}

.tab-item{
  background: #bcbcbc;
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.tab-content{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid grey;
}

Great! Now we need somekind of interactivity.
Lets think what cab we do so the active tab has something different than other tabs.
Well we can use <input type="radio" /> to indicate the active tab. Since radio inputs allow only one to be selected at a time, we can use them to control which tab is active.
And to make sure we can toggle the radio inputs by clicking on the tab, we can use the <label> element instead of <div> for the tab items.
So the updated HTML structure will look like this:

<div class="tabs-wrapper">  
  <nav class="tabs-nav">
    <label for="tab-a-toggle" class="tab-item">
      <span>Tab A</span>
      <input checked name="tabs-toggle" id="tab-a-toggle" type="radio">
    </label>
    <label for="tab-b-toggle" class="tab-item">
      <span>Tab B</span>
      <input name="tabs-toggle" id="tab-b-toggle" type="radio">
    </label>
    <label for="tab-c-toggle" class="tab-item">
      <span>Tab C</span>
      <input name="tabs-toggle" id="tab-c-toggle" type="radio">
    </label>
  </nav>

  <div class="tab-content" id="tab-a-content">
    I am Tab A content
  </div>
  <div class="tab-content" id="tab-b-content">
    I am Tab B content
  </div>
  <div class="tab-content" id="tab-c-content">
    I am Tab C content
  </div>
</div>

Nice progress!
Since we don't want the radio inputs to be visible, we can hide them using .tab-item input{display: none; } in the CSS.

Highlight the active tab:

We can use the tab-item:has(input:checked) selector in CSS to check if a tab has a checked input and apply styles to it.

.tab-item input{
  display: none;
}
.tab-item:has(input:checked){
  background: #6b54f0;
}

Amazing! Now we can see which tab is active.
Using the same logic, we can also show/hide the content of the active tab.

.tab-content{
  display: none;
}
.tabs-wrapper:has(#tab-a-toggle:checked) #tab-a-content{
  display: block;
}
.tabs-wrapper:has(#tab-b-toggle:checked) #tab-b-content{
  display: block;
}
.tabs-wrapper:has(#tab-c-toggle:checked) #tab-c-content{
  display: block;
}

Final code:

<div class="tabs-wrapper">  
  <nav class="tabs-nav">
    <label for="tab-a-toggle" class="tab-item">
      <span>Tab A</span>
      <input checked name="tabs-toggle" id="tab-a-toggle" type="radio">
    </label>
    <label for="tab-b-toggle" class="tab-item">
      <span>Tab B</span>
      <input name="tabs-toggle" id="tab-b-toggle" type="radio">
    </label>
    <label for="tab-c-toggle" class="tab-item">
      <span>Tab C</span>
      <input name="tabs-toggle" id="tab-c-toggle" type="radio">
    </label>
  </nav>

  <div class="tab-content" id="tab-a-content">
    I am Tab A content
  </div>
  <div class="tab-content" id="tab-b-content">
    I am Tab B content
  </div>
  <div class="tab-content" id="tab-c-content">
    I am Tab C content
  </div>
</div>

body{
  font-family: Arial;
  padding: 1em;
}

.tabs-nav{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  user-select: none;
}

.tab-item{
  background: #bcbcbc;
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.tab-content{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid grey;
}

.tab-item input{
  display: none;
}
.tab-item:has(input:checked){
  background: #6b54f0;
}

.tab-content{
  display: none;
}

.tabs-wrapper:has(#tab-a-toggle:checked) #tab-a-content{
  display: block;
}
.tabs-wrapper:has(#tab-b-toggle:checked) #tab-b-content{
  display: block;
}
.tabs-wrapper:has(#tab-c-toggle:checked) #tab-c-content{
  display: block;
}

Thank you for reading!

If you enjoyed this article, please consider sharing it with others.
You can support me on Buy Me a Coffee.
If you have any feedback or suggestions, feel free to reach out to me on Twitter.
Don't forget to checkout wtfcodes.com

When semicolon isn't optional in JavaScript

Shuvo — Mon, 02 Jun 2025 01:58:27 +0000

Original article: wtfcodes.com

TL;DR: In JavaScript, semicolons are optional at the end of statements, but there are specific cases where omitting them can lead to unexpected behavior or errors.

Without semicolon:

In the following example, I am trying to access an element in an array using idx variable and console log if the number is even or odd.
And since semicolon is optional in JavaScript, I have not used any semicolon at the end of the statement.

const array = [1, 2, 3, 4, 5, 6]
const idx = 2
const num = array[idx]
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd")

Everything seems fine, right?
But wait, we got errors in the console.

With semicolon:

Now let's add semicolons at the end of the statements.

const array = [1, 2, 3, 4, 5, 6];
const idx = 2;
const num = array[idx];
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd");

And look that, Everything works fine now!

And look that, Everything works fine now!

So WTF?

The deal breaker line here is const num = array[idx]. Because it is followed by (num && num % 2 === 0) ? console.log("Even") : console.log("Odd");

Why? Lets say our array contained functions that returns a number.

const fn1 = () => 1
const fn2 = () => 2
const fn3 = () => 3
const fn4 = () => 4
const fn5 = () => 5

const array = [ fn1, fn2, fn3, fn4, fn5 ]
const idx = 2
const num = array[idx]

console.log(num) //Output: function fn3() {}

It logs function fn3() {} in the console.
But we want num to be the return value of the function. So we need to call the function like this: const num = array[idx]() that way we are calling fn3 num will be the return value of the function.

const num = array[idx]()

console.log(num) //Output: 3

Since fn3 doesn't take any arguments, its deosnt matter if we pass any argument or not the function will still return the same value.
And we could also call the function in the next line and it will still work the same way.

//It doen't matter what we pass as argument
//Since fn3 doesn't take any argument, it will still return the same value
const num = array[idx]
(Math.random() > .5 ? 1 : 0)

console.log(num) //Output: 3

Did you catch it?

In our first example we were accidentally performing a function call on array[idx] which is a number and not a function, which is obviously wrong.
But when we add a semicolon at the end of the statement: const num = array[idx] the statement ends and the next line is treated as a new statement and not a function call.

const array = [1, 2, 3, 4, 5, 6]
const idx = 2
const num = array[idx]; //the semicolon ends the statement
//So the next line is treated as a new statement and not a function call
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd")

Thank you for reading!

If you enjoyed this article, please consider sharing it with others.
You can support me on Buy Me a Coffee.
If you have any feedback or suggestions, feel free to reach out to me on Twitter.

I forgot about el.outerHTML so I made this

Shuvo — Mon, 07 Feb 2022 05:02:53 +0000

This morning I needed to convert a DOM element into a sting. And at the time I forgot about the el.outerHTML method. And I know the el.innerHTML will not include in element itself. It will only give inner HTML. So after doing a quick Google I was remined about the outerHTML method. And my issue was solved!

But this got me thinking how could I do it if there was no innerHTML or outerHTML method.
And thus htmlToString was born.

0shuvo0 / htmlToString

I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

htmlToString

Convert html/DOM element to string

Works with rendered and virtual DOM

Installation

npm install htmltostring

Or using CDN

<script src="https://cdn.jsdelivr.net/npm/htmltostring@1.0.6/htmlToString.min.js"></script>

Usage

//you don't have to import if you're using CDN
import htmlToString from 'htmltostring'

console.log(htmlToString('.container'))
// or 
// const container = document.querySelector('.container')
// console.log(htmlToString(container))

Example Output

<div class="container">
    <h1>Hello World</h1>
</div>

View on GitHub

And it was very simple to do using recursion.

There was just three main question.

What's the tag name of the element
How to get all the attributes present on a HTML element
Check if a tag is self closing tag or not

And here are the answers

What's the tag name of the element

You can easily get the tag name of the element like this

let tagName = el.tagName.toLowerCase()

How to get all the attributes present on a HTML element

el.attributes returns a list of attribute present on the element.

[...el.attributes].map(e => `${e.name}="${e.value}"`).join(" ")

//example outcome
//'class="main" type="text"'

Check if a tag is self closing tag or not

First we can create an array or self closing tags and then check if tag name is present in the array

const selfClosingTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']
if(selfClosingTags.includes(tagName)){
    console.log("Self closing tag")
}

And with all the questions answered the function was very easy to implement.
You can see the full code here

Found it useless, I mean helpful? By me a Coffee ☕

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Support me on Patreon

Let's create an Add Tags input with REACT JS

Shuvo — Mon, 17 Jan 2022 03:57:25 +0000

In this article I will show you guys how you can create this multiple tags input using React.JS and a bit of CSS

Lets create a new react js project by running npx create-react-app myapp
Now to simplify things I am goin to delete all the files inside src folder except for App.js and index.js and create a style.css file. So our folder structure should look like this
Great now let's also delete all the unnecessary codes from index.js and App.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import "./style.css";
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// src/App.js
function App() {
  return (
    <div className="App">
      <h2>Enter Some Tags ...</h2>
    </div>
  );
}

export default App;

And I am also goin to add these CSS styles in our src/index.js

*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.tags-input-container{
    border: 2px solid #000;
    padding: .5em;
    border-radius: 3px;
    width: min(80vw, 600px);
    margin-top: 1em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5em;
}

.tag-item{
    background-color: rgb(218, 216, 216);
    display: inline-block;
    padding: .5em .75em;
    border-radius: 20px;
}
.tag-item .close{
    height: 20px;
    width: 20px;
    background-color: rgb(48, 48, 48);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: .5em;
    font-size: 18px;
    cursor: pointer;
}

.tags-input{
    flex-grow: 1;
    padding: .5em 0;
    border: none;
    outline: none;
}

If you want better explanation of the CSS you can watch this video of mine.

Okay now if we were to start our app by running npm start it should look like this

Alright now lets create a folder inside src folder named components inside that we are going to create a component file called TagsInput.js

// src/components/TagsInput.js
function TagsInput(){
    return (
        <div className="tags-input-container">
            <div className="tag-item">{/* One hardcoded tag for test */}
                <span className="text">hello</span>
                <span className="close">&times;</span>
            </div>
            <input type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

Now we can import and use in our App.js

// src/App.js
import TagsInput from "./components/TagsInput"

function App() {
  return (
    <div className="App">
      <h2>Enter Some Tags ...</h2>
      <TagsInput />
    </div>
  );
}

export default App;

Great, but no instead of having a hardcoded tag like this, we want an array and we should loop over the array and show a tag for each element. So lets use useState to do that

// src/components/TagsInput.js
import { useState } from 'react'

function TagsInput(){
    const [tags, setTags] = useState([
        "HTML", "CSS", "JavaScript"
    ])
    return (
        <div className="tags-input-container">
            { tags.map((tag, index) => (
                <div className="tag-item" key={index}>
                    <span className="text">{tag}</span>
                    <span className="close">&times;</span>
                </div>
            )) }
            <input type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

Okay now by default our array should be empty and when we type something in our input and press Enter a new item should be added in our tags state array. So lets create a function for that and add onKeyDown event listener to our input.

// src/components/TagsInput.js
import { useState } from 'react'

function TagsInput(){
    const [tags, setTags] = useState([])

    function handleKeyDown(e){
        // If user did not press enter key, return
        if(e.key !== 'Enter') return
        // Get the value of the input
        const value = e.target.value
        // If the value is empty, return
        if(!value.trim()) return
        // Add the value to the tags array
        setTags([...tags, value])
        // Clear the input
        e.target.value = ''
    }

    return (
        <div className="tags-input-container">
            { tags.map((tag, index) => (
                <div className="tag-item" key={index}>
                    <span className="text">{tag}</span>
                    <span className="close">&times;</span>
                </div>
            )) }
            <input onKeyDown={handleKeyDown} type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

And now finally when even user clicks on the
close(x) button of a tag the tag should be removed from our tags array. So lets create a function that take a index as its argument and removes the item at that index from our tags array. And add onClick listener to the close buttons.

// src/components/TagsInput.js
import { useState } from 'react'

function TagsInput(){
    const [tags, setTags] = useState([])

    function handleKeyDown(e){
        if(e.key !== 'Enter') return
        const value = e.target.value
        if(!value.trim()) return
        setTags([...tags, value])
        e.target.value = ''
    }

    function removeTag(index){
        setTags(tags.filter((el, i) => i !== index))
    }

    return (
        <div className="tags-input-container">
            { tags.map((tag, index) => (
                <div className="tag-item" key={index}>
                    <span className="text">{tag}</span>
                    <span className="close" onClick={() => removeTag(index)}>&times;</span>
                </div>
            )) }
            <input onKeyDown={handleKeyDown} type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

And that's all we have successfully create a tags input using React and Bit of JavaScript.

Found it helpful? By me a Coffee ☕

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Was it helpful? Support me on Patreon

Let's create a digital clock with CSS & JS

Shuvo — Wed, 08 Dec 2021 10:48:46 +0000

In this article I will show you how to create a working Digital Clock using CSS and JavaScript.

Lets start by creating a index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="clock">
        <span>
            <!-- this text will be updated using JS -->
            12:23:01 PM
        </span>
    </div>
    <script src="main.js"></script>
</body>
</html>

And now style it using style.css

*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(26, 25, 25);
}

.clock{
    padding: .75em;
    background-color: rgb(26, 25, 25);
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2em;
    position: relative;
    color: transparent;
}
.clock span{
    background: linear-gradient(135deg, rgb(255, 145, 0), rgb(255, 0, 221), blue);
    background-clip: text;
    -webkit-background-clip: text;
}
.clock::before, .clock::after{
    content: "";
    display: block;
    width: 108%;
    height: 120%;
    background-image: linear-gradient(135deg, rgb(255, 145, 0), rgb(255, 0, 221), blue);
    position: absolute;
    top: -10%;
    left: -4%;
    z-index: -1;
    border-radius: 5px;
}
.clock::after{
    filter: blur(5px);
}

Now if you open it up in a browser it should look like this

Now we just have to updated the text using JS.
In our main.js JavaScript file let's create a function that will get the current time.

const clock = document.querySelector('.clock span')

function updateClock() {
    // creating a new date object
    const now = new Date()

    // getting the current hour
    let hours = now.getHours()
    // getting the current minute
    let minutes = now.getMinutes()
    // getting the current second 
    let seconds = now.getSeconds()
    // getting the AM/PM 
    let am_pm = hours >= 12 ? 'PM' : 'AM'

    // converting 24 hours format to 12 hours
    if(hours > 12) hours -= 12

    // adding a zero in front of the times
    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds

    console.log(hours, minutes, seconds, am_pm);
}

updateClock()

Now instead of console logging them we simply have to update the text of our span and them call the updateClock function every seconds

const clock = document.querySelector('.clock span')

function updateClock() {
    const now = new Date()

    let hours = now.getHours()
    let minutes = now.getMinutes()
    let seconds = now.getSeconds()
    let am_pm = hours >= 12 ? 'PM' : 'AM'

    if(hours > 12) hours -= 12

    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds

    // displaying the time
    clock.innerHTML = `${hours}:${minutes}:${seconds} ${am_pm}`
}

// calling the function every second
setInterval(updateClock, 1000)

And its that easy.
Hey did I earned a coffee from you? Buy Me A Coffee

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

src="https://www.youtube.com/embed/qcjwkvezZRk"
style="width: 100%; aspect-ratio: 16 / 9;"
allowfullscreen
loading="lazy">

Was it helpful? Support me on Patreon

Box shadow vs. drop shadow in CSS

Shuvo — Sat, 04 Dec 2021 10:52:37 +0000

We all know that we can use box-shadow to add shadows to our HTML elements. eg

.box{
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

But did you know that we can achieve the same using drop-shadow filter. You simply have to pass the shadow value in the drop-shadow function

.box{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

Although in this example both box-shadow and drop-shadow does the same thing. But if we were to add box-shadow on a PNG image you will see the shape of box-shadow is rectangular/box.

img{
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

While if we add drop-shadow to a PNG, the shape of the shadow will be same as the shape of the visible area of the PNG.

img{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

src="https://www.youtube.com/embed/rfZQ-nlxlqo"
style="width: 100%; aspect-ratio: 16 / 9;"
allowfullscreen
loading="lazy">

Was it helpful? Support me on Patreon

Why you can't trust setTimeout

Shuvo — Fri, 03 Dec 2021 12:15:34 +0000

setTimeout in JavaScript takes time in millisecond so it must be very accurate right?

Well not necessarily. In this article let's explore why.

We all know that JavaScript is single-threaded. Meaning that it can only calculate one thing at a time.
But now imagine you have a setTimeout that is suppose to fire after 10000ms or 10s. So now JS have to keep track of the time passed. But in between that 10s the user might do some interaction with your page. Now JavaScript have to react to them as well.

But if JavaScript is single threaded how it's gonna keep track of passed time while reacting to user activity? That would be performing multiple calculation at the same time right?
Well not really because JavaScript is not keeping track of time. In fact JavaScript doesn't natively support setTimeout even. Then how are we able to use setTimeout? Well these special asynchronous functions like setTimeout, setInterval are provided to JS by the environment it is currently running on. For example in case of Chrome JavaScript runs on the V8 engine, and Fire Fox uses SpiderMonkey as its JavaScript engine etc.

So basically when you call setTimeout, JavaScript under the hood tells its environment/the engine its running on that once all the synchronous code is done executing set a timer and once the timer reaches the given time execute the function.
Now notice that I said "once all the synchronous code is done executing". And this is where the problem lives. The timer for setTimeout won't start until all the normal synchronous codes like dom manipulations, loops etc. aren't fully executed.
And those synchronous codes might take some time to execute.
Here's a dummy code that takes couple of milliseconds to execute.

//JS hack: +new Date() will give you current time in milliseconds 😉
let currentTime = +new Date()
//Dummy long loop
for(let i = 0; i < 999999999; i++){}
//Current time after the loop is over
let endTime = +new Date()
console.log("Ran after: " + (endTime - currentTime) + "ms")

And so if we had a setTimeout out in our code that is suppose to run after lets say 50ms, it might run a few milliseconds late

let currentTime = +new Date()
setTimeout(function(){
    let endTime = +new Date()
    console.log("Ran after: " + (endTime - currentTime) + "ms")
}, 50)
for(let i = 0; i < 99999999; i++){

}

Conclusion

Although setTimeout is fine to use most of the time, but for very time sensitive task it might not be the ideal choice

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Was it helpful? Support me on Patreon

CSS Text Drawing Animation with SVG

Shuvo — Thu, 02 Dec 2021 11:25:03 +0000

In this article I will show you how you can create this SVG text drawing animation using pure CSS in 5 easy steps.

Step 1: creating the SVG

First we need to create the SVG you want to animate. You can use any tool to create your SVG.

You can follow this tutorial to learn how to create SVG using Figma.

After you're done. Copy the SVG code. In my case the SVG code is this(you can just use this code if you want)

<svg width="1037" height="442" viewBox="0 0 1037 442" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1037" height="442" fill="white"/>
<path d="M42 264.797C61.344 250.887 79.4883 235.193 97.5556 219.686C109.301 209.605 121.002 199.553 130.889 187.575C143.744 172 153.857 153.902 162.778 135.852C173.886 113.378 185.973 87.3855 187.833 61.9635C188.338 55.0653 187.883 48.0041 187.222 41.1302C186.526 33.8921 183.72 41.0593 182.556 44.1302C171.997 71.9672 166.847 102.846 162.111 132.13C157.846 158.505 160 186.207 160 212.852C160 245.797 160 278.741 160 311.686C160 320.76 160 329.834 160 338.908C160 340.729 160.465 343.419 159.944 345.241C156.734 356.478 161.691 321.732 165.167 310.575C173.735 283.065 185.683 256.347 197.778 230.241C210.874 201.974 227.611 169.297 253.444 150.352C258.353 146.753 265.084 151.536 268.389 155.408C278.404 167.14 280.676 180.213 283 195.019C287.029 220.688 287 245.875 287 271.797C287 287.272 287.492 302.888 293 317.575C295.675 324.707 304.136 324.139 310.667 325.464C322.833 327.931 334.891 330.267 347.333 330.686C357.56 331.029 370.452 332.241 380.222 328.519C390.586 324.571 397.662 311.241 405 303.352C412.112 295.706 420.755 290.383 429.444 284.797C452.158 270.196 477.026 258.401 493.333 235.908C496.177 231.986 500 227.041 500 222.019C500 214.815 500 207.612 500 200.408C500 190.355 498.79 179.096 489 174.019C476.982 167.787 456.264 165.332 443.889 171.519C430.592 178.167 420.369 190.553 412.889 203.019C400.474 223.711 386.551 247.605 381.444 271.352C378.695 284.137 379.463 298.755 380.056 311.797C380.52 322.02 387.15 333.384 395 339.797C402.702 346.089 411.308 350.824 420.444 354.797C429.12 358.569 438.285 360.974 447.444 363.241C456.168 365.401 466.889 368.337 475.944 366.464C487.625 364.047 499.586 349.654 508.278 342.019C538.04 315.877 561.749 281.452 582.111 247.797C599.225 219.511 616.595 189.964 627.389 158.575C633.058 142.09 635.069 124.58 635.778 107.241C636.059 100.354 636.571 93.0261 635.944 86.1302C635.594 82.276 626.156 92.8882 625.778 93.3524C604.007 120.04 592.997 157.077 586.667 190.352C583.198 208.584 583 226.866 583 245.352C583 265.624 584.039 284.934 587.944 304.852C589.821 314.423 590.617 329.777 597.111 338.075C599.388 340.984 603.904 339.257 606.444 337.686C612.484 333.95 617.801 328.463 623.056 323.797C631.922 315.922 640.874 308.108 649.444 299.908C684.722 266.154 709.344 225.286 733.778 183.463C744.405 165.273 755.478 147.221 764.778 128.297C772.458 112.668 778.511 96.1667 784.722 79.9079C784.928 79.3687 790.395 66.6955 787.444 65.8524C785.357 65.2559 783.947 66.7968 782 66.7968C780.04 66.7968 778.726 67.1631 777.389 68.7968C769.717 78.1732 766.265 93.7933 763.056 105.186C758.14 122.634 754.683 140.55 752 158.463C748.614 181.078 744.368 203.688 742.222 226.463C740.047 249.549 740 272.743 740 295.908C740 310.274 739.353 324.981 741.444 339.241C741.872 342.156 742.601 352.215 747.167 352.519C752.893 352.901 759.833 346.146 764.722 343.852C785.101 334.292 806.695 327.829 826.611 317.13C863.592 297.264 892.372 262.908 915.778 228.797C931.392 206.041 942.311 181.434 943.778 153.575C944.254 144.523 944 135.413 944 126.352C944 118.711 944.523 111.192 938.833 105.352C928.756 95.0101 908.308 93.697 895.222 97.6857C869.128 105.64 853.782 137.797 845.444 161.352C839.564 177.966 835.35 194.735 832 212.019C827.894 233.205 822.886 254.254 819.222 275.519C815.081 299.558 813.28 324.082 814.667 348.464C815.356 360.573 815.804 379.188 824.444 389.13C832.642 398.563 852.799 392.885 862.667 390.797C875.332 388.117 888.324 386.22 900.278 381.019C916.167 374.105 932.547 361.482 943.167 347.797C953.988 333.851 960.976 316.371 967.222 300.019C972.309 286.702 976.905 273.383 979.333 259.297C981.636 245.943 981.954 232.536 982 219.019C982.049 204.572 982.373 190.1 980 175.797C977.224 159.063 969.811 140.819 954.278 132.241C940.163 124.447 925.249 117.88 910 112.797" stroke="url(#paint0_linear_2_2)" stroke-width="12" stroke-miterlimit="3.99933" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_2_2" x1="186" y1="37.9999" x2="975" y2="358" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF8A00"/>
<stop offset="1" stop-color="#EB00FF"/>
</linearGradient>
</defs>
</svg>

Step 2: The HTML

Create a index.html and paste the the SVG codes. Also add a id on the SVG so we can target it in CSS. I'm giving it an id of text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <svg id="text" width="1037" height="442" viewBox="0 0 1037 442" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="1037" height="442" fill="white"/>
    <path d="M42 264.797C61.344 250.887 79.4883 235.193 97.5556 219.686C109.301 209.605 121.002 199.553 130.889 187.575C143.744 172 153.857 153.902 162.778 135.852C173.886 113.378 185.973 87.3855 187.833 61.9635C188.338 55.0653 187.883 48.0041 187.222 41.1302C186.526 33.8921 183.72 41.0593 182.556 44.1302C171.997 71.9672 166.847 102.846 162.111 132.13C157.846 158.505 160 186.207 160 212.852C160 245.797 160 278.741 160 311.686C160 320.76 160 329.834 160 338.908C160 340.729 160.465 343.419 159.944 345.241C156.734 356.478 161.691 321.732 165.167 310.575C173.735 283.065 185.683 256.347 197.778 230.241C210.874 201.974 227.611 169.297 253.444 150.352C258.353 146.753 265.084 151.536 268.389 155.408C278.404 167.14 280.676 180.213 283 195.019C287.029 220.688 287 245.875 287 271.797C287 287.272 287.492 302.888 293 317.575C295.675 324.707 304.136 324.139 310.667 325.464C322.833 327.931 334.891 330.267 347.333 330.686C357.56 331.029 370.452 332.241 380.222 328.519C390.586 324.571 397.662 311.241 405 303.352C412.112 295.706 420.755 290.383 429.444 284.797C452.158 270.196 477.026 258.401 493.333 235.908C496.177 231.986 500 227.041 500 222.019C500 214.815 500 207.612 500 200.408C500 190.355 498.79 179.096 489 174.019C476.982 167.787 456.264 165.332 443.889 171.519C430.592 178.167 420.369 190.553 412.889 203.019C400.474 223.711 386.551 247.605 381.444 271.352C378.695 284.137 379.463 298.755 380.056 311.797C380.52 322.02 387.15 333.384 395 339.797C402.702 346.089 411.308 350.824 420.444 354.797C429.12 358.569 438.285 360.974 447.444 363.241C456.168 365.401 466.889 368.337 475.944 366.464C487.625 364.047 499.586 349.654 508.278 342.019C538.04 315.877 561.749 281.452 582.111 247.797C599.225 219.511 616.595 189.964 627.389 158.575C633.058 142.09 635.069 124.58 635.778 107.241C636.059 100.354 636.571 93.0261 635.944 86.1302C635.594 82.276 626.156 92.8882 625.778 93.3524C604.007 120.04 592.997 157.077 586.667 190.352C583.198 208.584 583 226.866 583 245.352C583 265.624 584.039 284.934 587.944 304.852C589.821 314.423 590.617 329.777 597.111 338.075C599.388 340.984 603.904 339.257 606.444 337.686C612.484 333.95 617.801 328.463 623.056 323.797C631.922 315.922 640.874 308.108 649.444 299.908C684.722 266.154 709.344 225.286 733.778 183.463C744.405 165.273 755.478 147.221 764.778 128.297C772.458 112.668 778.511 96.1667 784.722 79.9079C784.928 79.3687 790.395 66.6955 787.444 65.8524C785.357 65.2559 783.947 66.7968 782 66.7968C780.04 66.7968 778.726 67.1631 777.389 68.7968C769.717 78.1732 766.265 93.7933 763.056 105.186C758.14 122.634 754.683 140.55 752 158.463C748.614 181.078 744.368 203.688 742.222 226.463C740.047 249.549 740 272.743 740 295.908C740 310.274 739.353 324.981 741.444 339.241C741.872 342.156 742.601 352.215 747.167 352.519C752.893 352.901 759.833 346.146 764.722 343.852C785.101 334.292 806.695 327.829 826.611 317.13C863.592 297.264 892.372 262.908 915.778 228.797C931.392 206.041 942.311 181.434 943.778 153.575C944.254 144.523 944 135.413 944 126.352C944 118.711 944.523 111.192 938.833 105.352C928.756 95.0101 908.308 93.697 895.222 97.6857C869.128 105.64 853.782 137.797 845.444 161.352C839.564 177.966 835.35 194.735 832 212.019C827.894 233.205 822.886 254.254 819.222 275.519C815.081 299.558 813.28 324.082 814.667 348.464C815.356 360.573 815.804 379.188 824.444 389.13C832.642 398.563 852.799 392.885 862.667 390.797C875.332 388.117 888.324 386.22 900.278 381.019C916.167 374.105 932.547 361.482 943.167 347.797C953.988 333.851 960.976 316.371 967.222 300.019C972.309 286.702 976.905 273.383 979.333 259.297C981.636 245.943 981.954 232.536 982 219.019C982.049 204.572 982.373 190.1 980 175.797C977.224 159.063 969.811 140.819 954.278 132.241C940.163 124.447 925.249 117.88 910 112.797" stroke="url(#paint0_linear_2_2)" stroke-width="12" stroke-miterlimit="3.99933" stroke-linecap="round" stroke-linejoin="round"/>
    <defs>
    <linearGradient id="paint0_linear_2_2" x1="186" y1="37.9999" x2="975" y2="358" gradientUnits="userSpaceOnUse">
    <stop stop-color="#FF8A00"/>
    <stop offset="1" stop-color="#EB00FF"/>
    </linearGradient>
    </defs>
    </svg>
</body>
</html>

Step 3: Basic styles

Now in our style.css lets center the SVG and change its height.

html, body{
    height: 100vh;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

#text{
    height: 40vw;
    stroke-dasharray: 4004;
}

Okay so now if we open it up in your browser it should look something like this.

Step 4: Getting stroke-dasharray of svg

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape. So using this we can define in how many dashes/lines our SVGs path should contain. In our case we only one one path/line.
Okay to get the stroke-dasharray of our SVG we can simply run this JavaScript code in the console.

document.querySelector("#text path").getTotalLength()

So in my case it's 4004(we don't need the decimal points)
Okay so add it in our CSS

html, body{
    height: 100vh;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

#text{
    height: 40vw;
    stroke-dasharray: 4004;
}

Now we can use the stroke-dashoffset to offset our line/path
if we set stroke-dashoffset to 0

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    stroke-dashoffset: 0;
}

You will se noting happens. But if we set if to a big number like 300

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    stroke-dashoffset: 300;
}

you will see a small part of our SVG is not visible anymore. And if we set stroke-dashoffset to same as stroke-dasharray

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    stroke-dashoffset: 4004;
}

you will notice the SVG is not visible anymore. That is because Now the entire stroke-dasharray is offset/pushed away.

Step 5: The animation

So with this knowledge in mind we can simply animate our stroke-dashoffset from 0 to the value of our stroke-dasharray to get our desired drawing animation.

html, body{
    height: 100vh;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    animation: 3s fillSvg linear;
}

@keyframes fillSvg{
    0%{
        stroke-dashoffset: 4004;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

And just like that we have successfully created text drawing animating using CSS and SVG

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

src="https://www.youtube.com/embed/qhOZoJPMg6w"
style="width: 100%; aspect-ratio: 16 / 9;"
allowfullscreen
loading="lazy">

DEV Community: Shuvo

Why Traditional Tutorials Don't Work for Learning Git

The Problem with Traditional Git Tutorials

Why This Approach Fails

1. Git is Conceptual, Not Just Commands

2. No Muscle Memory

3. No Real Context

Traditional Learning vs Effective Learning

A Better Way to Learn Git

Stop Watching, Start Practicing

Frequently Asked Questions

Learn Git Basics in 5 Minutes (Quick Guide)

What is Git?

3 Core Git Concepts

Repository (Repo)

Commit

Branch

Essential Git Commands

Basic Git Workflow

Important: Reading Isn't Enough

Practice Git in Minutes

Frequently Asked Questions

Git Commands Senior Developers Actually Use

What Makes These Commands “Senior-Level”?

1. git status

2. git log --oneline --graph --decorate

3. git checkout -b feature-name

4. git merge

5. git rebase

6. git stash

7. git reset

8. git restore

9. git pull --rebase

10. git diff

Practice These Commands Like a Pro

10 Git Mistakes Beginners Make (And How to Avoid Them)

Why Beginners Struggle with Git

10 Common Git Mistakes

1. Trying to Memorize Commands

2. Not Practicing Enough

3. Ignoring Branching

4. Fear of Breaking Things

5. Not Understanding Commits

6. Skipping Git Fundamentals

7. Confusion Between Git and GitHub

8. Poor Commit Messages

9. Not Learning How to Undo Changes

10. Avoiding Real Workflows

The Real Secret to Learning Git

Learn Git Without These Mistakes

Functional tabs with only CSS (No JavaScript)

Basic setup:

Highlight the active tab:

Final code:

Thank you for reading!

When semicolon isn't optional in JavaScript

Without semicolon:

With semicolon:

So WTF?

Did you catch it?

Thank you for reading!

I forgot about el.outerHTML so I made this

0shuvo0 / htmlToString

I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

htmlToString

Convert html/DOM element to string

Works with rendered and virtual DOM

Installation

Or using CDN

Usage

Example Output

There was just three main question.

And here are the answers

What's the tag name of the element

How to get all the attributes present on a HTML element

Check if a tag is self closing tag or not

ShuvoFollow

Support me on Patreon

Let's create an Add Tags input with REACT JS

ShuvoFollow

1. `git status`

2. `git log --oneline --graph --decorate`

3. `git checkout -b feature-name`

4. `git merge`

5. `git rebase`

6. `git stash`

7. `git reset`

8. `git restore`

9. `git pull --rebase`

10. `git diff`