Step right up, ladies and gentlemen! Today, we’re diving into the thrilling world of crawl budgets—the magical limit that determines how much time Googlebot spends crawling your website. Think of it as a circus act where Googlebot is the star performer, and your site is the stage. If you want to keep the show running smoothly, you need to manage that crawl budget like a pro!

What Is a Crawl Budget?

Picture this: Googlebot rolls up to your digital doorstep, ready to explore. But wait! It only has a limited amount of time and resources to check out your pages. That’s your crawl budget in action!

In simple terms, crawl budget refers to the number of pages Googlebot can crawl on your site within a given timeframe. This budget fluctuates based on several factors, including:

• Site Size: Bigger sites have more pages to crawl, which can stretch that budget thin.

• Site Health: If your site has errors or slow loading times, Googlebot might decide it’s not worth its time.

• Content Freshness: Regular updates signal to Google that your site is worth revisiting.

If you have a large site (think millions of pages), managing this budget becomes crucial. Otherwise, important content could get lost in the digital shuffle!

Why Should You Care About Crawl Budget?

Imagine throwing a party where half your guests can’t find the bathroom because it’s hidden behind a mountain of clutter. That’s what happens when Googlebot can’t efficiently crawl your site! A poor crawl budget means:

• Lower Search Rankings: If Google can't find your pages, they won't show up in search results.

• Reduced Visibility: Your content might as well be hiding under a rock.

• Fewer Leads and Sales: If potential customers can’t find you online, you’re missing out!

So, let’s roll up our sleeves and optimize that crawl budget!

How Does Googlebot Decide What to Crawl?

Googlebot isn’t just wandering around aimlessly; it’s got a plan! Here’s how it decides what gets crawled:

1. Crawl Demand: This is how much Google wants to crawl your site based on popularity and content changes. If you’ve got hot topics or trending content, expect more visits!

2. Crawl Capacity Limit: This is the maximum number of simultaneous connections Googlebot can use while crawling your site. Think of it as the number of rides at a theme park—too many visitors at once can lead to chaos!

3. Sitemap Signals: Keeping an updated sitemap is like giving Googlebot a map of your amusement park. It shows them where all the fun stuff (your important pages) is located.

Tips for Optimizing Your Crawl Budget

Now that we’ve established why crawl budgets matter, let’s get into the nitty-gritty of optimization. Here are some tips that will make Googlebot feel like royalty at your digital soirée:

1. Prioritize Important Pages

Decide which pages are must-sees for Googlebot and which can take a backseat. Use analytics tools to identify high-traffic pages and ensure they’re easily accessible.

2. Clean Up Duplicate Content

Duplicate content is like serving the same dish at every meal—boring! Consolidate similar pages to enhance user experience and make it easier for Googlebot to navigate.

3. Maintain a Clear Site Structure

A logical site architecture helps Googlebot find its way around without getting lost. Use clear categories and internal links to guide them through your content.

4. Keep Your Sitemaps Updated

An outdated sitemap is like giving someone an old map—it leads them nowhere! Regularly update your sitemap with new URLs and remove any outdated ones.

5. Monitor Server Performance

Ensure your server can handle traffic without breaking down like an overworked clown car. Slow loading times or errors can deter Googlebot from crawling effectively.

Advanced Strategies for Large Sites

