DEV Community: Muhammad Ayoub Khan

Seeking a Dev Buddy — Not Just a Partner in Code 💬🤝💻

Muhammad Ayoub Khan — Sun, 25 May 2025 10:26:29 +0000

Hey DEV fam! 👋

I’m M. Ayoub, a front-end dev from _Faisalabad, Pakistan _with 3.5 years of experience. I love clean UI, solid UX, and late-night coding jams.

Lately, I’ve been craving more than solo work—someone to build cool stuff, bounce ideas, vent about bugs, or just code quietly on a call.

You might be the one if:

You’re a front-end dev (React, Next, JS, etc.)
You love the craft
You’re chill, curious, and consistent
You're in for real friendship—not just networking

I’m all about loyalty, learning, and genuine connection.
If this sounds like your vibe, drop a comment or hit me up via GitHub/Twitter/WhatsApp.

Let’s build, vibe, and grow—together. ✨❤️

Looking for a Real Dev Friend — Not Just a Collab 🤝💻

Muhammad Ayoub Khan — Sun, 25 May 2025 10:25:25 +0000

Hey DEV fam! 👋

I’m M. Ayoub, a front-end dev from _Faisalabad, Pakistan _with 3.5 years of experience. I love clean UI, solid UX, and late-night coding jams.

Lately, I’ve been craving more than solo work—someone to build cool stuff, bounce ideas, vent about bugs, or just code quietly on a call.

You might be the one if:

You’re a front-end dev (React, Next, JS, etc.)

You love the craft
You’re chill, curious, and consistent
You're in for real friendship—not just networking

I’m all about loyalty, learning, and genuine connection.
If this sounds like your vibe, drop a comment or hit me up via GitHub/Twitter/WhatsApp.

Let’s build, vibe, and grow—together. ✨❤️

HTML5 Semantic Tags: A Guide to Better Document Structure 🌐

Muhammad Ayoub Khan — Fri, 03 May 2024 02:43:20 +0000

In the dynamic landscape of web development, harnessing the power of HTML5 semantic tags is akin to sculpting a masterpiece – a website that not only captivates but also communicates effortlessly with users and search engines alike. Let's embark on a journey through the realm of semantic markup, exploring its myriad benefits and practical applications.

Unveiling the Essence of Semantic Tags

HTML5 ushered in a new era of web semantics, bestowing upon developers a treasure trove of tags that lend meaning and structure to content. Enter the realm of , , , , , , , and – the building blocks of a beautifully orchestrated web symphony.

The Virtues of Semantic Tags:

Accessibility: Semantic tags serve as beacons of clarity for assistive technologies, ensuring that users of all abilities can navigate and comprehend web content seamlessly.
SEO Sorcery: Search engine wizards decipher the language of semantic HTML, rewarding well-structured pages with higher visibility and coveted top spots in search results.
Readability Renaissance: Embracing semantic markup bestows upon code a newfound elegance, enhancing legibility and simplifying maintenance for developers.
Future-proof Foundations: Semantic tags are not mere artifacts of the past; they are beacons guiding us towards a future where web standards evolve harmoniously with emerging technologies.

Illuminating the Path with Practical Examples

Let's illuminate the path to semantic enlightenment with practical examples that showcase the versatility and elegance of semantic HTML.

Example 1: Crafting a Majestic Header

<header>
  <h1>Welcome to My Enchanted Realm</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Example 2: Enshrining Content within and

<main>
  <section>
    <h2>Tales of Wonder: Featured Stories</h2>
    <!-- Exquisite story snippets or enchanting imagery -->
  </section>
  <section>
    <h2>Wisdom Unveiled: Latest Insights</h2>
    <!-- Enlightening articles or pearls of wisdom -->
  </section>
</main>

Example 3: Chronicles of Knowledge with

<article>
  <header>
    <h2>The Chronicles of Enlightenment: A Journey Within</h2>
    <p>Published on <time datetime="2024-05-03">May 3, 2024</time></p>
  </header>
  <p>Embark on a quest for wisdom as we unravel the mysteries of the universe...</p>
  <footer>
    <p>Scribed by Lorem Ipsum</p>
  </footer>
</article>

Example 4: Footer Flourishes

