Gaining control over your projects often depends on the platform you're working with. While there are many options available, such as Atlassian and GitLab, today I will focus on using GitHub as the platform of choice. Let me guide you through how you can effectively manage your projects on GitHub.

I’ll talk about the GitHub one because that is where I’m working on.

For me, checking the status of my PRs is essential in my daily work. On average, I spend about one or two hours a day tracking down failing CI checks and keeping my PRs in sync with the main branch, or reviewing other PRs.

To do that, I used to use the GitHub website on my PRs page. This page is good; you can find all your PRs, including those where your teammates are requesting a review. You can check whether your PR has reviews and whether the CI passes.

Here you can see my PRs at this specific moment.

As you can see, you can immediately receive information about the PRs, the number of comments, and more.

I used this page for a while because it is a perfect way to check all the work across many repositories, but it has a small problem: to check the page, I have to switch between VSCode and the browser during my job. This constant switching might seem trivial, but research suggests it takes an average of 23 seconds to return to a productive state after such a context switch. In the fast-paced developer environment, these seconds add up, potentially impacting overall efficiency and output.

So, I decided to search for another solution that would let me have the same information across the projects without leaving my VSCode instance.

The first useful extensions to the migration

GitHub Pull Requests was the first extension I started to test. This extension enables checking all PRs in the current repository I’m working on. I can see my open PRs and my teammates' open PRs. From a VSCode panel, I can check the status of a PR or review another one.
This extension enables us to open a PR directly from VSCode without using the GitHub website, reducing the need to switch context between the editor and the GitHub website.
Here is a picture of the extension

As you can see, in the left panel, we can control PRs and Issues. By clicking the PR, we can view its home page. By clicking the arrow icon that appears when you hover over the PR, you can go to the Review mode and add comments or suggestions to that PR.

That extension has improved my DX experience, especially in PR creation and review, but, as you can see, it works only on the open repository, which is a limitation, since I cannot see if in other projects something or someone is blocked by my work, or it’s waiting for a review or something else.

The Final Solution

While browsing the web, I came across a feature of GitKraken called Launchpad. This feature enables us to get a big-picture view of all issues and PRs where we are the creator or a follower. If you don’t know GitKraken, it is a Git client with an awesome UI for managing your repositories. You can use it as a desktop app, website, editor extension (GitLens), or the CLI. They have also released an MCP server in the last period to manage your repository through an LLM.
As you can imagine, I use the GitLens extension, which has a panel that lets me see everything across my repositories.
Spoiler: I use it with GitHub, but you can also use it with Bitbucket and GitLab. It can also combine data across different platforms.

In this panel, there are different groups where you can find your PRs that meet that status. If you click the PR, you will see a pop-up that lets you get more info or jump into the repository if you have already set it up on your machine.

As you can see, just using these two extensions, I reduced the number of switches between my lovely VSCode and the GitHub website. In my editor, I already have control over all my repositories, and with the correct panel, I can do most of my work directly in the editor.

Before closing, I’d like to give you another extension that reduces the need to switch between the editor and the GitHub website. This extension is the GitHub Actions one. This extension lets you check the status of actions directly in the editor, without jumping to GitHub to search for them.

Conclusion

It’s time to wrap up this article.
At first, I showed how I used to check my current work across projects on GitHub, but eventually it became a pain point because switching between the editor and the browser was annoying.
Then I moved to the GitHub Pull Requests extension, which enables me to open, review, and check PRs and Issues in the current open repository.
Lastly, I talked about the GitLens Launchpad, which, through a panel in the editor, provides a big-picture view of all the PRs across the repositories I’m working on and helps me reduce switching between the editor and GitHub during my daily work.

If you want to use the GitLens Launchpad, it is a PRO feature that requires a valid GitKraken license. To buy one, check this link.

That’s it for this article. I hope this feature can also improve your daily DX, and see you in the following articles.

Bye bye 👋

In this article, I'll talk about my first experience with Antigravity and how I built a small web app called The Mood Mirror. This app emulates an artist who can convert your mood into abstract images or videos.

Spoiler: this app uses Gemini 3, Nano Banana Pro and Veo, but I'll talk about them in a future article.

Antigravity Intro

Let's start with a small presentation about Antigravity.

Google Antigravity is an Agentic IDE. It is a fork of VSCode with a dedicated agent section that features models such as Gemini, Claude, and GPT.

This last part is what makes Antigravity different from VSCode or Cursor; this section is built and maintained by Google. Yes, the experiences are common, but how this Agent section is integrated into the IDE is what differentiates it from the others, and this is where all the IDE teams are working to improve their users' DX.

For more info about Google Antigravity, you can check its website here.

"The Mood Mirror" Setup

To test the tool's full power, I decided to build the application almost entirely in "Vibe Coding". To that end, I began by setting up the project and wrote a prompt outlining my intention and what I hoped to achieve.

In this picture, you can see what Antigravity looks like, and as you can imagine, in the chat, you can prompt our intention.

For my application, I entered this prompt.

Role: You are a Senior Software Engineer Agent.

Project: Build a responsive web application called "Mood Mirror".

Stack: React, Tailwind CSS, and the Gemini 3 SDK.

Core Functionality:

1. Input: Create a clean, minimalist text area where the user enters how they feel (e.g., "I am anxious about my deadline").

2. The "Director" Logic (Gemini 3): When the user submits, send the text to Gemini 3.

   • Analyse the Sentiment Score (0 to +1.0).

   • Extract an Emotional Colour Palette (e.g., "Stormy Grey and Electric Blue").

   • Generate a Creative Prompt for an abstract art piece based on that emotion.

3. The "Artist" Execution (Nano Banana):

   • Pass the Creative Prompt to the Nano Banana Pro API.

   • Conditional Logic: If the Sentiment Score is extreme (above 0.8 or below -0.8), request a 5-second looping Video (MP4). Otherwise, request a High-Res Image (PNG).

4. Dynamic UI: Update the app's background gradient instantly to match the Emotional Colour Palette returned by Gemini while the image generates.

Execution Plan:

• Scaffold the project.

• Write the SentimentService using the Gemini 3 logic.

• Implement the Nano Banana API hook.

• Deploy to preview.

The result of this prompt was a plan of action for Antigravity to implement my request. I got this result because I selected "planning" in the bottom-left drop-down. If you decide to go with the fast option, Antigravity doesn't show the plan and immediately develops it.

Btw, I chose the planning options so that I can check and comment on this plan directly in the IDE.

In the image above, you can see an example of the plan I received. As you can see, you can either accept it or review it, and then ask Antigravity to check your comments and review the plan.

The prompt and its plan are the result of this commit.

What went wrong? 😑

The setup has gone smoothly and pretty well, but I ran into an issue: Antigravity generated a JavaScript application rather than a TypeScript one. Not a big deal. Later, I asked it to review the project in JavaScript and TypeScript, and it converted it without any issues. Here you can see the result.
And lastly, it generated two files, one for the Sentiment discovery and the other for the image generation, but it created a sort of mock service without.
I didn’t iterate again to fix them, but I’ve worked on them later.

Commit linting into the project

The second test I did was about setting up a development tool to verify the commit messages. I like to use commitlint and conventional commits for my project, so my second test was adding the setup for these tools.
I opened a new chat, and I entered this prompt.

I want to add commitlint and conventional-commit to this project. Can you set it up?

I was concerned that the prompt wasn’t particular, but I did it to see what Antigravity produces and how good the results are.

I ran that prompt in “fast” mode, and the first result was pretty good. It installs and sets up @commitlint/cli and @commitlint/config-conventional and after that, it added husky to validate the commit message in the pre-commit hook. I’m not a husky fan, I prefer lefthook. So after this first iteration, I asked Antigravity to replace husky with lefthook. The result I got worked, but it wasn’t the best solution ever. I decided not to reiterate this time, to leave it in the repo and also show what an Agentic IDE can generate when we don’t check its results and trust it too much.

In this second iteration, Antigravity added lefthook without any problem, but it didn’t remove all the husky references. In fact, if you check the commit, you can see the _husky folder with two files, with no sense script for this repo, and in the package.json, it forgot to remove the prepare script.

As you can see, our code review when using these tools is crucial to avoid trash or unnecessary code.

The Gemini 3.0 integration

The next test was the Gemini integration to build the Sentiment analysis service.
As I did in the previous tests, I started from a new chat.
The prompt in this case was a bit more articulated. I asked to generate a service that accepts a text and, through Gemini, returns a structured result with these fields:

• moodScore: a value between 0 and 1 to determine the mood score

• promptType: This is the value that determines if the mirror will show an image or a video

• promptText: This is the text to pass later to generate the video or the image

This result must later be used to generate an image or a video using NanoBanana Pro or Veo 3.

This iteration has been a bit convoluted. The first version used the old npm package @google/generative-ai and not the new one @google/genai. So I kept reiterating to get the code updated to the new version of the SDK. Another issue I had was that Antigravity created a single file to handle both images and videos. So, for that, I reiterated the need to split the logic for image and video generation into two separate files, and I also fixed the video generation to use the video model instead of the image model.

After that, I got a working application that met my first requirements, and you can see a demo in the video below. [and here you can check the commit]

Conclusion

It’s time to wrap up this first experience with Antigravity.

Overall, the experience with the tool was good. This is its first version, and only a few weeks after its release, Antigravity showed great DX and a good understanding of what I want to achieve.

Yes, it is not perfect, and in some cases, the plan described at the beginning hasn’t been satisfied. But this also happens with IDEs that have been in place for months.

As with the other Agentic IDEs, including Antigravity, developer checks are key to boosting implementation velocity while maintaining codebase quality.

The planning mode is fantastic in my opinion, because taking a look at the plan and reviewing or confirming it before starting the implementation can reduce the time wasted on reiterating the Agent result; as we saw, it’s still not perfect yet, but I’m pretty sure it will be tuned and improved in the future.

If I had to rate this first experience, I'd give it 7/10 because the flow was excellent, but I expected more precise results.

Okay, that’s all. I hope you enjoyed this article. Let me know in the comments your experience with Antigravity or other Agentic IDEs.

Bye Bye 👋

How to generate messages

To generate the commit messages, first of all, you have to change your codebase 😎
After that, when you are ready to commit, it’s time to generate the message.
To do that, you need to go to the Source Control panel in VSCode, and if you have the GitLens extension installed, you can use the “Magic” icon to generate the message.

If you click the button, you should have three options

1. Generate Commit Message with GitLens

2. Compose Commit (Preview)

3. Switch GitLens AI Provider/Model

It goes without saying that the first option is the correct one to use when generating your commit message.

After clicking the button, you must wait for a couple of seconds, and the result will appear in the text box.

As you can see, the result is excellent. A commit message that follows the conventional commit rules and a small description of what happened in the code.

Now, you can decide whether the message is okay and commit without changing it, or review it and then commit with your edited message.

Custom Instructions

