DEV Community: Kaleem Elahi

🧠 2 Easy Ways to Rename a Git Commit Message (GUI or CLI)

Kaleem Elahi — Thu, 10 Jul 2025 12:06:34 +0000

Ever made a typo in your commit message 😅 or forgot to follow proper commit message standards (like I did)? Don’t worry — renaming commits is easier than you think!

✅ 1. Using Fork (Interactive Rebase – GUI method)

1️⃣ Open the repository in Fork
2️⃣ Right-click the commit you want to rename
3️⃣ Select Interactive Rebase > "Reword Message.."
This will open a dialog to edit the message and select rework instead of pick.
4️⃣ Save changes and push with --force if it was already pushed

✨ Super simple — perfect for visual thinkers, right?
Download: https://git-fork.com/

✅ 2. Using Git commands (Terminal)

🔄 To rename the most recent commit:

git commit --amend

🧹 To rename older commits (via rebase):

git rebase -i HEAD~5  # Change 5 to however many commits you want to edit

Replace pick with reword for the commits you want to rename
Then press: Esc → :wq → Enter to save and exit
Git will then prompt you to edit each commit message
After you're done:

git push --force

⚠️ Don’t forget the --force push — if you skip this, your branch may get out of sync or duplicate commits may appear.

💬 Have you tried the Fork method or the command line? Which one works better for you?

Git #GitTips #CommitMessages #ForkGit #CleanCode #100DaysOfCode #FrontendDev #DeveloperTools #Rebase

Frontend intern Interview Q/A

Kaleem Elahi — Fri, 17 Jan 2025 15:52:00 +0000

Here are some potential interview questions and answers to help you prepare for this Frontend Developer Intern (with Bootstrap) role based on the job description:

Tell us about yourself and your experience with frontend development.

Answer:
“I am a frontend developer with experience in creating responsive web designs using HTML, CSS, and Bootstrap. I have worked on various projects, including building user-friendly interfaces and converting design mockups into pixel-perfect web pages. I am passionate about improving user experiences and staying updated on the latest frontend trends. I also have hands-on experience in collaborating with teams and solving UI/UX issues effectively.”

What is Bootstrap, and why do you prefer using it?

Answer:
“Bootstrap is a popular frontend framework used for building responsive and mobile-first websites. I prefer using it because it provides pre-designed components like grids, buttons, and navigation, which save development time. It also ensures consistent design across different browsers and devices, making it ideal for responsive web development.”

How do you ensure a web page is responsive?

Answer:
“I ensure responsiveness by using a mobile-first approach, applying Bootstrap’s grid system, and using media queries to handle different screen sizes. I also test the page across various devices and browsers to confirm that the layout and functionality adapt seamlessly.”

How do you convert design mockups into functional web pages?

Answer:
“I start by analyzing the design mockup to understand the layout and components. Then, I structure the HTML and use CSS and Bootstrap for styling and responsiveness. Finally, I test the page to ensure pixel-perfect alignment with the mockup and verify its functionality on various devices.”

Can you explain the Bootstrap grid system?

Answer:
“The Bootstrap grid system uses a 12-column layout to create flexible and responsive designs. By defining rows and columns, I can control how content is arranged. For example, I use classes like col-, col-sm-, col-md-, etc., to adjust the layout for different screen sizes.”

How do you debug UI/UX issues?

Answer:
“I use browser developer tools to inspect elements, check for CSS conflicts, and test responsiveness. If there are UX issues, I collaborate with the design team to address user feedback and iterate on the design. Additionally, I test using tools like Lighthouse to identify performance and accessibility issues.”

What are media queries, and how do you use them?

Answer:
“Media queries are CSS rules that apply styles based on device characteristics like screen width or resolution. I use them to customize the layout for different devices. For example:

@media (max-width: 768px) {

.container {

flex-direction: column;

}

}


---

### **8. Describe your experience working in a team environment.**
**Answer:**  
"I have collaborated with design and backend teams on several projects. I prioritize communication and use tools like Git for version control to streamline teamwork. By discussing issues and sharing updates regularly, I ensure the project stays on track."

---