For those managing massive websites (we're talking millions of pages), here are some advanced strategies:

• Mobile Link Consistency: With mobile-first indexing taking center stage, ensure that both mobile and desktop versions of your site have consistent links. Inconsistencies confuse Googlebot and waste precious crawl budget!

• Utilize URL Parameters Wisely: If you have dynamic URLs with parameters (like tracking codes), manage them carefully to avoid creating unnecessary duplicate content.

• Regularly Check Crawl Stats: Use tools like Google Search Console to monitor how many pages are being crawled daily versus how many you have overall. If you notice a disparity, it’s time for some optimization magic!

Conclusion: Keep the Show Going! 🎭

Managing your crawl budget doesn’t have to be daunting; think of it as keeping the circus running smoothly! By prioritizing important content, maintaining a clean site structure, and regularly updating sitemaps, you’ll ensure that Googlebot has a fantastic experience on your site.

Remember, if you treat Googlebot like the VIP guest it is, you'll reap the rewards in search visibility and traffic. So roll up those sleeves, put on your best party hat, and let’s keep that crawl budget in check! Happy crawling!

Let’s dive straight into the details.

What is the Magic of 6174?

The number 6174 is known as Kaprekar’s constant, and it has a special trick. If you take almost any 4-digit number, follow a few simple steps, and repeat them, you will always end up with 6174. No matter what!

Here’s how it works:

1. Pick a 4-digit number (it can’t have all the digits the same, like 1111 or 2222).

2. Rearrange the digits to make the biggest number possible and the smallest number possible.

3. Subtract the smallest number from the biggest number.

Repeat the process with the new number you get, and after a few rounds, you’ll reach 6174.

How to Do It (So Easy a 5-Year-Old Can Understand)

Let’s break it down super simply. Imagine you have a 4-digit number like 3524. Here’s what you do:

1. First, rearrange the digits so you get the largest and smallest numbers.

   • Largest: 5432

   • Smallest: 2345

2. Now subtract the smallest from the largest:
   5432 - 2345 = 3087

3. Now do the same thing with the new number, 3087.

   • Largest: 8730

   • Smallest: 0378 (which is just 378)

4. Subtract them:
   8730 - 378 = 8352

5. Now take 8352 and repeat the process:

   • Largest: 8532

   • Smallest: 2358

6. Subtract:
   8532 - 2358 = 6174

And that’s it! You’ve reached the magic number 6174. If you keep going, you’ll always get 6174 no matter how many times you repeat the steps.

Try it out for yourself, you can check out this CodePen and play around with Kaprekar's constant right in your browser.

Who Discovered This and Why Is It Special?

The magic of 6174 was discovered by an Indian mathematician named D. R. Kaprekar in 1949. He loved finding interesting patterns in numbers, and this one is his most famous discovery. It’s a fun trick that shows how math can surprise us in unexpected ways.

India has contributed a lot to mathematics, from the invention of the number zero to the brilliant work of mathematicians like Srinivasa Ramanujan. Kaprekar’s constant is another reminder that math can be playful and full of cool discoveries, even when it seems simple.

Like countless developers, I found solace in managing my priorities through a straightforward text file. The simplicity of having a to-do file right in your workspace, ready to be opened and updated at any moment, is unmatched. It's a quick and efficient way to keep track of tasks while staying focused on the coding process.

However, when juggling multiple tasks in parallel, a basic to-do list might fall short. ToDo+ steps in to bridge that gap, enhancing the traditional to-do list with features that go beyond the ordinary.

Enter Fabio Spampinato's ToDo+ VSCode extension – a game-changer for developers seeking a balance between simplicity and advanced task management.

Demo:

Projects:
  ☐ Anything with a colon at the end of the line is a project
  ☐ Projects will show some statistics next to them @1h
    ✔ By default those statistics are the number of pending todos and the sum of their time estimates @30m
  Nested:
    ☐ You can nest projects inside each other and fold them

Todos:
  You can write plain text notes/descriptions wherever you want
  New:
    ☐ Press Cmd/Ctrl+Enter to add a new todo
  Done:
    ✔ Press Alt+D to mark a todo as done
    ✔ Press it again to undo the action
  Cancelled:
    ✘ Press Alt+C to mark a todo as cancelled
    ✘ Press it again to undo the action
  Tagging:
    ☐ You can add tags using the @ symbol, like this @tag
    ☐ There are some special, customizable tags: @critical @high @low @today
  Timekeeping:
    ✔ Completed todos can show a timestamp @done(17-11-03 10:42)
    ☐ Press Alt+S to mark a todo as started @started(17-11-03 10:42)
      ✔ Now it will show the elapsed time @started(17-11-03 10:42) @done(17-11-03 20:11) @lasted(9h29m)
    ☐ You can provide time estimates for your todos @1h30m
      ☐ We are even doing some natural language processing @est(1 day and 20 minutes)

Formatting:
  You can format text in a markdown-like fashion
  Bold:
    ☐ Use asterisks for *bold*
  Italic:
    ☐ Use underscores for _italic_
  Strikethrough:
    ☐ Use tildes for ~strikethrough~
  Code:
    ☐ Use backticks for `code`

Archive:
  ✔ You can archive finished todos here
  ✔ Congratulations, you are now a Todo+ master!

Feature Highlights

Here's a glimpse of what ToDo+ brings to the table:

1. Portable:

   • Utilizes a plain text format, ensuring compatibility with any text editor.

2. Custom Symbols:

   • Choose from a variety of symbols to represent tasks.

   • Symbols include boxes, done indicators, and cancellation markers.

     • Box Symbols: - ❍ ❑ ■ ⬜ □ ☐ ▪ ▫ – — ≡ → › [] [ ]

     • Done Symbols: ✔ ✓ ☑ + [x] [X] [+]

     • Cancelled Symbols: ✘ x X [-]

3. Custom Colors:

   • Personalize your to-do list with customized colors for a visually appealing experience.

4. Custom Special Tags:

   • Assign special tags to tasks for priorities, individuals, or any other categorization.

   • Tailor the color scheme for these special tags to suit your preferences.

5. Archive Functionality: Move completed tasks to a designated "Archive" section effortlessly.

6. Formatting Options: Apply formatting similar to Markdown, including bold, italic, strikethrough, and code.

7. Timekeeping and Timer:

   • Track elapsed time for tasks.

   • Display a timer in the status bar for ongoing tasks.

8. Time Estimates: Estimate the time needed for tasks using tags like @est(3 hours) or @2h30m.

9. Statistics: Gain insights into your overall progress with file and project-level statistics.

10. Embedded Todos: Identify //TODO or //FIXME comments in your code effortlessly.

11. Activity Bar Views: Access your to-do file and embedded todos directly from a custom activity bar section.

Configure Your Workflow

Explore detailed configurations and unleash the full potential of ToDo+ at VSCode Marketplace.

In conclusion, ToDo+ by Fabio Spampinato transforms the way developers manage their tasks. It strikes the perfect balance between simplicity and advanced functionality, making it a must-have extension for anyone seeking to supercharge their productivity within the VSCode environment. Give it a try and experience a new level of efficiency in your coding journey!

The Birth of an Idea: Tim Berners-Lee's Proposal

The WWW wasn't a stroke of luck but a well-thought-out concept proposed by Tim Berners-Lee. In 1989, he introduced the idea of linking documents using hypertext, a concept that had been in the minds of researchers. This visionary proposal paved the way for a revolution in information sharing and collaboration.

📜 The Document that Started it All: Tim Berners-Lee's Proposal for the World Wide Web (March 1989)

Fast forward to the execution phase. Tim Berners-Lee went beyond the proposal stage and set out to bring his vision to life. He not only conceptualized but also implemented the first web server, browser, and webpage.

🖥️ The NeXT Frontier: The Computer Behind the Web Revolution

The hardware that powered this groundbreaking venture was no ordinary machine. Tim Berners-Lee utilized a NeXT computer at CERN, demonstrating the fusion of cutting-edge technology with innovative ideas.

🌐 Exploring the First Webpage:

The inaugural webpage, hosted on the NeXT computer, can still be visited today. Take a digital stroll through history by visiting the link: http://info.cern.ch/hypertext/WWW/TheProject.html. It provides a glimpse into the simplicity of the early web and the ambitious project Tim Berners-Lee set in motion.

💻 Tim Berners-Lee's NeXT World Wide Web browser

HTML, or Hypertext Markup Language, was the language that glued these early web pages together. It allowed for the formatting of text and images and the creation of links to other pages. Tim Berners-Lee's NeXT World Wide Web browser was instrumental in bringing this language to life.

🚀 Evolution of HTML: From Simple to Dynamic

HTML started with humble capabilities, but it rapidly evolved. Versions like HTML 2 introduced tables, forms, and image maps. HTML 3 embraced fonts, colors, and multimedia. HTML 4 brought style sheets and scripting into the mix. Finally, HTML 5 introduced a new era with features like video, audio, canvas, and semantic elements.

🎉 Celebrating the Web Pioneers

As we navigate the vast expanse of the internet today, let's take a moment to celebrate the pioneers like Tim Berners-Lee. His visionary ideas and relentless efforts have shaped the digital landscape we know and love.

🌐 #WebOrigins #TimBernersLee #HTMLEvolution #WWWHistory #TechInnovation

In conclusion, the journey from a simple proposal to the dynamic web we experience today is awe-inspiring. Let's express gratitude to the trailblazers who, like Tim Berners-Lee, set the stage for the interconnected world we live in. 🚀✨

Credits:

Cover photo: Tim Berners-Lee, World Wide Web inventor (cern.ch)

An image of the first page of Tim Berners-Lee's proposal for the World Wide Web in March 1989 (cern.ch)

A screenshot showing the NeXT world wide web browser created by Tim Berners-Lee (cern.ch)

const numericValue = +"42"; // Converts the string to a number
console.log(numericValue); // Output: 42 

const numericValue = +"abc";
console.log(numericValue); // Output: Nan

The + symbol is placed before the stringNumber, and it effectively coerces the string into a numeric value. It's important to note that if the string cannot be converted to a valid number, the result will be NaN

Double Bitwise NOT for Math.floor:

// Instead of
const rounded1 = Math.floor(4.9);
console.log(rounded1); // Output: 4
// Use
const rounded2 = ~~4.9;
console.log(rounded2); // Output: 4

Swapping Values:

// Use destructuring
let a = 5, b = 10;
[a, b] = [b, a];

Destructuring assignment can be used to exchange the values of two variables in a concise manner, as shown in the example: [a, b] = [b, a];. This eliminates the need for a temporary variable and simplifies the swapping process.

Simplify Multiple Criteria Checks with Array.includes

Without Array.includes:

const userRole = "admin";

// Check if the user role is one of the specified roles
if (userRole === "admin" || userRole === "editor" || userRole === "viewer") {
  console.log("User has a valid role!");
} else {
  console.log("Invalid user role.");
}

With Array.includes:

const validRoles = ["admin", "editor", "viewer"];
const userRole = "admin";

// Check if the user role is in the array of valid roles
if (validRoles.includes(userRole)) {
  console.log("User has a valid role!");
} else {
  console.log("Invalid user role.");
}

Object.freeze and Immutability:

// Create a mutable object
const mutableObject = {
  property1: 'value1',
  property2: 'value2'
};
// Freeze the object to make it immutable
const immutableObject = Object.freeze(mutableObject);
// Attempt to modify a property - this will not throw an error, but it won't have any effect
immutableObject.property1 = 'new value';
// Attempt to add a new property - this will not throw an error, but it won't have any effect
immutableObject.property3 = 'value3';
// Attempt to delete a property - this will not throw an error, but it won't have any effect
delete immutableObject.property2;
// The original object remains unchanged
console.log(mutableObject); // { property1: 'new value', property2: 'value2' }
// The frozen object remains unchanged
console.log(immutableObject); // { property1: 'value1', property2: 'value2' }

Object.freeze makes an object immutable, preventing changes to its properties.

Although Object.freeze is handy for preventing changes to an object's properties, it's important to keep in mind that it doesn't ensure deep immutability. If your object has nested objects, those nested parts might still be mutable. If you need full deep immutability, you might want to consider taking extra steps or using libraries like Immutable.js, which specifically support immutable data structures.

Logical AND for Short-Circuit Evaluation:

// Instead of if-else
let result;
if (condition) {
  result = 'True';
} else {
  result = 'False';
}

// Use logical AND
let result = condition && 'True' || 'False';

Early Returns & Less Nesting

Less Desirable Example:

function calculatePrice(quantity, price) {
  if (quantity > 0) {
    if (price > 0) {
      let totalPrice = quantity * price;

      if (quantity >= 10) {
        totalPrice *= 0.9; // 10% discount for quantities of 10 or more
      }

      return totalPrice;
    } else {
      console.error("Invalid input: Price must be a positive value.");
    }
  } else {
    console.error("Invalid input: Quantity must be a positive value.");
  }
}
const finalPrice = calculatePrice(15, 5);

Good Example:

function calculatePrice(quantity, price) {
  // Validate input parameters
  if (quantity <= 0 || price <= 0) {
    console.error("Invalid input: Quantity and price must be positive values.");
    return;
  }

  // Calculate total price
  const totalPrice = quantity * price;

  // Apply discount for bulk purchases
  if (quantity >= 10) {
    return totalPrice * 0.9; // 10% discount for quantities of 10 or more
  }

  return totalPrice;
}
const finalPrice = calculatePrice(15, 5);

The "Less Nesting, Return Early" coding style provides benefits such as improved readability, better error handling, and easier debugging. It simplifies code structure and makes it more straightforward to understand and maintain.

Nullish Coalescing Operator (??):

// Instead of logical OR
const value = (someVariable !== null && someVariable !== undefined) ? someVariable : 'default';
// Use nullish coalescing operator
const value = someVariable ?? 'default';

The Nullish Coalescing Operator (??) efficiently provides default values for variables, ensuring the right-hand operand is used only when the left-hand operand is null or undefined.

Often underutilized Array methods in JavaScript:

1. flat and flatMap:

   • flat: Flattens nested arrays.

   • flatMap: Maps each element using a mapping function and then flattens the result.

    let nestedArray = [1, [2, [3]]];
    let flatArray = nestedArray.flat(); // [1, 2, [3]]
    let mappedFlatArray = nestedArray.flatMap(value => [value * 2]); // [2, 4, 6]

1. from with a Mapping Function:

   • Creates a new array with the results of calling a provided function on every element in the array.

    let array = [1, 2, 3];
    let squaredArray = Array.from(array, x => x * x); // [1, 4, 9]

1. Reverses the elements of an array in place.

    let array = [1, 2, 3, 4, 5];
    array.reverse(); // [5, 4, 3, 2, 1]
   

2. Array.some: Checks if at least one element in the array satisfies a provided condition.

    let hasPositiveNumber = [-1, 0, 1, 2].some(num => num > 0); // true
   

3. Array.every: Checks if all elements in the array satisfy a provided condition.

    let allPositiveNumbers = [1, 2, 3, 4].every(num => num > 0); // true
   

4. Array.reduceRight: Applies a function against an accumulator and each element in the array (from right to left) to reduce it to a single value.

    let reversedString = ['a', 'b', 'c'].reduceRight((acc, char) => acc + char, ''); // 'cba'
   

Lesser-known examples of using toLocaleString for various scenarios:

1. Basic Number Formatting:

    let number = 1234567.89;
    let formattedNumber = number.toLocaleString(); // "1,234,567.89"
   

2. Currency Formatting:

    let price = 12345.67;
    let formattedPrice = price.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); // "$12,345.67"
   

