DEV Community: Ahmed Murtaza

Nuxt Joins Vercel. What This Means for the Future of Web Frameworks

Ahmed Murtaza — Wed, 09 Jul 2025 08:08:45 +0000

In a major development in the JavaScript ecosystem, Nuxt.js the popular Vue-based framework, has officially joined Vercel, the creators behind Next.js, the dominant React-based framework. This strategic move brings the two leading meta frameworks, powered by Vue and React respectively under one roof.

A Quick Look at Nuxt.js and Next.js

Next.js has become the go to solution for server side rendering (SSR), static site generation (SSG), and hybrid apps in the React ecosystem. With a strong developer experience, built in routing, and first class support for performance, it's widely used in production by giants like Netflix, TikTok, Uber.. and yep, even many projects inside Bank Albilad (shoutout to my team!).

Nuxt.js, on the other hand, brings the same principles to the Vue ecosystem, simplifying SSR, static generation, routing, and even full-stack capabilities with Nuxt Server. It’s loved for its modular architecture and ease of use, especially in the Vue community.

Both frameworks have shaped the way developers build modern web apps, opinionated yet flexible, optimized yet extensible.

Why This Merger Matters

This move could reshape the future of meta-frameworks. Here’s why:

Multi framework vision: Vercel embracing Vue officially signals its ambition to become the universal platform for frontend frameworks, not just React as it acquired Svelte too lately.

What Could Happen Next?

Here are some of my assumptions:

Nuxt's tighter integration with Vercel, zero-config deployment, automatic performance tuning, and deeper analytics.
Shared infrastructure enhancements, improvements in build speed, caching, and streaming may benefit both frameworks.
Community crossovers, this may encourage more collaboration between Vue and React devs, reducing the divide and increasing innovation.

Final Thoughts

This is not just a merger of teams, it’s a merging of philosophies and developer ecosystems. As Nuxt becomes a core part of the vercel family, the developer experience across both Vue and React is bound to get better, faster, and more unified.

We’re entering a new era where framework wars might shift to framework harmony, and that’s a big win for the web.

Hey, I’m an indie hacker who loves building tools that help real people in real ways and ideally get used by millions. Right now, I’m working on arabicworksheet.com, a free resource I personally use every day to learn local Saudi Arabic.

If you're living in Saudi or anywhere in the Middle East and still getting by on just "Shukran" and "Maafi Maloom Arabi," this is your sign. Go check it out, no cost, super practical, and built exactly for you. It might just make your life a whole lot easier.

👮🛡️ Let's Navigate the Angular Playground with Route Guards

Ahmed Murtaza — Sun, 17 Dec 2023 07:29:03 +0000

Imagine we are in a big, exciting playground filled with different areas to explore. Angular route guards are like our friendly guides, making sure we have fun while keeping things safe and sound. Let's discuss what these route guards have to offer, helping us navigate our playground safely and securely.

Here is the sneak peak of when and where we use Route Guards based on different scenarios:

1. Can I Come In? - The CanActivate Guard

You know that feeling when you want to enter a special play zone, but there is a nice adult checking if you are allowed? Thats what CanActivate does in Angular. It ensures that you have the green light to access a particular route. It's perfect for scenarios like letting only loggedin users into the VIP section of our play area.

2. Ready to Leave? - The CanDeactivate Guard

Sometimes, we need to check if you're ready to leave an area. The CanDeactivate guard is like asking, "Are you sure you want to leave? Did you collect all your toys?" It comes in handy when you want to make sure users don't accidentally leave a page with unsaved changes or partially filled form. So basically this protects the route, however it does not prevent that module from loading.

3. Show Your Badge - The CanLoad Guard

Imagine some areas in the playground require a special permission. Angular's CanLoad guard checks if you have the right permission before loading an entire section. This is super useful for lazy-loaded modules, ensuring that only the cool kids with the proper permissions can access certain parts of our application.

In comparision to CanActivate guard, CanLoad protects the route completely. Such as lazy loading the module and also protects all the routes associated with that module. If the user is unauthorized then this canLoad guard avoids additional loading of auth Modules

4. Checking Your Bag - The Resolve Guard

Before you enter a play zone, it's always a good idea to check if you have everything you need. Resolve guard is like looking into your bag to make sure you are prepared. It lets you fetch data or do some last minute setup before the route is activated.

And there you have it, a playful introduction to Angular route guards!! They are your trusty companions, making sure your journey through the Angular playground is smooth, secure and full of excitement.

Happy coding folks! 🚀

🏋Map & Set, Secret Weapons for Effortless Data Management in JavaScript

Ahmed Murtaza — Sun, 10 Dec 2023 09:46:42 +0000

Ever found yourself wrestling with arrays and plain objects? 🥴 Wishing there was a simpler way to handle data in JavaScript?

Well, good news!! We've got some cool features called Map and Set that make handling data way simpler. Today we will discuss these handy tools and see why they are much friendlier compared to the traditional ways.

1. JavaScript Map: Friends with Key-Value Pairs

Back in the Day:
Remember when we used plain objects to store data like this?

The New and easy Way:
Now with Map, it's like upgrading from an old phone to a shiny new smartphone:

Why Map is Cool:

It lets you use any type of data as a key
Built-in methods make it super easy to work with, no more tricky workarounds.
It keeps things neat with a guaranteed order when you go through the items

2. JavaScript Set: Keeping Things Unique and Fast

Back to the Grind:
Remember the hassle of checking for duplicate numbers in arrays?? Not the most fun part:

Hello Simplicity:
Now, Set comes to the rescue, doing all the hard work for us:

Why Set is Awesome:

No need to manually check for duplicates, it keeps things unique without us lifting a finger.
Faster lookups and removals.
It remembers the order things were added.

Conclusion:

So here you have a sneak peek into the world of Map and Set, Your new best buddies for easy data handling🏋.
Say goodbye to the old, clunky ways and welcome a simpler and more efficient way to manage your data. Happy coding!!😎

✨React State Management: UseState vs UseReducer

Ahmed Murtaza — Fri, 13 Jan 2023 09:48:38 +0000

In React, useState and useReducer are two hooks that are used to manage state in a functional component. Both hooks allow you to update state and re-render your component, but they have different use cases and trade-offs.

useState

useState is a Hook that allows you to store a single piece of state in your component. It is easy to use and understand, making it a good choice for small and simple state management tasks.

To use useState, you need to call the Hook in your component and provide an initial value. The Hook will return an array with two elements, the first being the current value of the state, and the second being a function to update the state.

In the example above, we are using useState to store a piece of state called name, with an initial value of "Ahmed Murtaza". The variable name contains the current value of the state, and the variable setName is a function that can be used to update the state.

In the example above, we are using the name state variable as the value of an input field, and using the setName function to update the state when the input field value changes.

useReducer

useReducer is a Hook that allows you to store multiple pieces of state and perform more complex state updates. It is more powerful than useState, but also more complex to use and understand, making it a better choice for larger and more complex state management tasks.

To use useReducer, you need to call the Hook in your component and provide a reducer function and an initial state. The Hook will return an array with two elements, the first being the current state, and the second being a function to dispatch actions to the reducer.

In the example above, we are using useReducer to store multiple pieces of state in an object called state, with an initial value of { name: "Ahmed Murtaza", age: 29 }. The variable state contains the current state, and the variable dispatch is a function that can be used to dispatch actions to the reducer.

In the example above, we are using the state.name state variable as the value of an input field, and using the dispatch function to update the state when the input field value changes.

Conclusion

In conclusion, useState and useReducer are both very useful Hooks in React. It's more personal choice as well as other factors i.e performance and complexity, which we can consider picking the most suitable hook.

⚡️React Performance Optimization: useMemo vs useCallback

Ahmed Murtaza — Sun, 08 Jan 2023 09:18:51 +0000

useCallback and useMemo are both React Hooks that help optimize the performance of a React application by memoizing values. They both accept a function as an argument and return a memoized version of the function.

Here is a simplified explanation of the difference between the two:

useCallback

useCallback is a hook that returns a memoized callback. A callback is a function that is passed as an argument to another function. In the context of React, a callback is often used as an event handler or to pass data between components. The useCallback hook takes two arguments: a function and a dependency array. It will return a memoized version of the function that only changes if one of the dependencies has changed.

Here's an example of how you might use the useCallback hook:

In this example, the handleClick function is passed as an event handler to the button element. The useCallback hook ensures that the handleClick function is only re-created if the count prop changes. This can be useful if the ParentComponent is re-rendered frequently, as it can help to prevent the function from being unnecessarily re-created.

useMemo

useMemo is a hook that returns a memoized value. It takes two arguments: a function that returns a value and a dependency array. It will call the function and return its result only if one of the dependencies has changed.

Here's an example of how you might use the useMemo hook:

In this example, the processedData value is created by calling the function passed to useMemo. This function does some expensive processing with the data prop. The useMemo hook ensures that the processedData value is only re-computed if the data prop changes. This can be useful if the processing is time-consuming and you don't want it to be re-done unnecessarily.

Summary

To summarize, the main difference between useCallback and useMemo is the type of value they return. useCallback returns a memoized callback function, while useMemo returns a memoized value. Both hooks can be used to optimize the performance of your React components by avoiding unnecessary re-creations of functions or values.

⚡️JavaScript Optional Chaining (?.)

Ahmed Murtaza — Wed, 17 Aug 2022 11:28:00 +0000

Optional chaining allows us to safely read the value of each deeply nested property within an object (or chained objects) without the need to separately evaluate the existence of each property.

For newbies, it might not touch them deeply, but optional chaining solves a great deal of errors JavaScript developers face very frequently.

📌Example #1:

Consider a user object, which is supposed to have user relevant details as properties:

Let user = {
   name: ‘John Doe’, 
   email: john@doe.com
};

Consider you try to access user.address.postcode, which will eventually give “Cannot read property of undefined..” Error. It’s because address is undefined and attempt to get user.address.postcode fails with an error as undefined doesn’t have Object like properties.

📌Example #2:

In web application we access DOM elements, such as, document.querySelector(‘#heading’), and can access its properties or manipulate content using document.querySelector(‘#heading’).innerText. Now In-case document.querySelector(‘#heading’) didn’t return any element instead undefined, it will again fail and show same ‘non-existing property’ error.

🌟Introducing Optional Chaining (?.):

Optional chaining helps us by not showing an Error in-case there is nullish (null or undefined) property before ?. operator and return undefined without further evaluation.

In other words:

user?.address?.postcode will return undefined if address is undefined instead of throwing an Error.
It greatly helps to reduce multiple conditions evaluating each nested property whether they are nullish or not.

How to use Async/Await in JavaScript

Ahmed Murtaza — Wed, 26 Jan 2022 12:48:36 +0000

Promises have been a great escape from callbacks, ever since they were introduced. Instead of callbacks hell, promises provide .then() API to chain multiple promises. However, in-case there are multiple dependencies, using .then becomes dreadful too and seems no much different than callbacks hell:

function getUser(userId){
    return fetchUser(userId)
        .then(user=>fetchUser(...))
        .then(image=>fetchImage(...))
        .catch(err=>console.error(err))
}

function displayPublicUser(userId){
    getUser(userId)
    .then(user=>{
        if(user.isPublic){
            displayUser(...)
        }
    })
}

Introducing Async/Await

Async and Await keywords were introduced in ECMAScript 2017. Though they work as a synthetical sugar for Promises only, However, the asynchronous behavior of promises looks much like synchronous now and the code becomes much easier to handle. Comparing the above code using Async/Await will be like:

async function getUser(userId){
    const user = await fetchUser(...);
    const image = await fetchImage(...);
    return user;     
}

async function displayPublicUser(userId){
    let user = await getUser(userId);
    if(user.isPublic){
        displayUser(...);
    }
}

Await must be inside Async function
In order to use await, make sure the parent function has async keyword attached to it. In case the function is not Async, then using Promises would work fine. Or there is an alternative to use IIFE wrapper to introduce Async keyword:

function getUser(userId){
    return fetch(`https://some-api/user/${userId}`);
}

//WRONG
const user = await getUser(5);

//CORRECT 
getUser(5)
.then(user=>{...})
.catch(err=>{...})

//OR

//CORRECT
(async ()=>{
    const user = await getUser(5);
})()

Error Handling

It's recommended to handle errors prior to their appearance. I have got two of the most used approaches below:

async function displayUser(userId){
    const user = await fetchUser(userId).catch(err=>{
        console.log(err);
        return null;
    });
    return user;
}

The one I like and used most is:

async function displayUser(userId){
    try{
        const user = await fetchUser(userId)
        return user;
    }
    catch(err){
        console.error(err);
        return null
    }
}

That's it for now, your comments are highly appreciated. See ya! 👋.

Show loading indicator for Lazy Modules in Angular

Ahmed Murtaza — Sun, 23 Jan 2022 17:59:37 +0000

In Angular, By default, all modules are loaded as soon as the applications load, irrespective of which modules are immediately necessary and which are not.

Why Lazy-loaded Modules

In the case of applications with many routes, these modules would eventually increase initial load time and consequently bad user experience. To prevent large load time we prefer lazy-loaded modules to minimize initial load time as well as bundle size. Every module is of different sizes as well as the network conditions, which will take different times to load. For a better user experience, showing loader would definitely be a good idea!

Loader code

app.component.html

<router-outlet>
  <span class="loader" *ngIf="isLoading"></span>
</router-outlet>

app.component.css

.loader {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
}

.loader:after {
  content: " ";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #000;
  border-color: #000 transparent #000 transparent;
  animation: loader 1.2s linear infinite;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

app.component.ts

import { Component } from '@angular/core';
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isLoading: boolean = false

  constructor(router: Router) {

    router.events.subscribe(
      (event: RouterEvent): void => {
        if (event instanceof RouteConfigLoadStart) {
          this.isLoading = true;
        } else if (event instanceof RouteConfigLoadEnd) {
          this.isLoading  = false;
        }
      }
    );
  }
}

The actual source code is here. The Loader part is
<span class="loader" *ngIf="isLoading"></span> which has a condition to show and hide based on isLoading boolean. The last part is app.component.ts where we have added the following code block:

router.events.subscribe(
      (event: RouterEvent): void => {
        if (event instanceof RouteConfigLoadStart) {
          this.isLoading = true;
        } else if (event instanceof RouteConfigLoadEnd) {
          this.isLoading  = false;
        }
      }
    );

Here we are subscribed to router events and switching isLoading based on RouteConfigLoadStart and RouteConfigLoadStart.

Hope this would be useful, see you guys soon 👋.

✨ How to Immutably remove property from JavaScript Object

Ahmed Murtaza — Wed, 25 Aug 2021 17:48:40 +0000

Say we want to create a copy of an existing object, reusing most of the properties while dropping few. In order to remove unwanted properties, there are two basic patterns we usually follow.

Let say we have the following object to work with:

Let obj = {
    Name:'Ahmed Murtaza',
    Email:'ahmed_murtaza@xyz.com',
    twitter:'ahmedgmurtaza',
    fb:'ahmedgmurtaza'
};

Old school way

First approach is to use delete operator, for that we first duplicate the original object and then explicitly delete the unwanted property out of it, here the unwanted property is twitter:

Let obj2 = Object.assign({}, obj);
delete obj2.twitter;

🌟 Using Object destructuring + rest operator:

using this pattern, we isolate the removing property using destructuring format and name the rest of the properties as new object:

let { twitter, ...obj2 } = obj;
console.log(obj2); // obj2 does not carries twitter property

Using the above approach, we can immutably remove any property out of the object or can pick the one we need while ignoring the rest of the properties.

Introduction to Variables in CSS🔥

Ahmed Murtaza — Thu, 22 Jul 2021 17:04:42 +0000

Complex websites have very large amount of CSS, often with a lot of repeated values. For instance, we have same color value used in multiple files, searching it globally and replacing would be a big cost, instead we can use CSS variables to store repeated values at one place and reference them where ever it's required.

What is :root ?

:root is a CSS pseudo-class which is considered equivalent to <html> in HTML, referring to the entire document. We declare variables inside :root and can use everywhere. Variables are referred by double hyphens signature --main-color: hotpink

:root {
  --main-color: hotpink;
}

Referencing a variable

Once a variable is set in :root, we can easily access it with in any selector using var function as below:

:root {
   --main-color: orange;
}

.some-other-class {
   background-color: var(--main-color);
}

Declaring a variable inside :root simply means we can access the variable within any CSS selector, as :root is considered to be the top most parent for all selectors, just as <html> for all other tags in HTML. Similarly, we can define the variable inside any other selectors too:

HTML

<!-- first  element -->
<div class="first-parent">
    <div class="first-parent__child">First child text</div>
</div>
<!-- /first  element -->

<!-- second  element -->
<div class="second-parent">
    <div class="second-parent__child">Second child text</div>
</div>
<!-- /second  element -->

CSS

.first-parent {
  --main-color: orange;
}
.first-parent__child {
  background-color: var(--main-color);
}
.second-parent__child {
  background-color: var(--main-color);  /* this won't work */
}

What above shows is that --main-color can be referenced only within selectors which refers to either first-parent itself or it's children tags, and not outside first-parent tag.

That's it for today 🎉. Would love to hear your thoughts, and do share me how often you embrace the power of CSS variables in your projects. Stay tuned 👋

Use Closures for Memory Optimizations in JavaScript (a case study)

Ahmed Murtaza — Sat, 10 Jul 2021 18:58:20 +0000

Beside functions being first class citizens in JavaScript, there are plenty of other features, allowing functions to make an extra mile ride. Closures are one of them.

What is a Closure?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)
Mozilla

Let's take an example:

function adder(a) {
  return function(b) {
    return a + b;
  };
}

let add5 = adder(5);
let add10 = adder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

From above code, it's clear how closures work, and how it remembers the lexical scope, the function was declared within. But how this could be useful, or is it just non-practical questions in JavaScript interviews?

Don't worry, we have got plenty of applications and usage, of Closures throughout JavaScript ecosystem. Today, the usage we want to discuss is how we can optimize memory usage using Closures. Consider the code below:

function multiply(y){
    let x = Math.pow(10,10);
    return x* y;
}
multiply(25); //250000000000
multiply(45); //450000000000

It looks very straight forward, right? ... No, actually if you notice every time the multiply() function is called, the let x = Math.pow(10,10) is recreated and occupy certain memory, in this case quite a large memory for sure, due to the large numeric value it's generating.

Bringing in the Closure

What if we make it possible to create let x = Math.pow(10,10); only once, to the extent where it has been repetitive across the multiply() function calls, this is where the Closures come into play. Let's take a look at the below modified code:

function multiply(){
    let x = Math.pow(10,10);
    return function(y){
        return x* y;
    }
}
let multiplier= multiply();
multiplier(25); //250000000000
multiplier(45); //450000000000

Here we introduced returning an inner function, which creates a closure, and does not recreate let x = Math.pow(10,10); with each multiplier() call, and hence avoid excess memory leaks. This conveys us, by using Closures we can easily avoid costly memory jobs.

So that's it for today. Hope you have benefited from this case study, or Do share if you ever faced similar scenarios and what approaches you have followed. Stay tuned for the next JS hack!😃

Types of Data Binding in Angular

Ahmed Murtaza — Tue, 06 Jul 2021 09:06:11 +0000

Data binding is the automatic synchronization of data between model and view. In Angular, we have 3 fundamental ways to make to-and-fro binding between view and source.

Source to View (one-way)
View to Source (one-way)
View to Source to View (two-way)

Source to View (one-way)

This refers to as Property binding method, it includes all following patterns to share data from source to view.

Interpolation

Interpolation refers to embedding expressions into markup text. By default Angular interpolation uses {{ and }} to encapsulates the expression.

<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>

Property Binding

The [] brackets cause Angular to consider right-hand side value as dynamic, without brackets Angular evaluates the right-hand value as static string.

<img [src]="itemImageUrl">
<app-item-detail childItem="parentItem"></app-item-detail>

Attribute, Style and class binding

Attribute bindings

Apart from element properties, we have element attributes ARIA and SVG for which we can use attribute bindings:

<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

Class binding

Single class binding

[class.sale]="onSale"

Multiple Class bindings

[class]="'my-class-1 my-class-2 my-class-3'"

Styles binding

Single style binding

<nav [style.background-color]="expression"></nav>

Multiple styles binding

<nav [style]="stylesExpression"></nav>

View to Source (one-way)

More specifically, we call this Custom Event binding, utilizing Angular Event Emitter.

Consider the following code showing button which alerts on click. The alert content is passed through <app-button> component template using custom event showMessage():

3. View to Source to View (two-way)

Angular two-way data binding is the combination of square brackets [] and parentheses (). [()] refers to property binding followed by event binding.

<app-sizer [(size)]="fontSize"></app-sizer>

So, which methods you have already used or would love to use soon, or something else? And Why? Let me know in the comments section. 😃

See you again in another exciting article. Until then, happy coding! 💻