### **9. What tools or technologies do you use to optimize web pages?**
**Answer:**  
"I optimize web pages by:  
- Compressing images using tools like TinyPNG.  
- Minifying CSS and JavaScript files.  
- Using lazy loading for images.  
- Implementing caching strategies for better performance.  
- Testing with tools like Google PageSpeed Insights and Lighthouse."

---

### **10. Why should we hire you for this role?**
**Answer:**  
"I am a dedicated frontend developer with hands-on experience in Bootstrap and responsive design. My ability to convert design mockups into functional web pages, solve UI/UX issues, and collaborate effectively makes me a strong fit for this internship. I am eager to contribute to your platform and learn from this opportunity."


Here’s a mix of technical and behavioral interview questions with answers to help you prepare further:

Technical Questions

1. Explain the difference between relative, absolute, and fixed positioning in CSS.

Answer:
    • Relative: Positions the element relative to its normal position in the document flow.
    • Absolute: Positions the element relative to its nearest positioned (non-static) ancestor. If none, it uses the document body.
    • Fixed: Positions the element relative to the viewport and doesn’t move when the page is scrolled.

2. What are the differences between em, rem, and px in CSS?

Answer:
    • px: Defines an absolute unit of measurement.
    • em: Relative to the font size of its nearest parent element.
    • rem: Relative to the root element’s font size (usually <html>).

3. What are some common CSS frameworks apart from Bootstrap?

Answer:
“Some popular CSS frameworks include:
    • Tailwind CSS
    • Foundation
    • Bulma
    • Materialize
These frameworks simplify responsive design and provide reusable components.”

4. How do you implement a sticky navigation bar using CSS?

Answer:
“To make a navigation bar sticky, I use the position: sticky property with a top value. For example:

nav {  
  position: sticky;  
  top: 0;  
  background: white;  
  z-index: 1000;  
}

5. What are the advantages of using SVGs over PNG or JPG images?

Answer:

"SVGs are vector graphics, which means they scale without losing quality, unlike PNG or JPG. They are lightweight, support animations, and can be styled with CSS. However, they are best suited for icons and illustrations, not photographs."

6. What is the difference between inline, block, and inline-block elements?

Answer:

Inline: Does not start on a new line and only takes up as much width as necessary (e.g., <span>, <a>).
Block: Starts on a new line and takes up the full width available (e.g., <div>, <p>).
Inline-block: Combines characteristics of both: inline layout but allows setting width and height.

7. How would you improve a website’s performance?

Answer:

"I would:

Minimize HTTP requests by combining files.
Use Content Delivery Networks (CDNs).
Optimize images with modern formats like WebP.
Use code-splitting in JavaScript.
Implement lazy loading for non-critical assets."

8. What is the difference between `class` and `id` in HTML?

Answer:

Class: Can be reused across multiple elements and is prefixed with . in CSS.
ID: Must be unique within the document and is prefixed with #.

Behavioral Questions

1. How do you handle tight deadlines?

Answer:

"I prioritize tasks based on their urgency and importance. I communicate with the team to divide responsibilities effectively and focus on delivering high-quality results. I also ensure to maintain transparency about progress and challenges."

2. Can you describe a time when you solved a UI/UX problem?

Answer:

"In a recent project, the navigation bar wasn’t displaying properly on mobile devices. I debugged it and realized the issue was with a CSS media query. I updated the query to handle small screen widths and tested it on multiple devices, resolving the issue effectively."

3. How do you stay updated with the latest trends in frontend development?

Answer:

"I regularly read blogs like Smashing Magazine and CSS-Tricks, follow forums like Stack Overflow, and participate in communities on GitHub. I also experiment with new tools and frameworks to keep my skills sharp."

4. How do you handle feedback on your code?

Answer:

"I view feedback as an opportunity to learn and improve. I carefully review the suggestions, ask for clarification if needed, and implement the changes while ensuring I understand why the feedback was given."

5. Describe a challenging project and how you managed it.

Answer:

"In one project, I had to create a responsive dashboard within a week. I broke the tasks into smaller pieces, prioritized them, and used Bootstrap for quick styling. By staying focused and collaborating with the team, I delivered the dashboard on time and with great performance."

Why and What is Clean Code ?

Kaleem Elahi — Tue, 03 Dec 2024 08:21:38 +0000

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