As with all AI features, instructions are crucial to achieving the best possible result.
Also, for this feature, we can set up instructions to guide the AI in creating the messages.
To do that, you have to go to Settings and search for “GitLens commit message AI custom instruction”.
You should find an option “Gitlens › Ai › Generate Commit Message: Custom Instructions (Preview)”, and this option has a text box that you can fill.
In my case, I inserted this instruction: “Please generate the commit message in the format of conventional commit,” but you can insert all the instructions that you want.
These instructions will help the AI generate the best messages based on your needs, and they will likely reduce the changes required to achieve the best message in the end.

Conclusions

As you can see, this feature is pretty simple but very helpful. It can reduce the time you spend generating commit messages and help you describe the intention of your commits in the best way.
I use it daily, and it helps me to be more precise in my commit messages, which in turn helps me summarise the commit in the best way.
N.B. I’m not a native English speaker, and this feature helps me express myself in the best possible way in my commits.

Okay, that’s all, folks. I hope you’ve enjoyed the content and found it helpful.
See you soon

Bye Bye 👋

Gemini, OpenAI, Copilot, Deepseek, Llama, and many others enable AI in your applications or help you write code, but they all need an internet connection to be accessible. You need the Cloud or to connect to a managed service to get an answer from the model. In some scenarios, this approach exposes you to security issues or the risk of sharing data with another service, and you may want to avoid it.

To help the team and companies benefit from AI and avoid these issues, the Chrome team is working to make Gemini (nano) part of the Chrome browser. The idea is to download the models in the browser when you have connectivity and use them directly from the browser, offline, if needed.

So let's see how it works 🚀

These features are on the building; most are available only under the Canary version and feature flag. If you are interested, you can find all the info at this link.

Features available

As you've already understood, only limited features are available; some are stable, and some are not.

Let's start by listing the features, and later, we will look at some of them.

The available API are:

• Translator API

• Language Detector

• Summarizer API

• Writer API

• Rewriter API

• Prompt API

• Proofreader API

Some are stable from Chrome 138, and some are available for local experiments; you can check out the status of the APIs here so you can be sure about the current situation when you read this post.

As you can see, the APIs' names are fantastic, and they explain their behaviour.

If you want to try these features, start from this documentation section. Unfortunately, you must enable the features through the configurations, so follow these steps to get a Chrome instance ready to run AI models directly from your laptop.

Before closing this chapter, here is a quick reflection on these APIs. As you can notice, all of them work with text; some produce, some detect, some translate, and so on. So, for now, you can work with text and not produce images or videos from the browser, but it's a great starting point!

Let's talk about features

Language Detector

The language detector API is one of the features available from Chrome 138. It allows you to detect the language of a specific word or phrase.

It returns a list of possible languages with the confidence score for that language. This means that we need to make a strategy to choose the best language for our application, but in most cases, the language with the best score is the best one for our application!

How it works!

One thing to do is check if the API is available or not to prevent errors.

To do that, you must check the self object.

if ('LanguageDetector' in self) {
  // Language Detector Available
}

Then, you must check if the model is already available in your browser or if you need to download it.

const availability = await LanguageDetector.availability();

This result can have four possible values:

• "unavailable": The requested options are unsupported, or the model cannot be prompted.

• "downloadable": The request is supported, but you need to download additional files before creating a session. These downloads may include the language model or fine-tuning.

• "downloading": The request is supported and a download is ongoing, which must be completed before creating a session..

• "available": The request is supported, and you can create a session.

This method is pretty much the same for all APIs. Following this flow, you can check if a specific API is available.

When you reach the available status, you are finally ready to work with the LanguageDetector API, and you can create an instance of it by following the next code.

const instance = await LanguageDetector.create();
const result = await instance.detect('Hello world!');

// result = [{
//   detectedLanguage: 'en',
//   confidence: 0.9973934888839722
// }];

As you can see, this API is straightforward and pretty easy to learn.
With that, you have completed your first learning about AI in Chrome with Gemini Nano, and it’s time to move on to another fantastic API!

N.B. If you are working with TypeScript and want to get the best DX possible, a types package that simplifies your work and enables IntelliSense for these APIs exists. @types/dom-chromium-ai This is the name of the package, and we have to thank you, Christian Liebel and Thomas Steiner, for it.

Translator API

Translator API is one of the most common features for an AI. It's pretty simple: you send a text, and you will receive the text translated. This API is available from Chrome 138.
But let’s see how it works.

How it works!

First, you must check if the API is available in the browser.

if ('Translator' in self) {
  // Translator API available
}

If the API is enabled, you must check if the languages you need for source and target are available.
To do that, you must use the availability method exposed by the Translator object.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'en',
  targetLanguage: 'it',
});

The result of this method can have four different values:

• "unavailable": The implementation does not support translation of the given languages.

• "downloadable": The implementation supports translation of the given languages, but a download is required to proceed. The download may be the browser model.

• "downloading": The implementation supports translation of the given languages. The browser is finishing an ongoing download, as part of creating the associated object.

• "available": The implementation supports translation of the given languages, and any required downloads are already complete.

Now, if you don’t receive "unavailable", you can create the translator instance. This method will download the model for you if it hasn’t already been downloaded.

const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'it',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

As you can see, using the create method, you can create your instance and pass your source and target languages. Then, using the monitor method, you can listen to the download progress and maybe create a loader for the user to provide feedback and create a better UX experience. Obviously, the promise will fail if something goes wrong during the download, and you must handle it.
But if everything is okay, you can use the new translator instance to translate the text by using the translate method.

await translator.translate('Where is the next bus stop, please?');
// Dov'è la prossima fermata dell'autobus, per favore?

One important thing to know about this API is that it processes messages sequentially. So, if you have many messages, you must keep this limitation in mind. Then, if you need to translate large amounts of text, it’s better to chunk it and create a loading interface as feedback for the user.

As is evident, this API is also straightforward. There are some methods to learn, and you can integrate this API into your applications by using them.

Also, for this API, you can use the @types/dom-chromium-ai package to get a better experience with TypeScript.

Summarizer API

The last API you will meet in this article is the Summarizer API.
This API enable you to summarise small or large text. Also, this API is available from Chrome 138 stable.

How it works!

First, you must check if the API is available in the browser.

if ('Summarizer' in self) {
  // Summarizer API available
}

If the API is enabled, then you must check if the model is available.

const summarizerCapabilities = await Summarizer.availability();

Also, for this method, the possible results can be:

• "unavailable" means that the implementation does not support the requested options.

• "downloadable" means that the implementation supports the requested options, but first, the browser has to download something, such as a model (in Chrome's case, Gemini Nano) or fine-tuning for the model.

• "downloading" means that the implementation supports the requested options, but it has to finish an ongoing download before it can proceed.

• "available" means that the implementation supports the requested options and the summarizer can proceed.

Now, if everything is okay, it’s time to create an instance of the Summarizer API.

const summarizer = await Summarizer.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  }
});

This create method exposes the monitor function to listen to the download progress and create a better experience for the user as well.
This create method has different parameters you can pass to get different types of summaries or drive the summary's length.

These parameters are:

• sharedContext: Additional shared context that can help the summarizer.

• type: The type of summarisation, with the allowed values key-points (default), tldr, teaser, and headline. To learn more about them, follow this link.

• format: The format of the summarisation, with the allowed values markdown (default) and plain-text.

• length: The length of the summarisation, with the allowed values short, medium (default), and long. The meanings of these lengths vary depending on the requested type.

It's important to know that parameters can’t be changed. So, once you create a new instance, if you need to modify the parameters, you must create a new instance.

Now that you have the summarizer instance, you can use it to summarise the text.

const longText = 'Blah blah blah......';
const summary = await summarizer.summarize(longText, {
  context: 'This is a recipe.',
});

This API also exposes another method, just in case you want to stream the summary result and make it available “faster.”
To do that, you need to use the summarizeStreaming method instead of the summarize one.

const longText = 'Blah blah blah......';
const summary = await summarizer.summarizeStreaming(longText, {
  context: 'This is a recipe.',
});

And with that, you learnt the last AI API for Browsers available in this article 😃

Like the others, this API is straightforward too. There are just some methods to know, and you can integrate this API into your applications.

Recipe Radar with AI App

I wrote a lot in this article, I know, but to let you know how these APIs work. I created a sample app with some recipes. On the detail page, you can see the Language Detector and Translator API in action. Therefore, on the search page, you can see the Summarizer API in action to summarise the recipe and return a summary of the recipe to the user.
If you are interested in it, here is the link to the repo and to the website:

• Github Repo: https://github.com/Puppo/recipe-radar-with-ai

• GitHub Page Website: https://puppo.github.io/recipe-radar-with-ai/

Please don’t take too much care of the code structure. I vibe-coded the application's structure to reduce the time it took to create, and I spent more time on the AI feature and its integration.

By the way, this application example implements and runs all these APIS on a website. It’s important to test in a Chrome version with these APIs available.

Conclusion

Okay, it’s time to wrap up!
In this article, you learn how to integrate AI inside the Browser without relying on any services or cloud providers.
You learnt how to use Language Detector, Translator, and Summarizer API on the Web and what they look like.
Remember that these new features are not available in all browsers, so please be careful when using them in production.

That’s it, folks. I hope you enjoyed the content. If so, please leave a comment or a reaction!

See you soon with other awesome content 🚀

Bye Bye 👋

Google Cloud credits are provided for this project. #AISprint

Promises in JavaScript represent the eventual completion or failure of an asynchronous operation and its resulting value. They not only provide a cleaner and more manageable way to handle asynchronous tasks but also offer improved error handling and readability. This makes them an indispensable tool in the modern JavaScript developer's toolkit.

In this comprehensive guide, we'll embark on a journey to unravel the mysteries of JavaScript Promises. From their fundamental concepts to advanced techniques, we will explore how Promises can streamline your code and make handling asynchronous operations a breeze. Whether you're just starting your journey with JavaScript or are a seasoned developer, this post aims to enhance your understanding and skills in working with Promises.

So, let's dive in and unlock the full potential of JavaScript Promises, transforming the way you write and manage asynchronous code!

Section 1: Understanding Promises

What is a Promise?

At its core, a JavaScript Promise is an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. Unlike the immediate return of values in synchronous code, a Promise gives us a placeholder for a future value, which we can work with in a more structured and predictable manner.

This approach solves many issues associated with older, callback-based patterns, commonly known as "callback hell." Promises allow for more readable and maintainable code, especially when dealing with complex sequences of asynchronous operations.

Creating a Promise

A Promise in JavaScript is created using the Promise constructor. It takes a function as its argument, known as the executor function. This executor function is called immediately by the Promise implementation and it receives two functions as parameters: resolve and reject.

• resolve is called when the asynchronous task completes successfully, passing the result.

• reject is used when the task fails, passing the error or reason for failure.

Here's a basic example of creating a Promise:

let myPromise = new Promise((resolve, reject) => {
    // Asynchronous operation code here
    if(/* operation successful */) {
        resolve('Success');
    } else {
        reject('Error');
    }
});

In this example, the Promise will either resolve with Success or reject with Error, depending on the outcome of the asynchronous operation encapsulated within it.

Promise States

A Promise can be in one of three states:

1. Pending: The initial state of a Promise. The operation has not been completed yet.

2. Fulfilled: The operation was completed successfully, and the Promise now holds the resulting value.

