DEV Community: Midhul P

I just built an interactive Git playground to practice Git commands in your browser

Midhul P — Mon, 30 Mar 2026 11:34:47 +0000

I just built an interactive Git playground to practice real Git commands right in your browser — no setup, just hands-on learning.

It’s task-based, visual, and built for developers who prefer learning by doing.

👉 https://developwithmi.com/labs/git/

I’ve used Git for years, but I still find myself pausing sometimes:

“Wait… what does this command actually do again?”

Not because Git is too hard — but because most of us learned it passively.

We watched tutorials.
We followed along.
But we didn’t really use it enough to feel confident.

So I built something simple.

Instead of explanations, you get small tasks.

You type real commands into a terminal-like interface, and the repository updates instantly. There’s also a visual graph, so you can actually see what’s happening as you go.

No theory overload. Just practice.

You’ll naturally go through things like:

initializing a repo
committing changes
working with branches
inspecting differences
fixing mistakes

Not as a course, but as a series of small, practical steps.

This is still early, and I’m improving it as I go.

If you try it and have suggestions — or if something feels confusing — I’d really like to hear that.

And if you find any bugs, please let me know as well.

If you’re trying to get more comfortable with Git, this might help.

Or at least save you a few Google searches 🙂
https://developwithmi.com/labs/git/

Angular Back Button Made Easy with ngx-navigate-back

Midhul P — Mon, 24 Feb 2025 05:34:50 +0000

While browsers provide a native back button, managing navigation history within Angular applications can be tricky, ngx-navigate-back simplifies this by providing a lightweight solution to track navigation history and implement a “back” functionality — just like the browser’s back button, but within your Angular app.

What is ngx-navigate-back?

ngx-navigate-back is a librray which is easy to implement a “back” functionality in your Angular app, allowing users to return to the previous page seamlessly. Unlike traditional browser navigation, this library records navigation history within your app, giving you full control over the navigation experience.

Why Use ngx-navigate-back?

Simple Integration — Easily integrate into any Angular project.
Navigation History Tracking — Automatically records and retrieves navigation history.
Seamless Back Navigation — Navigate back with a single function call.
Retrieve Last Visited URL — Get the last visited URL for display or custom logic.

How to Use ngx-navigate-back

Install the Package
Install ngx-navigate-back using npm:

npm install ngx-navigate-back

Import the Service
Import NgxNavigateBackService in your Angular component:

import { NgxNavigateBackService } from 'ngx-navigate-back';

Inject the Service & Start Recording History
In your component constructor, inject the service and start tracking navigation history:

constructor(public navigation: NgxNavigateBackService) {
  this.navigation.recordUrlHistory();
}

Implement the Back Button
Use the navigateBack() function to navigate back and getLastUrl() to retrieve the last visited URL:

<button (click)="navigation.navigateBack()">Back to Previous Page {{ navigation.getLastUrl() }}</button>

Get Started with ngx-navigate-back

Improve user experience in your Angular app with ngx-navigate-back.

Get started now! Install the package and explore its features:
🔗 ngx-navigate-back on GitHub

Let me know if you need any modifications or additional details! 🚀

If you found this helpful, let’s connect!
🔹 Follow me on GitHub for more open-source projects: GitHub
🔹 Follow me on LinkedIn to stay updated: LinkedIn

This article is Originally posted on Medium: Read here

Your Angular App Needs a Smarter Back Button — Here’s How | by Midhul | Developwithmi | Feb, 2025 | Medium

Midhul ・ Feb 21, 2025 ・
Medium

The Most Elegant Implementation of Light & Dark Mode in Angular! 🌗

Midhul P — Fri, 07 Feb 2025 06:43:26 +0000

Dark mode isn’t just a feature anymore—it’s a must-have. But are you implementing it the right way?

Most tutorials tell you to toggle a '.dark-theme' class on body, but that’s outdated. There’s a better approach! 🚀

🔥 Use the data-theme attribute on html with CSS variables!

Why? Because it’s:
✅ More performant – No unnecessary class toggling.
✅ Cleaner & scalable – Let CSS do the heavy lifting.
✅ Easier to manage – No messy DOM manipulation.

In my latest blog, I break down the most efficient way to add a theme toggle in Angular—with smooth transitions and saved preferences using localStorage.

💡 Curious? Read the full article for FREE on Medium:

The Most Elegant Implementation of Light & Dark Mode in Angular! | Developwithmi | Developwithmi

