DEV Community: Malik-Haziq

Why I Built a VS Code Theme That Feels Like a Warm Blanket

Malik-Haziq — Sun, 23 Mar 2025 20:38:31 +0000

I’ll be real: I didn’t set out to make yet another dark theme. I just wanted to stop rubbing my eyes like a sleepy toddler by 10 PM.

Here’s the story:

After burning out my retinas with neon-colored brackets one too many times, I started experimenting with darker, warmer tones. The goal? A theme that felt like sipping herbal tea — soothing, not stimulating.

The “Aha!” Moment:
I showed an early version to a friend who said, “Wait… why does this feel easier to read?” Turns out, the subtle teal-and-charcoal palette (#101E21 and #17363D) reduced visual noise without sacrificing clarity.

What I Learned:

Good themes aren’t about looking “cool” — they’re about disappearing so you can focus.
Tiny details matter (like making JSON keys just slightly lighter than the background).

Try it yourself: Ocean Mist

And if you hate it? Tell me why! I’m just a dev with a color picker, not a designer. 😅

Limitations of React JS

Malik-Haziq — Mon, 30 Dec 2024 08:47:44 +0000

React.js is a popular JavaScript library. It's great for building fast and interactive user interfaces. But, like anything else, it has its own quirks and challenges that developers need to understand.

Let’s look at what makes React strong and where it can be tough to work with. I’ll share some visuals to help explain these points!

1. Limited Functionality

React is a tool for creating user interfaces. It focuses on the view part of your app. For things like navigation, global state, and getting data, you'll need other tools or you can handle it yourself.

For navigation, you can use React Router. If you want to manage state, lots of people use Redux.

This flexibility is nice, but it can also make your project a bit tricky as you try to connect everything

2. JSX Complexity

JSX lets you mix JavaScript with HTML-like code. This makes it simpler to understand components. If you're new to React or coding, JSX might feel a bit tricky. You have to learn JavaScript stuff and how it works with HTML.

It can seem tough at first, but getting the hang of it is worth it. JSX really helps make things clearer and more powerful.

3. SEO Challenges

When you build a React app, the content shows up in the user's browser. So, when someone visits your website, their browser needs to download and run JavaScript to put everything together on the page. Once the page is loaded, it feels fast for users. But this creates a problem for search engines like Google. They need to find and understand the right content to rank it in search results.

The issue is that search engines might not see the content generated by React in the same way a normal browser does since they don’t run JavaScript the same way. This can hurt your website’s SEO.

To solve this, developers often use tools like Next.js or static-site generators. They create content on the server before it reaches the user’s browser. This makes it easier for search engines to read what’s on your page. This process is known as Server-Side Rendering (SSR).

SSR is great for SEO, but it also adds some complexity. Now, developers have to handle both client-side and server-side rendering.

4. Rapid Evolution

React is always changing. There are updates, new libraries, and best practices popping up all the time. It feels like something new happens every couple of months. That’s great because it helps keep things fresh and competitive. But it can be tough to keep up with all these changes.

Often, the documentation doesn’t keep up, and many older projects need a redo. If we don’t update them, they might fall behind in terms of features compared to the latest tools.

5. Integration Complexity

Adding React to a project that's already in progress can be tough. If the project wasn't designed to use React from the start, you might need to change a lot of the existing code. That means you really need to know both the current setup and how React works. It can make the switch take a long time.

6. Lack of Conventions

React lets developers decide how to build their apps. That can be good for experienced folks. But for beginners, it can be confusing. There isn't just one way to arrange files or pick tools for things like state management and routing. This means there are a lot of choices to figure out when starting a new project.

Conclusion

React.js is a cool tool for making interactive user interfaces. It's important to know what it can and can’t do. This helps developers find the best ways to deal with any challenges. Those challenges might include picking the right tools, improving SEO, or working with other projects. With some good planning, you can really get the most out of React's flexibility and speed.

Git is a Your Best Friend. Why?

Malik-Haziq — Sun, 15 Sep 2024 00:05:37 +0000

Version control systems are essential tools in software development, and Git is by far the most popular. It's more than just a tool to keep track of code changes—Git helps teams collaborate, ensures your code is safe, and makes your workflow much smoother.

Here’s why every developer should know Git.

1. Collaborating with Others

When multiple people work on the same project, things can get messy. Git lets everyone work on different parts of the project without stepping on each other’s toes. Here's why:

Branching: You can create separate branches to work on features or fix bugs without affecting the main project. Once you're done, you can merge your branch back into the main code, allowing for smooth teamwork. Learn more about branching.
Merging Conflicts: When two people make changes to the same file, Git helps you resolve conflicts easily. This makes it much easier to work as a team without worrying about breaking the code. Learn about resolving conflicts.

2. Tracking Changes and Accountability

Git keeps a record of every change made to the project, so you can see who changed what and when. This is great for:

Finding Bugs: If something breaks, you can trace the issue back to the exact change that caused the problem. Use Git Log to track changes.
Accountability: Each commit shows who made the change, which can help keep everyone on the same page and responsible for their work. You can also track changes using Git Blame.

3. Backup and Recovery

One of the best things about Git is that you never lose anything. If you mess something up, Git makes it easy to go back to a previous version.

Reverting Changes: If you made a mistake, you can simply revert to a previous commit and undo the error without losing any progress. Here's a guide on reverting commits.

4. Automating Tests and Deployments

With Git, you can integrate it into your development pipeline using tools like Jenkins or GitHub Actions. This allows:

Automated Testing: Every time you push changes, automated tests can run to ensure nothing breaks. Learn more about CI with GitHub Actions.
Continuous Deployment: When your code passes the tests, it can be automatically deployed to production. This speeds up your development process and ensures stability.

5. Supporting Modern Development (DevOps & Microservices)

In modern development environments, Git plays a huge role:

Microservices: You can have different Git repositories for each service, allowing developers to work independently on different parts of the system.
GitOps: Git can also manage your infrastructure. GitOps uses Git as a source of truth to deploy applications, ensuring everything is versioned and reproducible. Read more on GitOps.

6. Open Source Power

Git’s open-source nature has given rise to a large ecosystem of tools that make it even more powerful:

GitHub, GitLab, Bitbucket: These platforms provide easy-to-use interfaces for Git, adding features like pull requests, issue tracking, and more. Explore GitHub, GitLab, and Bitbucket.
Git Hooks: These are custom scripts you can set up to run automatically when certain events happen in Git, such as running tests before committing code.

7. Customizing Workflows

Git is flexible enough to suit different team needs:

Git Flow: This workflow is branch-based and good for teams that release software in cycles.
GitHub Flow:: A simpler model for continuous integration where changes are deployed frequently. Read about GitHub Flow.

Conclusion

Git is more than just a version control system—it’s the backbone of modern development. It helps teams collaborate smoothly, protects your code, and connects easily to tools that automate testing and deployment. Whether you're working on a personal project or part of a big team, mastering Git is a must for any developer.

Thank You for Reading!

I hope you found this article on Git helpful and insightful.

If you have any questions or thoughts, feel free to reach out!

For more updates and content, you can connect with me on social media:

10 APIs for your projects

Malik-Haziq — Mon, 27 Feb 2023 10:10:01 +0000

Here are top 10 Web APIs for your web projects.

1) Fake Store API:

