DEV Community: Abhay Bhagat

Git Branching

Abhay Bhagat — Mon, 16 Jun 2025 07:32:49 +0000

🌿 Git Branching Simplified: A Developer’s Guide

“Branching is the essence of collaboration in Git. Master it, and you master the workflow.”

Whether you're working solo or as part of a team, Git branching allows you to manage features, fix bugs, and experiment without disturbing your main codebase. Let’s dive deep into what Git branches are, how to use them, and best practices to follow.

📌 What is a Git Branch?

A branch in Git is simply a lightweight movable pointer to a commit. It allows you to diverge from the main code and work in isolation until you’re ready to merge.

Think of the main branch (main or master) as the stable highway, and branches as the side roads where you explore and build new features.

🚀 Why Use Branches?

🧪 Experiment with new features

🛠 Fix bugs without touching production code

🧑‍💻 Collaborate with teammates

🧹 Keep your main code clean and deployable

⚙️ Basic Branching Commands

Create a New Branch

git branch feature/login

Switch to the Branch

git checkout feature/login

or in modern Git

git switch feature/login

Create and Switch in One Step

git checkout -b feature/login

or

git switch -c feature/login

See All Branches

git branch

Merge a Branch into Main

git checkout main
git merge feature/login

Delete a Branch

git branch -d feature/login

🔄 A Simple Workflow

git checkout -b feature/add-user-auth

do your work and commit

git add .
git commit -m "Add user authentication"
git checkout main
git merge feature/add-user-auth
git branch -d feature/add-user-auth

🌟 Pro Tips

✅ Always pull the latest changes before creating a new branch.

📌 Use descriptive branch names like bug/fix-login or feature/signup-ui.

⛔ Don’t work directly on the main branch.

🧹 Clean up merged branches to keep the repo tidy.

🔄 Git Branching Model (Popular Workflows)

➤ Git Flow

main: production-ready code

develop: integration branch

feature/*: new features

release/*: pre-release

hotfix/*: emergency fixes

➤ GitHub Flow

Simple, ideal for continuous delivery

main + feature branches

Pull Requests (PR) for merging

✅ Final Thoughts

Git branches are your safety net and workspace. Mastering branching means smoother collaboration, less stress during merges, and more organized development.

Whether you’re fixing bugs, adding features, or just trying new ideas—branch it out.

@devsyncin

Getting Started with CSS

Abhay Bhagat — Fri, 13 Jun 2025 08:03:26 +0000

🧱 The Problem with

Browsers render file inputs differently, and most won’t let you change much about their appearance. You can’t easily control the button text, style the input directly, or make it match your theme out of the box.

So what's the workaround? Hide the default input and trigger it with a styled button or label.

✅ HTML Structure

📁 Choose a file

No file chosen

What’s going on here?

We hide the default file input with hidden.

The is styled to look like a button and is linked to the input via the for attribute.

element displays the selected file name using JavaScript.

🎨 CSS Styling

Here’s some CSS to make it look modern and clean:

.upload-container {
font-family: sans-serif;
text-align: center;
margin: 2rem;
}

.upload-label {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #4f46e5;
color: white;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease;
}

.upload-label:hover {
background-color: #4338ca;
}

.file-name {
margin-top: 1rem;
font-size: 0.9rem;
color: #555;
}

💡 Add a Touch of JavaScript

To display the selected file name, use this simple JS snippet:

const input = document.getElementById("file-upload");
const fileName = document.getElementById("file-name");

input.addEventListener("change", () => {
fileName.textContent = input.files.length
? input.files[0].name
: "No file chosen";
});

🧪 Demo in Action

Here’s what the result looks like:

👉 A stylish button
📎 A file name preview
💯 Pure HTML, CSS, and a dash of JS

🚀 Tips for Production

Add accept="image/*" to limit file types if needed.

You can enhance accessibility with ARIA attributes.

Consider drag-and-drop for a more advanced UX (save that for another post 😉).

@devsyncin

Getting started with HTML (HyperText Markup Language)

Abhay Bhagat — Fri, 13 Jun 2025 07:23:11 +0000

HTML

🌐 HTML

🧱 What is HTML?• HTML (HyperText Markup Language) is the standard language for creating web pages.• It structures content using elements and tags.

🏗️ Basic Structure of an HTML

Page<!DOCTYPE html><html>  <head>    <title>Page Title</title>  </head>  <body>    <h1>This is a Heading</h1>    <p>This is a paragraph.</p>  </body></html>

🖼️ Example: Image and Link

<a href="https://example.com">Visit Example</a> <img src="image.jpg" alt="Image description" width="300">

🧩 Forms

<form action="/submit" method="post"> <input type="text" name="username"> <input type="submit" value="Submit"> </form> 🎨 Inline Formatting Tags• <strong>: Bold text• <em>: Italic text• <u>: Underlined• <code>: Code snippet• <mark>: Highlighted

🧠 Best Practices

Always use <!DOCTYPE html> at the top.
Use semantic tags like , , , and .
Keep code readable and properly indented.
Close all tags unless self-closing (, , etc.) @devsyncin

Getting Started with Git

Abhay Bhagat — Thu, 12 Jun 2025 16:17:24 +0000

# Git and Github

🧠 Git & *GitHub*

📁 Git Basics

Git

is a version control system to track changes in code.

GitHub

is a remote hosting service for Git repositories.

🔧 Git Setup

git config --global user.name "Your Name" git config --global user.email "you@example.com"

📦 Initialize Repository

git init # Initialize a Git repo 
git clone <url> # Clone a repo from GitHub

📄 Basic Commands

git status # Check status
git add <file>    # Stage file
git add .         # Stage all changes
git commit -m "message"  # Commit staged changes
git log           # View commit history

🔁 Branching

git branch # List branches 
git branch <name> # Create new branch 
git checkout <name> # Switch branch 
git checkout -b <name> # Create + switch 
git merge <branch> # Merge into current

🌍 Remote Repos

git remote add origin <url> # Add remote 
git push -u origin main # Push initial branch 
git push # Push changes 
git pull # Pull changes 
git clone <url> # Clone remote repo

🚫 Ignoring Files

Create a .gitignore file:

node_modules/ 
.env 
*.log

🔄 Stashing

git stash # Save uncommitted changes 
git stash pop # Apply latest stash

🔍 Useful Commands

git diff # Show changes 
git show <commit> # Show details of a commit 
git reset --hard <commit> # Roll back to a commit (DANGER!)

✅ *GitHub Workflow (Typical)*

Fork repository
git clone the fork
Create a new branch
Make changes, commit
Push to GitHub
Open a Pull Request (PR)

📌 *Helpful Tips*

Always pull before pushing
Write clear commit messages
Use .gitignore to avoid committing sensitive files