<footer>
  <p>&copy; 2024 My Enchanted Realm. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#">Privacy Enchantment</a></li>
      <li><a href="#">Terms of Spellbinding</a></li>
      <li><a href="#">Contact the Oracle</a></li>
    </ul>
  </nav>
</footer>

Embarking on a Semantic Odyssey 🚀🌟

Incorporating HTML5 semantic tags into your web development odyssey elevates your creations to realms of unparalleled elegance and functionality. Embrace the magic of semantic markup to craft enchanting web experiences that resonate with users and enchant search engine algorithms alike. Let your code tell a story – one of clarity, accessibility, and enduring beauty. 🎨✨

Implementing Very Basic Dark/Light Modes with CSS Variables and JavaScript 🌓

Muhammad Ayoub Khan — Fri, 03 May 2024 02:17:48 +0000

Introduction:

In this tutorial, we'll walk through the process of implementing a dynamic theme switching feature on a web page using CSS variables and JavaScript. We'll create both dark and light themes and allow users to toggle between them seamlessly.

Prerequisites:

Basic knowledge of HTML, CSS, and JavaScript.

Step 1: Setting Up the HTML Structure:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Theme Switching</title>

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <header>
      <h1>Dynamic Theme Switching 🎨</h1>
    </header>

    <div class="container">
      <div class="card">
        <h2>Hello World! 👋</h2>
        <p>Welcome to our website. Enjoy the dynamic theme switching feature!</p>
      </div>
    </div>

    <button id="theme-toggle">Toggle Theme 🌗</button>

    <footer>
      <p>© 2024 Dynamic Theme Switching. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>
  </body>

</html>

Step 2: Creating the CSS Styles:

/* styles.css */

:root {
  --bg-color: #ffffff; /* default light mode background color */
  --text-color: #000000; /* default light mode text color */
}

.dark-mode {
  --bg-color: #333333;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition:
    background-color 0.3s,
    color 0.3s;
  font-family: Arial, sans-serif;
  margin: 0;
}

header {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgb(175, 175, 175);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.card {
  background-color: var(--light-bg-color);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

button {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
}

button:hover {
  background-color: #0056b3;
}

button#theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button#theme-toggle:hover {
  background-color: #0056b3;
}

footer {
  border-top: 1px solid rgb(175, 175, 175);
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 20px;
  text-align: center;
}

Step 3: Implementing the JavaScript Logic:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
});

Step 4: Testing and Final Touches:

Open the HTML file in a browser.
Click the "Toggle Theme" button to switch between dark and light modes.
Make any additional adjustments to the CSS for better theme consistency.

Conclusion:

Congratulations! You've successfully implemented a dynamic theme switching feature using CSS variables and JavaScript. Users can now enjoy a personalized browsing experience with dark and light modes.

You Don’t Need Redux — 3 Simple Alternatives for State Management in React 🚫🔄

Muhammad Ayoub Khan — Sun, 12 Mar 2023 11:47:00 +0000

When it comes to state management in React, Redux has been a popular choice for a long time. However, Redux can be complex and difficult to implement, especially for small and medium-sized projects. Fortunately, there are some simple alternatives to Redux that can handle state management effectively. In this article, we will discuss three simple alternatives to Redux for state management in React.

Introduction 🌟

React is a popular front-end library for building user interfaces. React components need to manage state to display dynamic content and handle user interaction. Redux has been a go-to solution for state management in React for a long time, but it can be complex and difficult to implement. In this article, we will explore some simple alternatives to Redux that can handle state management effectively.

Why Do We Need Alternatives to Redux? 🤔

Redux is a powerful state management library that has been widely adopted in the React community. However, it has some drawbacks that make it difficult to use in certain scenarios. Some of the common issues with Redux are:

Steep learning curve
Boilerplate code
Complex setup
Large codebase
Too much ceremony for small projects These issues make Redux a less than ideal choice for small and medium-sized projects. Fortunately, there are some simple alternatives that can handle state management effectively without the overhead of Redux.

3 Simple Alternatives to Redux 🙌

React Context 🌳

React Context is a built-in feature of React that provides a way to share data between components without the need for props drilling. It works by creating a context object that can be consumed by any component in the tree.

React Context is a simple and lightweight solution for state management in React. It can handle small and medium-sized projects effectively without the overhead of Redux.
https://reactjs.org/docs/context.html