3. Rejected: The operation failed, and the Promise holds the reason for the failure.

This state model ensures that a Promise can only be resolved or rejected once and its state and value become immutable after that change.

Understanding these foundational concepts is crucial for working effectively with Promises in JavaScript. They form the building blocks upon which more complex asynchronous operations can be built, allowing for more readable and maintainable code.

Section 2: Working with Promises

then, catch, and finally

After creating a Promise, the next step is handling its resolution or rejection. This is where the methods then, catch, and finally come into play.

• then: This method is used to access the result of a Promise if it is successfully resolved. It takes up to two functions as arguments: the first for the resolved case and the second for the rejected case.

    myPromise
    .then(
        result => { console.log(result); },  // Success handler
        error => { console.error(error); }  // Error handler
    );
  

• catch: This method is used for error handling in Promises. It is essentially a shorthand for then(null, rejection).

    Promise.catch(error => { console.error(error); });
  

• finally: Introduced in ES2018, finally is a method that executes a specified piece of code when the Promise is settled, regardless of its outcome (resolved or rejected). It's useful for cleanup actions.

    Promise.finally(() => {
        console.log('Operation completed.');
    });
  

Chaining Promises

One of the key strengths of Promises is their ability to be chained. This is done by returning another Promise in the then method, which allows for sequential asynchronous operations.

new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
})
.then(result => {
    console.log(result); // 1
    return result * 2; 
})
.then(result => {
    console.log(result); // 2
    return result * 3;
})
.then(result => {
    console.log(result); // 6
    return result * 4;
});

In this chain, each then receives the result of the previous operation, allowing for a sequence of asynchronous tasks to be handled in a clean and readable manner.

Error Handling in Promises

Error handling is crucial in asynchronous code. In a Promise chain, if an error is thrown in any of the then methods, it propagates down the chain until it is caught by a catch method. This makes it easier to manage errors in complex asynchronous code.

doSomething()
.then(result => doSomethingElse(result))
.then(newResult =>doThirdThing(newResult))
.catch(error => console.error(error))
.finally(() =>console.log('Operation done'));

Real-world Examples

Promises are particularly useful when dealing with API requests. For example, fetching data from a remote server:

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

This section on working with Promises is critical for understanding how to effectively implement and manage asynchronous operations in JavaScript. It covers the fundamental methods for handling Promises and demonstrates the power of chaining for complex tasks, along with practical examples that the readers can relate to and implement in their own projects.

Section 3: Advanced Promise Concepts

Async/Await Syntax

Introduced in ES2017, async/await is a syntactic feature in JavaScript that allows you to work with Promises in a more synchronous-like manner, making your asynchronous code look and behave a bit more like synchronous code.

• Async Functions: Declaring a function as async automatically wraps its return value in a Promise. This means you can use await within these functions to pause the execution until the awaited Promise is resolved.

    async function asyncFunction() {
        const result = await someAsyncOperation();
        console.log(result); return 'Completed';
    }
  

• Await: The await keyword is used to pause the execution of an async function until a Promise is resolved, allowing you to write cleaner and more readable asynchronous code.

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

Error Handling in Async/Await

Error handling in async/await is achieved using try/catch blocks, making it syntactically similar to synchronous error handling.

async function safeFetch() {
    try {
        const response = await fetch('https://api.example.com/data');
        return await response.json();
    } catch (error) {
        console.error('Fetch failed:', error);
        throw error; // Re-throwing the error is important for caller awareness
    }
}

Handling Multiple Promises

Promise.all

Promise.all is used when you need to wait for multiple Promises to complete. It takes an array of Promises and returns a new Promise that resolves when all of the input Promises resolve or rejects as soon as one of them rejects.

Promise.all([asyncTask1(), asyncTask2(), asyncTask3()])
.then(results => {console.log('All tasks completed:', results); })
.catch(error => { console.error('One of the tasks failed:', error); });

Promise.race

Promise.race resolves or rejects as soon as one of the Promises in an iterable resolves or rejects, with the value or reason from that Promise.

Promise.race([asyncTask1(), asyncTask2(), asyncTask3()])
.then(result => {console.log('First task completed:', result); })
.catch(error => { console.error('One of the tasks failed:', error); });

Promise.allSettled

Promise.allSettled is a method that returns a Promise that resolves after all of the given Promises have either been resolved or rejected, with an array of objects describing the outcome of each Promise.

Promise.allSettled([asyncTask1(), asyncTask2(), asyncTask3()])
.then(results => { 
    results.forEach((result) => {
        if (result.status === 'fulfilled') {
            console.log('Success:', result.value);
        } else {
            console.log('Failure:', result.reason);
        }
    });
});

Promise.any

Promise.any takes multiple Promises and as soon as one of the Promises resolves, it returns a single Promise that resolves with the value from that Promise. If all of the passed-in Promises reject, then the returned Promise is rejected with an AggregateError.

Promise.any([asyncTask1(), asyncTask2(), asyncTask3()])
.then(result => {console.log('First successful task:', result); })
.catch(error => { console.error('All promises failed:', error); });

These methods for handling multiple Promises are powerful tools in a JavaScript developer's arsenal. They offer different ways to manage multiple asynchronous operations, making it easier to write clean and efficient code. Understanding when and how to use each of these methods can significantly improve the way you handle concurrency in JavaScript.

Understanding Promise.withResolvers

In the realm of JavaScript Promises, Promise.withResolvers could be conceptualized as a utility function designed to enhance the flexibility and control over Promise resolution and rejection. Unlike the standard Promise constructor, which encapsulates the executor function, Promise.withResolvers could provide direct access to the resolve and reject functions outside the Promise context. This feature would be particularly useful in scenarios where the resolution or rejection of a Promise needs to be triggered externally or in more complex control flows.

Imagine Promise.withResolvers functioning as follows:

Promise.withResolvers = Promise.withResolvers ?? function() {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });
  return { promise, resolve, reject };
}

const { promise, resolve, reject } = Promise.withResolvers();

promise.then(value => console.log(`Resolved with: ${value}`))
       .catch(error => console.error(`Rejected with: ${error}`));

// The Promise can be resolved or rejected externally
resolve("Success!");
// or reject("Failure");

In this hypothetical implementation, Promise.withResolvers returns an object containing the Promise itself and its respective resolve and reject functions. This setup offers a more declarative way of handling Promises, especially in cases where the resolution condition is not immediately known or is dependent on external factors.

This approach, while offering more control, also requires careful management to avoid issues like unresolved Promises or memory leaks. It exemplifies the flexibility of Promises in JavaScript and how they can be tailored to fit specific programming paradigms or application needs. This method has been implemented in ES2023 but creates a polyfill for it; it is really a piece of cake as you can see.

Section 4: Under the Hood

Event Loop and Promises

JavaScript's concurrency model revolves around the Event Loop, which plays a critical role in executing asynchronous code like Promises. Understanding this mechanism is key to mastering JavaScript's asynchronous behavior.

• Event Loop: JavaScript has a single-threaded runtime, meaning it can only execute one command at a time. The event loop enables non-blocking operations by offloading tasks like I/O, timers, and HTTP requests, which are handled outside the JavaScript engine.

• Role of Promises: When a Promise is resolved or rejected, its callback is moved to the Microtask Queue, which is processed after the current execution stack is complete but before the event loop continues to the next iteration. This ensures that Promise callbacks are executed as soon as the JavaScript engine has the opportunity to do so, maintaining the non-blocking nature of asynchronous operations.

Creating Custom Promises

While many asynchronous operations are handled by built-in functions returning Promises, there are scenarios where you might need to create your own Promises.

• Custom Promise Example: Let's say you're interfacing with a legacy API that uses callbacks, and you want to adapt it to use Promises for better code consistency and readability.

    function legacyApiFunction(callback) {
      // Simulating a callback-based API
      setTimeout(() => {
        const data = 'some data';
        callback(null, data);
      }, 1000);
    }
  
    function promisifyLegacyApi() {
      return new Promise((resolve, reject) => {
        legacyApiFunction((err, data) => {
          if (err) {
            reject(err);
          } else {
            resolve(data);
          }
        });
      });
    }
  
    promisifyLegacyApi()
      .then(data => console.log(data))
      .catch(error => console.error(error));
  

In this example, promisifyLegacyApi wraps the old callback-style function in a new Promise, providing a more modern, Promise-based interface for the same functionality.

Best Practices and Pitfalls

• Avoiding the "Promise Hell": Similar to "callback hell," it's possible to end up in a situation with deeply nested Promises. To avoid this, leverage chaining and return Promises from within then callbacks, keeping the code flat.

• Error Handling: Always handle errors in Promises, either using catch for individual Promises or global error handlers for unhandled Promise rejections.

• Debugging: Debugging asynchronous code can be tricky. Utilize modern tools and techniques such as browser developer tools, which provide features to track and inspect Promises.

If you want to dive deep into Promise, don't leave my YouTube video about it.

Conclusion

As we conclude our journey through the world of JavaScript Promises, it's clear that they are much more than just a tool for handling asynchronous operations. They represent a fundamental shift in how we write and think about asynchronous code in JavaScript, offering a robust and elegant way to manage complex operations.

From understanding the basics of what a Promise is and how to create one, to exploring advanced concepts like Promise.all, Promise.race, Promise.allSettled, and Promise.any, we've covered a broad spectrum of functionalities that Promises provide. The async/await syntax further simplifies working with Promises, allowing for code that is not only more readable but also easier to maintain.

The real power of Promises lies in their ability to streamline complex asynchronous tasks, making our code cleaner, more efficient, and more reliable. By understanding the event loop and how Promises fit into JavaScript's concurrency model, developers can write more performant and bug-free code.

As you incorporate these concepts into your daily coding practices, remember that mastering Promises is a journey. There's always more to learn and new patterns to explore. Keep experimenting, keep learning, and most importantly, keep coding. The world of JavaScript is constantly evolving, and with tools like Promises at your disposal, you're well-equipped to tackle the challenges of modern web development.

Happy coding!

You can find the code of this article here.

Strap in as we teleport through this arcane realm of JavaScript, where we’ll not only decode Reflect, but also empower you with hands-on examples and practical tips! 🚀

🎯 Core Objectives of Reflect

1. Introspection: Much like looking into a magic mirror, Reflect allows you to delve into an object's properties and characteristics, enabling you to perform introspective tasks like checking property existence or retrieving property descriptors.

2. Manipulation: Think of Reflect as your Swiss Army knife for object operations. You can easily add, delete, or modify object properties and even trap or monitor these operations.

3. Extensibility: The Reflect API can be seen as a foundational layer that sets the stage for creating Proxy objects, empowering you to build custom behaviors for basic operations (like property lookup, assignment, enumeration, and more).

🛠️ Reflect Methods

1️⃣. Reflect.apply()

Forget the complexities of Function.prototype.apply()! With Reflect.apply(), invoking functions is a breeze.

const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;

// Using Reflect.apply()
const result = Reflect.apply(sum, null, numbers);

console.log(result); // Output: 6

2️⃣. Reflect.get()

Tired of the limitations of vanilla property retrieval? Reflect.get() offers more control and flexibility.

const obj = { x: 42, y: 'hello' };