The Fake Store API is a free and public web API that provides simulated data for an e-commerce store. This API can be used by developers who are building e-commerce applications

Fakestoreapi.com

2) Words API:

Words API is a set of Restful APIs that allow developers to look up word definitions, contextual details, and other
morphological word-specific information, such as synonyms, example usage, part of speech, rhymes, region of
use, etc.

Wordsapi.com

3) Random user API:

Stop wasting time manually creating fake user data. Just pull through comprehensive random user data from this API. Very handy API for projects. And it simulates real practices much more than hardcoding data.

randomuser.me

4) Count API:

Free and simple counting service. You can use it to track page hits and specific events.

countapi.xyz

5) AccuWeather API:

It provides weather and forecast across all over the world

accuweather.com/apis

6) IMDB API:

The IMDb-API is a web service for receiving movie, serial and cast information. APIs results is a JSON and includes items such as movie specifications, images, posters, trailers, ratings, Wikipedia page content and more.

imdb-api.com

7) ExchangeRate API:

It allows developers to access up-to-date currency exchange rates and other currency-related data programmatically.

exchangerate-api.com

8) Lyrics & Music API:

This API provides deep and powerful tools for searching lyrics, artists or albums. Unlike other APIs, it can also search by lyrics and does not need a separate artist and song name entries.