Zustand 🏃‍♀️

Zustand is a small, fast, and lightweight state management library for React. It provides a simple API for managing state and supports advanced features like derived state, middleware, and devtools.

Zustand is a great alternative to Redux for small and medium-sized projects. It provides a simple and intuitive API that can handle most state management requirements.
https://zustand-demo.pmnd.rs/

Recoil 🎯

Recoil is a state management library for React that provides a simple and intuitive API for managing state. It is built on top of React Hooks and supports advanced features like selectors, asynchronous state updates, and devtools.

Recoil is a great alternative to Redux for small and medium-sized projects. It provides a simple and intuitive API that can handle most state management requirements.

https://recoiljs.org/

Conclusion 🌟

Redux is a powerful state management library that has been widely adopted in the React community. However, it can be complex and difficult to implement, especially for small and medium-sized projects. Fortunately, there are some simple alternatives to Redux that can handle state management effectively. In this article, we discussed three simple alternatives to Redux: React Context, Zustand, and Recoil.

FAQs ❓

What is state management? 🤔

State management is the process of managing the state of a web application. It involves storing and updating data that determines the behavior and appearance of the application.

What is Redux? 🔄

Redux is a state management library for JavaScript applications. It provides a predictable and centralized way to manage state in large and complex applications.

Why do we need state management in React? 🌟

React components need to manage state to display dynamic content and handle user interaction.

What are the benefits of using alternatives to Redux? 🌟

Alternatives to Redux can be simpler, faster, and easier to use than Redux

React vs Vue: The Core Similarities and Differences

Muhammad Ayoub Khan — Sun, 26 Feb 2023 01:40:27 +0000

Are you planning to build a new web application but confused about which JavaScript framework to choose? Two popular contenders in the market are React and Vue. Both React and Vue are highly capable JavaScript libraries that offer incredible flexibility, scalability, and robustness for building complex web applications. In this article, we will dive into React vs Vue: The Core Similarities and Differences, to help you choose the best one for your next project.

SEO Meta Description: In this article, we will discuss the similarities and differences between two popular JavaScript frameworks, React and Vue, to help you choose the best one for your next web application project.

Introduction:

React and Vue are two of the most popular JavaScript frameworks available today. React was developed by Facebook in 2011, whereas Vue was created by Evan You in 2014. Both React and Vue have their own set of features, benefits, and limitations. However, they share many similarities as well. React and Vue are both used for building interactive user interfaces, and they are popular among developers for their flexibility, performance, and ease of use.

React vs Vue: A Brief Overview

React is a JavaScript library developed by Facebook for building complex user interfaces. It allows developers to create reusable UI components and manage state using a virtual DOM. React is highly performant and widely used by many large organizations, including Facebook, Airbnb, and Netflix.

Vue, on the other hand, is a progressive JavaScript framework for building user interfaces. It emphasizes reusability and simplicity, and it is designed to be easy to learn and use. Vue is often compared to Angular and React, but it has its own unique set of features and benefits.

React vs Vue: Similarities and Differences

React and Vue share many similarities, such as:

Both use a virtual DOM to update the UI efficiently
Both offer reactive and declarative programming models
Both are lightweight and can be used with other libraries and frameworks
Both provide excellent documentation and tooling support
However, there are some key differences between React and Vue, such as:

React is a library, whereas Vue is a full-blown framework
React uses JSX for building UI components, while Vue uses templates and render functions
React has a steeper learning curve than Vue due to its more complex architecture
Vue offers built-in support for two-way data binding, while React requires additional libraries or manual implementation
React vs Vue: Performance

Performance is a crucial factor to consider when choosing a JavaScript framework for your project. React and Vue both offer excellent performance, but they have some differences.

React Performance:

React's virtual DOM is highly optimized for performance, making it ideal for building large-scale, complex web applications. React also provides excellent server-side rendering support, which can improve initial page load times and SEO.

Vue Performance:

Vue is also highly performant, and it has a smaller runtime size than React, which can improve load times. Vue's rendering engine is highly optimized, and it offers excellent support for lazy-loading and code splitting, which can further improve performance.

React vs Vue: Learning Curve