// Using Reflect.get()
const value = Reflect.get(obj, 'x');

console.log(value); // Output: 42

3️⃣. Reflect.set()

Modify properties with pinpoint accuracy, even within complex object hierarchies.

const obj = { x: 42 };

// Using Reflect.set()
Reflect.set(obj, 'x', 13);

console.log(obj.x); // Output: 13

4️⃣. Reflect.defineProperty()

Defining properties with their descriptors has never been easier!

const obj = {};

// Using Reflect.defineProperty()
Reflect.defineProperty(obj, 'x', { value: 42, writable: false });

console.log(obj.x); // Output: 42

5️⃣. Reflect.deleteProperty()

Wipe properties off the face of your object as if they never existed.

const obj = { x: 42 };

// Using Reflect.deleteProperty()
Reflect.deleteProperty(obj, 'x');

console.log('x' in obj); // Output: false

6️⃣. Reflect.ownKeys()

Discover all the keys an object owns, including Symbols!

const obj = { x: 42, [Symbol('key')]: 'symbolValue' };

// Using Reflect.ownKeys()
const keys = Reflect.ownKeys(obj);

console.log(keys); // Output: ['x', Symbol(key)]

🚀 Why Use Reflect?

By now, you might be asking yourself, "Why should I dive into Reflect when there are other ways to manipulate and inspect JavaScript objects?" Great question! Let's unravel the reasons that make Reflect a powerful tool in your JavaScript arsenal.

1️⃣ Functional Paradigm

The Reflect API offers static methods that embrace the functional programming paradigm, making them first-class citizens that you can pass around in your code.

👉 Example:

Suppose you want to make property retrieval generic. You can do so with ease.

const genericGet = Reflect.get;
const value = genericGet(someObject, 'someProperty');

2️⃣ Enhanced Error Handling

Unlike methods in the Object API that often throw errors, Reflect methods return a Boolean to indicate success or failure, allowing for more elegant error handling.

👉 Example:

With Reflect.set(), you can check if a property was set successfully and proceed accordingly.

if (Reflect.set(obj, 'key', 'value')) {
    // Property was set successfully
} else {
    // Failed to set the property
}

3️⃣ Proxy Integration

Reflect and Proxy are like two peas in a pod. The methods available in Reflect align perfectly with Proxy traps, allowing for seamless and straightforward custom behaviors.

👉 Example:

Creating a logging proxy becomes ridiculously simple.

const handler = {
    get(target, property) {
        console.log(`Reading property: ${property}`);
        return Reflect.get(target, property);
    }
};
const proxy = new Proxy(someObject, handler);

4️⃣ Consistency and Predictability

Methods in Reflect offer a more consistent API. They always return values (often Booleans) instead of throwing errors, and the parameter orders are predictable, leading to cleaner and more maintainable code.

👉 Example:

Both Reflect.get() and Reflect.set() have consistent argument ordering: target, propertyKey[, receiver].

Reflect.get(target, property);
Reflect.set(target, property, value);

5️⃣ Intuitive and Self-Documenting

Reflect methods are often more intuitive and self-documenting than their Object counterparts. This readability makes it easier for developers, new and experienced alike, to understand the code.

👉 Example:

Compare Reflect.ownKeys(obj) with Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)).

Which one do you find more intuitive?

6️⃣ Future-Proofing

As JavaScript evolves, new methods are more likely to be added to the Reflect API, making it a wise choice for long-term projects.

For more info don't waste my YouTube video on my YouTube Channel.

Conclusion

And just like that, we've come to the end of our magical journey through the labyrinthine world of JavaScript's Reflect API! You're now armed with the tools, tricks, and spells—err methods—to perform object manipulation wizardry that would make Dumbledore proud.

Ready to cast your own spells? Grab your keyboard wand, and let's make the JavaScript realm a little more enchanted, one Reflect method at a time!

Remember, the magic isn’t just in the code; it’s in you, the coding sorcerer who brings it to life. Until our next spellbinding adventure, code on, wizards! 🚀✨

You can find the code of this article here

Ever wondered what makes your objects tick? Or how to go all "Inception" on your JavaScript code by manipulating object properties at a deeper, more granular level? Well, you're in luck! Today, we're diving into the magical world of Object Property Descriptors in JavaScript—a realm where you become the puppet master of your objects. 🎭

Get ready for a roller coaster ride that takes you through the hidden alleys of JavaScript's objects. By the end of this post, you'll be wielding Object Property Descriptors like a wizard casting spells, giving you full control over properties, and even the behaviour of your objects. 🧙‍♂️

What is a JavaScript Object Property Descriptor?

In JavaScript, objects are more than just key-value pairs. They're intricate entities with characteristics that often go unnoticed, hidden beneath the surface like an iceberg in an ocean of code. Welcome to the fascinating realm of Object Property Descriptors, a tool that lets you truly tap into the full potential of JavaScript objects.

An Object Property Descriptor is essentially a metadata object that details how a property on an object behaves. It's like the DNA of the property, encoding its attributes and defining its characteristics. You can think of an Object Property Descriptor as a control panel, giving you knobs and levers to fine-tune how a property can be accessed, modified, enumerated, or deleted.

Here are the attributes you can configure with an Object Property Descriptor:

• value: The actual value of the property. Simple enough, right? 📦

• writable: Determines if the property value can be changed. It's like a lock that you can engage or disengage at will. 🔒

• enumerable: Controls whether the property shows up during enumeration, like when you use a for...in loop or Object.keys(). It's like a spotlight—or lack thereof—on your property. 🔦

• configurable: Decides if the property can be deleted or has its attributes changed. Think of it as the ultimate veto power. 🛑

You can access and modify these attributes using built-in JavaScript methods like Object.getOwnPropertyDescriptor(), Object.defineProperty(), and Object.defineProperties(). These are your magic wands to perform spellbinding feats of object manipulation!

For example, to make a property read-only, you can set its writable attribute to false. Or if you want to hide a property from enumeration, just set the enumerable attribute to false. It’s like tailoring your object properties to fit your exact needs, almost as if you’re crafting a bespoke suit!

Object Property Descriptors in Practice

It's time to get our hands dirty and jump into the practical aspects of using Object Property Descriptors in JavaScript.

1️⃣ Accessing Descriptors with Object.getOwnPropertyDescriptor()

Let's start with the basics. Ever wondered what the descriptor of an existing object property looks like? Object.getOwnPropertyDescriptor() is your answer. It takes two arguments: the object itself and the property name as a string.

const myObj = { age: 30 };
const descriptor = Object.getOwnPropertyDescriptor(myObj, 'age');

console.log(descriptor); // Output: { value: 30, writable: true, enumerable: true, configurable: true }

Here, the descriptor object shows the default attributes: value, writable, enumerable, and configurable. No surprises, everything is set to true by default! 🎉

2️⃣ Defining Descriptors with Object.defineProperty()

Okay, ready to step it up? What if you want to create a property with custom attributes? Say hello to Object.defineProperty(). It takes three arguments: the object, the property name, and the descriptor object.

const person = {};
Object.defineProperty(
    person,
    'name',
    {
        value: 'Alice',
        writable: false,
        enumerable: true,
        configurable: false
    }
);

console.log(person.name); // Output: Alice

Now, person.name is read-only and not configurable but still enumerable. Try changing its value, and JavaScript will be like, "Nice try, buddy!" 🤨

3️⃣ Batch Operation with Object.defineProperties()

But wait, there's more! What if you want to define multiple properties at once? Object.defineProperties() has got your back.

const animal = {};
Object.defineProperties(animal, {
    name: {
        value: 'Dog',
        writable: true
    },
    sound: {
        value: 'Woof',
        enumerable: false
    }
});

Here, animal gets two properties, each with its own set of descriptors. Efficient, isn't it? 🤓

4️⃣ Computed property with Object.defineProperty()

But wait, there's more again. What if you want to define a property that depends on other ones? Object.defineProperty() has got your back again.

const person = {
  firstName: 'John',
  lastName: 'Doe',
};

// Define a read-only property
Object.defineProperty(person, 'fullName', {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  enumerable: true,
});

console.log(person.fullName); // John Doe

Here person has three properties, firstName, lastName and fullName. fullName depends on the others and it's enumerable so that it's included in the for...in loop and Object.keys() method.

Ok, I think the idea now it's clear and you can use your imagination to combine these configurations to provide the best descriptors for your objects.

To find out more don't waste my YouTube video on my YouTube Channel

Conclusion

In conclusion, Object Property Descriptors are a powerful feature of JavaScript that allows you to manipulate and define object properties with fine-grained control. This advanced feature offers developers the ability to create more dynamic and flexible code.

Whether you're a junior developer or an expert, understanding Object Property Descriptors can help you level up your JavaScript skills.

So go ahead, tinker with your code, challenge the norms, and keep pushing the boundaries. The JavaScript universe is your playground! 🚀

You can find the code of this article here.

JavaScript's memory management can be tricky, especially when it comes to handling objects that are no longer needed. As developers, we often need to deal with memory leaks and other issues that arise from improper garbage collection. Fortunately, JavaScript has introduced a new feature called the FinalizationRegistry to help us manage memory more efficiently. In this blog post, we'll dive deep into the world of FinalizationRegistry, exploring its purpose, how to use it, and real-world scenarios where it can come in handy.

A Simple Example