Keep configurable data at high levels.
Prefer polymorphism to if/else or switch/case.
Separate multi-threading code.
Prevent over-configurability.
Use dependency injection.
Follow Law of Demeter. A class should know only its direct dependencies.

Understandability tips

Be consistent. If you do something a certain way, do all similar things in the same way.
Use explanatory variables.
Encapsulate boundary conditions. Boundary conditions are hard to keep track of. Put the processing for them in one place.
Prefer dedicated value objects to primitive type.
Avoid logical dependency. Don't write methods which works correctly depending on something else in the same class.
Avoid negative conditionals.

Names rules

Choose descriptive and unambiguous names.
Make meaningful distinction.
Use pronounceable names.
Use searchable names.
Replace magic numbers with named constants.
Avoid encodings. Don't append prefixes or type information.

Functions rules

Small.
Do one thing.
Use descriptive names.
Prefer fewer arguments.
Have no side effects.
Don't use flag arguments. Split method into several independent methods that can be called from the client without the flag.

Comments rules

Always try to explain yourself in code.
Don't be redundant.
Don't add obvious noise.
Don't use closing brace comments.
Don't comment out code. Just remove.
Use as explanation of intent.
Use as clarification of code.
Use as warning of consequences.

Source code structure

Separate concepts vertically.
Related code should appear vertically dense.
Declare variables close to their usage.
Dependent functions should be close.
Similar functions should be close.
Place functions in the downward direction.
Keep lines short.
Don't use horizontal alignment.
Use white space to associate related things and disassociate weakly related.
Don't break indentation.

Objects and data structures

Hide internal structure.
Prefer data structures.
Avoid hybrids structures (half object and half data).
Should be small.
Do one thing.
Small number of instance variables.
Base class should know nothing about their derivatives.
Better to have many functions than to pass some code into a function to select a behavior.
Prefer non-static methods to static methods.

Tests

One assert per test.
Readable.
Fast.
Independent.
Repeatable.

Code smells

Rigidity. The software is difficult to change. A small change causes a cascade of subsequent changes.
Fragility. The software breaks in many places due to a single change.
Immobility. You cannot reuse parts of the code in other projects because of involved risks and high effort.
Needless Complexity.
Needless Repetition.
Opacity. The code is hard to understand.

That's much i think, But there's more.
Do Read the full book.

Thanks for reading the Summary, Hope it helps.

Website:
https://kaleemelahi.co

Buy Me A CoFee:
https://buymeacoffee.com/kaleemelahi

Tailwind tip: Managing a long list of utility classes in a single line of code

Kaleem Elahi — Mon, 11 Nov 2024 08:34:06 +0000

Managing a long list of utility classes in a single line can become unwieldy.

Here is Tailwind's built-in feature @apply that can help make your code more readable and manageable:

Use @apply in Custom CSS

With Tailwind's @apply directive, you can create reusable CSS classes by grouping multiple Tailwind utilities. This helps reduce the number of classes in your HTML and keeps your components more organized.

Example:

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

You can then use this new .btn-primary class in your HTML instead of repeating the Tailwind utilities:

<button class="btn-primary">Primary Button</button>

If it helped you, you can support:
https://buymeacoffee.com/kaleemelahi

Follow for more:
Linkedin
GIthub

4 JavaScript Code Snippets to Solve Your Everyday Problems 👻

Kaleem Elahi — Thu, 17 Jun 2021 07:48:43 +0000

Let's start 😎

1) How To Get A Random Number In A Range of Values

const getRandomIntInRange = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;

getRandomIntInRange(2, 20) // 8

2) How To Create A Random String

const generateRandomString = (length) =>
Math.random().toString(20).substr(2,length);

generateRandomString(5) // 9d8c2

3) How To Set A Value If The Variable is null or Undefined


const foo = null ?? 'default string';
const baz = ?? 42;

foo; // default string
baz; // 0

4) How To Implement A Sleep Function


const sleep = (ms) => new Promise( (resolve) => setTimeout(resolve, ms));

(async() > {

console.log(new Date()) // ? Mon Jun 14 2021 01:35:25 GMT+0300

await sleep(3000);

console.log(new Date()) // ? Mon Jun 14 2021 01:35:28 GMT+0300
})()

.
.
.
.

Add comments if you get stuck or find any issue implementing it