Midhul ・ Feb 7, 2025 ・
Medium

Let’s make theme switching seamless! Let me know your thoughts. 🚀

How to Add a Dark Mode Toggle in Angular

Midhul P — Thu, 06 Feb 2025 07:48:04 +0000

Hey folks! I recently wrote a blog on how to implement a Dark Mode Toggle in Angular over on Medium. If you're looking to add a sleek dark mode option to your Angular apps, check it out!

Read it for free on Medium

Implementing Dark Mode Toggle in Angular | by Midhul | Developwithmi | Feb, 2025 | Medium

Midhul ・ Feb 3, 2025 ・
Medium

8 Essential JavaScript Array Methods

Midhul P — Fri, 08 Nov 2024 05:12:55 +0000

JavaScript arrays come with powerful one-liners that make coding simpler and cleaner. Here’s a quick guide to mastering some key array methods:

Filtering an Array: .filter() creates a new array with elements passing a test.

const oddNumbers = [1, 2, 3, 4, 5, 6].filter(num => num % 2 !== 0); // [1, 3, 5]

Mapping an Array: .map() applies a function to every element.

const doubled = [1, 2, 3, 4, 5].map(num => num * 2); // [2, 4, 6, 8, 10]

Reducing an Array: .reduce() processes all elements to produce a single result.

const sum = [1, 2, 3, 4, 5].reduce((total, num) => total + num, 0); // 15

*Finding an Element: *.find() returns the first element meeting a condition.

const firstEven = [1, 2, 3, 4, 5].find(num => num % 2 === 0); // 2

Checking Conditions: .some() and .every() check if any or all elements pass a test.

const hasEven = [1, 3, 5, 7, 8].some(num => num % 2 === 0); // true

Flattening an Array: .flat() turns nested arrays into a single-level array.

const flattened = [1, [2, 3], [4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6]

Removing Duplicates: Using Set removes duplicates.

const uniqueNumbers = [...new Set([1, 2, 2, 3, 4, 4, 5])]; // [1, 2, 3, 4, 5]

Sorting an Array: .sort() arranges numbers.

const sortedNumbers = [5, 2, 9, 1, 5, 6].sort((a, b) => a - b); // [1, 2, 5, 5, 6, 9]

These one-liners can significantly streamline your code. To dive deeper, check out my JavaScript cheatsheet and more

Handling Async Errors in JavaScript: A Quick Guide

Midhul P — Wed, 06 Nov 2024 03:38:46 +0000

Async errors in JavaScript arise when operations like network requests or file I/O fail unexpectedly. Without proper handling, these errors can lead to app crashes or erratic behavior. Here’s a brief guide on some effective ways to manage async errors in your code.

1. Try-Catch with Async/Await

For async functions, wrapping code in a try-catch block lets you handle errors gracefully. Here’s how:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data); // Process data
  } catch (error) {
    console.error('Fetch error:', error); // Handle error
  }
}

2. Handling Promise Rejections

If you’re working with promises directly, the .catch() method allows you to handle rejections easily:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Promise rejection:', error));

3. Global Error Handling

To catch any unhandled rejections across your application, use the unhandledrejection event:

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
});

4. Logging and Reporting Errors

While logging errors to the console works for development, production apps benefit from dedicated error-tracking tools like Sentry or LogRocket.

For a more in-depth look at async error handling, check out my full article on Medium: How to Handle JavaScript Async Errors : A Practical Guide

A Beginner's Guide to JavaScript Closures

Midhul P — Tue, 05 Nov 2024 05:04:13 +0000

In JavaScript, a closure is a function that retains access to variables from its parent scope, even after the parent function has completed. This unique behaviour allows functions to "remember" their context, making closures invaluable for managing private data and structuring complex code.

Why Use Closures?

Closures are essential for creating private variables and encapsulated logic. By wrapping functionality in a closure, you can protect variables from external interference, keeping code organised and secure.

Example of a Closure: Simple Counter

Here's a common use of closures, where we build a counter function that retains a private count variable:

function makeCounter() {
    let count = 0;

    return function() {
        count++;
        console.log(count);
    };
}

let counter = makeCounter();
counter(); // Logs: 1
counter(); // Logs: 2
counter(); // Logs: 3

Each time counter() is called, it accesses and increments the private count variable, which is only accessible inside makeCounter.

Real-World Example: Login Manager

Closures are also useful for more complex scenarios, like managing user login states. Here’s a login manager with private state control:

function createLoginManager() {
    let isLoggedIn = false;

    return {
        login: function() { isLoggedIn = true; },
        logout: function() { isLoggedIn = false; },
        isLoggedIn: function() { return isLoggedIn; }
    };
}

let loginManager = createLoginManager();
console.log(loginManager.isLoggedIn()); // false
loginManager.login();
console.log(loginManager.isLoggedIn()); // true

The isLoggedIn variable is encapsulated within createLoginManager, accessible only through the returned methods. This approach keeps login information secure and well-organized.

Conclusion

Closures might seem tricky at first, but they’re a powerful tool for organizing JavaScript code, making it both secure and maintainable.

To explore more about JavaScript closures with additional examples and insights, check out my full article on Medium: What is JavaScript Closures? A Practical Guide.

Happy coding!

Are You a Front-End Developer Struggling with Self-Doubt?

Midhul P — Fri, 25 Oct 2024 05:22:11 +0000

If you’ve ever questioned your own abilities or felt like an imposter in the world of front-end development, know that you’re not alone. Imposter syndrome affects developers at all levels, often holding them back from feeling fulfilled in their roles.

Here are a few common signs to look out for:

Discounting Your Achievements - Downplaying your hard work or chalking it up to “just luck.”
Comparing to Others - Feeling inadequate when you see others who seem more skilled.
Perfectionism - Setting impossible standards that lead to stress and procrastination.

Overcoming these feelings involves reframing your mindset and embracing growth over perfection. Building a support network and celebrating small wins can also make a huge difference. With the right tools and a focus on learning, you can silence your inner critic and thrive in your development career.

To learn more about recognising and tackling imposter syndrome, read my full article on Medium, where I dive into practical strategies for front-end developers to overcome self-doubt and unlock their potential.

Imposter syndrome,How to Overcome Self-Doubt as a Front-End Developer

How to use JavaScript Classes in real projects

Midhul P — Thu, 24 Oct 2024 06:57:46 +0000

JavaScript classes are a great way to organize code. Let’s see how you can use them in a simple To-Do List app.

Declaring a Class

We define a Task class to manage tasks:

class Task {
  constructor(description, dueDate) {
    this.description = description;
    this.dueDate = dueDate;
    this.isDone = false;
  }

  markAsDone() {
    this.isDone = true;
  }
}

Creating Instances

You can create tasks like this:

const task1 = new Task('Write blog post', '2023-11-15');
task1.markAsDone();
console.log(task1); 
// Task { description: 'Write blog post', dueDate: '2023-11-15', isDone: true }

Inheritance

Extend the Task class for specific types of tasks:

class ShoppingTask extends Task {
  constructor(description, dueDate, items) {
    super(description, dueDate);
    this.items = items;
  }
}

const shoppingTask = new ShoppingTask('Buy groceries', '2023-11-20', ['Apples', 'Milk']);
console.log(shoppingTask);

Static Methods & Getters/Setters

You can add static methods for sorting tasks and use getters and setters to manage data validation.

For a more detailed guide, check out my full post on Medium: How to Use JavaScript Classes in Real Projects.

How to Organise JavaScript Code with Modules: A Practical Guide

Midhul P — Wed, 23 Oct 2024 08:35:19 +0000

JavaScript is a powerful programming language that enables developers to build dynamic and interactive web applications. One of its essential features is modularity, allowing code organization for better reuse and maintainability.

What are Modules in JavaScript?

Modules are self-contained pieces of code that encapsulate specific functionalities, variables, and methods. They enable developers to break down applications into manageable parts, making maintenance, testing, and debugging easier.

With ES6, JavaScript introduced the import and export keywords for module creation, moving away from older methods like RequireJS and CommonJS.

Creating Modules

To create a module, define the functionality you want to encapsulate. For example, consider a module for calculating the area of a rectangle:

// rectangle.js
export function calculateArea(width, height) {
  return width * height;
}

Using Modules

To use the calculateArea function in another file, import the module

import { calculateArea } from './rectangle.js';
console.log(calculateArea(10, 5)); // Outputs: 50

Benefits of Modules

Encapsulation: Keeps code organized and manageable.
Reusability: Reduces code duplication across the application.
Performance: Loads only necessary code, improving application speed.
Testing: Facilitates easier isolation for testing.

To see how we can use modules to manage different functionalities in a practical context:

🔗 Read the full blog here!

You'll find detailed implementations of modules for:

Searching for books
Displaying book details
Managing a shopping cart

I’d love to hear your feedback and thoughts!