To begin, let's take a look at a simple example to understand how FinalizationRegistry works. The FinalizationRegistry is an object that enables you to register a callback function that will be invoked when an object is garbage collected. Here's a basic example:

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Clean up: ${heldValue}`);
});

function createObject() {
  const obj = {id: 1};
  registry.register(obj, "Object 1");
}

createObject();
// After some time, when the object is garbage collected, the console will log: "Clean up: Object 1"

In this example, we create a new FinalizationRegistry and provide a callback function that logs a message when the registered object is garbage collected. We then create an object and register it with the registry.

Real-World Scenario

Now, let's explore a more realistic scenario where FinalizationRegistry can be beneficial. Imagine we have a web application that allows users to upload and manipulate images. We use a third-party library to handle the image manipulation, and this library creates large objects that consume a significant amount of memory. To prevent memory leaks, we can use FinalizationRegistry to ensure that these objects are properly cleaned up when they are no longer needed.

const imageRegistry = new FinalizationRegistry((imageData) => {
  console.log(`Cleaning up image data: ${imageData}`);
  // Perform additional cleanup tasks, such as releasing resources associated with imageData
});

function loadImage(imageUrl) {
  return fetch(imageUrl)
    .then((response) => response.blob())
    .then((imageBlob) => {
      const imageData = new ImageData(imageBlob);
      imageRegistry.register(imageData, `Image: ${imageUrl}`);
      return imageData;
    });
}

function manipulateImage(imageData) {
  // Use the third-party library to manipulate the image
}

loadImage('https://example.com/image.jpg')
  .then((imageData) => {
    manipulateImage(imageData);
    // After manipulation, the imageData object will eventually be garbage collected
  });

In this example, we create an imageRegistry using FinalizationRegistry and register the ImageData objects when they are loaded. When an ImageData object is garbage collected, the provided callback function will log a message and perform any additional cleanup tasks required.

Considerations

While the FinalizationRegistry is a powerful tool for managing memory, there are some important considerations to keep in mind:

1. The timing of garbage collection is not guaranteed, and the callback function may not be invoked immediately after an object becomes unreachable.

2. FinalizationRegistry should not be used to manage critical resources, as it only provides a best-effort cleanup mechanism.

3. The held values in the registry should not be used to access the registered objects, as it may prevent them from being garbage collected.

To find out more don't waste my YouTube video on my YouTube channel

Conclusion

The JavaScript FinalizationRegistry is a valuable addition to the language that can help developers manage memory more efficiently and prevent memory leaks. By understanding how it works and knowing when to use it, you can create more performant and memory-efficient applications. Keep in mind the considerations mentioned above, and happy coding!

You can find the code of this article here.

A Brief Introduction to Proxies in JavaScript

A Proxy object in JavaScript is used to define custom behaviour for fundamental operations such as property lookup, assignment, enumeration, and function invocation. It acts as a wrapper around another object, called the target, and allows you to intercept and manipulate operations performed on the target object.

Creating a JavaScript Proxy

To create a JavaScript Proxy, you need two things: a target object and a handler object. The target object is the object you want to wrap with the Proxy, while the handler object defines the custom behaviour for the proxy.

Here's a simple example of creating a Proxy:

const target = { name: "John", surname: "Doe", fullName: "John Doe" };
const handler = {
  get(_target, prop) {
    return _target[prop] ? _target[prop].toUpperCase() : "Property not found";
  },
  set(_target, prop, value) {
    if (prop === 'name') {
      _target.fullName = value + ' ' + _target.surname;
    }
    if (prop === 'surname') {
      _target.fullName = _target.name + ' ' + value;
    }
    if (prop === 'fullName') {
      throw new Error('fullName is not writable')
    }
    _target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.fullName); // Output: "JOHN DOE"
console.log(proxy.nonexistent); // Output: "Property not found"
proxy.name = 'Jane';
console.log(proxy.fullName); // Output: "Jane Doe"
proxy.surname = 'Smith';
console.log(proxy.fullName); // Output: "Jane Smith"
proxy.fullName = 'Tom Smith'; // Error: fullName is not writable

In this example, we defined a get trap in the handler object, which intercepts the property lookup operation on the target object. When a property is accessed on the proxy object, the get trap is invoked, and it returns the property value in uppercase if the property exists or a custom message if it doesn't.
Then, we defined a set trap, which intercepts a property's set. If the property name is name or surname calculates the fullName and sets the target object with the right value, but if you try to set the fullName property the code raises an error.

Use Cases for Proxies in JavaScript

Validation and Constraints

Proxies can be used to enforce data validation and constraints when setting properties on an object. For example, you can ensure that a property value is a certain type or within a specific range.

const target = { age: 25 };
const handler = {
  set(_target, prop, value) {
    if (prop === "age" && (typeof value !== "number" || value < 0 || value > 150)) {
      throw new TypeError("Invalid age value");
    }
    _target[prop] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);
proxy.age = 30; // Works fine
proxy.age = "thirty"; // Throws TypeError: "Invalid age value"

Logging and Profiling

Proxies can be used to log and profile operations performed on an object, which can be helpful during debugging and performance analysis.

const target = { message: "Hello, World!" };
const handler = {
  get(_target, prop) {
    console.log(`Accessing property "${prop}"`);
    return _target[prop];
  },
  set(_target, prop, value) {
    console.log(`Setting property "${prop}" to "${value}"`);
    _target[prop] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);
console.log(proxy.message); // Logs: "Accessing property "message"" and outputs: "Hello, World!"
proxy.message = "Goodbye, World!"; // Logs: "Setting property "message" to "Goodbye, World!""

To learn more don't miss my YouTube video about JavaScript Proxy on my YouTube channel

Conclusion

JavaScript's Proxy object is a powerful and versatile feature that allows developers to create more efficient and flexible code. By understanding and utilizing proxies, you can unlock their full potential and become a true JavaScript superhero.

You can find the code of this article here.

WeakRef is a powerful feature in JavaScript that allows developers to create weak object references. A weak reference is a reference that does not prevent the object it refers to from being garbage collected. This can be useful when you want to maintain a reference to an object without preventing it from being cleaned up by the garbage collector.

How WeakRef Works

WeakRef works by creating a weak reference to an object. This reference does not count towards the object's reference count and does not prevent it from being garbage collected. To access the object, you can call the deref() method on the WeakRef instance. If the object is still alive, the method will return the object; otherwise, it will return undefined.

Implementing WeakRef in Your Code

To use WeakRef in your code, follow these steps:

1. Create a new WeakRef instance by passing the object you want to reference as an argument: const weakRef = new WeakRef(targetObject);

2. To access the object, call the deref() method on the WeakRef instance: const object = weakRef.deref();

3. Check if the object is still alive by testing if it is not undefined: if (object !== undefined) { /* object is still alive */ }

Use Cases for WeakRef

WeakRef can be helpful in several scenarios, such as:

1. Caching:

   Use WeakRef to create a cache for expensive-to-create objects. When an object is no longer needed, it can be garbage collected automatically, freeing up memory.

2. DOM Element References:

   In web applications, you can use WeakRef to hold references to DOM elements. This can help prevent memory leaks when you need to keep track of elements for event handling or manipulation.

3. Resource Cleanup:

   When working with external resources like files or network connections, you can use WeakRef to keep track of those resources. If the resource becomes unused (e.g., a file is closed or a network connection is no longer needed), it can be automatically released.

4. Memoization:

   Implement memoization using WeakRef to store the results of function calls. This allows you to cache function results without preventing the input arguments from being garbage-collected when they're no longer needed.

5. Managing Timers:

   When using timers (e.g., setTimeout or setInterval), you can use WeakRef to hold references to objects associated with the timer. This can help ensure that the timer doesn't keep objects alive longer than necessary.

6. Event Handling:

   In event-driven applications, you can use WeakRef to manage event listeners. When an object with event listeners is no longer in use, the associated event listeners can be automatically removed.

7. Reacting to DOM Node Removal:

   In cases where you want to perform actions when DOM nodes are removed, you can use WeakRef to track DOM nodes. When a node is removed from the DOM, you can receive a notification and perform cleanup tasks.

8. Custom Data Structures:

   Create custom data structures that use WeakRef to hold references to elements. This can be particularly useful in scenarios like implementing caches or data structures with automatic cleanup.

9. Managing Web Workers:

   When working with Web Workers, you can use WeakRef to manage references to worker instances. When a worker is no longer needed, its reference can be automatically released.

10. Optimizing Memory-Intensive Applications:

    In memory-intensive applications, you can use WeakRef to ensure that large data structures or objects are only kept in memory as long as they're actively used.

Best Practices and Limitations

When using WeakRef, keep in mind the following best practices and limitations:

1. Use WeakRef only when necessary, as it can introduce complexity and potential performance issues.

2. Do not rely on the timing of garbage collection, as it may vary across JavaScript engines and environments.

3. Be aware that WeakRef is not supported in all environments, so you may need to provide a fallback implementation or polyfill.

If you want to learn more about WeakRef, don't miss out on my YouTube video on my YouTube channel 🚀

Conclusion

WeakRef is a powerful feature in JavaScript that allows you to create weak references to objects, enabling you to maintain references without preventing garbage collection. By understanding how WeakRef works and its use cases, you can use memory more efficiently in your applications and avoid memory leaks.

Here is the source code of this post.

A Brief Introduction to WeakSet

WeakSet is a collection of objects similar to the more commonly used Set.
However, there's a significant difference between the two: WeakSet holds only weak references to the objects stored within them. This means that if an object is only referenced by a WeakSet, it can still be garbage collected, freeing up valuable memory resources.

This unique feature of WeakSet makes it an excellent choice for managing certain types of data relationships, mainly when memory management is a priority.

Creating and Using WeakSet

To create a WeakSet, instantiate a new instance of the WeakSet class:

const weakSet = new WeakSet();

Adding objects to a WeakSet is easy. Just use the add method:

const obj1 = {};
const obj2 = {};

weakSet.add(obj1);
weakSet.add(obj2);

WeakSets also provide methods for checking if an object is present (has) and removing objects (delete):

console.log(weakSet.has(obj1)); // true
weakSet.delete(obj1);
console.log(weakSet.has(obj1)); // false

However, unlike Sets, WeakSets do not have methods for iterating over their contents or determining their size. This is because of their weakly-referenced nature, which makes it impossible to know how many objects are still being held in memory.

Use Cases for WeakSets

1. Managing DOM Elements

WeakSet can be incredibly useful when working with the DOM. You can store references to DOM elements without worrying about memory leaks. When an element is removed from the DOM, the reference in the WeakSet will be automatically garbage collected.

const domElements = new WeakSet();
const element = document.querySelector('.my-element');
domElements.add(element);

// Later, when the element is removed from the DOM
domElements.has(element); // false (garbage collected)

2. Private Data Storage

WeakSet can be used to store private data associated with an object without exposing it. Since the references are weak, the data will be automatically removed when the object is no longer reachable.

const privateData = new WeakSet();

class MyClass {
  constructor() {
    privateData.add(this);
  }

  #data = 'I am private data';

  getData() {
    if (privateData.has(this)) {
      return this.#data;
    }
    return undefined;
  }
}

To see WeakSets in action, don't waste the opportunity to look at my YouTube video about them.

In Conclusion

WeakSet may not be the most well-known feature of JavaScript, but it offers unique capabilities that can be invaluable in certain situations. By understanding and embracing WeakSet, you can optimize your code, enhance memory management, and unlock the full potential of this hidden gem in the JavaScript universe.

You can find the source code here

JavaScript is a powerful and versatile programming language that has evolved over the years, introducing new features and improvements to enhance its performance and capabilities. One such feature is the WeakMap, a collection of key-value pairs that offers unique benefits regarding memory management and data privacy. This article will delve into the world of WeakMap in JavaScript, exploring their creation, usage, limitations, and real-world applications.

Understanding WeakMap

In JavaScript, a WeakMap is a type of Map that holds key-value pairs where the keys are objects, and the values can be any arbitrary data. The primary difference between a Map and a WeakMap is how they manage memory management. In a WeakMap, when a key object becomes inaccessible, the entry is automatically removed, allowing the garbage collector to reclaim memory efficiently.

Creating and Using WeakMap

To create a new WeakMap, use the new WeakMap() constructor. Once created, you can set values for the keys using the set method, as shown below:

const weakmap = new WeakMap();
const key = { name: "John Doe" };
weakmap.set(key, "Some value");

To retrieve values associated with keys, use the get method:

const value = weakmap.get(key); // "Some value"

You can remove entries from the WeakMap using the delete method and check for the existence of a key using the has method:

weakmap.delete(key); // true
weakmap.has(key); // false

Practical Applications of WeakMap

WeakMap offers several practical applications in JavaScript:

1. Privacy and Encapsulation: By storing private data separately from the object, WeakMap can enhance privacy and encapsulation. This is particularly useful for classes and objects where internal data should not be exposed to the outside world.

2. Memory Management: WeakMap automatically releases unreferenced keys and associated values, allowing for efficient memory management in large applications.

3. Caching: WeakMap can implement caching mechanisms without causing memory leaks, as they automatically remove entries when keys are no longer accessible.

Limitations of WeakMap

Despite their benefits, WeakMap has some limitations:

1. Keys must be objects: Unlike Maps, WeakMap requires keys to be objects, not primitive values.

2. No built-in iteration methods: WeakMap does not have built-in methods for iterating over their entries, such as forEach or entries.

3. No clear method: There is no built-in method to clear the entire WeakMap.

4. Limited compatibility: WeakMap is not supported in some older browsers, limiting their compatibility.

Real-world Examples and Use Cases

WeakMap can be utilized in various real-world scenarios:

1. Event Listeners: When managing event listeners in DOM elements, WeakMap can help prevent memory leaks by automatically removing entries when elements are no longer accessible.

2. Private Data Storage: WeakMap can store private data in classes and objects, ensuring that internal data is not exposed to the outside world.

3. Large Applications: WeakMap can optimize memory usage in large applications by automatically releasing unreferenced data, improving performance and reducing memory leaks.

To find out more about WeakMap don't miss out on my Youtube video on my Youtube channel.

Conclusion

In conclusion, WeakMap offers powerful features and applications for efficient memory management and data privacy in JavaScript. While they have some limitations, their benefits often outweigh these drawbacks, making them a valuable addition to a JavaScript developer's toolkit. As the language continues to evolve, future developments will likely address these limitations and further improve the usefulness of WeakMap in JavaScript applications.

The code of this article is available here

JavaScript Symbols are a new primitive data type introduced in ECMAScript 6 (ES6). They are used as unique, non-string identifiers for object properties, useful in avoiding naming collisions and enabling more advanced programming techniques.

Creating and Understanding Symbols

Symbols are created using the Symbol() function, which can take an optional description as an argument. Each symbol is unique; even if two symbols have the same description, they are considered distinct.

const propSymbol = Symbol("propName");
const propSymbol2 = Symbol("propName");

propSymbol === propSymbol2 // false

Unique Identifiers and Property Keys

Symbols are often used as property keys in objects to ensure uniqueness and prevent naming collisions. They can be used alongside string keys without conflict, and their uniqueness makes them ideal for use as metadata or private properties in objects.

const propSymbol = Symbol("propName");
const propSymbol2 = Symbol("propName");

const obj = {
  [propSymbol]: "propSymbol",
  [propSymbol2]: "propSymbol2"
}

The Global Symbol Registry

The global Symbol registry allows you to create and share symbols across different scopes and realms. To create a global symbol, use Symbol.for(key), which takes a string as its argument. This method checks if a symbol with the same key exists in the registry; if not, it creates a new one.

// my-module-1.js
export const propSymbol = Symbol("propName");
export const propSymbolShare = Symbol.for("propName");

// my-module-2.js
export const propSymbol = Symbol("propName");
export const propSymbolShare = Symbol.for("propName");

// index.js
import { propSymbol as propSymbolM1, propSymbolShare as propSymbolShareM1 } from './my-module.js'
import { propSymbol as propSymbolM2, propSymbolShare as propSymbolShareM2 } from './my-module-2.js'

console.log(propSymbolM1 === propSymbolM2); // false

console.log(propSymbolM1 === propSymbolShareM1); // false
console.log(propSymbolM2 === propSymbolShareM2); // false

console.log(propSymbolShareM1 === propSymbolShareM2); // true

It's also possible to retrieve the key of a Symbol using Symbol.keyFor(key) but only for shared keys.

export const propSymbol = Symbol("propName");
export const propSymbolShare = Symbol.for("propName");

console.log(Symbol.keyFor(propSymbol)); // undefined
console.log(Symbol.keyFor(propSymbolShare)); // propName

Symbols and Iteration

Symbols are not enumerable, which means they are not included in standard iteration methods like for...in loops or Object.keys(). To access an object's symbol properties, use Object.getOwnPropertySymbols().

const propSymbol = Symbol("propName");
const propSymbol2 = Symbol("propName");

const obj = {
  [propSymbol]: "propSymbol",
  [propSymbol2]: "propSymbol2"
}
console.log(JSON.stringify(obj)); // {}
console.log(Object.keys(obj)); // []
console.log(Object.getOwnPropertyNames(obj)); // []
for (const key in obj) {
  console.log(key); // nothing
}

console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(propName), Symbol(propName) ]

Well-Known Symbols in JavaScript

Well-known symbols are predefined global symbols that represent common behaviours in JavaScript, such as Symbol.iterator, Symbol.asyncIterator, Symbol.toStringTag, and Symbol.species. These symbols can be used to customize the behaviour of built-in JavaScript objects and classes.

Use Cases and Practical Applications

Symbols can be used to implement private properties, metadata, or methods, avoiding naming collisions in libraries and frameworks. They are also used to customize the behaviour of well-known JavaScript objects and classes, such as iterators and string conversion.

Limitations and Considerations

Symbols are not supported in older JavaScript environments, and their unique nature may require additional care when working with serialization or proxy objects. Additionally, they are not directly accessible during iteration, which may require extra steps to access their properties.

Conclusion

JavaScript Symbols provide a powerful, unique identifier for object properties, helping to avoid naming collisions and enabling advanced programming techniques. Understanding their use cases and limitations is essential for modern JavaScript developers.

You can find the source code here

In this blog post, we're diving deep into the captivating world of JavaScript Async Generators. We'll unveil how Async Generators empower developers to create elegant solutions for complex asynchronous scenarios. Whether you're grappling with real-time data synchronization, asynchronous data processing, or any scenario demanding fine-tuned control over data flow, join us on this journey as we unravel the capabilities, nuances, and transformative power of JavaScript Async Generators.

Before we delve into Async Generators, let's recap the basics of asynchronous programming. In JavaScript, asynchronous tasks are crucial for handling time-consuming operations without blocking the main thread. Functions like setTimeout, AJAX requests, and Promises have become commonplace in managing asynchronous operations.

Generators, denoted by function* syntax, are a powerful feature introduced in ES6. They allow us to pause and resume the execution of a function, providing a valuable mechanism for lazy evaluation. The yield keyword within a generator function lets us yield values individually, pausing the function's execution until the next value is requested. If you want to learn more, there is relative content about them in this series.

Now, imagine combining the magic of asynchronous operations with the versatility of generators. Enter Async Generators! These supercharged functions enable us to work with asynchronous data streams more intuitively and elegantly.

An async generator function is declared using async function* syntax. Inside, the yield keyword can be combined with await to handle asynchronous operations gracefully. This means we can yield promises, fetch data and seamlessly integrate it into our data stream.

The real beauty of async generators lies in their ability to simplify complex asynchronous tasks. They're particularly handy when dealing with data streams from sources like databases, APIs, or even real-time event streams. Imagine processing a continuous stream of sensor data or handling multiple concurrent requests without drowning in callback hell!

Let's take a look at an example

async function* getUsers(ids: number[]) {
  for (const id of ids) {
    console.log("getUsers next");
    const data = fetch(`https://reqres.in/api/users/${id}`).then(res =>
      res.json()
    );
    yield data;
  }
}