docs.ksoft.si/api/lyrics-api

9) News API:

Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.

newsapi.org

10) Dicebear Avatars API:

Create avatars for your profiles, designs, websites or apps. Piece by piece or based on a seed.

dicebear.com

*If you guys enjoyed it let me know. *

HTML cool things

Malik-Haziq — Sun, 29 Jan 2023 18:58:52 +0000

Here are some HTML tips and tricks that people usually don't know.

1) Make a call or mail:

Need a link to make a call or mail? a tag to the rescue

<a href="tel:43211234123">Make a call</a>
<a href="mailto:abc@gmail.com">Send an email</a>

2) Add a color picker:

Need a color picker to you webpage? No need to use any libraries. It's just one line far.

<input type="color"/>

Here it is.

3) Editabele Content:

Make you any content editable by just adding the contenteditable attribute to the element.

<p contenteditable="true">
   This is a paragraph
</p>

Here! how it's look like.

4) Mark tag:

Got something that is very important and wanna highlight it?
Here is the solution.

<p>It is very <mark>Important</mark></p>

5) Time tag:

The <time> tag defines a specific time (or datetime).

<time datetime="2022-01-18T14:00:00Z">January 18, 2022 2:00 PM</time>

The datetime attribute is used to translate date and time into machine-readable formate.

6) Progress bar:

Want to show progress of anything. use progress tag.

<progress value="75" max="100"></progress>

7) Disable option:

Use disable attribute to disable any element from options.

 <select>
   <option>Apple</option>
   <option>Orange</option>
   <option disabled>Mango</option>
 </select>

You can see Mango is disabled

8) Lazy Loading Image:

The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.

<img src="image.jpg" loading="lazy" alt="Some detail mentioned">

Hope you liked this post. If you got something to say Comment section is for you.

Javascript mistakes that beginners do

Malik-Haziq — Thu, 26 Jan 2023 05:14:47 +0000

Here are some common mistakes that are often done accidentally by beginners in JavaScript:

1) Accidentally Using the Assignment Operator:

Using a single equals sign (=) for assignment instead of a double equals sign (==) or triple equals sign (===) for comparison.

if (x = 5) {
    console.log("x is 5");
}

This will always return true because "x" is being assigned the value of 5, not compared to it. It should be:

if (x == 5) {
    console.log("x is 5");
}

2) Confusing Addition & Concatenation:

Addition and concatenation is a common mistake made by beginners in JavaScript. This mistake happens when beginners use the + operator instead of the correct operator for their intended operation.

For example, when adding two numbers together, the + operator should be used as it is used for mathematical addition. However, if the operands are strings, the + operator will concatenate them instead of adding them mathematically.

let x = "5";
let y = "6";
let z = x + y;
console.log(z);  // Output: "56"

Another common mistake beginners make is trying to add a number and a string together, which results in concatenation instead of addition.

let x = 5;
let y = "6";
let z = x + y;
console.log(z);  // Output: "56"

To avoid this mistake, beginners should make sure to convert a string to a number before performing mathematical operations, or use the parseInt() or parseFloat() functions. It is important for beginners to understand the type of operands they are using and the operation they are trying to perform in order to use the correct operator.

3) Misunderstanding Floats:

Misunderstanding floats in JavaScript is a common mistake made by beginners. A float, or floating-point number, is a number with a decimal point. However, due to the way computers store decimal numbers, floats can sometimes produce unexpected results.

One common mistake is assuming that floats will always have a precise value. However, due to the way computers represent decimal numbers, floats can have rounding errors. This can cause unexpected behavior when comparing float values for equality or performing mathematical operations.

For example:

let x = 0.1 + 0.2;
console.log(x);  // Output: 0.30000000000000004

In this example, the result of 0.1 + 0.2 is not exactly 0.3, but a close approximation.

4) Not using parentheses when calling a function:

Not using parentheses when calling a function in JavaScript is a common mistake made by beginners. In JavaScript, functions are objects and when you refer to a function by its name without invoking it, it returns a reference to the function instead of executing it.

For example:

function myFunction() {
    console.log("Hello, world!");
}

let x = myFunction;
x();  // Output: "Hello, world!"

In this example, the variable x is assigned a reference to the myFunction function, not the result of calling it. To call the function, parentheses must be added:

function myFunction() {
    console.log("Hello, world!");
}

let x = myFunction();
console.log(x);  // Output: "Hello, world!"

5) Referencing code before it’s loaded:

Referencing code before it's loaded can cause issues in JavaScript because the code is executed in the order that it appears in the document. If you reference code before it's loaded, it can lead to a undefined or null reference error. This typically occurs when you try to access a variable or function that has not been defined yet.

One common cause of this issue is when you put script tags in the head of the HTML document

<html>
<head>
 <script src="script.js"></script>
</head>
<body>
 <div>This div is your div.</div>
</body>
</html>

In order to avoid this problem you should put script tag at the bottom of the body

<html>
<head>
 <title>My Document</title>
</head>
<body>
 <div>This div is your div.</div>
 <script src="script.js"></script>
</body>
</html>

Other way is to use the async or defer attributes. This can cause the script to execute before the page has fully loaded, resulting in errors if the script references elements that are not yet available.

<html>
<head>
 <script src="script.js" defer></script> //You can use async as well
</head>
<body>
 <div>This div is your div.</div>
</body>
</html>

6) Not properly handling variable scope:

Not properly handling variable scope in JavaScript can lead to unexpected behavior, such as accidentally modifying or overwriting global variables, or not being able to access a variable that should be in scope.

const x = 5;

function myFunction() {
  let y = 10;
  console.log(x); // Output: 5
  console.log(y); // Output: 10
}

console.log(x); // Output: 5
myFunction(); 
console.log(y); // ReferenceError: y is not defined

In this example, a global constant variable x is defined with a value of 5, and a local variable y is defined inside the function myFunction using the let keyword.

Because y is defined inside the function myFunction using the let keyword, it can only be accessed within the scope of the function and will not be accessible outside of the function.

As a result, the code will execute as expected and output "5" twice and "10" once, and if you try to access y outside of the function scope, you will get an error because y is not defined.

By using const for the global variable x, you make sure that the variable can't be reassigned to another value, so you will not accidentally change the value of the global variable.

In this way, you can ensure that your variables are only accessible within the appropriate scope and prevent accidental modification or overwriting of global variables.

Have any problem? Comment section is for you.

Was this helpful? Let me know in the comment section.

Javascript new features that introduced in ECMAScript 2020

Malik-Haziq — Fri, 20 Jan 2023 22:21:34 +0000

Here are some of the new features introduced in ECMAScript 2020:

Optional chaining operator (?.):

Consider the following example.

const person = {
   name: 'haziq',
   city: 'Lahore'
};

const name = person ? person.name : undefined;

The code checking if the variable person is defined and has a property name. If person is defined and has a property name, it will assign the value of person.name to the variable name. If person is not defined or doesn't have a property name, it will assign the string 'no name' to the variable name.

But! with the help of optional chaining you'll have more compact and readable code, as shown:

const person = {
   name: 'haziq',
   city: 'Lahore'
};

const name = person?.name

The code is using the Optional chaining operator ?. to access the property name of the object person safely. It is checking if the object person has property name if it does, it will assingn the value to variable name, if it doesn't have it will return undefined.

Nullish coalescing operator (??):

Nullish coalescing operator allows you to provide a default value when a given value is null or undefined. It is similar to the logical OR operator (||), but it only returns the right-hand side operand when the left-hand side operand is null or undefined.

Here is an example of how to use the nullish coalescing operator:

const user = { name: "John" };
console.log(user.age ?? 18); // 18

In this example, the variable user is an object with a property name and no property age. The nullish coalescing operator (??) is used to check if the value of user.age is null or undefined. Since user.age is undefined, the right-hand side operand 18 is returned.

Dynamic imports:

Dynamic imports allows you to load a module on demand at runtime. It allows you to import a module as a function, and you can call that function to load the module.

Here is an example of how to use dynamic imports:

async function loadModule() {
  const module = await import('./module.js');
  console.log(module.default);
}
loadModule();

In this example, loadModule() is an async function that uses the await keyword to wait for the module to be loaded before accessing it. The import() function is called with the path to the module as an argument. It returns a promise that resolves with the exports of the module.

The module.default is used to access the default export of the module.

Dynamic imports are particularly useful in situations where you only want to load a module when it's needed, rather than loading all the modules at the beginning of the application. This can improve the performance of your application by reducing the initial load time.