3. Date Formatting:

    let date = new Date('2023-01-01T12:34:56');
    let formattedDate = date.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'short' });
    // "Sunday, January 1, 2023 at 12:34 PM"
   

4. Percentage Formatting:

    let percentage = 0.456;
    let formattedPercentage = percentage.toLocaleString('en-US', { style: 'percent' }); // "45.6%"
   

5. Grouping Options:

    let largeNumber = 9876543210;
    let formattedLargeNumber = largeNumber.toLocaleString('en-US', { useGrouping: false }); // "9876543210"
   

6. Compact Display for Large Numbers:

    let largeNumber = 12345678901234567890;
    let formattedLargeNumber = largeNumber.toLocaleString('en-US', { notation: 'compact' }); // "12.3Q"
   

7. Customizing Decimal and Thousand Separators:

    let customFormattedNumber = 9876543.21.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
    // "9,876,543.2100"
   

8. Using Locales for Different Regions:

    let number = 12345.67;
    let formattedNumberFrench = number.toLocaleString('fr-FR'); // "12 345,67"
    let formattedNumberGerman = number.toLocaleString('de-DE'); // "12.345,67"
   

Meet Promise.race: The Fast and the First

Imagine you're in a race with a bunch of tasks, each taking a different amount of time to finish. Some are sprinters, while others are marathon runners. Now, enter Promise.race - the race coordinator of JavaScript promises!

const task1 = new Promise(resolve => setTimeout(() => resolve('Task 1 completed'), 2000));
const task2 = new Promise(resolve => setTimeout(() => resolve('Task 2 completed'), 1500));
const task3 = new Promise(resolve => setTimeout(() => resolve('Task 3 completed'), 1000));

const winnerTask = Promise.race([task1, task2, task3]);

winnerTask.then(result => console.log(result));
// Output: "Task 3 completed" (Task 3 finishes first)

In this scenario, Promise.race is like the referee, and it shouts out the winner as soon as the first task crosses the finish line. It's a great way to handle tasks when you're only interested in the fastest result.

Enter Promise.allSettled: Handling Life's Curveballs

Now, picture this: you're juggling multiple promises, perhaps making requests to different corners of the internet. Some requests may succeed, while others hit roadblocks. That's where Promise.allSettled comes to the rescue!

const userIds = [101, 102, 103];
const apiUrl = 'https://api.example.com/users/';

const fetchUser = (userId) => {
  const url = `${apiUrl}${userId}`;
  return fetch(url)
    .then(response => response.json())
    .then(user => ({ status: 'fulfilled', value: user }))
    .catch(error => ({ status: 'rejected', reason: error }));
};

const fetchUserPromises = userIds.map(fetchUser);

const handleUserResults = (results) => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('User Data:', result.value);
    } else {
      console.error('Error fetching user:', result.reason.message);
    }
  });
};

const allUserPromises = Promise.allSettled(fetchUserPromises);

allUserPromises.then(handleUserResults);

Think of Promise.allSettled as your reliable friend who collects reports on each promise, whether they succeed or face challenges. It's perfect for scenarios where you want to know the outcome of every promise, no matter what life throws at them.

Wrapping Up

And that's a quick peek into the worlds of Promise.race and Promise.allSettled. These superheroes might not have capes, but they're your go-to allies when dealing with multiple promises in JavaScript.

Happy coding, and may your promises always resolve! 🚀✨

Entering the professional realm can be both exciting and nerve-wracking for freshers. One crucial step in this journey is the job interview, where first impressions can make or break your chances. In this blog post, we'll explore common mistakes that freshers often make during job interviews and provide valuable tips to help you shine in this crucial stage of your career.

🌱Git: More Than Just Jargon

Know the basics of Git. Understand that Git and GitHub are different animals, just like JavaScript and Java. Stay in the loop and let your knowledge shine. If you've collaborated on coding projects or used version control in the past, share those experiences. It's not just about knowing the terms; it's about demonstrating practical understanding.

🔊Tech Prep: Tools and Environments:

Install those interview tools early—Microsoft Teams, Zoom, you name it. Test your audio, output, and camera with some trial calls. Being tech-ready saves you from those last-minute panics, especially during practical tests. Familiarize yourself with the platforms not just for the interview but for future collaboration.

📝 Resume Reality Check:

When it comes to your resume, honesty is the best policy. While the length is not crucial, the accuracy of the information is. Avoid exaggerating your skills, especially core competencies. Use online tools to generate a clean and simple resume, steering clear of any spelling mistakes. And, of course, refrain from adding a photo—let your skills and experience speak for themselves.

📱Ditch the Phone for Your Phone Interviews:

Avoid starting phone interviews from your phone. Practical challenges and technical glitches on a small screen can trip you up, risking a smooth interview and that vital 80% of your first impression. Opt for a stable connection for a seamless experience, showcasing both your skills and professionalism.

🌐Backup Internet Life

Let's be real—losing internet when you need it most is the worst. The fix? A secret weapon: a backup internet plan. Whether it's a trusty mobile hotspot or an extra connection, having a Plan B is your escape route from those cringe-worthy "lost connection" moments. Stay connected effortlessly and keep your cool.

🏠Location Matters:

Select a 🔇 quiet setting for your interview. If background noise is unavoidable, consider noise cancellation tools. A calm environment contributes to clearer communication and reflects positively on your professionalism.

👽️Communication Is Key:

Communication goes beyond just verbal interaction. If unexpected circumstances arise and you need to reschedule, communicate promptly with the HR representative. Leaving them in the dark is unprofessional and can leave a lasting negative impression.

🕙Time Management:

Time is of the essence during interviews. Be available 15 minutes in advance to demonstrate punctuality. If, for any reason, you are running late, inform the HR contact immediately. Respecting others' time is a crucial aspect of professionalism.

❌ It's Okay Not to Know Everything

No need to be a know-it-all. Embrace the power of "I don't know." Honesty goes a long way, and employers appreciate your willingness to learn.

💯Prepare for Practical Tests:

Many interviews, especially in technical fields, involve practical tests. Practice basic code challenges beforehand to familiarize yourself with the process. This preparation will boost your confidence and performance during the actual interview.

💥Believe in Yourself:

Lastly, instill confidence in yourself. Confidence is key when facing an interview. Speak with a clear and audible tone to ensure the interviewer can understand you well. Remember, it's okay not to know everything. If you're unsure about a question, it's better to admit it than to provide inaccurate information.

🚩Conclusion:

Job interviews can be intimidating, but with the right preparation and mindset, you can navigate them successfully. Avoiding these common mistakes and following these tips will help you make a positive impression and increase your chances of landing that coveted job. Remember, confidence, honesty, and professionalism are your allies in the interview process. Good luck!

XHR: The Precursor

Our story begins in the late 1990s when Microsoft introduced the XMLHttpRequest (XHR) object as part of Internet Explorer 5. Initially, this technology was exclusive to Internet Explorer, making it a limited tool for developers. It allowed for asynchronous data retrieval from a server without having to refresh the entire web page. However, its adoption was slow due to its lack of cross-browser compatibility.

Enter AJAX

Fast forward to 2004, when Jesse James Garrett coined the term "AJAX" (Asynchronous JavaScript and XML) and wrote an influential article titled "Ajax: A New Approach to Web Applications." Garrett's work was a game-changer. It shed light on the potential of asynchronous web requests to create seamless, dynamic user experiences. AJAX was no longer just an obscure technology; it was a revolutionary concept.

Around the same time, jQuery AJAX came onto the scene in 2006. This library simplified asynchronous requests, making it accessible to developers of all skill levels. With jQuery AJAX, a few lines of code could replace complex XHR implementations, and it quickly gained popularity. Developers could now send and receive data from the server without the need for page reloads, drastically improving the user experience.

The Rise of Fetch API

As the web continued to evolve, so did the need for more modern and standardized techniques for handling asynchronous requests. Enter the Fetch API in 2015, introduced with the release of ECMAScript 2015. This API brought a breath of fresh air to web development.

The Fetch API utilizes promises, a powerful concept that simplifies asynchronous operations. Promises make code more readable and maintainable by providing a structured way to handle asynchronous tasks. With Fetch, developers could now write cleaner code while fetching data from servers and interacting with APIs seamlessly.

The evolution from XHR to AJAX to Fetch represents a significant shift in web development paradigms. Today, thanks to Fetch and other modern technologies, web applications can provide dynamic, real-time interactions without interrupting the user experience.

In conclusion, the evolution of AJAX has been nothing short of remarkable. From its origins as a Microsoft-exclusive feature to becoming a cornerstone of modern web development, AJAX has changed the way we build and experience web applications. As we look to the future, who knows what innovations await us, but one thing is for certain: the journey from page refreshing to page improvising is far from over, and we're excited to see where it takes us next.

Ref: https://www.linkedin.com/posts/priyank90_ajax-asynchronous-webdevelopment-activity-7052852504388149248-_bwp?utm_source=share&utm_medium=member_desktop

Hey there, tech enthusiasts! If you're the kind of person who lives and breathes technology, who finds joy in tinkering with the latest gadgets and building innovative projects, then you're about to discover a platform that's tailor-made for you. Meet Supabase, the place where your tech dreams can truly take flight. 🚀