Using a for-of loop, the function iterates over the IDs and fetches the data for every user on every iteration. However, using the yield, stop the execution and resume it only when the caller asks for the next value.
Like Async Iterators, also Async Generators can be iterated using a for-await-of loop.

for await (const user of getUsers([1, 2, 3, 4, 5])) {
  console.log(user);
}

Error handling and completion are crucial aspects of asynchronous programming. With async generators, we can catch errors using try-catch blocks within the generator function. Plus, we can signal the end of data using the 'return' statement, closing the loop on our data stream.

try {
  for await (const user of getUsers([1, 2, 3, 4, 5])) {
    console.log(user);
  }
} catch (err) {
  console.error(err);
}

async function* getUsers(ids: number[]) {
  for (const id of ids) {
    console.log("getUsers next");
    const data = fetch(`https://reqres.in/api/users/${id}`).then(res =>
      res.json()
    );
    if (id > 4) return data; // <-- Return
    yield data;
  }
}

Like Generators, also Async Generators can be combined. For instance, we can create an Async Generator map function that accepts an Async Generator and a transformation function and returns a new async generator with the transformations.

async function* map<T, U>(
  asyncIterable: AsyncIterable<T>,
  callback: (value: T) => U
) {
  for await (const item of asyncIterable) {
    yield callback(item);
  }
}

Asynchronous programming in JavaScript continues to evolve, and Async Generators are a testament to its dynamic nature. With their power to elegantly manage complex asynchronous tasks, async generators offer a glimpse into the future of streamlined coding. So, fellow developers, embrace this innovative tool and unlock new possibilities in your projects.

I also created a video about Async Generators on my Youtube channel and you can find it below.

That's a wrap for today's discussion on JavaScript Async Generators. I hope you found this exploration insightful and inspiring. Remember, staying curious and open to new concepts is the key to mastering your craft in the ever-evolving programming landscape.

If you enjoyed this post, like and share it. And if you have questions, feedback or doubts let me know in the comments.

Until next time, happy coding and thanks for reading 👩‍💻👨‍💻

N.B. you can find the code of this post here.

Imagine effortlessly traversing through data streams that might involve fetching data from APIs, reading from files, or any other asynchronous data source. This is precisely where Async Iterators shine, providing a seamless and elegant solution to handle such scenarios. In this blog post, we'll delve into the world of JavaScript Async Iterators, exploring their fundamentals, understanding their benefits, and uncovering how they can be a game-changer in writing robust asynchronous code. Whether you're a seasoned developer looking to expand your skill set or a newcomer curious about advanced JavaScript techniques, this blog post is for you. We will unravel the power of Async Iterators and take your asynchronous programming skills to new heights.

Before we jump into the code, let's understand what async iterators are. In JavaScript, iterators are objects that allow us to loop over collections. Async iterators take this concept a step further by allowing us to handle asynchronous operations, like fetching data from APIs or reading from streams.

Creating an async iterable is simple. We use the Symbol.asyncIterator to define the async iterator method inside an object. This method will return an object with the next method that resolves a promise containing the next value in the asynchronous sequence.
Let's take a look at an example.

const getUsers = (ids: number[]): AsyncIterable<User> => {
  return {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        async next() {
          console.log("getUsers next");
          if (i === ids.length) {
            return { done: true, value: null };
          }
          const data = await fetch(
            `https://reqres.in/api/users/${ids[i++]}`
          ).then(res => res.json());
          return { done: false, value: data };
        },
      };
    },
  };
};

Imagine you have a list of IDs and want to read the user data only if needed. Using AsyncIterators, you can create a function that handles the API and returns the result of every request on every iteration, making the code more transparent.

To consume the values of an async iterable, we use the for-await-of loop. This loop works just like the regular for-of loop, but it's designed specifically for asynchronous iterables.

for await (const user of getUsers([1, 2, 3, 4, 5])) {
  console.log(user);
}

Error handling is crucial when dealing with asynchronous operations. Async iterators allow us to handle errors using try-catch blocks around the for-await-of loop.