It's also useful for code splitting, that is, separating the application into smaller chunks that can be loaded on demand. This can reduce the amount of JavaScript that needs to be loaded and parsed on initial load, making the application faster to start and use.

bigInt:

bigint is a new primitive type that can represent integers with arbitrary precision, unlike the regular Number type, which is limited to a 53-bit integer range. The syntax for creating a bigint is to add the "n" suffix to the end of the number.
Here is an example of creating and using a bigint in JavaScript:

let bigInt = 9007199254740992n;
console.log(bigInt); // 9007199254740992n
console.log(typeof bigInt); // bigint

let sum = bigInt + 1n;
console.log(sum); // 9007199254740993n

let difference = bigInt - 1n;
console.log(difference); // 9007199254740991n

You can also use the BigInt() function to convert a number or string to a bigint. This is useful when you're working with variables that may or may not contain bigint values:

let num = 9007199254740992;
let bigIntNum = BigInt(num);

console.log(bigIntNum); // 9007199254740992n
console.log(typeof bigIntNum); // bigint

import meta data:

The import.meta object provides access to metadata associated with the current module. This metadata can include information about the file path, URL, and more.

The import.meta object is only available inside a module and is not available in scripts.

import.meta.url // 'file:///path/to/module.js'

Another example, you can use import.meta to access the directory of the current module:

import.meta.dir // '/path/to/'

You can also use import.meta to access the filename of the current module:

import.meta.filename // '/path/to/module.js'

You can also use import.meta in dynamic import statement

import(import.meta.url.replace('.js', '-dynamic.js'))

It's important to note that import.meta is a relatively new feature and is not yet widely supported in all JavaScript environments. It is currently supported in Node.js and modern web browsers (Chrome, Firefox, and Safari).

New export syntax:

New export syntax allows for more flexibility in how you structure and organize your code by giving you more options for exporting and importing values.

Here are a few examples of the new export syntax:

Named exports: You can use the export keyword to export a value by its name. For example:

export const name = 'John Doe';

Default exports: You can use the export default statement to export a default value from a module. For example:

export default function add(a, b) {
    return a + b;
}

Re-exporting: You can use the export statement to re-export a value from another module. For example:

export { name } from './module.js';

Renaming imports and exports: You can use the as keyword to give a different name to an imported or exported value.

export { name as myName } from './module.js';

This new export syntax provides more flexibility in structuring and organizing your code by giving you more options for exporting and importing values.

matchAll():

The matchAll() method is a string method that returns an iterator of all results matching a regular expression in a given string. It's similar to the match() method, but matchAll() returns all matches, whereas match() returns only the first match.

Here's an example of using the matchAll() method to find all occurrences of a word in a string:

let str = "The quick brown fox jumps over the lazy dog.";
let regex = /\bthe\b/gi;
let matches = str.matchAll(regex);

for (let match of matches) {
    console.log(match[0]);
}
// Output: "The" "the"

In the above example, matchAll() method is used to find all occurrences of the word "the" in the string "The quick brown fox jumps over the lazy dog.". The for...of loop is used to iterate through the matches and print each one.

globalThis:

The globalThis object refers to the global object of the current environment, whether it be a web browser or a Node.js runtime. It provides a consistent way to access the global object regardless of the environment.

In a web browser, the globalThis object refers to the window object, which is the global object for client-side JavaScript. For example:

console.log(globalThis === window); // true

It provides a consistent way to access the global object across different environments, and it's useful in cases where you don't know the environment in which your code will be running.

Promise.allSettled():

The Promise.allSettled() method is used to wait for an array of promises to settle (either resolve or reject). It returns a promise that is fulfilled with an array of objects that each describe the outcome of each promise.

Here's an example of using Promise.allSettled() to wait for an array of promises to settle:

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise 1 resolved");
    }, 2000);
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(new Error("Promise 2 rejected"));
    }, 1000);
});
let promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise 3 resolved");
    }, 3000);
});
let promises = [promise1, promise2, promise3];

Promise.allSettled(promises).then(results => {
    results.forEach(result => {
        if (result.status === "fulfilled") {
            console.log(`Promise fulfilled: ${result.value}`);
        } else {
            console.log(`Promise rejected: ${result.reason}`);
        }
    });
});