Supabase: Where Tech Dreams Become Reality Discover Supabase

Supabase is not your run-of-the-mill platform. It's a haven for developers and tech lovers, offering a fantastic FREE plan designed to fuel your passion and elevate your projects. Let's take a closer look at what Supabase has in store:

🛠️ Seamless Integration with Over 20 Frameworks

Building with the tools you love has never been easier. Supabase seamlessly integrates with more than 20 popular frameworks, allowing you to code with your preferred stack. Whether you're a React aficionado or a Vue.js enthusiast, Supabase has got your back.

🌐Unlimited API Requests

Forget about those pesky request limits. With Supabase, you can make unlimited API requests, ensuring that your projects run smoothly and efficiently.

🔐Effortless Social Authentication

Tired of wrestling with user logins? Supabase simplifies authentication by supporting your favorite Social OAuth providers. Connect effortlessly with platforms like Google, Facebook, and GitHub, making user authentication a breeze.

🧮Generous Database Space

You'll enjoy up to 500MB of database space, which is perfect for your pet projects or small-scale applications. Supabase provides the room you need to store your data and run your applications without a hitch.

💽Ample File Storage

Every tech experiment needs data, and Supabase lets you store up to 1GB of files. Keep your project assets organized and easily accessible.

🌐2GB of Bandwidth Share

your creations with the world! With up to 2GB of bandwidth, you can ensure that your projects are accessible to users far and wide.

📤Effortless File Uploads

Say goodbye to file size restrictions. Supabase lets you easily upload files up to 50MB in size, giving you the freedom to work with the assets you need.

👥 Connect with a Large User Base

Reach up to 50,000 monthly active users on the FREE plan. Share your passion projects and connect with a global community of tech enthusiasts.

✨ Edge Functionality

Take your projects to the edge with the ability to run up to 500K Edge Function invocations. Enjoy low latency and high performance for your applications.

🕒Realtime Capabilities

Handle up to 200 concurrent Realtime connections for those live, interactive experiences that captivate your users.

📩 Millions of Realtime Messages

Keep your users engaged and informed by sending up to 2 million Realtime messages.

📅 1-Day Log Retention

Have peace of mind knowing that you can look back on your project's logs for up to one day.

With Supabase, you're not just getting a hosting platform; you're getting your very own dedicated PostgreSQL database. PostgreSQL is a trusted and powerful database system relied upon by millions of developers worldwide. It's like having a playground for your tech dreams, where you can experiment, innovate, and create without limitations.

Ready to Dive In? Explore Supabase Documentation

Supabase doesn't just offer a feature-rich FREE plan; it also provides extensive documentation to help you get started and make the most of the platform. Whether you're a seasoned developer or just starting your tech journey, Supabase is your ideal companion for bringing your tech dreams to life.

So, what are you waiting for? Dive into the world of Supabase and unleash your creativity. It's time to turn your tech dreams into reality, one project at a time. 🌟

Ref: https://www.linkedin.com/posts/priyank90_supabase-the-open-source-firebase-alternative-activity-7101076126642413568-Pzp4?utm_source=share&utm_medium=member_desktop

What's the Buzz All About? 🐝

Fig.io is making waves in the tech world, and for a good reason. While it's currently an exclusive treat for Mac users, here's the thrilling part: Linux and Windows support are on the way! 🍎➡️🖥️

But that's not all. There's more exciting news – Amazon has acquired Fig's technology! 🚀 Curious to learn more? Check out the details here.

Meet Fig.io: Your Terminal Game-Changer 🤖

Fig.io is packed with features that will revolutionize the way you interact with your terminal:

✨ Autocomplete

Say goodbye to endless typing with Fig.io's IDE-style autocomplete. It offers inline descriptions and powerful suggestions, making coding tasks a breeze. And the best part? It's open-source and fully customizable.

🔒 SSH Credentials

Access your SSH servers swiftly and securely with Fig.io. Share servers and identities effortlessly with your team and enjoy instant access to remote machines through a user-friendly GUI or the command line interface (CLI).

🔌 Plugins

Fig.io simplifies the world of shell plugins. With one-click installation and seamless syncing across devices, the terminal experience just got a whole lot smoother.

What Else Can You Expect? 🚀

There's so much more to Fig.io that you can explore. To discover all the fantastic features and possibilities, head over to Fig.io and don't forget to download your copy!

Join the Waitlist!

Excited to get your hands on Fig.io for Linux and Windows? Join the waitlist, and you'll be among the first to know when these exciting releases drop.

Stay in the loop with the latest in terminal innovations by following these hashtags on social media: 🚀💻

The future of terminals is bright, and Fig.io is leading the way. Get ready for a whole new level of terminal magic! 🌟

Ref: https://www.linkedin.com/posts/priyank90_fig-activity-7105276920434503680-K7eI?utm_source=share&utm_medium=member_desktop

Introduction

So, you've come across this nifty tool called RabbitMQ that lets different parts of your software have a chat. You're probably pretty excited about getting messages to bounce around between different areas of your app. But, let's be real for a second - not all message exchanges go off without a hitch. Sometimes, messages trip over their own feet, and that's where two superheroes come in: the Delayed Message Exchange Plugin and the Dead Letter Queue (DLQ).

They're like the problem solvers of the messaging world, ensuring that even if a message takes a misstep or can't be delivered right away, it's not the end of the world. In this blog, we're going to take a beginner-friendly journey into the heart of these concepts. We'll learn how the Delayed Message Exchange Plugin adds a twist to the usual messaging game, and how the DLQ offers a safety net for messages that encounter a hiccup on their way to their destination. So, whether you're new to messaging or just curious to learn more, get ready to uncover the magic that keeps messages moving smoothly in the world of RabbitMQ!

Understanding the RabbitMQ Delayed Message Exchange Plugin

It lets you slow down how messages get handled, which comes in handy, especially when dealing with messages that didn't quite make it. Imagine giving those messages a breather and a chance to try again after a little time has passed. When messages have tried and tried but just can't get through, they get shifted to a special place where we can figure out what went wrong and make things better (the DLQ Zone).

What's this DLQ Magic, Anyway?

The RabbitMQ Dead Letter Queue (DLQ) serves as a backup storage location for messages that could not be delivered successfully. When a message encounters too many hurdles or fails to reach its destination, RabbitMQ routes it to the DLQ for further research. It's a method for determining what went wrong and improving the message process. In a nutshell, DLQ acts as a safety net, helping you understand and fix delivery issues to make your messaging system more reliable.

Let's get started

Setting Up the Delayed Message Exchange

1. Navigate to the RabbitMQ plugins directory. It's usually located in /usr/lib/rabbitmq/plugins for Linux systems or C:\Program Files\RabbitMQ\plugins for Windows systems.

2. Download the RabbitMQ Delayed Message Exchange Plugin. Ensure that the version of the plugin you download matches the version of your installed RabbitMQ.

3. Copy the plugin file (with a .ez extension) to the plugins directory.

4. Enable the plugin by running the following command:

   •   rabbitmq-plugins enable rabbitmq_delayed_message_exchange
     

5. Restart RabbitMQ for the changes to take effect.

Declare the necessary queues and exchanges: the primary queue, the Dead Letter Queue (DLQ), and the delayed exchange.

const amqp = require("amqplib");

async function setup() {
  try {
    const connection = await amqp.connect("amqp://localhost");
    const channel = await connection.createChannel();

    // Define exchange names
    const PRIMARY_EXCHANGE = "primary_exchange";
    const DELAY_EXCHANGE = "delay_exchange";
    const DEAD_LETTER_EXCHANGE = "dead_letter_exchange";

    // Define queue names
    const PRIMARY_QUEUE = "primary_queue";
    const DEAD_LETTER_QUEUE = "dead_letter_queue";

    // Define dead letter routing name
    const DEAD_LETTER_ROUTING = "dead_letter_routing";

    // Setup primary queue
    const createPrimaryExchangeAndQueue = async () => {
      await channel.assertExchange(PRIMARY_EXCHANGE, "direct", {
        durable: true,
      });
      await channel.assertQueue(PRIMARY_QUEUE, {
        exclusive: false,
        durable: true,
        deadLetterExchange: DEAD_LETTER_EXCHANGE,
        deadLetterRoutingKey: DEAD_LETTER_ROUTING,
      });
      await channel.bindQueue(PRIMARY_QUEUE, PRIMARY_EXCHANGE);
    };

    // Setup delayed exchange
    const createDelayExchange = async () => {
      await channel.assertExchange(DELAY_EXCHANGE, "x-delayed-message", {
        autoDelete: false,
        durable: true,
        arguments: { "x-delayed-type": "direct" },
      });
      await channel.bindQueue(PRIMARY_QUEUE, DELAY_EXCHANGE);
    };

   // Setup DLQ
    const createDeadLetterExchangeAndQueue = async () => {
      await channel.assertExchange(DEAD_LETTER_EXCHANGE, "direct", {
        durable: true,
      });
      await channel.assertQueue(DEAD_LETTER_QUEUE, {
        exclusive: false,
        durable: true,
      });
      await channel.bindQueue(
        DEAD_LETTER_QUEUE,
        DEAD_LETTER_EXCHANGE,
        DEAD_LETTER_ROUTING
      );
    };

    createPrimaryExchangeAndQueue();
    createDelayExchange();
    createDeadLetterExchangeAndQueue();

    await connection.close();
    console.log("Setup complete.");
  } catch (error) {
    console.error("Error during setup:", error);
  }
}

setup();

Let's break down the main three functions step by step:

1. Creating the Primary Exchange and Queue:

const createPrimaryExchangeAndQueue = async () => {
  await channel.assertExchange(PRIMARY_EXCHANGE, "direct", {
    durable: true,
  });
  await channel.assertQueue(PRIMARY_QUEUE, {
    exclusive: false,
    durable: true,
    deadLetterExchange: DEAD_LETTER_EXCHANGE,
    deadLetterRoutingKey: DEAD_LETTER_ROUTING,
  });
  await channel.bindQueue(PRIMARY_QUEUE, PRIMARY_EXCHANGE);
};

This function creates a direct exchange named primary_exchange, an associated queue named primary_queue, and binds the queue to the exchange. The deadLetterExchange and deadLetterRoutingKey options are set, meaning that if a message in the primary queue fails to be processed, it will be routed to the dead_letter_exchange with the specified routing key.

1. Creating the Dead Letter Exchange and Queue:

    const createDeadLetterExchangeAndQueue = async () => {
      await channel.assertExchange(DEAD_LETTER_EXCHANGE, "direct", {
        durable: true,
      });
      await channel.assertQueue(DEAD_LETTER_QUEUE, {
        exclusive: false,
        durable: true,
      });
      await channel.bindQueue(
        DEAD_LETTER_QUEUE,
        DEAD_LETTER_EXCHANGE,
        DEAD_LETTER_ROUTING
      );
    };
   

   This function establishes a direct exchange called dead_letter_exchange along with an associated queue named dead_letter_queue. The queue is then linked to the exchange using the designated routing key. Consequently, when a message is negatively acknowledged (nack), any message connected to the main queue will be relocated to this designated queue.

   These messages will remain there indefinitely, offering us the opportunity to thoroughly investigate and determine the root cause of any issues that may have occurred.

2. Creating the Delay Exchange:

    const createDelayExchange = async () => {
      await channel.assertExchange(DELAY_EXCHANGE, "x-delayed-message", {
        autoDelete: false,
        durable: true,
        passive: true,
        arguments: { "x-delayed-type": "direct" },
      });
      await channel.bindQueue(PRIMARY_QUEUE, DELAY_EXCHANGE);
    };
   

   This function sets up a delayed message exchange called delay_exchange using a special RabbitMQ plugin ("x-delayed-message"). This plugin makes messages wait before being delivered. The passive option is set to true to see if the exchange is already there.

   This exchange is connected to the primary_queue. So, if a message needs another shot at getting through, it will be sent back to the primary_queue based on our retry schedule. This cycle goes on until we give a thumbs-up(ack) or thumbs-down(nack) to the message.

Now, let's create the consumer to see the final action and mimic a real-world situation.

const PRIMARY_QUEUE = "primary_queue";
const DELAY_EXCHANGE = "delay_exchange";

const DELAY_DEFAULT = 1000;
const RETRY_LIMIT = 3;
const DEAD_LETTER_DELAY = 3000;

const consumer = async () => {
  const connection = await amqp.connect("amqp://localhost");
  const channel = await connection.createChannel();

  // Process max 10 messages at the same time
  channel.prefetch(10);

  // Consume the msg
  await channel.consume(
    PRIMARY_QUEUE,
    async (msg) => {
      try {
        //TODO: Business logic to process message

        channel.ack(msg);
      } catch (err) {
        moveMessageToDelayExchange(channel, msg);
        console.log("Server is down. Message is moved to delay exchange.");
      }
    },
    { noAck: false }
  );
};

async function moveMessageToDelayExchange(channel, msg) {
  // Move message to DL queue if msg fails to process withing maximum defined attempt
  let maxRetryLimit = msg.properties.headers["x-retry-limit"];
  let retryCount = msg.fields.deliveryTag;

  // Move msg to dead letter after max retry happened
  if (retryCount >= maxRetryLimit) {
    // If allUpTo is truthy, all outstanding messages prior to and including the given message are rejected
    // If requeue is truthy, the server will try to put the message or messages back on the queue or queues from which they came.
    channel.nack((message = msg), (allUpTo = false), (requeue = false));
    return;
  }

  // Ack the msg to remove it from primary queue
  channel.ack(msg);

  // Transfer msg to delay exchange so it will retry message based on max retry count
  let newDelay = getDelayRetryInterval(retryCount, DELAY_DEFAULT);
  console.log(`New delay time ${newDelay} ms`);
  await channel.publish(DELAY_EXCHANGE, "", msg.content, {
    headers: {
      "x-delay": newDelay,
      "x-retry-limit": RETRY_LIMIT,
    },
  });
}

// Helper function to give linear increasing seconds based on retry count.
const getDelayRetryInterval = (retryCount, defaultDelay) => {
  const interval = Math.pow(2, retryCount - 1) * defaultDelay;
  console.log(`Next message will be retried after ${interval / 1000} sec`);
  return interval;
};


consumer();

1. Setting Up the Consumer Function:

   The consumer function establishes a connection with the Primary queue to receive and handle incoming messages. By using the prefetch method, it's designed to manage up to 10 messages simultaneously. Think of the prefetch method as a way to control how many messages we handle at once. It's a crucial setting to prevent overwhelming the system, especially when faced with a sudden influx of thousands of messages.

   Now, picture this: when a message smoothly goes through the processing and the code reaches the ack statement within the try block. This is essentially us giving a thumbs-up to the message, signaling that everything went well. As a result, the message earns its exit ticket from the primary queue.

2. Moving Messages to Delayed Exchange:

   If something goes wrong while we're handling a message (you know, when things don't quite work out), we've got a special trick up our sleeve. We call on the "moveMessageToDelayExchange" function to deal with the hiccup. This function is like the star of the show in this article – it's the reason we're here, talking about Delayed Message Exchange and DLQ in the first place.

   Now, let's talk about this deliveryTag thing. It's like a special number that comes with the message when we use Delayed Exchanges. It keeps track of how many times we've tried to pass that message around. It's like a handy counter that helps us know when to say, "Okay, that's enough trying for now." We have to be smart about it, though. If we keep trying forever, we could end up with a big mess and everything crashing. So, we set a limit on how many times we'll give a message another shot. It's all about finding the right balance!

   1. The function first checks the number of retry attempts (retryCount) and compares it with the maximum defined attempts (maxRetryLimit) specified in the message headers.

   2. If the retry count exceeds the limit, the message is "nacked" using channel.nack, which will send it to a Dead Letter Queue and that message will be no entertained further.

   3. If the retry count is within the limit, the original message is acknowledged using channel.ack to remove it from the primary queue.

   4. The message is then transferred to a delayed exchange (DELAY_EXCHANGE) with a delay interval (x-delay) based on a retry strategy determined by the getDelayRetryInterval function.

   5. The getDelayRetryInterval function calculates a delay interval for retrying messages. It uses a linear increasing interval strategy, where the interval increases exponentially based on the retry count.

Wrapping things up:

Dealing with messages that hit a bump in the road is a big deal when you're putting together strong and trustworthy systems with RabbitMQ. Luckily, the RabbitMQ Delayed Message Exchange Plugin is like your secret weapon here. It lets you tackle message detours, retries, and even sets up Dead Letter Queues – all like a pro.

By fine-tuning how often we give messages another shot and how many times we'll try, along with the magic of Dead Letter Queues, we're making sure that even when things hiccup, we're on top of it. We're not just retrying blindly; we're investigating what went wrong and making things right. This smart strategy adds a hefty dose of stability and resilience to your distributed applications, ensuring they can handle whatever comes their way.

Memory consumption, on the other hand, might be increased as multiple operations execute concurrently depending on the process.

Async generator functions are a combination of two concepts: async functions and generator functions. So let's check the generator function first with a simple example before moving to the async generator function.

Generator function

The function* syntax is used to define generator functions rather than the usual function syntax. The yield keyword is used within the generator function to pause the function and return a value to the caller. When you're ready to resume function execution, call the next() method on the iterator object to resume execution where it left off.

The generator object contains the next method, which returns another object with the property value and ``done.

value will contain the returned value, whereas done will be a boolean that, if true, will end the iteration.

In this case, the createSequence function is an endless sequence generator, which means that no matter how many times you call the next method, it will always return a value and the done property will always be false.

function* createSequence() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const generator = createSequence();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }

Let's take the previous example and apply a maximum limit to construct a sequence. In the next example, we set the maximum limit to 2, so that if you call the next method a third time, the value is undefined and the done property returns a false value.

function* createSequenceUpTo(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}

const generator = createSequenceUpTo(2);
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: undefined, done: true }

Understand the "Done" attributes usability

If we insert the generator function from the previous example into the for loop, the for loop would automatically stop after two iterations since we have only yielded the generator function two times, which is how the "done" attribute returned by the next function is beneficial in loops.

function* createSequenceUpTo(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}

for(const number of createSequenceUpTo(2)) {
  console.log(number)
}

Async generator function

So far, we've figured out how the generator function works. To spice things up, let's add the Async keywords to the generator function.

The async generator method returns an asynchronous generator. Asynchronous generators provide asynchronous iteration, which means they can produce data without blocking.

Since we are using dealing with asynchronous generators, we have to use for loop followed by the await keyword. The necessity for await... comes when the computation of the current iteration on an asynchronous iterator is dependent on some of the previous iterations.

In simpler terms, the for await loop is iterating over the async generator function, and the next function will not be iterated until the promise of the current execution is fulfilled.

async function simulateDelay(value, delay) {
  return new Promise((resolve) => setTimeout(() => resolve(value), delay));
}

async function* generateNumbers(n) {
  for (let i = 0; i < n; i++) {
    yield simulateDelay(i, 1000);
  }
}

(async function () {
  for await (const number of generateNumbers(5)) {
    console.log(number);
  }
})();

Batch Processing with Async Generator Functions

Let's look at how we can use async generator functions for batch processing now.

A big dataset is divided into manageable chunks during batch processing, and then each chunk is handled separately.

In order to create batch processing with async generator functions, we can change our generator function to produce a batch of values rather than just one.

Here's an example:

async function* generateBatches(data, batchSize) {
  for (let i = 0; i < data.length; i += batchSize) {
    yield data.slice(i, i + batchSize);
  }
}

(async function() {
  for await (const batch of generateBatches(data, 100)) {
    await processBatch(batch);
  }
})();

A complete example of an Async Batch Process

• postIds - List of random post Ids that we want to post to the server for the process

• longRunningProcess - Assume a long-running process like posting data to the server

• tasks - List of longRunningProcess functions

• batchTasks - A generator function to process a list of task(longRunningProcess) in batch

• sleep - Helper function to a mock long-running process

async function* batchTasks(tasks, limit) {
  for (let i = 0; i < tasks.length; i = i + limit) {
    const batch = tasks.slice(i, i + limit);
    const result = await Promise.all(batch.map((task) => task()));
    yield result;
  }
}

const postIds = Array.from({ length: 10 }).map((e, idx) => idx);
const longRunningProcess = async (postId) => {
  // Dummy sleep between 0 to 10 second to mimic long process
  await sleep();
  return postId;
};

const tasks = postIds.map((postId) => () => longRunningProcess(postId));

// console.log(tasks);
const CONCURRENT_PROCESS = 3;
(async function () {
  for await (const batch of batchTasks(tasks, CONCURRENT_PROCESS)) {
    //Do something with the processed batch
    console.log("Processed batch", batch);
  }
})();

/*
 * Timeout function
 */
async function sleep() {
  // Random timeout between 0 to 10 second
  return new Promise((resolve) => {
    const ms = Math.floor(Math.random() * 5000);
    console.log(`process time ${~~(ms / 1000)} Sec`);
    setTimeout(resolve, ms);
  });
}

Boost batch processing through pooling

Batch processing groups a number of "n" tasks to be processed all at once, but it waits for all processes in the current batch to be completed before initiating the next batch.

Imagine you have ten batches, each with ten tasks. When the first batch runs, 10 tasks are processed concurrently. Let's assume three of them are completed too soon, while the remaining seven are still in progress.

If you want to select a new set of three tasks to run, we are still fine because we have enough room to do so. We certainly don't want to finish the remaining 7 to fill the room.

And this is where the Pool concept is useful, ensuring that 10 jobs are constantly in flight regardless of the status of the entire batch.

I have a separate article on how to take a batch process to the next level.

Boost Node.JS performance by Promise Pool

Time complexity is a measure of an algorithm's efficiency based on the amount of time it takes to run as the input size grows. Big O notation is typically used to represent how long an algorithm will take to complete.

so, What is Big O notation?

Big O notation is a way to determine how quickly an algorithm expands as the size of its input increases. It's like estimating the time it will take to sort a list of numbers based on the amount of numbers in the list.

Assume you have a list of 100 numbers you wish to sort. You could have a list-sorting method that takes 10 seconds. Assume you have a list of 1,000 numbers to sort. You might anticipate that the identical algorithm will take 100 seconds. Big O notation makes it easy to represent this growth rate.

Here are some common time complexities.

O(1): Constant time. The algorithm's processing time is independent of the size of the input. This type of time complexity is the most efficient. It is linked to finding items in an array by index or getting information from a dictionary by key.

O(log n): Logarithmic time. When the size of the input rises, the algorithm's execution time gradually grows. This time complexity is often associated with binary search and other divide-and-conquer algorithms.

O(n): Linear time. The algorithm's execution time increases linearly with the size of the input. An example of a linear time complexity algorithm is searching an array and operating on each entry.

O(n log n): Linearithmic time. It has a linearithmic time complexity and will have an execution time that increases proportionally to the input size (n), multiplied by the logarithm of the input size (log n). This time complexity is often associated with sorting algorithms.

O(n^2): Quadratic time. It takes a long time to run as the input size increases, and the time it takes to complete the algorithm increases at an exponential rate. This time complexity is often associated with nested loop operations.

O(2^n): Exponential time. Even for inputs of a reasonable size, it can be extremely sluggish and inefficient. Its time complexity is frequently connected with recursive algorithms, which produce all viable combinations of a set of elements or search for a solution thoroughly.

Explaining Time Complexity with Examples from the Real World

For the sake of simplification, I will only use examples with O(1) and O(n) time complexity.

As a developer, we are dealing with almost every day to perform filters over the array as per the demand of the task. Everything goes smoothly until the data size is smaller but the filter operation gets slow as the array size keeps increasing.

The array filter function scans each element in the array to get a result as per a given condition, therefore time complexity is O(n) for the filter function.

Understand the challenge of searching data within big Arrays owing to O(n) complexity.

We deal with performing filters over arrays almost every day as developers. Everything works OK until the data size is small, however as the array size grows larger, the filter operation becomes slow.

The array filter function scans each member in the array to determine the outcome based on a given condition, hence the filter function's time complexity is O(n).

Let's begin by performing a filter search over an array containing 10 million data points.

In the code snippet shown below, I first filled the array with 10 million fake data and then I added a second array size of 50, which we would use to search each item in the large array.

The time it takes to find all 50 objects from that big array is close to 4 or 5 seconds. To view it, click the CodePen link.

CodePen

// Populate Array size of 10 Million data 😱
let data = [];
const tenMillion = 10_000_000;
resultElement.innerText = "Preparing Array";

for (let i = 0; i < tenMillion; i++) {
  data.push({ item: i, number: `Number_${i}` });
}

// Populate Array size of 50 having random numbers.
// We will search each item of this array in that big size of array 🤒
const itemsToSearch = Array.from(
  { length: 50 },
  () => ~~(Math.random() * 9_000_000)
);

console.log("Array search starts");
const startTime = new Date().getTime();
const timeLogs = itemsToSearch.map((searchItem) => {
  const start = new Date().getTime();
  const item = data.filter((d) => d.item === searchItem);
  const end = new Date().getTime();
  return `Took ${end - start} Milliseconds to find ${searchItem}`;
});
const endTime = new Date().getTime();

console.log(
  `Searching the array took ${endTime - startTime} milliseconds for ${
    itemsToSearch.length
  } items over 10 Million size of Array.`
);

Improvement using dictionary dataset

Let us enhance the process of identifying an item in an array. To accomplish this, we changed an array to a dictionary, where the key of the dictionary is set to the item we're looking for. It is a random unique number in this case.

The time it takes to discover 50 entries in the dictionary is almost between 0 and 1 milliseconds. However, we have introduced extra overhead in code to convert the array to a dictionary, but the time to do that action is only 300 to 400 milliseconds, which is pretty acceptable for overall speed.

We changed the program's operational complexity from O(n) to O (1).

CodePen

// Populate Array size of 10 Million data 😱
let data = [];
const tenMillion = 10_000_000;
console.log("starts");
console.time("prepare array");
for (let i = 0; i < tenMillion; i++) {
  data.push({ item: i, number: `Number_${i}` });
}
console.timeEnd("prepare array");

// Populate Array size of 50 having random numbers.
// We will search each item of this array in that big size of array 🤒
const itemsToSearch = Array.from(
  { length: 50 },
  () => ~~(Math.random() * 9_000_000)
);

console.time("transform_array_to_dictionary");
console.time("time_including_tranforming_array_to_dict");
let dataDict = {};
data.forEach((d) => (dataDict[d.item] = d));
console.timeEnd("transform_array_to_dictionary");

console.log("Dictionary search starts");
const startTime = new Date().getTime();
const timeLogs = itemsToSearch.map((searchItem) => {
  const start = new Date().getTime();
  const item = dataDict[searchItem];
  const end = new Date().getTime();
  return `Took ${end - start} Milliseconds to find ${searchItem}`;
});
const endTime = new Date().getTime();
// console.log(timeLogs);
console.timeEnd("time_including_tranforming_array_to_dict");

console.log(
  `Searching the array took ${endTime - startTime} milliseconds for ${
    itemsToSearch.length
  } items over 10 Million size of Array.`
);

IN SUMMARY,

In summary, by understanding time complexity, we can provide more efficient and effective solutions that can solve problems quickly and efficiently, regardless of input size. As technology continues to advance and data sets grow larger, the importance of time complexity will only increase. Therefore, it's essential to continue learning and mastering this concept to become a successful programmer.

The entire article is based on a Stack Overflow response about shards and replicas, and all credit goes to Javanna for providing an outstanding explanation.

The explanation is so simple that even if you have no idea what the hell shard and replica are, you should be able to grasp high-level notions within a few minutes.

It is simply an attempt to draw attention to folks who may want to recognize the distinction between Shards and Replicas without using jargon.

How is data dispersed throughout the shard?

When you download elasticsearch and start it up, you create an elasticsearch node that tries to join an existing cluster if available or creates a new one. Let's say you created your own new cluster with a single node, the one that you just started up. We have no data, therefore we need to create an index.

When you create an index (an index is automatically created when you index the first document as well) you can define how many shards it will be composed of. If you don't specify a number it will have the default number of shards: 5 primaries. What does it mean?

It means that elasticsearch will create 5 primary shards that will contain your data:

 ____    ____    ____    ____    ____
| 1  |  | 2  |  | 3  |  | 4  |  | 5  |
|____|  |____|  |____|  |____|  |____|

Every time you index a document, elasticsearch will decide which primary shard is supposed to hold that document and will index it there. Primary shards are not a copy of the data, they are the data! Having multiple shards does help take advantage of parallel processing on a single machine, but the whole point is that if we start another elasticsearch instance on the same cluster, the shards will be distributed in an even way over the cluster.

Node 1 will then hold for example only three shards:

 ____    ____    ____ 
| 1  |  | 2  |  | 3  |
|____|  |____|  |____|

Since the remaining two shards have been moved to the newly started node:

 ____    ____
| 4  |  | 5  |
|____|  |____|

Why does this happen? Because elasticsearch is a distributed search engine and this way you can make use of multiple nodes/machines to manage big amounts of data.

Every elasticsearch index is composed of at least one primary shard since that's where the data is stored. Every shard comes at a cost, though, therefore if you have a single node and no foreseeable growth, just stick with a single primary shard.

Why do we require a replica?

Another type of shard is a replica. The default is 1, meaning that every primary shard will be copied to another shard that will contain the same data. Replicas are used to increase search performance and for fail-over. A replica shard is never going to be allocated on the same node where the related primary is (it would pretty much be like putting a backup on the same disk as the original data).

Back to our example, with 1 replica we'll have the whole index on each node, since 2 replica shards will be allocated on the first node and they will contain exactly the same data as the primary shards on the second node:

 ____    ____    ____    ____    ____
| 1  |  | 2  |  | 3  |  | 4R |  | 5R |
|____|  |____|  |____|  |____|  |____|

Same for the second node, which will contain a copy of the primary shards on the first node:

 ____    ____    ____    ____    ____
| 1R |  | 2R |  | 3R |  | 4  |  | 5  |
|____|  |____|  |____|  |____|  |____|

With a setup like this, if a node goes down, you still have the whole index. The replica shards will automatically become primaries and the cluster will work properly despite the node failure, as follows:

 ____    ____    ____    ____    ____
| 1  |  | 2  |  | 3  |  | 4  |  | 5  |
|____|  |____|  |____|  |____|  |____|

Since you have "number_of_replicas":1, the replicas cannot be assigned anymore as they are never allocated on the same node where their primary is. That's why you'll have 5 unassigned shards, the replicas, and the cluster status will be YELLOW instead of GREEN. No data loss, but it could be better as some shards cannot be assigned.

As soon as the node that had left is backed up, it'll join the cluster again and the replicas will be assigned again. The existing shard on the second node can be loaded but they need to be synchronized with the other shards, as write operations most likely happened while the node was down. At the end of this operation, the cluster status will become GREEN.

Promise Pool is a concept to handle numerous concurrent operations more effectively in the progression of async functions.

Let's begin with a real-world use scenario.

Consider the scenario when we need to add a lot of products to the database from a CSV file or any other external API source.

The following code snippet represents one possible implementation.

However, a seasoned developer can make the observation and will say - "Hey dude, your code is inefficient because it waits for each import product process sequentially, thus overall product import process would take much more time." 👎

That's correct, so let's use the promise all feature to make it better so that each product import process can run concurrently and the whole import process will be incredibly quick.

But there are always drawbacks to advantages. 🤔

Now imagine that you are importing thousands of products. If you were to use promise.all() in that scenario, you would end up running thousands of operations concurrently, which would result in a locking involved database tables, high CPU usage on the server, a backlog of requests for the V8 engine to process, as well as other problems.

Promise pools libraries can help in this situation. The idea is straightforward; it gives us the ability to manage multiple operations at once. The same principle is shared by many libraries, however in this article I'll focus on the Supercharge Promise Pool library.

With its withConcurrency API, we can define any positive arbitrary number, and it will carry out that many operations concurrently at any given time.

The process function takes a callback function where any processing function can be passed and promises are resolved based on the defined concurrent operation capacity.

Conclusion

While both the Promise.all() and Promise Pool libraries can run several processes concurrently, the Promise Pool library is better if there is a larger amount of data to be processed because it has the advantage of providing API control over the parallel process.

One who is a beginner and hired of course would have basic to advance level knowledge in a relevant stack but every company has a different work model in terms of application development which they have prepared over the years by having experience in performance in the application, developer onboarding process and team productivity.

Sorry, I don't mean to overwhelm anyone 😱 but if you are just starting and you find that you're overwhelmed during the onboarding process, don't worry, things take time. Please be patient and follow the few simple points below to make sure your mentor and your path run smoothly. 🗻

1. Keep a notebook in meetings 📝

Keep a notebook always with you when you go for meetings or when you have a conversation about any issue or topic. Note down all the points that you would like to have a deeper look at on your desk.

As a beginner sometimes you will hear lots of jargon during the conversation with a senior. Do not hesitate to clarify those words in simple terms that you will understand and also keep note of that word for your reference.

2. Make a list of all your questions 🧾

Initially, one could have many questions and doubts while working on the assignment. Please don't ask them at any time if they are not your immediate blocker. Instead, prepare a list of all your doubts and clarify them in one go each day based on the time conventions of your mentor.

This way, your mentor and you both can work effectively without compromising productivity.

3. Be honest and say "No" 😬

If you don't know something that comes up all of a sudden that you are supposed to know, feel free to say "No" but in a different way.

I did not get a chance to explore this particular topic, let me buy some time to go through more in detail and I will come back to you if I have any questions.

Don't make any vague assumptions, because you have to speak anyway, it will put you in a more awkward situation.

4. Jump down the rabbit hole and ask clear questions 📢

Just read "How to ask questions as a new engineer". Thanks, Mike for the amazing article. I cannot write better than this.

5. Work like a Pro 👩‍💻👨‍💻

Learn and use shortcuts of the IDE that you're using. Learn shortcuts for the browser. Save your keyboard keystrokes (especially Ctrl + S). Turn on autosave in IDE. If you don't like autosave, at least don't use Ctrl + S repeatedly for no reason. Take care of your fingers if you're not planning to retire early.

Start observing around, mainly your coworkers, how they are being productive, what extra tools they are using which you may use to ease your work, etc...

6 Focus 📵

Mobile is the only reason for most people to be constantly distracted. To be more focused just keep your mobile silent(Not even on vibrate mode). If you tend to keep your mobile on the desk, flip it to the other side.

7. Think simple and make complex things simple 🤹🏻‍♀️

In any onboarding process, task complexity moves from easy to complex. Your mentor is always available to help you when you need them.

Bookmark every relevant function in code so you can pick up where you left off easily in your assignment, so you don't get lost in a massive spider project of hundreds of files and folders.

Write down pseudo-code and flow in your notebook if you think you need to get verified before you start. Break up your big assignment into several individual tasks instead of eating up everything at once. Prepare task list properly with all details like input, output, validations, etc... Connect all tasks one by one, and test them as a single unit.

8. Use your weekend 💪🏼

Don't get me wrong, I never mean you should sacrifice your family and friends time.

After spending the first week in your job, you will get a general idea of what types of assignments are given to you, what expectations have been set, what area requires more focus, etc... Start spending your weekends improving the technical side and turning your weaknesses into strengths.

9. Don't feel burnout & Be motivated 🧎🏻‍♂️

Use your weekend wisely while you're at it. Don't feel burnout and keep your energy up for Monday too. As I mentioned earlier, one can feel overwhelmed at the beginning, but do not lose your patience. Read articles, practice them, and improve your knowledge every day. Try your best to follow some simple steps, and keep taking steps.

Read these astonishing articles.

Soft skills help developers level up

10 Soft Skills Every Developer Needs

Disclaimer: This article is not in favor of any particular stack. Please don't get offended.

It is to take a quick look at how the popularity of tech stacks has changed over time using Google Trends.

Some people may believe that a few of the trends aren't living up to the hype. Let me know if it can be made more precise by tuning the search category or using a better keyword.

Glitch

This article is for the beginner in virtual reality development. Therefore to keep it simple, the article contains the key focus area points to get quickly on board.

https://vrprofile.glitch.me/

Building virtual reality experiences is one of the next things that every tech giant company is focusing on. And why not, this experience is so awesome that anyone can get amazed in a second.

Facebook takes....sorry, Meta takes it too seriously. 😆

But taking a hand into the development for a new person is tedious as it requires installing development tools/SDK(For instance Unity), needs to learn new tools; maybe language too, and then deployment of an app for the final result to feel it in a real.

A-Frame takes initiative to remove all these obstacles and provides the web-based framework that the majority of the developer know; HTML & JAVASCRIPT

A-Frame is built upon Three.js. Three.js is a JavaScript library which deals with 3D objects and animation using WebGL.
In a simple term, A-Frame provides top-level abreaction based on WebGL language and gives an API to build web-based VR applications.

One of the important feature: Declarative HTML

❤️ HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, educators, artists, makers, kids.

Literally, you can just write couple of html lines and feel proud on your self 😏.

By using Aframe

Almost same thing but by using Threejs

A-Frame is not the replacement of Threejs but it provides quick setup and abstraction to build VR apps.
ThreeJS is the generalized framework that is used to develop 3D objects and animation.

Primitives

Primitives are the predefined components by the A-Frame such as box, circle, sky, cylinder, etc... That makes it super easy to do some exciting stuff even for the novice developer in this domain.
If you want to render a box at some position then put it below primitive and there you go!

<a-box  position="-1 1.5 -5" color="#00ff00"></a-box>

Let's see under the hood action

But wait, before moving to the custom primitive, we still need to check one more thing; Component.
A component is a reusable piece of an element. A-frame provides registerComponent API to create it and exposes several events to handle objects dynamically.

AFRAME.registerComponent('foo', {
  schema: {}, // Used to defined properties for the component
  init: function () {}, // Called once when the component is initialized. Used to set up initial state and instantiate variables.
  update: function () {}, // Called both when the component is initialized and whenever any of the component’s properties is updated 
  tick: function () {}, // Called continuously(Render loop) and where all magic animation is of object is done.
  remove: function () {}, // Called whenever the component is detached from the entity
  pause: function () {}, // Called when the entity or scene pauses
  play: function () {} // Called once when the component is initialized and is called when the entity or scene resumes.
});

Check out an example of the custom component "animate-circle". tick method in a component is called 90 times per second and radius is managed at a certain point to the up and down.
Schema is passed as a key-pair value separated by a semicolon in the HTML.

a-entity

A component can be attached to the entity(a-entity). An entity is like a <div> in A-frame and without attaching a component to it, it's just like an empty <div>.

Finally, Custom Primitives

In the previous example, a custom component was made and it was added to the a-entity whereas if we define primitives, it can be used directly as an HTML tag(<a-animate-cirlce>) and schema value can be passed as an individual attribute.
Primitives can consider as syntactic sugar which is more readable to the newcomers.

Key points to focus on first if you're relatively new

Related to the placement of an object

• Camera: It is used to control the field of view(FOV) that is on the screen. Using the different properties view area(viewport) of the screen can be adjusted.
• Position: Used to define the placement of the component in 3D space. X, Y, and Z coordinates manage the arrangement of the objects in the scene.
  
• Rotation: Used to define the orientation of an object. It takes the value in degree for all three axes; X, Y, and Z.
• JavaScript, Events, DOM APIs

Looks cool, isn't it? You can find complete implemented example at github/priyankatgit/realtime_draw_websocket

FebricJS

Fabric.js is a powerful and simple Javascript HTML5 canvas library· Fabric provides interactive object model on top of canvas element

What is WebSocket?

WebSocket: WebSocket is bidirectional, a full-duplex protocol that is used in the same scenario of client-server communication, unlike HTTP it starts from ws:// or wss://. It is a stateful protocol, which means the connection between client and server will keep alive until it is terminated by either party (client or server). after closing the connection by either of the client and server, the connection is terminated from both the end.

Check this reference to know the difference between HTTP and WebSocket in detail.

For the WebSocket implementation, we need a client-server architecture and I'm using the Django web framework to establish full-duplex communication channels.

Channel is the python package that extends Django asynchronous requests and gives out-of-the-box functionality to handle long-lived connections.

So, before diving further let me divide the channel into three simple steps to establish a socket connection.

1. Routing setup - It's similar to Django URL configuration
2. Defining consumer - Where business logic lives
3. Setup channel Layer - Communication bridge across different instances

1. HTTP and WebSocket routing

In a simple term, we need to first assign a job to handle regular HTTP requests to Django ASGI's application and Webscoket connection to the channel handler.

from django.core.asgi import get_asgi_application

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            draw.routing.websocket_urlpatterns
        )
    ),
})

websocket_urlpatterns = [
    re_path(r'ws/draw/(?P<room_name>\w+)/$', consumers.DrawConsumer.as_asgi()),
]

URLRouter just contains the list of URL patterns that are mapped to the consumers. You can compare the consumer to the Django view.

2. Define consumer

The consumer is just a list of the derived function from the WebsocketConsumer or AsyncWebsocketConsumer. These functions are called automatically when the event happens.

class MyConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']

        // Join the group
        await self.channel_layer.group_add(
            self.room_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Exit from the group
        await self.channel_layer.group_discard(
            self.room_name,
            self.channel_name
        )

   // Receive message from WebSocket
    async def receive(self, msg):

        // Send message to all member of group
        await self.channel_layer.group_send(
            self.room_name,
            {
                'type': 'foo',
                'message': msg
            }
        )

    // Receive the delegated message
    async def foo(self, event):
        pass

Connect Event

Connect event is called when a socket connection is established without an error and every connection is given to a unique random name and that value is assigned tochannel_name.

self.room_name is a group name and by using group_add API, we can make a group that has multiple connection(channel_name) details.

Receive Event

When any message is posted to a particular group, this event is triggered. We can use group_send API further and the same message can be delivered to all members using the group name. In this example, the group name is stored in the self.room_name variable.

Disconnect Event

This event is called when a connection is dropped either by the client or by the server.

3. Define channel layer

The Channel layer is used to persist messages which are passed between different instances. Redis is used as a message broker in the backend and it is recommended to use in Production. It is required to install channels_redis package for the Redis channel layer.

However, In-Memory Channel Layer can also be used in the development mode.

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('localhost', 6379)],
        },
    },
}

Let move to the client-side

Once server configuration is done, we can initiate Websocket connection from the browser as follow:

const socketConnection = new WebSocket(
    "ws://" + window.location.host + "/ws/draw/free_draw/"
 );

Notice that /ws/draw/free_draw/ is matched to the pattern which is defined in the URL pattern list where free_draw is group name in which everybody else will be joined.

onmessage event will be triggered if anybody will send the message in the "free_draw" group.

socketConnection.onmessage = function (e) { }

Send API can be used to post a message to all joined members to the group "free_draw"

socketConnection.send();

Nowadays companies promote the microservice based architecture for the enterprise level projects and message queue service is the fundamental component to achieve that.

Microservice is nothing else but the division of a big project into the smaller applications based on their work scope yet connected to each other which shares essential information from one to another app to move forward the workflow of the system.

So how NSQ works?

Don't worry, I will not flood this article with the same things which have already been written many times over the web. Go through the given below articles to have more insight about NSQ.

• https://segment.com/blog/scaling-nsq/
• https://dev.to/vguleaev/nsq-tutorial-build-a-simple-message-queue-using-nsq-43eh

That's right, now you've knowledge how NSQ does its job but in production work the most important aspect is to handle messages which consumer(subscriber) is not able to process, mostly due to the failure of business logic while processing the message.

NSQ supports many languages to process messages at client side.
Let's take a looks at JavaScript implementation

Without failure handling

const nsq = require('nsqjs')

const reader = new nsq.Reader('sample_topic', 'test_channel', {
  lookupdHTTPAddresses: '127.0.0.1:4161'
})

reader.connect()

reader.on('message', msg => {
  // TODO: Business logic to process message
  console.log('Received message [%s]: %s', msg.id, msg.body.toString())
  msg.finish()
})

Message considered as processed once msg.finish() is called inside the Reader.MESSAGE event. If the finish() method is not called then the nsq client add the message in queue again subsequently after some delay until the message is not processed successfully.

NSQ client decides to requeue the message based on the maxAttempts configuration, after the max attempts, the message is declared as a dead and marked as finished automatically; and that's where we have to log down dead message to handle it manually.

maxAttempts: 0

The number of times a given message will be attempted (given to MESSAGE handler) before it will be handed to the DISCARD handler and then automatically finished. 0 means that there is no limit. If no DISCARD handler is specified and maxAttempts > 0, then the message will be finished automatically when the number of attempts has been exhausted.

With failure handling

const nsq = require("nsqjs");

const reader = new nsq.Reader("chat", "chat", {
  lookupdHTTPAddresses: "127.0.0.1:4161",
});

reader.connect();

reader.on("message", (msg) => {
  let isProcessed = processMessage(msg);
  if(isProcessed) {
    msg.finish();
  }
});

reader.on("discard", (msg) => {
  // TODO: Log dead messages in the Database or File to handle it manually.
  msg.finish();
});

const processMessage= (msg) => {
   try{
     // TODO: Business logic to process message
     console.log("Received message [%s]: %s", msg.id, msg.body.toString());

     return true

   }catch(error) {
     console.error(error)
     return false
   }
}

Consider processMessage is the function where the app's logic resides to take action on a message. If everything goes ok, we mark the message as finished by calling the finish method else the message will be requeued constantly until max attempt is reached.

After the max retry, Reader.DISCARD is called, where dead message detail can be written to the file or database to handle it manually.

As I said earlier, nsq has different clients to process messages and different clients may have different ways to handle dead messages.
For instance, pynsq client is for python and it has giving_up() API to handle dead messages.

Bonus

There are many distributed open source messaging systems and Philip Feng has described most of them in his article

Credits:
Banner image siskav, nsq gif nsq
NSQ Article reference: Calvin French-Owen, Vladislav Guleaev, Philip Feng Ph.D