Learning curve is another crucial factor to consider when choosing a JavaScript framework. React and Vue both have their own learning curves.
React has a steeper learning curve due to its more complex architecture. React requires developers to learn JSX, which is a syntax extension to JavaScript that allows developers to write HTML-like code in their JavaScript files. React also has a larger ecosystem of tools and libraries, which can be overwhelming for beginners.

Vue, on the other hand, has a gentler learning curve due to its simplicity and ease of use. Vue uses templates and render functions, which are similar to HTML and JavaScript, making it easier for developers to get started. Vue also provides excellent documentation and tooling support, which can help developers learn and use the framework more easily.

React vs Vue: Community Support

Community support is another essential factor to consider when choosing a JavaScript framework. React and Vue both have active and growing communities, but there are some differences.

React has a massive community of developers and organizations that use and contribute to the framework. React has been around for longer than Vue, which has helped it establish a strong community of contributors, tooling, and libraries. React also has excellent documentation, tooling, and support from Facebook, which makes it easier for developers to use and learn.

Vue, on the other hand, has a smaller but growing community of developers and organizations that use and contribute to the framework. Vue has gained popularity in recent years due to its simplicity and ease of use, which has helped it attract more developers and organizations. Vue also has excellent documentation, tooling, and support from the Vue team, which makes it easier for developers to use and learn.

React vs Vue: Popularity and Job Market

Popularity and job market are two factors that can impact your decision when choosing a JavaScript framework. React and Vue both have high popularity and job demand, but there are some differences.

React is currently the most popular JavaScript library, according to the 2021 Stack Overflow Developer Survey. React has a massive user base and job demand, with many large organizations using and hiring React developers. React is also used in many high-traffic websites and applications, making it a safe and reliable choice for building complex web applications.

Vue, on the other hand, is also gaining popularity and job demand, according to the same survey. Vue has a growing user base and job demand, with many startups and small to medium-sized organizations using and hiring Vue developers. Vue is also known for its ease of use and flexibility, making it a popular choice for building simple to medium complexity web applications.

React vs Vue: Which One to Choose for Your Project?

Choosing between React and Vue ultimately depends on your project's requirements, team's expertise, and personal preferences. If you're building a large-scale, complex web application with a steep learning curve, React may be the better choice. If you're building a small to medium-sized web application with a simpler architecture and an easier learning curve, Vue may be the better choice.

Regardless of which framework you choose, both React and Vue offer excellent performance, flexibility, and community support. With the right team and tools, you can build robust and scalable web applications with either framework.

🔄🔂 5 Simple Ways to Loop Over Data in HTML Using JavaScript 📊📝

Muhammad Ayoub Khan — Fri, 24 Feb 2023 12:48:00 +0000

Looping over data is a common task when working with web applications. Whether you're displaying data in a table, a list, or any other format, you'll often need to loop through an array or object to generate the corresponding HTML markup. In this article, we'll explore five different ways to loop over data in HTML using JavaScript.

The for Loop

The for loop is the most common and versatile way to loop over an array in JavaScript. Here's an example:

const data = ['apple', 'banana', 'cherry'];

for (let i = 0; i < data.length; i++) {
  const listItem = document.createElement('li');
  listItem.textContent = data[i];
  document.querySelector('ul').appendChild(listItem);
}

In this example, we're using a for loop to iterate over an array of fruits and create a new list item element for each one.

The forEach Method

The forEach method is a built-in function of arrays that allows you to loop through each element and perform an action on it. Here's an example:

const data = ['apple', 'banana', 'cherry'];

data.forEach((item) => {
  const listItem = document.createElement('li');
  listItem.textContent = item;
  document.querySelector('ul').appendChild(listItem);
});

In this example, we're using the forEach method to iterate over the array and create a new list item element for each element.

The for...in Loop

The for...in loop is a built-in JavaScript loop that allows you to loop over the keys of an object. Here's an example:

const data = { name: 'John', age: 30, city: 'New York' };

for (let key in data) {
  const listItem = document.createElement('li');
  listItem.textContent = `${key}: ${data[key]}`;
  document.querySelector('ul').appendChild(listItem);
}

In this example, we're using the for...in loop to loop over the keys of an object and create a new list item element for each key-value pair.

The for...of Loop

The for...of loop is a built-in JavaScript loop that allows you to loop over the values of an iterable object, such as an array. Here's an example:

const data = ['apple', 'banana', 'cherry'];

for (let item of data) {
  const listItem = document.createElement('li');
  listItem.textContent = item;
  document.querySelector('ul').appendChild(listItem);
}

In this example, we're using the for...of loop to loop over the values of an array and create a new list item element for each element.

The map Method

The map method is another built-in function of arrays that allows you to loop through each element and create a new array with the results. Here's an example:

const data = ['apple', 'banana', 'cherry'];

const listItems = data.map((item) => {
  const listItem = document.createElement('li');
  listItem.textContent = item;
  return listItem;
});

document.querySelector('ul').append(...listItems);

In this example, we're using the map method to iterate over the array and create a new list item element for each element. We're then using the spread operator to append all of the list items to the unordered list element.

These are just a few of the many ways to loop over data in HTML using JavaScript. By understanding these techniques, you can write more efficient and maintainable code when working with web applications.

7 best ReactJS developer tools to simplify your workflow

Muhammad Ayoub Khan — Thu, 23 Feb 2023 19:59:00 +0000

ReactJS is a popular JavaScript library used for building web applications. Its flexibility and reusability make it a favorite among developers. However, the development process can be time-consuming and challenging, especially when working on large and complex projects. Luckily, there are many ReactJS developer tools available to simplify the workflow and make development faster and more efficient.

Here are the 7 best ReactJS developer tools that can help you to streamline your development process:

React Developer Tools

React Developer Tools is a browser extension that allows developers to inspect React components and their structure. This tool provides an easy way to debug and troubleshoot React applications. You can download it from its official GitHub repository:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Redux DevTools

Redux DevTools is a browser extension that allows developers to inspect and debug Redux stores. This tool helps developers to track state changes, actions, and other data related to the Redux store. You can download it from its official GitHub repository: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

Bit

Bit is a tool that helps developers to share and reuse React components across projects. It allows developers to create and manage a shared component library, making it easier to maintain consistency and improve productivity. You can visit its official website to learn more:
https://bit.dev/

Storybook

Storybook is a tool that allows developers to build and test React components in isolation. This tool provides a visual interface for creating and testing components, making it easier to develop and debug UI components. You can visit its official website to learn more: https://storybook.js.org/.

React Styleguidist

React Styleguidist is a tool that generates a living style guide for React components. This tool helps developers to document and showcase their components, making it easier for other developers to understand and use them. You can visit its official website to learn more:
https://react-styleguidist.js.org/.

ESLint

ESLint is a tool that helps developers to identify and fix common coding errors and maintain consistency in their code. It provides a set of rules and guidelines that can be customized to fit the specific needs of a project. You can visit its official website to learn more:
https://eslint.org

Prettier

Prettier is a code formatter that helps developers to maintain consistent code formatting across a project. It automatically formats code based on a set of rules, making it easier to read and understand. You can visit its official website to learn more:
https://prettier.io/

Conclusion

These 7 ReactJS developer tools can help streamline the development process and improve productivity. React Developer Tools, Redux DevTools, Bit, Storybook, React Styleguidist, ESLint, and Prettier are all excellent tools that can simplify your workflow and make your ReactJS development experience more efficient and enjoyable. Give them a try and see how they can help you to simplify your workflow!

Top Chrome Extensions Every Frontend Developer Should Use 💡💻🔧

Muhammad Ayoub Khan — Wed, 22 Feb 2023 19:53:23 +0000

Introduction: As a frontend developer, using the right tools is essential for improving productivity and delivering high-quality work. Chrome extensions can be incredibly helpful in this regard, providing a range of features that can streamline your workflow, optimize your code, and improve your overall development experience. In this thread, we've highlighted some of the best Chrome extensions for frontend developers, which can help you build better websites and applications faster and more efficiently.

1. Lighthouse

Audits your web pages for performance, accessibility, and best practices. 💻🚀 Get it from https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

2. JSON Viewer

Makes JSON data easier to read and debug by formatting it in a tree structure. 🔍💡 Get it from https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

3. React Developer Tools

Allows you to inspect the React component hierarchy and see their props, state, and more. 🔍💡 Get it from https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

4. Axios Dev Tools

Makes it easy to debug Axios API requests and responses. 🔧💻 Get it from https://chrome.google.com/webstore/detail/axios-dev-tools/cffnfgppjihohebhicijihlhnpkpjifd

5. CSS Peeper

Inspect and copy any CSS styles from a website with just one click. 🔍🎨 Get it from https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

6. Fontface Ninja

Allows you to identify the fonts used on any website with ease. 🔍🎨 Get it from https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh

8. Wappalyzer

Reveals the technologies used on a website, including the CMS, e-commerce platform, and more. 🔍💻 Get it from https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg

These are just a few of the best #ChromeExtensions for frontend development. Which ones do you use and love? 💻🔧 #WebDevelopment #FrontendTools 💻🔧

7 Killer 🗡 JS techniques 🔥you've probably never heard of 🔈

Muhammad Ayoub Khan — Wed, 22 Feb 2023 19:33:38 +0000

JavaScript is a powerful and versatile programming language that is constantly evolving. With new frameworks, libraries, and tools being released every year, it's easy to overlook some of the lesser-known but incredibly useful techniques and features that JavaScript has to offer. In this article, we'll explore 7 killer JavaScript techniques that you've probably never heard of. These techniques will help you to write more efficient, elegant, and maintainable code, and take your JavaScript skills to the next level. So, let's dive in!

Memoization

Memoization is a technique that involves caching the results of expensive function calls and returning the cached results when the same inputs occur again. This technique can significantly improve the performance of your JavaScript code, especially when dealing with complex and time-consuming calculations.
Here is an example of a memoized function that calculates the nth Fibonacci number:

function memoize(func) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func.apply(this, args);
    cache[key] = result;
    return result;
  };
}

const fibonacci = memoize(function (n) {
  if (n === 0 || n === 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(10)); // 55
console.log(fibonacci(20)); // 6765

Currying

Currying is a functional programming technique that involves transforming a function with multiple arguments into a sequence of functions, each with a single argument. This technique can make your code more modular and reusable, and it's particularly useful for creating higher-order functions that can be composed together.
Here is an example of a curried function that adds two numbers:

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

const add5 = add(5);
console.log(add5(10)); // 15

Throttling

Throttling is a technique that limits the rate at which a function can be called. This technique can prevent performance issues caused by rapid and repeated function calls, such as when handling user input or making API requests.
Here is an example of a throttled function that logs a message every 1000 milliseconds:

function throttle(func, delay) {
  let last = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - last < delay) {
      return;
    }
    last = now;
    func.apply(this, args);
  };
}

const logMessage = function (message) {
  console.log(message);
};

const throttledLogMessage = throttle(logMessage, 1000);

throttledLogMessage("Hello"); // logs "Hello"
throttledLogMessage("World"); // does not log
setTimeout(function () {
  throttledLogMessage("Goodbye"); // logs "Goodbye"
}, 2000);

Debouncing

Debouncing is a technique that delays the execution of a function until a certain amount of time has passed without any further function calls. This technique can be useful for handling events that occur frequently, such as scroll or resize events, and can help to prevent performance issues caused by excessive function calls.
Here is an example of a debounced function that logs a message 500 milliseconds after the last function call:

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const logMessage = function (message) {
  console.log(message);
};

const debouncedLogMessage = debounce(logMessage, 500);

debouncedLogMessage("Hello"); // does not log
debouncedLogMessage("World"); // does not log
setTimeout(function () {
  debouncedLogMessage("Goodbye"); // logs "Goodbye"
}, 1000);

Partial Application

Partial application is a technique that involves fixing some of the arguments of a function, and returning a new function that takes the remaining arguments. This technique can be useful for creating new functions that are specialized for a particular use case, or for reducing the number of arguments that need to be passed to a function.
Here is an example of a partially applied function that multiplies two numbers:

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 10

Thanks for reading ✨!

These 7 JavaScript techniques are just a small sampling of the many powerful tools and concepts available to developers. By using them in your own code, you can simplify complex operations, reduce code duplication, and improve the performance of your applications. Whether you're a seasoned JavaScript developer or just starting out, it's always a good idea to keep learning and exploring new techniques to take your coding skills to the next level. So go forth and experiment with these techniques, and see what else you can discover in the exciting and constantly evolving world of JavaScript development.

Top 10 Class-Based UI Libraries for Frontend Web Development in 2023: A Comprehensive Guide

Muhammad Ayoub Khan — Wed, 22 Feb 2023 19:09:56 +0000

There are many class-based UI libraries available for frontend web development, each with its own unique features and advantages. Material UI, Semantic UI, Ant Design, Blueprint, Chakra UI, Carbon Design System, Grommet, Element, Shards React, and Rebass are just some of the popular UI libraries available for developers to use. These libraries offer a range of customizable components such as buttons, forms, and icons, along with responsive grid systems and customizable themes, making it easier for developers to create intuitive and visually appealing user interfaces. When choosing a UI library, it's important to consider factors such as ease of use, compatibility with your chosen front-end framework, and the specific needs of your project. With so many options available, developers can choose a library that meets their unique requirements and helps them to build high-quality user interfaces quickly and efficiently.

Material UI

Material UI (https://material-ui.com/): Material UI is a popular UI library that follows the Material Design guidelines and provides a wide range of customizable UI components. It is built using React and offers themes, icons, and utilities to help developers quickly build responsive and intuitive user interfaces.

Semantic UI

Semantic UI (https://semantic-ui.com/): Semantic UI is a user-friendly and intuitive UI library that focuses on human-friendly HTML and provides a variety of UI components, themes, and responsive layout options. It is built using HTML, CSS, and JavaScript and is compatible with many popular front-end frameworks such as React, Angular, and Vue.

Ant Design

Ant Design (https://ant.design/): Ant Design is a comprehensive UI library that provides a range of high-quality React components with a consistent design language. It offers a wide range of UI components such as forms, tables, and charts, along with a flexible layout system and a customizable theme.

Blueprint

Blueprint (https://blueprintjs.com/): Blueprint is a UI toolkit that provides a set of reusable UI components for building complex web applications. It is built using React and offers a range of customizable components such as buttons, forms, and modals, along with a responsive grid system and a flexible layout engine.

Chakra UI

Chakra UI (https://chakra-ui.com/): Chakra UI is a simple, modular, and accessible UI library that provides a range of UI components and design systems. It is built using React and offers a wide range of customizable components such as buttons, inputs, and alerts, along with a responsive layout system and a customizable theme.

Carbon Design System

Carbon Design System (https://www.carbondesignsystem.com/): Carbon Design System is a UI library that provides a set of reusable UI components with a consistent design system, suitable for building complex web applications. It is built using React and offers a wide range of customizable components such as buttons, inputs, and icons, along with a responsive layout system and a customizable theme.

Grommet

Grommet (https://grommet.io/): Grommet is a comprehensive UI library that provides a range of customizable UI components, layouts, and themes, suitable for building responsive web applications. It is built using React and offers a wide range of customizable components such as buttons, forms, and icons, along with a responsive grid system and a customizable theme.
Element (https://element.eleme.io/): Element is a UI library that provides a set of customizable UI components with a modern design and a responsive layout system. It is built using Vue.js and offers a wide range of customizable components such as buttons, inputs, and icons, along with a responsive grid system and a customizable theme.

Shards React

Shards React (https://designrevision.com/downloads/shards-react/): Shards React is a lightweight and modern UI library that provides a set of customizable UI components with a minimalist design. It is built using React and offers a wide range of customizable components such as buttons, inputs, and icons, along with a responsive grid system and a customizable theme.

Rebass

Rebass (https://rebassjs.org/): Rebass is a responsive UI library that provides a set of customizable UI components with a functional design language. It is built using React and offers a range of customizable components such as buttons, forms, and cards, along with a responsive grid system and a customizable theme.

Conclusion

Class-based UI libraries are a useful tool for frontend web developers. They provide a range of customizable UI components, making it easier for developers to build intuitive and visually appealing user interfaces. With so many options available, developers can choose a library that meets their specific needs and helps them to create high-quality web applications.

Answer: How to add class to link in wp_nav_menu?

Muhammad Ayoub Khan — Sun, 06 Jun 2021 13:39:49 +0000

Jun 6 '21

I have solution to add class to anchor tag.

1: Step: add this in functions.php

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

2: Then use it like this in your theme

<?php
        // Show Menu here
        wp_nav_menu(array(
            'theme_location'

…

Open Full Answer