In the above example, Promise.allSettled() is used to wait for an array of promises to settle. The then() method is used to handle the settled results. The forEach() loop is used to iterate through the results and check the status of each promise.

It's worth noting that Promise.allSettled() method is similar to Promise.all() but Promise.allSettled() waits for all promises to settle, regardless of whether they resolve or reject. Promise.all() method waits for all promises to resolve and if any promise is rejected it will cause the whole Promise.all() to reject.

It's also worth noting that features that are not supported in older environments will not throw any error but they will not work as expected and you have to check the browser support before using these features.

Techniques for optimizing JavaScript performance and reducing load times

Malik-Haziq — Wed, 18 Jan 2023 21:19:46 +0000

Here are a few techniques for optimizing JavaScript performance and reducing load times:

Code Splitting:

Code splitting is a technique that allows you to split your JavaScript code into smaller chunks that can be loaded on demand. This can help reduce the initial load time of your application and improve performance. You can use tools like webpack to split your code.

Lazy Loading:

Lazy loading is a technique that allows you to only load resources when they are needed, rather than loading them all at once. This can help reduce the initial load time of your application and improve performance. You can use the Intersection Observer API for lazy loading images and videos, and dynamic import for lazy loading modules.

Caching:

Caching is a technique that allows you to store resources on the client's browser so that they can be reused later without having to be downloaded again. This can help reduce the load time of your application and improve performance. You can use the Cache API for caching resources.

Optimizing images:

Optimizing images means reducing their file size without losing quality. This can help reduce the load time of your application and improve performance. You can use tools like ImageOptim or Kraken.io to optimize your images.

Using a JavaScript framework:

JavaScript frameworks like React, Angular, and Vue.js can help you build large and complex applications more efficiently. They provide a set of tools and conventions for structuring your code, which can make it easier to maintain and improve performance.

Keep in mind that performance optimization is a continuous process, you should test and profile your code regularly to ensure that it runs as efficiently as possible.

The limitations of JavaScript as a programming language

Malik-Haziq — Mon, 16 Jan 2023 19:48:49 +0000

JavaScript, like any programming language, has its own set of limitations. Here are a few examples of the limitations of JavaScript:

1. Single threading: JavaScript is a single-threaded language, which means that it can only execute one task at a time. This can lead to performance issues when working with large amounts of data or when running complex calculations.

console.log("Start");

setTimeout(() => {
    console.log("Timeout 1");
}, 5000);

setTimeout(() => {
    console.log("Timeout 2");
}, 0);

console.log("End");

In this example, the "End" message is logged before the "Timeout 1" and "Timeout 2" messages, even though the second timeout has a delay of 0ms. This is because JavaScript is single-threaded and can only execute one task at a time.

2. Limited precision of numbers: JavaScript uses a double-precision floating-point format for numbers, which can lead to rounding errors and inaccuracies when working with very large or very small numbers.

let x = 0.1 + 0.2;
console.log(x); // 0.30000000000000004

In this example, the result of adding 0.1 and 0.2 is not exactly 0.3 due to the limited precision of JavaScript's floating-point numbers.

3.Limited support for multithreading: JavaScript lacks built-in support for multithreading, which can make it difficult to take full advantage of multi-core processors.

let x = 0;
let y = 0;

for(let i = 0; i < 100000000; i++) {
    x += i;
}

for(let i = 0; i < 100000000; i++) {
    y += i;
}
console.log(x + y);

In this example, the two for loops are executed sequentially, one after the other, even though they could be executed in parallel on a multi-core processor to improve performance.

4.Limited support for concurrency: JavaScript has a callback-based model for handling concurrency, which can lead to callback hell and complex nested code, making it difficult to read, understand and maintain.

function asyncFunc1(cb) {
    setTimeout(() => {
        cb(1);
    }, 1000);
}

function asyncFunc2(cb) {
    setTimeout(() => {
        cb(2);
    }, 2000);
}

function asyncFunc3(cb) {
    setTimeout(() => {
        cb(3);
    }, 3000);
}

asyncFunc1((result1) => {
    asyncFunc2((result2) => {
        asyncFunc3((result3) => {
            console.log(result1 + result2 + result3);
        });
    });
});

In this example, the three async functions are called one after the other in a nested callback pattern, which can become difficult to read and understand as more functions are added.