try {
    for await (const user of getUsers([1, 2, 3, 4, 5])) {
      console.log(user);
    }
  } catch (err) {
    console.error(err);
  }

AsyncIterator runs code only if needed, so until you don't call the next method, nothing happens, like for Iterators.

The return method exists also for AsyncIterators. This method is used in case the code doesn't complete all the iterations. Imagine the loop calls a break or a return; in this case, JavaScript under the hood calls the return method for us. In this method, we can handle whatever we need. We may need to reset something or check the current value of the iterator.

const getUsers = (ids: number[]): AsyncIterable<User> => {
  return {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        ...
        async return() {
          console.log("getUsers return");
          return { done: true, value: null };
        },
      };
    },
  };
};

Async Iterators are powerful like Iterators, and we can create functions that accept an AsyncIterator and manipulate it to return another Async Iterator. For instance, we can create a map function that accepts an Async Iterator and returns another with a callback specified by the user.

function map<T, U>(iter: AsyncIterable<T>, fn: (v: T) => U): AsyncIterable<U> {
  return {
    [Symbol.asyncIterator]() {
      const iterator = iter[Symbol.asyncIterator]();
      return {
        async next() {
          console.log("map next");
          const { done, value } = await iterator.next();
          if (done) return { done, value: null };
          return { done, value: fn(value) };
        },
        async return() {
          console.log("map return");
          if (iterator?.return) await iterator?.return();
          return { done: true, value: null };
        },
      };
    },
  };
}

These functions have all the benefits said before. Javascript does nothing until the codebase doesn't ask for the next function; the same is true for the return method, and now you can compose the getUsers with the map to build a new Async Iterator.

const iterator = map(getUsers([1, 2, 3, 4, 5]), user => user.data.id)
for await (const num of iterator) {
  if (num === 3) break;
  console.log(num);
}

And there you have it – a deep dive into the world of asynchronous iterators in JavaScript. They provide an elegant solution to working with asynchronous data streams, making your code more organized and efficient. Experiment with async iterators in your projects, and you'll be amazed at how they simplify complex asynchronous workflows.

I also created a video on my Youtube channel, that you can find below.

If you found this content helpful, like and share it. And if you have any questions, feedback, or doubts, let me know in the comments 😀

Thanks for reading! And Happy coding! 👩‍💻 👨‍💻

N.B. you can find the code of this post here.

In the fast-paced landscape of web development, managing tasks and handling complex flows of data can be quite challenging. This is where JavaScript generators come into play. These remarkable constructs introduce a new level of control and flexibility, allowing developers to write code that can be paused, resumed, and iterated step by step.

In this blog post, we'll take you on a journey through the core concepts of JavaScript generators. We'll unravel their syntax, explore their capabilities, and showcase examples of how they can simplify your code and make it more manageable. By the end of this read, you'll not only understand the ins and outs of generators but also be equipped with the knowledge to start using them effectively in your own projects.

Buckle up as we embark on this exploration of JavaScript generators, unravelling their potential and discovering how they can revolutionize the way you write code. Whether you're a seasoned developer or just starting with JavaScript, there's something valuable here for you. Let's begin!

A generator in JavaScript is a function that, after the function keyword, has a *. It's not possible to create generators in JavaScript using arrow functions. Generators are special functions that implement the Iterable interface very simply; you can learn more about them in this blog post. The particularity of generators is the yield keyword. Using the yield, we can return a new value to the iteration but without ending the function execution, simply putting it on pause, until the next request for the next value and until it's not completed.

function* range(start: number, end: number): Iterable<number> {
  let n = start;
  while (n <= end) {
    console.log("range next");
    yield n++;
  }
}

As you can notice, the range generator is a simple generator function, and it's understandable from the * near-function keyword. Using a simple while, the function checks if the current value is less or equal to the end value and if true, using the yield returns the value; else exists from the while and closes the generator. Like iterators, generators only run once someone calls for the next value.

It's possible to go through a generator using a simple for-of-loop.

for (const num of range(1, 10)) {
  console.log(num);
}

Using the Iterable interface

const iterator = range(1, 10)[Symbol.iterator]();
while (true) {
  const { done, value } = iterator.next();
  if (done) break;
  console.log(value);
}

Or using the spread operator to save all the values in an Array.

for (const num of [...range(1, 10)]) {
  console.log(num);
}

It's important to remember that if you use the spread operator, you will lose all the generators' benefits because it runs the generator until it's not completed to copy all the values in the array.

Like iterators also, generators can be combined. For instance, we can create a map generator function that accepts an iterator and a transformation function and returns the computation inside the transformation with the value emitted by the generator.

And that's the result.

function* map<T, U>(
  iterable: Iterable<T>,
  callback: (value: T) => U
): Iterable<U> {
  for (const value of iterable) {
    yield callback(value);
  }
}

const mapRange = map(range(1, 10), value => value * 10);

for (const num of mapRange) {
  console.log(num);
}

That's all folks. You can find a video about them on my Youtube channel.

In conclusion, JavaScript generators stand as a remarkable tool in the arsenal of every developer striving for more efficient and flexible programming. Through their unique ability to pause and resume execution, generators provide an innovative solution to managing complex flows of data and operations.

Throughout this blog post, we've journeyed through the syntax, use cases, and benefits of JavaScript generators. We've seen how they can simplify code, making it more readable and maintainable.

By harnessing the power of generators, you can transform the way you approach programming challenges. These constructs not only offer a structured approach to handling tasks but also contribute to writing code that is less error-prone and easier to reason about.

As you venture into the realm of generators, remember that practice is key. Experiment with different scenarios, explore their interplay with other techniques and gradually integrate them into your projects. With time, you'll become proficient in leveraging generators to create responsive and efficient applications.

So, whether you're a front-end developer aiming to tame complex UI interactions or a back-end engineer dealing with intricate data processing, generators offer a fresh perspective on tackling programming. Embrace their power, refine your skills, and elevate your coding prowess in the dynamic world of JavaScript.

Thank you for reading and happy generating! 👩‍💻 👨‍💻 😜

N.B. you can find the code of this post here.

In the realm of modern web development, efficiently managing and manipulating data is a crucial skill. This is where JavaScript iterators come into play, offering a systematic approach to traversing various data structures such as arrays, maps, and sets. Whether you're a beginner eager to understand the basics or an experienced developer looking to fine-tune your code, grasping the concept of iterators can significantly enhance your programming journey.

In this blog post, we'll embark on a comprehensive exploration of JavaScript iterators. We'll break down their fundamental principles, explore practical examples of their usage, and demonstrate how they can simplify complex data operations. By the time you finish reading, you'll not only understand iterators inside and out but also be equipped to leverage their potential to write more concise, readable, and efficient code.

So, whether you're striving to make your codebase more elegant or seeking to optimize your data manipulation techniques, join us as we delve into the world of JavaScript iterators. From novice to expert, there's something here for everyone. Let's dive in!

Built-in in Javascript exists many structures that implement the Iterators pattern, for instance: Array, Set and Map. In Javascript, an object to be iterable must implement the Iterable interface.

But what is the Iterable interface? First, to be iterable, an object must have a next method. This method must return two properties: done and value. Done is used to detect if the iteration is completed; instead, the value contains the current value. Last but not least, if you want your object to become an iterator, you must expose the iterable interface in the Symbol.iterator of your object, like in this example.

const array = [1, 2, 3, 4, 5];
const iterator = array[Symbol.iterator]();
for (let result = iterator.next(); !result.done; result = iterator.next()) {
  console.log(result.value);
}

For example, here is a range function implemented as an iterator.

const range = (start: number, end: number): Iterable<number> => {
  return {
    [Symbol.iterator]() {
      let n = start;
      return {
        next() {
          console.log("range next");
          if (n > end) {
            return { done: true, value: null };
          }
          return { done: false, value: n++ };
        },
      };
    },
  };
};

As you can notice, this function accepts two numbers, start and end and returns a new object with a single property, in this case, the iterator property. Then, inside this function, there is the next function that, on every call, checks if the current value is greater than the end and, if true, returns a new object with done as true and value as null; else returns an object with done false and value with the current value. The beautiful thing about iterator is that javascript only does something once you ask for the next value.

Every iterator can be iterated using the for-of loop

for (const num of range(1, 10)) {
  console.log(num);
}

or using its native method, so calling the Symbol.iterator function and then using the next method and checking the done property if it is true or not.

const rangeIterator = range(1, 10)[Symbol.iterator]();
for (let result = rangeIterator.next(); !result.done; result = rangeIterator.next()) {
  console.log(result.value);
}

It's possible to copy all the iterator values in an Array using the spread operator too.

for (const num of [...range(1, 10)]) {
  console.log(num);
}

Iterator also has another method, the return method. This method is used in case the code doesn't complete the iteration. Imagine the loop call a break or a return; in this case, JavaScript under the hood calls the return method for us. In this method, we can handle whatever we need. We may need to reset something or check the current value of the iterator.

const range = (start: number, end: number): Iterable<number> => {
  return {
    [Symbol.iterator]() {
      let n = start;
      return {
        next() {
          console.log("range next");
          if (n > end) {
            return { done: true, value: null };
          }
          return { done: false, value: n++ };
        },
        return() {
          console.log("range return");
          return { done: true, value: null };
        },
      };
    },
  };
};

for (const num of range(1, 10)) {
  if (num > 5) break;
  console.log(num);
}

Iterators are powerful, and we can also create functions that accept an iterator and manipulate it to return another iterator. For instance, we can create a map function that accepts an iterator and returns another with a callback specified by the user.

function mapIterable<T, U>(
  iterable: Iterable<T>,
  callback: (value: T) => U
): Iterable<U> {
  return {
    [Symbol.iterator]() {
      const iterator = iterable[Symbol.iterator]();
      return {
        next() {
          console.log("mapIterable next");
          const { done, value } = iterator.next();
          if (done) {
            return { done: true, value: null };
          }
          return { done, value: callback(value) };
        },
        return() {
          console.log("mapIterable return");
          if (iterator.return) {
            iterator.return();
          }
          return { done: true, value: null };
        },
      };
    },
  };
}

All the info said before is true also for this new iterator. JavaScript does nothing until the codebase doesn't ask for the next value; the same is true for the return method, and now you can compose the range iterators with the map iterator to build a new one.

const mapRange = mapIterable(range(1, 10), value => value * 10);

for (const num of mapRange) {
  if (num > 50) break;
  console.log(num);
}

Ok folks, that's all!
If you want to dive deep with Iterators, don't waste my video on my Youtube channel.

In conclusion, understanding and utilizing JavaScript iterators can greatly enhance your ability to work with collections of data in a more elegant and efficient manner. With iterators, you can streamline your code, improve its readability, and reduce memory consumption by processing data one element at a time. This powerful concept empowers developers to implement custom iteration behaviour, making their code more adaptable to different scenarios.

By grasping the fundamentals of iterators, such as the next() method and the concept of iterable objects, you open the door to more sophisticated programming techniques and design patterns. Whether you're working with arrays, maps, sets, or other data structures, iterators provide a standardized way to traverse through data and perform operations without unnecessary complexity.

