DEV Community: Luca Del Puppo

Take control of your job with GitLens Launchpad

Luca Del Puppo — Tue, 23 Dec 2025 07:00:00 +0000

As a developer, you have to take control of your projects every day. Whether it is a company repository, an open source project you maintain or collaborate on, or a simple pet project.

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 👋

The Mood Mirror App - My Antigravity first experience

Luca Del Puppo — Thu, 04 Dec 2025 06:03:00 +0000

Just a week ago, Google launched Antigravity, and why not give it a try and share my experience? And here I am for this.

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:

Input: Create a clean, minimalist text area where the user enters how they feel (e.g., "I am anxious about my deadline").
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.

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).

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 👋

Improve Your Git Commit Messages with GitLens Tips

Luca Del Puppo — Fri, 03 Oct 2025 06:13:45 +0000

In the AI era, we can do many different things with LLM: generate code, images, videos or ask whatever we want and wait for an answer.

The AI is here, and we cannot snub it. I love using it to simplify my day, help me find solutions, or learn new things. For instance, one of the most challenging tasks I perform every day is crafting a commit message for my next commit. I love to commit often, and I avoid commit messages like “WIP”, “work in progress”, “first step”, “second step”, and so on.

In the past, I spent a considerable amount of time crafting the perfect commit message for the next commit. Currently, thanks to GitLens (by GitKraken), I can ask for help from the AI to generate a prefilled message based on my actions, and then review the generated message.

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

Generate Commit Message with GitLens
Compose Commit (Preview)
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 👋

Do you really need the Cloud to work with AI?

Luca Del Puppo — Wed, 25 Jun 2025 06:27:11 +0000

We are in the AI era. New models emerge daily, and many applications have already integrated AI into their workflows.

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:

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

A Promise is forever

Luca Del Puppo — Tue, 06 Feb 2024 06:13:01 +0000

In the ever-evolving world of web development, mastering asynchronous operations is a crucial skill for any JavaScript developer. Asynchronous programming allows web applications to handle tasks like API requests, file operations, or any activities that require waiting for results without blocking the main thread. Traditionally, this was managed through callback functions, leading to the infamous "callback hell," where code becomes tangled and difficult to maintain. Enter JavaScript Promises - a powerful and elegant solution to simplify asynchronous code management.

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:

Pending : The initial state of a Promise. The operation has not been completed yet.
Fulfilled : The operation was completed successfully, and the Promise now holds the resulting value.
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.
catch : This method is used for error handling in Promises. It is essentially a shorthand for then(null, rejection).
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.

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.
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.

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.

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

The Reflect API: The Swiss Army Knife Every JavaScript Developer Needs

Luca Del Puppo — Thu, 09 Nov 2023 07:18:26 +0000

Ever wished for a magical toolkit that gives you superhero-like control over JavaScript objects? Say hello to the Reflect API, the Swiss Army knife every modern JavaScript developer needs! From peeping into objects to conjuring custom behaviors Reflectis your one-stop spellbook! 📜

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

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.
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.
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

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

Cracking the JavaScript Code: Unveil the Magic of Object Property Descriptors

Luca Del Puppo — Thu, 02 Nov 2023 06:35:07 +0000

👋 Hey, JavaScript developers!

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.

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

JavaScript FinalizationRegistry Unraveled: Memory Management Magic Explained!

Luca Del Puppo — Wed, 25 Oct 2023 06:21:41 +0000

Introduction

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:

The timing of garbage collection is not guaranteed, and the callback function may not be invoked immediately after an object becomes unreachable.
FinalizationRegistry should not be used to manage critical resources, as it only provides a best-effort cleanup mechanism.
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.

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

Unlocking the Power of Proxies: JavaScript's Secret Superheroes

Luca Del Puppo — Wed, 18 Oct 2023 06:03:05 +0000

JavaScript's Proxy object is a powerful feature that enables you to intercept and customize operations performed on objects. This versatile tool allows developers to create more efficient and flexible code while also improving code maintainability. In this article, we will dive into the world of JavaScript proxies, explore their use cases, and provide examples for expert developers.

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.

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

JavaScript WeakRef Explained: Harnessing Memory Management Magic

Luca Del Puppo — Wed, 11 Oct 2023 06:23:40 +0000

Introduction to WeakRef

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:

Create a new WeakRef instance by passing the object you want to reference as an argument: const weakRef = new WeakRef(targetObject);
To access the object, call the deref() method on the WeakRef instance: const object = weakRef.deref();
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:

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.
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.
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.
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.
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.
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.
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.
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.
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.
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:

Use WeakRef only when necessary, as it can introduce complexity and potential performance issues.
Do not rely on the timing of garbage collection, as it may vary across JavaScript engines and environments.
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.

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

Unlock the Power of JavaScript WeakSet: Mastering a Hidden Gem!

Luca Del Puppo — Wed, 04 Oct 2023 06:22:01 +0000

In the vast landscape of JavaScript, many powerful features often go unnoticed. One such hidden gem is the WeakSet, an unsung hero of the language that can help you optimize your code and manage memory more effectively. In this article, we'll dive deep into WeakSet, uncovering their potential and learning how to use them effectively in our JavaScript projects.

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

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

Unlocking JavaScript's Secret Weapon: The Power of WeakMaps

Luca Del Puppo — Wed, 27 Sep 2023 05:50:43 +0000

Introduction

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:

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.
Memory Management: WeakMap automatically releases unreferenced keys and associated values, allowing for efficient memory management in large applications.
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:

Keys must be objects: Unlike Maps, WeakMap requires keys to be objects, not primitive values.
No built-in iteration methods: WeakMap does not have built-in methods for iterating over their entries, such as forEach or entries.
No clear method: There is no built-in method to clear the entire WeakMap.
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:

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.
Private Data Storage: WeakMap can store private data in classes and objects, ensuring that internal data is not exposed to the outside world.
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

Luca Del PuppoFollow

@Google Developer Expert, Former Microsoft MVP, @GitKraken Ambassador, Senior Software Developer and JavaScript enthusiastic Youtube Channel https://youtube.com/@Puppo_92

DEV Community: Luca Del Puppo

Take control of your job with GitLens Launchpad

The first useful extensions to the migration

The Final Solution

Conclusion

The Mood Mirror App - My Antigravity first experience

Antigravity Intro

"The Mood Mirror" Setup

Commit linting into the project

The Gemini 3.0 integration

Conclusion

Improve Your Git Commit Messages with GitLens Tips

How to generate messages

Custom Instructions

Conclusions

Do you really need the Cloud to work with AI?

Features available

Let's talk about features

Language Detector

Translator API

Summarizer API

Recipe Radar with AI App

Conclusion

A Promise is forever

Section 1: Understanding Promises

What is a Promise?

Creating a Promise

Promise States

Section 2: Working with Promises

then, catch, and finally

Chaining Promises

Error Handling in Promises

Real-world Examples

Section 3: Advanced Promise Concepts

Async/Await Syntax

Error Handling in Async/Await

Handling Multiple Promises

Promise.all

Promise.race

Promise.allSettled

Promise.any

Understanding Promise.withResolvers

Section 4: Under the Hood

Event Loop and Promises

Creating Custom Promises

Best Practices and Pitfalls

Conclusion

Luca Del PuppoFollow

The Reflect API: The Swiss Army Knife Every JavaScript Developer Needs

🎯 Core Objectives of Reflect

🛠 Reflect Methods

1. Reflect.apply()

2. Reflect.get()

3. Reflect.set()

4. Reflect.defineProperty()

5. Reflect.deleteProperty()

6. Reflect.ownKeys()

🚀 Why Use Reflect?

1 Functional Paradigm

2 Enhanced Error Handling

3 Proxy Integration

4 Consistency and Predictability

5 Intuitive and Self-Documenting

6 Future-Proofing

Conclusion

Luca Del PuppoFollow

Cracking the JavaScript Code: Unveil the Magic of Object Property Descriptors

What is a JavaScript Object Property Descriptor?

Object Property Descriptors in Practice

1️⃣ Accessing Descriptors with Object.getOwnPropertyDescriptor()

2️⃣ Defining Descriptors with Object.defineProperty()

3️⃣ Batch Operation with Object.defineProperties()

4️⃣ Computed property with Object.defineProperty()

Conclusion

Luca Del PuppoFollow

JavaScript FinalizationRegistry Unraveled: Memory Management Magic Explained!

Introduction

A Simple Example

Real-World Scenario

Considerations

1. `Reflect.apply()`

2. `Reflect.get()`

3. `Reflect.set()`

4. `Reflect.defineProperty()`

5. `Reflect.deleteProperty()`

6. `Reflect.ownKeys()`

1️⃣ Accessing Descriptors with `Object.getOwnPropertyDescriptor()`

2️⃣ Defining Descriptors with `Object.defineProperty()`

3️⃣ Batch Operation with `Object.defineProperties()`

4️⃣ Computed property with `Object.defineProperty()`