DEV Community: Zygimantas Sniurevicius

Extracting a color palette from an image with javascript

Zygimantas Sniurevicius — Wed, 23 Mar 2022 14:56:06 +0000

Introduction

Today I am bring you something really interesting that I think is worth sharing. Let me begin by showcasing the end result.

If you can’t wait and want to test it yourself, here are the links to the app demo and the repository.

Demo app.
Repository (the entire codebase is commented).

Explanation

We can load any image and extract a color palette and every color is accompanied by its opposed color (complementary).

Example of a similar technique can be found in Spotify, when you navigate to a song/playlist or album you get a custom color gradient on top that represents the dominant color of the picture, this gradient adds a unique feel to each page and it's actually the reason why I am doing this post.

There are several websites that provide this service such as coolors.co or canva.com, if you ever wondered how does it work you are in the correct place, let's find out.

📝 Steps

Now that we know what we are dealing here, let’s start by explaining the process:

Load an image into a canvas.
Extract image information.
Build an array of RGB colors.
Apply Color quantization.

BONUS TRACK

Order colors by luminance.
Create a complementary version of each color.
Build the HTML to display the color palette.

🖼️ Load an image into a canvas

First we create the basic HTML of our page, we need a form input of type file to upload the image and a canvas element because that’s how we gain access to the image’s data.

index.html



<form action="#">
 <input type="file" id="imgfile" />
 <input type="button" id="btnLoad" value="Load" onclick="main();" />
</form>
<canvas id="canvas"></canvas>
<div id="palette"></div>
<div id="complementary"></div>

🚜 Extract image information

We load the image into the canvas using the event handler .onload, this allow us to access the getImageData() method from the canvas API.

index.js