As the JavaScript language continues to evolve, iterators remain a foundational concept that plays a crucial role in modern programming paradigms. Incorporating iterators into your coding arsenal equips you with a versatile tool for managing data, ultimately leading to cleaner, more maintainable, and more robust code.

So, as you embark on your journey to master JavaScript iterators, remember that they are more than just technical features; they represent a shift in how you approach and solve problems in your code. With practice and exploration, you'll be able to wield iterators effectively, making your codebase more efficient and your development experience more enjoyable.

Thanks for reading and Happy coding! 😃 👩‍💻 👨‍💻

N.B. you can find the code of this article here!

After that, Andrea and I became colleagues and friends. I always see Andrea as a Mentor, and I have always followed him. So I started to go with him to the xedotnet meetup. I met other incredible developers like Mirco Vanini (another MVP), Daniele Morosinotto and many others there. Thanks to xe, I learned what a community is and how a community works. I started to understand the benefit of sharing knowledge in the development environment, and my mind started to build a strange idea "One day you will be like them, maybe not an MVP but a speaker yes, and you will share your knowledge with the others."

I was young at that moment and decided to continue to follow the community, but I put my effort into improving myself in my job.
For almost 8 years, I dedicated my time to learn stuff in my bedroom and in my free time, developing different projects in my daily routine, and I changed 3 jobs too.
When I started to work in Flowing, in my mind something happened.
Flowing was an environment with awesome developers, and many of them were and are speakers too. But I was not ready to do my first talk, so I tried to think of something different that could be useful for the community. After some days, I decided to write my first series about Typescripts.
Why typescript? It is my favorite language with javascript, and many times, I saw people fighting with it. So I said: "Ok, this is the right topic, let's go!".
21 articles compose my first series, "Typescript - Tips & Tricks Series", which you can find here. In reality, the audience at the beginning was not so much, but after some months, Lars contacted me to ask if I would join the "This is learning" community, and as you can imagine, I accepted :) Here I also met another good man: Santosh, who runs with Lars "This is learning" community.
During that period, another crazy and good friend had a strange idea. I organized and took as "Teacher" a workshop about Nx in Flowing, and he was invited as an attendee. He appreciated the workshop so much that he invited me to his youtube channel to speak about Nx (Nx the return). The name of the friend is Francesco Sciuti, another MVP and also the Batman of the developers.
In that period, I was also writing a new series called "RxJS - Getting Started", 15 articles to help developers to be more confident with RxJS. Why this topic? Because I worked on many Angular projects and saw many developers stuck or completely unfamiliar with it.

After that, a colleague and friend (Francesco Strazzullo) tried to push me out of my comfort zone, and he asked me to be a speaker at the Mug meetup. I was a bit scared; speaking in front of many people created a strange sensation in me, but after some sane pushing, I said yes! So the 7th of October 2021, I did my first talk called Stay Reactive Stay Quiet with RxJS. The sensations at the end were really good, so on the 19th of October, I did the second at the FEVR community called "Is it possible to build your UI components using only web components?" (thanks to Matteo Guidotto for this talk).
It was the COVID period, so taking talks and doing conferences in 2021 was really difficult. For this reason, I continued to write another series called: It's Prisma Time.

At the beginning of 2022, the decisive turning point. During a chat with Andrea, I told him: "I would become a Microsoft MVP; what have I to do to achieve it?" I had this idea for some months, but I wanted to concretize it at that moment. He looked at me and said, "It's time to do some great conferences and maybe speak more about some Microsoft technologies".
So I went back home, and with the euphoria in my blood, I started to write some articles about Visual Studio Code. These articles spoke about some common commands for me when I worked with VsCode, but these articles were awesome for the community! Many and many people didn't know these commands, and the articles received a lot of appreciation. Another thing I did was research conferences and check out conferences where I could send a CFP.
I remember I sent so many CFPs that I forgot how many noes I received 😅
But at the beginning of September, the first confirmations arrived: AngularDay 2022, then the workshop at the react day with Fabio Biondi, another MVP and good friend that shared with me also a great weekend at the GDP Pescara, where I talked about Prisma and last but not least the ngrome.
During this period, I also continued to do meetups, thanks to Milano Frontend and React JS Milano having me as a speaker.
If you are curious, you can find the list of all my talks and contributions here.

In the middle of December 2022, I spoke again with Andrea to ask him if he could nominate me as Microsoft MVP. He did it, and I spent an evening filling out the form of all my contributions during the last year. Why last year? Because the MVP Award is based on the last year. I started my history 10 years ago, yes, but the MVP Award takes into consideration only the last year. I decided to tell you the entire story because I know the last year is only the cherry on top, but without the previous nine, the last year would probably be a failure.

As you can imagine, after the filling, you have to wait for the evaluation, which takes at most 3 months. I was lucky; on the 3rd of January 2023, in my inbox appeared an email that said: "Congratulation! You are a Microsoft MVP 2023"! Now, I suppose you can imagine how much happy I was, I think I stayed euphory for the following two or three days 😅
Then after some weeks, I did a call with Cristina. She takes care of all the MVPs on the Meditterian side and explained to me how the program works, its benefits and so on. She is really kind and she really put a lot of effort into helping the MVPs. Thanks Cristina, for all the things you do for us! 🫶

Now my journey is only at the beginning. I have different ideas for continuing.
I opened my own Youtube channel, I'll continue to write articles, and I'll continue to do talks at conferences and meetups.

What did I learn from this story?
The MVP award is "only" a simple and beautiful award that helps me remember all the effort I put in these years to improve myself and try to help others! And if you want to join the program: love communities, and put your effort into helping them! Do this, and you'll be on the right path to being part of the MVP Family.
Remember: improve yourself, help others and follow your passion!

Today it's time to learn how you can build an infinite query with React Query.

To build an infinite query you have to use the useInfiniteQuery hook. This hook is similar to the useQuery but with some more properties to handle the infinite loading in the best way.

The key concepts, if you are working with useInfiniteQuery are:

• Key: in this case, the key is unique for each page, useInfiniteQuery handles all the pages inside its state

• page: each chunk of your infinite query is represented as a page and the first page returned by the useInfiniteQuery is undefined. This helps you to understand if it's the first iteration or not.

• hasNextPage: is a variable returned by the hook and its scope is to determine if another chunk exists or not

• fetchNextPage: is a function used to fetch the next chunk

• isLoading: is a flag that determines if there is a loading ongoing (The query has no data yet)

• isFetching: is a flag that determines if there is a fetch request ongoing

• getNextPageParam: this function is an option to pass at the hook and it is used to determine if there is another chunk or not after the response

ok, let's see the code to be clearer

import { useInfiniteQuery } from '@tanstack/react-query';
import { useState } from 'react';

const fetchTodos = async (
  page: number,
  limit: number,
  signal: AbortSignal | undefined
): Promise<{
  totals: number;
  todos: Todo[];
}> => {
  const response = await fetch(`api/tasks?_page=${page + 1}&_limit=${limit}`, {
    signal,
  });
  if (!response.ok) {
    throw new ResponseError('Failed to fetch todos', response);
  }
  const todos: Todo[] = await response.json();
  const totals = Number.parseInt(
    response.headers.get('x-total-count') || '0',
    10
  );

  return {
    totals,
    todos,
  };
};

interface UseTodos {
  todos: Todo[];
  isLoading: boolean;
  isFetching: boolean;
  error?: string;
  hasNext: boolean;
  next?: () => void;
}

export const useTodos = (): UseTodos => {
  const [limit] = useState<number>(5);

  const { data, hasNextPage, fetchNextPage, isLoading, isFetching, error } =
    useInfiniteQuery(
      [QUERY_KEY.todos],
      ({ signal, pageParam: page = 0 }) => fetchTodos(page, limit, signal),
      {
        refetchOnWindowFocus: false,
        retry: 2,
        getNextPageParam: (lastPage, pages) => {
          if (Math.ceil(lastPage.totals / limit) > pages.length)
            return pages.length;
          return undefined;
        },
      }
    );

  return {
    todos: data?.pages.flatMap(({ todos }) => todos) || [],
    isLoading,
    isFetching,
    error: mapError(error),
    next: fetchNextPage,
    hasNext: hasNextPage || false,
  };
};

As you can notice, the flow is very simple, the hook returns the current page or chunk, you have to handle the fetch request and then you can determine the result and if there is another chunk or not.
Another important thing to keep in mind is that the result of the useInfiniteQuery is an array and each element of the array contains the data of each chunk.

Ok, I suppose you have an idea of how Infinite Queries work in React Query, but if you want to deep into it don't miss my youtube about it.

I think that’s all from this article.

This is the last post of this series, I hope you enjoyed the content and now you are aware of using ReactQuery in your React application.

See you soon folks
Bye Bye 👋

p.s. you can find the code of the video here

Today it's time to learn how you can paginate a list with ReactQuery.

It's common to create a pagination of a list to improve the user interface of your platform if you are building a list in your application, but also to limitate the work in your API.

Using ReactQuery, building a paginate list is a piece of cake.

You have to follow 3 steps:

1. Create a state to save the value of the current page

2. Create a state to save the limit of the pages (the number of elements on every page)

3. Fetch the data every time the user changes one of the previous states.

But let's see an example that is easier to understand

const fetchTodos = async (
  page: number,
  limit: number,
  signal: AbortSignal | undefined
): Promise<{
  totals: number;
  todos: Todo[];
}> => {
  const response = await fetch(`api/tasks?_page=${page}&_limit=${limit}`, {
    signal,
  });
  if (!response.ok) {
    throw new ResponseError('Failed to fetch todos', response);
  }
  const todos: Todo[] = await response.json();
  const totals = Number.parseInt(
    response.headers.get('x-total-count') || '0',
    10
  );

  return {
    totals,
    todos,
  };
};

interface UseTodos {
  todos: Todo[];
  isLoading: boolean;
  isFetching: boolean;
  error?: string;
  pages: number;
  page: number;
  setPage: Dispatch<SetStateAction<number>>;
}

export const useTodos = (): UseTodos => {
  const [page, setPage] = useState<number>(1);
  const [limit] = useState<number>(5);

  const {
    data: { todos, totals } = {
      todos: [],
      totals: 0,
    },
    isLoading,
    isFetching,
    error,
  } = useQuery(
    [QUERY_KEY.todos, page, limit],
    ({ signal }) => fetchTodos(page, limit, signal),
    {
      refetchOnWindowFocus: false,
      retry: 2,
    }
  );

  return {
    todos,
    isLoading,
    isFetching,
    error: mapError(error),
    pages: Math.ceil(totals / limit),
    page,
    setPage,
  };
};

As you can notice, the process to build a pagination with ReactQuery is very simple.
The fetch request has to contain the page and the limit (you can handle a pagination also with limit and offset if you want) and in your useQuery you have to handle some simple stuff. First, the key of your query must include the page and limit too, second you must pass page and limit to your fetch request.

As you can see, building a paginated list with ReactQuery is really a piece of cake, but if want to dive into it don't miss my youtube video about it

I think that’s all from this article; I hope you enjoyed this content!

See you soon folks
Bye Bye 👋

p.s. you can find the code of the video here