5.Limited support for low-level operations: JavaScript is not a low-level language and it does not provide direct access to memory, disk, or other resources, which can make it less suitable for certain types of applications, such as operating systems or device drivers.

let buffer = new ArrayBuffer(1024);
let view = new DataView(buffer);
view.setInt32(0, 256, true);
console.log(view.getInt32(0, true)); // 0

In this example, JavaScript does not provide direct access to the memory, so it's not possible to get the value stored in the buffer.

6.Lack of type safety: JavaScript is a loosely typed language and it does not have strict type checking, which can make it easier to introduce bugs and make it harder to catch them during development.

7.Limited support for Object-Oriented programming: JavaScript's prototype-based model of OOP is different from traditional class-based OOP and it can make it harder to understand and maintain OOP code.

Make your JavaScript code more efficient, readable, and maintainable.(Part 2)

Malik-Haziq — Fri, 13 Jan 2023 18:49:13 +0000

Here are a few JavaScript tips and tricks with examples and reasons.

Use clear and meaningful `variable` and `function` names:

By using clear and meaningful names for your variables and functions, it becomes much easier for other developers (or even future you) to understand what the code is doing. It also makes it much easier to find and fix bugs.

//bad
let x = 5;
let y = 10;
let z = x * y;

//good
let width = 5;
let height = 10;
let area = width * height;

Reason: Using clear and meaningful variable and function names makes the code more readable and understandable, which helps other developers (or even future you) to understand what the code is doing. It also makes it much easier to find and fix bugs.

Break code into smaller `functions`:

Breaking code into smaller, reusable functions makes it much easier to understand and maintain. It also makes it much easier to test and debug.

//bad
function calculateTotal(items) {
  let total = 0;
  for (let item of items) {
    total += item.price * item.quantity;
  }
  return total;
}

//good
function calculateTotal(items) {
  return items.reduce((total, item) => total + calculatePrice(item), 0);
}

function calculatePrice(item) {
  return item.price * item.quantity;
}

Reason: Breaking code into smaller functions makes the code more manageable and reusable. It also makes it much easier to test and debug. This will help to make the code more maintainable and easy to understand.

Use `destructuring` assignment to unpack values from `arrays` or `objects`:

Destructuringassignment makes it easy to unpack values from arrays or objects, which makes your code shorter and more readable.

// general way
let user = {name: 'John', age: 30};
let name = user.name;
let age = user.age;
console.log(name); // 'John'
console.log(age); // 30

//using destructuring 
let {name, age} = user;
console.log(name); // 'John'
console.log(age); // 30

Reason: Using destructuring assignment to unpack values from arrays or objects makes the code shorter and more readable, it also makes it easy to extract values from arrays or objects.

Use `spread operator` to expand `arrays` and `objects`:

The spread operator makes it easy to expand arrays and objects, which makes your code shorter and more readable.

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // [1, 2, 3, 4, 5, 6]

Reason: Using spread operator to expand arrays and objects makes the code shorter and more readable, it also makes it easy to expand arrays and objects.

Use `default parameters` to provide default values for `function arguments`:

Default parameters make it easy to provide default values for function arguments, which makes your code more robust and easier to understand..

//bad
function divide(a, b) {
  if (b === undefined) {
    b = 1;
  }
  return a / b;
}
console.log(divide(10)); // 10

//good
function divide(a, b = 1) {
  return a / b;
}
console.log(divide(10)); // 10

Reason: Using default parameters to provide default values for function arguments makes the code more robust and easier to understand, it also makes it easy to provide default values for function arguments.

Use comments to explain complex or non-obvious code:

Comments can be a great tool for making code more readable and understandable. Use comments to explain what the code is doing, and why it's doing it.

//calculate the area of the rectangle
function rectangleArea(width, height) {
  return width * height;
}

Reason: Using comments to explain complex or non-obvious code helps to make the code more readable and understandable. This helps other developers (or even future you) to understand the purpose of the code and how it works.

make your JavaScript code more efficient, readable, and maintainable.(Part 1)

Malik-Haziq — Wed, 11 Jan 2023 16:20:48 +0000

Here are a few JavaScript tips and tricks with examples and reasons.

Use `let` and `const` for variable declarations:

Instead of using var for variable declarations, use let and const to ensure that your variables are block-scoped and that they cannot be reassigned. This can help prevent accidental bugs in your code.