const main = () => {
  const imgFile = document.getElementById("imgfile");
  const image = new Image();
  const file = imgFile.files[0];
  const fileReader = new FileReader();

  fileReader.onload = () => {
    image.onload = () => {
      const canvas = document.getElementById("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0);

      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    }
  }
}

The information returned from getImageData() represents all the pixels that compose the image, meaning that we have an humongous array of values in the following format:



{
  data: [133,38,51,255,133,38,255,120...],
  colorSpace: "srgb",
  height: 420,
  width: 320
}

Each value inside data represents a channel of a pixel R (red), G (Green), B (Blue) and A (Alpha), Every four elements of the data array form the RGBA color model.

🏗️ Build an array of RGB colors

Immediately after obtaining the image data we have to parse it to something more readable, this will make our live easier in the future.

We loop through the image data every four elements and return an array of color objects in RGB mode instead of RGBA.

index.js



const buildRgb = (imageData) => {
  const rgbValues = [];
  for (let i = 0; i < imageData.length; i += 4) {
    const rgb = {
      r: imageData[i],
      g: imageData[i + 1],
      b: imageData[i + 2],
    };
    rgbValues.push(rgb);
  }
  return rgbValues;
};

🎨 Color quantization

After building the rgb colors array we need to somehow know which colors are the most representative of the image, to obtain this we use color quantization.

Wikipedia describes color quantization as

A process that reduces the number of distinct colors used in an image, usually with the intention that the new image should be as visually similar as possible to the original image.

Median cut algorthm

To achieve color quantization we are gonna use an algorithm called median-cut, the process is the following:

Find the color channel ( red, green or blue) in the image with the biggest range.
Sort pixels by that channel.
Divide the list in half.
Repeat the process for each half until you have the desired number of colors.

It sounds easy but it is a little bit complex, so I am gonna try my best to explain the code below.

Let's begin by creating a function that finds the color channel with the biggest range.

Initialize the min rgb values to the maximum number and the max rgb values to the minimum, this way we can determine what is the lowest and highest accurately.

Then, loop through every pixel and compare it with our current values using Math.min and Math.max.

Subsequently, we check the difference between every channels min and max results and return the letter of the channel with the biggest range.

index.js



const findBiggestColorRange = (rgbValues) => {
  let rMin = Number.MAX_VALUE;
  let gMin = Number.MAX_VALUE;
  let bMin = Number.MAX_VALUE;

  let rMax = Number.MIN_VALUE;
  let gMax = Number.MIN_VALUE;
  let bMax = Number.MIN_VALUE;

  rgbValues.forEach((pixel) => {
    rMin = Math.min(rMin, pixel.r);
    gMin = Math.min(gMin, pixel.g);
    bMin = Math.min(bMin, pixel.b);

    rMax = Math.max(rMax, pixel.r);
    gMax = Math.max(gMax, pixel.g);
    bMax = Math.max(bMax, pixel.b);
  });

  const rRange = rMax - rMin;
  const gRange = gMax - gMin;
  const bRange = bMax - bMin;

  const biggestRange = Math.max(rRange, gRange, bRange);
  if (biggestRange === rRange) {
    return "r";
  } else if (biggestRange === gRange) {
    return "g";
  } else {
    return "b";
  }
};

Recursion time

Now that we have the component with the biggest range of colors in it (R, G or B), sort it and then split it by half, using the two halves we repeat the same process and call the function again, each time adding a value to depth.

index.js



const quantization = (rgbValues, depth) => {
  // base code goes here

const componentToSortBy = findBiggestColorRange(rgbValues);
  rgbValues.sort((p1, p2) => {
    return p1[componentToSortBy] - p2[componentToSortBy];
  });

  const mid = rgbValues.length / 2;
  return [
    ...quantization(rgbValues.slice(0, mid), depth + 1),
    ...quantization(rgbValues.slice(mid + 1), depth + 1),
  ];
}

As for the base case, we enter it when our depth is equal to the MAX_DEPTH, in our case 4, then add up all the values and divide by half to get the average.

Note: Depth in this case means how many colors we want by power of 2.

index.js



const quantization = (rgbValues, depth) => {

 const MAX_DEPTH = 4;
  if (depth === MAX_DEPTH || rgbValues.length === 0) {
    const color = rgbValues.reduce(
      (prev, curr) => {
        prev.r += curr.r;
        prev.g += curr.g;
        prev.b += curr.b;

        return prev;
      },
      {
        r: 0,
        g: 0,
        b: 0,
      }
    );

    color.r = Math.round(color.r / rgbValues.length);
    color.g = Math.round(color.g / rgbValues.length);
    color.b = Math.round(color.b / rgbValues.length);
    return [color];
  }
  // recursion code goes below
}

This is it, we are done with median-cut and the palette extraction.

📑 Extra steps

There are a lot of things that we could do here but i don't want to abuse of your precious time, if you are interested in expanding a little bit the scope of the project, check the repository, it contains all the extra code.

Order colors by luminance. There are different ways of doing this, depending of your needs, here we use the relative luminance.
Create complementary version of each color.
Build the HTML to display the color palette.

🗃️ Resources

If you want to go further into the topic I suggest trying different algorithms to create the color palette, find the dominant dolor, understand how color spaces work or add different color schemes, here are some examples to help you out:

Use K-means algorithm to create the color palette.
Use Octree algorithm to implement the color palette.
Watch this talk about color "RGB to XYZ: The Science and History of Color" by John Austin.
Add different color combinations like Monochromatic or Triadic, check this page for more examples.

👋 Final remarks

Thank you for your time, I hope you enjoyed this article and have learned something along the way, have a nice day :)

(Cover photo by Zhang Xinxin on Unsplash)

MediaStream API in Javascript

Zygimantas Sniurevicius — Fri, 15 Oct 2021 10:34:03 +0000

Hello fellow dev’s today we are gonna see how easy it is to record your voice or screen in the browser using Mediastream Recording API, with just a few lines we can have something working immediately, first let’s see how MDN defines Mediastream Recording API.

“The MediaStream Recording API is comprised of a single major interface, MediaRecorder, which does all the work of taking the data from a MediaStream and delivering it to you for processing. The data is delivered by a series of dataavailable events, already in the format you specify when creating the MediaRecorder”

There are a lot of technical words in that explanation but in a extremely simplified way mediaStream provides us the tools to control audio and videos using streams of data to deliver information with events like dataavailable or onstop, after that we manipulate this information however we see fit.

Initial setup

all the code you see in this article is available in the following REPOSITORY
and if you wanna test the code directly you can do it HERE

This project uses only javascript vanilla, we don’t need anything eccentric like react.js or vue.js, but of course if you want to try it using some framework go ahead because it’s basically the same.

HTML

The HTML file is a simple template, with links to our css and js files, other than that we some buttons and a gallery, this is where we gonna display all our audios/videos.

CSS

As for the styling I added some basic flex styles just for centering and a fancy button gradient just for presentation purpose.

Javascript

Now, here we have the main dish, let’s go through almost line by line.

We start by declaring all the HTML selectors we'll end up using for future events, mediaRecorder is gonna be the main object that dictates if we recording audio or our screen and the chunks variable is where we gonna store our recording data before converting it into an HTML element.



const buttons = document.querySelectorAll(".button");
const startAudioButton = document.querySelector("#startAudio");
const startScreenButton = document.querySelector("#startScreen");
const stopButton = document.querySelector("#stopAudio");
const audioList = document.querySelector("#audio-list");
const videoList = document.querySelector("#video-list");

let mediaRecorder = null;
let chunks = [];

Here we add click events to our three beautiful buttons so each one calls the function associate with the HTML element when we want to start or stop recording.



startAudioButton .addEventListener("click", recordAudio);
stopButton.addEventListener("click", stopRecording);
startScreenButton.addEventListener("click", recordSCreen);


function recordAudio() {
    // ...code
}

function  stopRecording() {
    // ...code
}

function  recordSCreen() {
    // ...code
}

The first “big” function we have is for recording audio, here we have a promise that calls the method .getUserMedia() with a json object to specify that we need only audio, this pops up a window asking for our permission to use the microphone inside the browser, after that we get a stream.

This stream can be obtained from audio or video, but in our case we want to capture our microphones stream, so we use it to initialize a new MediaRecorder object.

During the recording we will get a continues flow of data from the event ondataavailable, this data has the following structure:

Here's the definition of a Blob for those that dont know what it means.

“The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream “

we store all this information inside the array chunks as we are gonna need it later to create the audio element with it.

Then whenever we stop recording we call another function that creates the HTML audio element using the chunks array (Blobs).

Lastly we start the recording with...you guessed it mediaRecorder.start(x) by default it saves the entire file into a single Blob, but if we specify a duration then it creates a Blob every X milliseconds.



function recordAudio() {
  navigator.mediaDevices
    .getUserMedia({ audio: true})
    .then((stream) => {
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
      mediaRecorder.onstop = (e) => {
        createMediaElement("audio", "audio/mp3", audioList);
      };
      mediaRecorder.onerror = (e) => {};
      mediaRecorder.start(1000);
    })
}

We stop the recording by simply calling mediaRecorder.stop()



function stopRecording() {
  mediaRecorder.stop();
}

When we stop a recording we automatically create a mediaRecorder.onstop event , this then calls the function createMediaElement(...) with the mediaType (audio or video), fileType and the placeToAdd (where to insert the element we just created).

Now we use all the stored information in the chunks array to create one Blob and make it into a url.

Then we create the HTML element passing the url as src and we reset the let variables.



function createMediaElement(mediaType, fileType, placeToAdd) {
  const blob = new Blob(chunks, {
    type: fileType,
  });
  const mediaURL = window.URL.createObjectURL(blob);
  const element = document.createElement(mediaType);
  element.setAttribute("controls", "");
  element.src = mediaURL;
  placeToAdd.insertBefore(element, placeToAdd.firstElementChild);
  mediaRecorder = null;
  chunks = [];
}

Screen recording is more or less the same thing, the only big differences is that we call getDisplayMedia instead of getUserMedia and when we create the media element we pass the chunks type as fileType.



function recordSCreen() {
  navigator.mediaDevices
    .getDisplayMedia({ mediaSource: "screen"})
    .then((stream) => {
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
      mediaRecorder.onstop = (e) => {
        createMediaElement("video", chunks[0].type, videoList);
      };
      mediaRecorder.start();
    })
}

With this we have basically covered the entire thing, as you can see there is not much to it.

Final words

As always thanks for reading and I hope you learnt something new today, stay safe and healthy!

Explaining SSR & CSR in Javascript

Zygimantas Sniurevicius — Fri, 01 Oct 2021 10:35:04 +0000

Recently at my job we decided to ditch React.js and go with Javascript vanilla for better perfomance since our website is a newspaper we found it to be difficult justify having React.js for something so uneventful, in the process we talked a lot about CSR, SSR and even a Hybrid approach, I found it hard to understand how these rendering techniques work, after investigating it myself, I decided to create this post with my findings.

Before going too deep let's first see all the diferent kind of rendering we can expect in Javascript:

Client side rendering also known as CSR
Server side rendering usually referenced as SSR
Hybrid rendering a combination of both CSR and SSR

The critical path

Let's begin by understanding how the browser paints information on our screen when we visit a website.

There is a sequence of events that every browser must go through before rendering the initial view of a web page, we won't go into much detail but if you want more information about this topic check these links:

First, we start with an HTML request, after the server returns the HTML, the browser begins parsing the HTML converting the received bytes to the DOM tree, then initiates requests every time it finds links to external resources (stylesheets, scripts, or embedded image references) until it gets to the end of the file that's when
it builds the CSS object model.

With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. Once complete, the page is rendered on the screen.

What is Client-side rendering ?

Instead of receiving all the data from the HTML document we use a barebones version with basic information and a link to a Javascript file wich then renders the rest of our web page using the browser.

This is the default for many frameworks in javascript such as React.js, Angular.js, Vue.js...etc

How it works

User requests access to our webpage
Server sends a response to our browser
Browser downloads the javascript file
Executes the files content
Content is visible and you can navigate and interact with the web page

What is Server-side rendering ?

Rather than having a small HTML document wich then calls the assets needed, we move the process of rendering our initial page to the server, there we process the javascript of the website and render it to a static HTML so the clients browser doens't have to.

How it works

User requests access to our webpage
Server sends ready to go HTML files
Browser renders the page but its not interactive
Browser downloads the Javascript
Execute the Javascript
Content is interactive

Difference in rendering between CSR vs SSR

As you can see the main difference in terms of steps is that with SSR the content is visible sooner but it isn't interactive, meanwhile with CSR the page takes longer to load but its interactive and visible at the same time.

Advantages of SSR

SEO

The complete page's HTML is rendered, this assures the page metadata and content is always visible and accurate for the web crawlers to scan.

Faster load

Pages have a much faster load time and a quicker first contentful paint because the content is available in the browser sooner.

Social media

When someone shares your page on Facebook or Twitter, it includes a preview of the page because we have all the metadata and content pre rendered on our server already.

Discoverability

not long ago google announced that it would give preferential search rankings to the sites with the fastest page load speed (See Core Web Vitals). Meaning that sites with a better user experience will have better search rankings.

Final words

I hope this article helped you to understand these concepts a little bit better, if you want to dig deeper remember to check the links I left for you, see you on the next article and have a nice day :D

My reasons to never finish some projects

Zygimantas Sniurevicius — Wed, 30 Jun 2021 13:38:59 +0000

Hello, today I wanted to speak about a topic I have been dealing with my whole life, "why the hell I keep leaving things half done?" I imagine that just from reading the title of the article your mind already gently reminded you about X or Y that you never finished but pretend that you will come back to it once the "timing" is right, after speaking with colleagues and friends about it I have realized that the struggle is universally the same for developers around the globe.

INTRODUCTION

This is all coming from a developer's perspective that has been programming professionally for around 3 years, so after some deliberation, I came to a small list of 8 moments or signs of when a project is going to be abandoned, let's dig in.

EVERYTHING IS HALF DONE

Let's start with a big one, this one happens when I already have something working and instead of continuing polishing and finishing one thing I keep jumping from one thing to another, after some days have passed, I come to the realization that every single part of my application is half done, this is where I almost always stop working on a project.

NEW TOY

This one is self explanatory, it happens when one of the following things appears:

I become obsessed with a new and "better" idea
New videogame release's
Some kind of new technology that I want to test
Any other type entertainment (tv shows, books, movies)

for me personally, it's always the new games :D, I get sucked into it and when am done with it I can't even remember what was I doing before.

TAKES TOO LONG TO FINISH

Ideally, this should never happen, but once or twice I let my imagination run wild and on a blink of an eye I seem to be working on a gigantic app that in no way I can finish, after some days I realize that this will probably take me multiple months to finish, that's when the despair settles in and I loath the idea of continuing working on it.

WHY BOTHER, THERE ARE SIMILAR APPS

Occasionally there are projects that I really enjoy and am having fun building it, but once I stop for a quick check up on "similar ideas" it hits me like a truck, I suddenly lose all motivation, why waste my time with this when there are hundred projects that are the same or better than mine?

MISSING PIECE

Sometimes I really get interest in an idea and I start making a mental map of things needed to accomplish it, I try to rationalize every small feature and understand how it should work, after exploring this map there are always tiny details that escape my knowledge and I deem them impossible or too hard to execute because I can't find anything on the internet.

REFACTOR LOOP

This happens when I make lazy design choices all around the project and I promise myself that I will fix them once I get it working, what follows is an eternal loop of refactors that lead me nowhere near the finish line, refactor on refactor on refactor...
The only thing left for me to do is to rush the project no matter the state it is and dump it as soon as I can.

Already code full-time

Last but not least, sometimes I have this train of thoughts of why should I waste time on personal projects when I already work full time as a developer, I see people around me doing all kinds of stuff and I get the feeling that I should be doing the same and stop wasting my time, projects born from this fear are usually short of passion and never last long enough.

CONCLUSION

Let me finish by telling you that these reasons are personal for me, everyone works differently, it would be amazing if you could share your reasons to abandon a project in the comments below, I'm really interested in seeing the others point of view on the subject.

Thanks for reading me and sorry if you see a typo, I leave you with some tips for anyone wanting to get better at finishing projects.

Small arcievable objectives
Always start and focus on a minimal viable product
Try to start projects that makes your life easier
Make yourself accountable by telling other's about it.
Don't just do something for the sake of doing it
Set deadlines to push yourself

Intersection Observer using React

Zygimantas Sniurevicius — Mon, 15 Feb 2021 07:57:50 +0000

Today we are gonna explore how to use the intersection observer API in React and see some useful examples, you can find the code in the following repository, let's begin.

Mozilla web documentation describes the intersection observer API as:

lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount. This way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the browser is free to optimize the management of intersections as it sees fit.

In plain english, it allows us to detect when certain elements are visible in our viewport, this only happens when the element meets your desired intersection ratio.

As you can see, if we scroll down the page the intersection ratio will be going up until it meets the designed threshold and that's when the callback function is executed.

Initialization

The intersection observer object constructor requires two arguments:

Callback function
Options

Just like that we are ready to see some action but first we need to know what each option means, the options argument is an object with the following values:

root: The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.
rootMargin: This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections, the options are similar to those of margin in CSS.
threshold: Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed, ranges from 0 to 1.0, where 1.0 means every pixel is visible in the viewport.

Using React.js

Now let's see an implementation of the intersection observer API using react.

Start with a reference to the element we want to observe, use the react hook useRef.
Create a state variable isVisible, we are gonna use it to display a message whenever our box is in the viewport.
Declare a callback function that receives an array of IntersectionObserverEntries as a parameter, inside this function we take the first and only entry and check if is intersecting with the viewport and if it is then we call setIsVisible with the value of entry.isIntersecting (true/false).
Create the options object with the same values as the image.
Add the react hook useEffect and create an observer contructor using the callback function and the options we just created before, it's optional in our case but you can return a cleanup function to unobserve our target when the component unmounts.
Set the useRef variable on the element we want to observe.
Let's add a background and some properties to our HTML elements
It's done, simple and easy!

remember this is just a basic implementation and there are many different ways of doing it.

Hooking it up

Let's now implement the same code we just did before but separating all the logic into a new hook called useElementOnScreen.

Create a new function called useElementOnScreen with the parameter options
Move useRef, useState and the entire useEffect inside our new shiny hook.
Now the only thing missing in our hook is the return statement, we pass isVisible and containerRef as an array.
okay, we are almost there, we just need to call it in our component and see if it works!

Import the recently created hook file into our component.
Initialize it with the options object.
Just like that we are done.

Congratulations we have successfully used the intersection observer API and we even made a hook for it!

Final words

Thanks for reading this, Hopefully it helped someone getting started with the IO API using react, stay safe ❤️!

Using Puppeteer to scrape answers in Stackoverflow

Zygimantas Sniurevicius — Mon, 15 Feb 2021 07:57:11 +0000

What is Puppeteer

Puppeteer is a node library that lets us control a chrome browser via commands, its one of the most used tools for web scraping because it grants us the ability to automate actions easily.

What are we doing

Today we'll learn how to setup Puppeteer to scrape google top results when searching for a problem in stackoverflow, let's see how it will work:

First we run the script with the question

node index "how to exit vim"

Now we google the top results from stackoverflow
Collect all the links that match half or more words of our question.

[
  {
    keywordMatch: 4,
    url: 'https://stackoverflow.com/questions/31595411/how-to-clear-the-screen-after-exit-vim/51330580'
  }
]

Create a folder for the question asked.
Visit each URL and look for the answer.
Make a screenshot of the answer if there is one.
Save it in our folder previously created.

Repository

Im not going to cover all the code details in this blog post, things like how to create folders with node.js, how to loop through the array of urls and how to allow arguments in the script are all in my github repository.

You can find the full code here

Explaining the code

After seeing the steps we need to do in the previous section its time to build it ourselves.

Let's begin by initializing puppeteer inside an async function.

A headless browser is a web browser without a user interface.

Its recommended to use a try catch block because its difficult to control errors that happen while the browser is running.


(async () => {
  try {
    const browser = await puppeteer.launch({
      headless: false,
    });

    const page = await browser.newPage();

  } catch (error) {
    console.log("Error " + error.toString());
  }
})();

To get all the result's from a specific website we need to construct the URL with +site:stackoverflow.com.

page.goto accepts two parameters a string for the url and an object for the options, in our case we specify to wait to be completly loaded before moving on.

const googleUrl = `https://www.google.com/search?q=how%20to%20exit%20vim+site%3Astackoverflow.com`;

await page.goto(googleUrl, ["load", "domcontentloaded", "networkidle0"]);

Getting the url's

After navigating to the google search page, its time to collect all the href links that belong to the section https://stackoverflow.com/questions.

Inside the page.evaluate method we are allowed to access the DOM with the document object, this means we can use selectors to find the information we need easily using document.querySelector or document.querySelectorAll

remember that document.querySelectorAll doesn't return an Array, instead, its a NodeList, that's why we transform it to Array before filtering.

Then, we map throught all the elements and return the url's.


const queryUrl = "how%20to%20exit%20vim"

const validUrls = await page.evaluate((queryUrl) => {
 const hrefElementsList = Array.from(
      document.querySelectorAll(
          `div[data-async-context='query:${queryUrl}%20site%3Astackoverflow.com'] a[href]`
        )
      );

      const filterElementsList = hrefElementsList.filter((elem) =>
        elem
          .getAttribute("href")
          .startsWith("https://stackoverflow.com/questions")
      );

      const stackOverflowLinks = filterElementsList.map((elem) =>
        elem.getAttribute("href")
      );

      return stackOverflowLinks;
    }, queryUrl);

Matching the url

With our verified urls in a variable called validUrls its time to check if some of them roughtly match what are we looking for.

we split the question into an Array and loop each word, if the word its inside the stackoverflow url we add it to our variable wordCounter, after we are done with this process we check if half of the words match the url.


const queryWordArray = [ 'how', 'to', 'exit', 'vim' ]
const keywordLikeability = [];

validUrls.forEach((url) => {
  let wordCounter = 0;

  queryWordArray.forEach((word) => {
     if (url.indexOf(word) > -1) {
       wordCounter = wordCounter + 1;
     }
  });

  if (queryWordArray.length / 2 < wordCounter) {
    keywordLikeability.push({
      keywordMatch: wordCounter,
      url: url,
    });
  }
});

Capturing the answer

Finally, we need a function that visits the stackoverflow website and checks if there is an answer, in case there is proceed to make a screenshot of the element and save it.

we start by going to the stackoverflow url, and closing the popup because otherwise its gonna appear in our screenshot and we dont want that.

To find the popup close button we use a xpath selector, its like a weird cousin of our beloved CSS selector but for xml/html.

With the pop up gone it's time to see if we even have an answer, if we do, we make a screenshot and save it.

await acceptedAnswer.screenshot({
 path: `.howtoexitvim.png`,
 clip: { x: 0, y: 0, width: 1024, height: 800 },
});

take care when using the screenshot method because its not consistent, to make it a smoother experience try to get the DOM element's size and location as shown in the picture above.


const getAnswerFromQuestion = async (website, page) => {
  console.log("Website", website);
  await page.goto(website,["load","domcontentloaded","networkidle0"]);
  const popUp = (await page.$x("//button[@title='Dismiss']"))[0];
  if (popUp) await popUp.click();

  const acceptedAnswer = await page.$(".accepted-answer");

  if (!acceptedAnswer) return;

  await acceptedAnswer.screenshot({
    path: `./howtoexitvim.png`,
  });
};

Call the function created in the previous section with the parameters and we are done!


await getAnswerFromQuestion(keywordLikeability[0].url, page);

Here is the final result, we can finally exit VIM!

Final remarks

I hope you learned something today and please check up the repository i set up it has all the code, thanks for reading me and stay awesome ❤️