let x = 5;
const y = 10;

Reason: variables declared with let can be reassigned, while variables declared with const cannot. This feature can be useful in scenarios where you want to prevent variables from being reassigned accidentally.

Use arrow functions when possible:

Arrow functions make your code more concise and easier to read. They are particularly useful when defining small callback functions or when working with higher-order functions.

// Using a traditional function
setTimeout(function() {
    console.log('Hello');
}, 1000);

// Using an arrow function
setTimeout(() => console.log('Hello'), 1000);

Reason: Arrow functions are more concise than traditional functions and can make your code more readable, especially when working with callbacks and higher-order functions.

Make use of template literals:

Instead of concatenating strings, use template literals to make your code more readable and easier to maintain.

// Using string concatenation
let x = 5;
let y = 10;
console.log('The sum of ' + x + ' and ' + y + ' is ' + (x + y));

// Using template literals
console.log(`The sum of ${x} and ${y} is ${x + y}`);

Reason: Template literals make it easier to create strings that include expressions and make it more readable.

Utilize Array.prototype methods:

Instead of using for loops to iterate over arrays, use Array.prototype methods such as .map(), .filter(), and .reduce() to make your code more efficient and readable.

// Using a for loop
let numbers = [1, 2, 3, 4, 5];
let doubleNumbers = [];
for (let i = 0; i < numbers.length; i++) {
    doubleNumbers.push(numbers[i] * 2);
}

// Using .map()
let doubleNumbers = numbers.map(x => x * 2);

Reason: Array.prototype methods are more readable and efficient than for loops and also are chainable, which makes it more convenient for complex operations.

DEV Community: Malik-Haziq

Why I Built a VS Code Theme That Feels Like a Warm Blanket

Limitations of React JS

1. Limited Functionality

2. JSX Complexity

3. SEO Challenges

4. Rapid Evolution

5. Integration Complexity

6. Lack of Conventions

Conclusion

Git is a Your Best Friend. Why?

1. Collaborating with Others

2. Tracking Changes and Accountability

3. Backup and Recovery

4. Automating Tests and Deployments

5. Supporting Modern Development (DevOps & Microservices)

6. Open Source Power

7. Customizing Workflows

Conclusion

Thank You for Reading!

10 APIs for your projects

1) Fake Store API:

2) Words API:

3) Random user API:

4) Count API:

5) AccuWeather API:

6) IMDB API:

7) ExchangeRate API:

8) Lyrics & Music API:

9) News API:

10) Dicebear Avatars API:

HTML cool things

1) Make a call or mail:

2) Add a color picker:

3) Editabele Content:

4) Mark tag:

5) Time tag:

6) Progress bar:

7) Disable option:

8) Lazy Loading Image:

Javascript mistakes that beginners do

1) Accidentally Using the Assignment Operator:

2) Confusing Addition & Concatenation:

3) Misunderstanding Floats:

4) Not using parentheses when calling a function:

5) Referencing code before it’s loaded:

6) Not properly handling variable scope:

Javascript new features that introduced in ECMAScript 2020

Optional chaining operator (?.):

Nullish coalescing operator (??):

Dynamic imports:

bigInt:

import meta data:

New export syntax:

matchAll():

globalThis:

Promise.allSettled():

Techniques for optimizing JavaScript performance and reducing load times

Code Splitting:

Lazy Loading:

Caching:

Optimizing images:

Using a JavaScript framework:

The limitations of JavaScript as a programming language

Make your JavaScript code more efficient, readable, and maintainable.(Part 2)

Use clear and meaningful variable and function names:

Break code into smaller functions:

Use destructuring assignment to unpack values from arrays or objects:

Use spread operator to expand arrays and objects:

Use default parameters to provide default values for function arguments:

Use comments to explain complex or non-obvious code:

make your JavaScript code more efficient, readable, and maintainable.(Part 1)

Use let and const for variable declarations:

Use arrow functions when possible:

Make use of template literals:

Utilize Array.prototype methods:

Use clear and meaningful `variable` and `function` names:

Break code into smaller `functions`:

Use `destructuring` assignment to unpack values from `arrays` or `objects`:

Use `spread operator` to expand `arrays` and `objects`:

Use `default parameters` to provide default values for `function arguments`:

Use `let` and `const` for variable declarations: