DEV Community: Lex Martinez

Announcing Vue Github Activity: A Vue.js Component to include a GitHub feed into your project/website

Lex Martinez — Sun, 29 Apr 2018 21:00:33 +0000

Originally published on my blog

This Simple Vue component creates a feed panel with your recent GitHub activity. It displays the user's name, login, photo, and a list of each individual activity type.

A couple months ago, I started renew my portfolio website, I picked Vue.js for that mission, since is a pretty trendy language in this moment and i felt curiosity about what can I do with that. I started redesigning all the site, and deciding what information should I show on it, at the end of the initial sketch I added the first four panels on the website including the skills information, latest projects, work experience and the latest blog posts.

With a quite minimalistic design, I expend about a week and half build the MVP and put it online. Then I requested a few feedback from my near friends, about what they thought regarding the UX, design and so on.

After the feedback session I fixed a little design issues, included the new Spotify playlist panel, and received a big suggestion.. someone told me "Hey, you should add a feed about your GitHub activity". In that moment were a pretty busy weeks, so I stoped that suggestion on stand by, However few weeks ago I decided retake it with an extra, I was curious about the Vue external component developing , so I developed that panel as external dependency and published it on NPM.

Initially the MVP for that project was a quite modest, since my motivation was the fact to develop the component perse, once I released the first version, the next step was improve and fix somethings include the components internal structure and bundling, so I expend a couple more weeks to publish the improvements as dependency versions.

As I said the project was published on NPM and of course totally open sourced, released under MIT license, and it repository is open for any kind of contributions, issues, comments, pull-requests, etc. Currently I use this component on my website you can check it out alive there but here there is an small screenshot.

Before to end, special thanks to this repository of @caseyscarborough it highly inspire the sketching process for this component.

Thanks for reading.. and hope you enjoy it! I'll be here for any feedback!

Writing A Simple Electronic Realtime Poll with Go

Lex Martinez — Wed, 10 Jan 2018 02:04:04 +0000

Originally published on my blog

Golang, known on the streets as Go, is gaining popularity since was announced in 2009, nine years after Go have demonstrated to be a simple but powerfull programming language and the cherry on top of the cake, pretty easy to learn. In this post we are going to create a realtime poll with it server side writen in Go, which was created as part of academic exercise in order to learn that awesome language.

The original project idea was taken from this awesome article writen by Christian Nwamba at codementor.io, basically in his post he built the realtime poll with NodeJS, to be honest that post liked me so much, and given that I wanted to taste something of Go flavors, I decided create my own poll version with Golang.

First Steps

To be honest, I never write nothing with Go before, so my first step was installed it into my computer, which was pretty easy, was just a thing of navigate into golang.org website and download the right installer for my operative system, then use that installation wizard to complete the process, in a few minutes I had the Go core installed in my computer and ready to code. In order to test it, I used the Hello, Wold! example published on Golang website:

package main

import "fmt"

func main() {
    fmt.Println("Hello, World")
}

After check that all works good using the command go run hello.go my next step was to prepare my code editor (Visual Studio Code) to work with Go, basically I found this great extension on the marketplace, after installed it, I was ready to Go.

My Plan

Essentially as the Christian Nwamba post, the project was divided in a few layers, three to be more specific, first the server which delivers the views and receive the votes, second the Pusher integration in order to give to the project that realtime feature, finally the views including the vote screen and results screen, for those views we use a few lines of JavaScript and HTML and SemanticUI to style it, in this post we are going to talk about the first two layers.

The Server

As we said before, our server side is in charge to deliver the views and receive the votes, so the backend design has the following endpoints :

Method	Path	Description
`GET`	`/`	Votes Screen
`POST`	`/`	Votes reception
`GET`	`/results`	Results Chart Screen

To implement those endpoints and create the simple routing that we need, the net/http was used, then our main function looks like this

func main() {
    http.HandleFunc("/", base)
    http.HandleFunc("/results", results)

    if err := http.ListenAndServe(":8080", nil); err != nil {
        panic(err)
    } else {
        fmt.Println("Polling server running at localhost:8080")
    }
}

In that snippet basically we tell to Go which routes we are going to dispatch and which function should handle those requests, also start the server at 8080 port. Let's see the handler functions separatelly:

Results Handler

The results handler function is pretty basic, is in charge to deliver the results screen with results chart inside of it, the chart render and the Pusher listener is part of our frontend features so in our server side we just need to response with the HTMLoutput stream, to do that I wanted to use a template engine implementation like Pug, fortunately I found this pretty package github.com/Joker/jade the syntax is almost the same of pug so basically was all that we needed.

func results(w http.ResponseWriter, r *http.Request) {
    dat, err := ioutil.ReadFile("./templates/results.pug")
    if err != nil {
        fmt.Printf("ReadFile error: %v", err)
        return
    }

    tmpl, err := jade.Parse("results", string(dat))
    if err != nil {
        fmt.Printf("Parse error: %v", err)
        return
    }

    keys := Keys{
        Key:   os.Getenv("APP_KEY"),
        Cluster: os.Getenv("APP_CLUSTER"),
    }

    goTpl, err := template.New("html").Parse(tmpl)
    if err != nil {
        fmt.Printf("\nTemplate parse error: %v", err)
        return
    }
    err = goTpl.Execute(w, keys)
    if err != nil {
        fmt.Printf("\nExecute error: %v", err)
        return
    }
}

Some footnotes, we read our external template files with io/ioutil package, also as parameters we are injecting a few enviroment variables to Pusherclient connection, that enviroment variables are loaded from an external .env with github.com/alexsasharegan/dotenv package.

Base Handler

The base function is going to handle the root requests, i.e. Deliver the vote screen and receive the votes (then send them to Pusher), let's see the base handler implementation

func base(w http.ResponseWriter, r *http.Request) {
    if r.Method == http.MethodPost {
        vote(w,r)
    } else if r.Method == http.MethodGet {
        home(w,r)
    } else {
        w.WriteHeader(http.StatusBadRequest)
        w.Write([]byte("400 - Unsupported Request Method!"))
    }
}

In this function in essence, we are routing our requests to two different subhandlers based on request method, the first one, homeis basically the same to results handler, here is the vote handler implementation

func vote (w http.ResponseWriter, r *http.Request) {
    r.ParseForm()
    option := r.Form.Get("option")

    client := pusher.Client{
        AppId: os.Getenv("APP_ID"),
        Key: os.Getenv("APP_KEY"),
        Secret: os.Getenv("APP_SECRET"),
        Cluster: os.Getenv("APP_CLUSTER"),
        Secure: true,
    }

    data := map[string]string{"vote": option}
    client.Trigger("tv-shows", "vote-event", data)

    w.WriteHeader(http.StatusOK)
    w.Header().Set("Content-Type", "application/json")
    w.Write([]byte("Success vote for: " + option))
}

In this snippet we receive the request data and get option field a.k.a our vote, then send it through Pusherusing the pusher API package github.com/pusher/pusher-http-go.

Pusher is an awesome realtime notifications API that use websockets, if you want to use it and configure you have to sign up (there are a free mode) and configure your app, for more information about the app setup see the Pusher docs

That's it! our poll server is alive!

Complete source code for this exercise could be found on this Github repo

Thanks for reading! comments, suggestions and DMs are welcome!

Facebook Noise Filter

Lex Martinez — Fri, 22 Dec 2017 23:31:57 +0000

Originally published on my blog

Sometimes our Facebook news feed is a little bit noisy, a lot of people posting their thoughts, a lot of funny or hilarious thing and any other useless stuff, and i say useless because in some specific moments we don't want to get that kind content.

In a lot of cases we feel tempted to close our Facebook account, but in some cases is not too simple, because we have external services linked to our account like Spotify or Airbnb even Facebook development projects

This week I was working on new open source project thinking about that situation, which i called Facebook Noise Filter, the original idea was a simple puppeteer scraping script that log in at Facebook for me, and filter the news feed content based on specific set of keywords.

A few days after, the script was done, and i saw potential on that and i decided implement it as desktop application with electron, today i completed the proof of concept for that desktop app and i would like share with all of you the idea, the prototype and make an open invitation to contribute or comment it, all of your thoughts are welcome!

The source code of this project could be found here, and there are a couple of screenshots of our prototype.. i hope you enjoy it!

Creating a Simple OCR Application with Electron, Vue.js & Tesseract.js

Lex Martinez — Thu, 14 Dec 2017 15:56:18 +0000

Originally published on my blog

Nowadays JavasScript is one of the most popular programming languages, and used for a lot of fields and platforms through Web. In this tutorial we're going to learn how to build an OCR desktop application with javascript using Electron and Tesseract.js ... and guess what... our FE will be implemented with Vue.js

More than one year ago, I meet electron.js, from the beginning to me, was an awesome library... After all, create a desktop application with JavaScript is a lovely superpower... doesn't it? So I started my learning with a simple project that I called triton-forms, basically is a dynamic form engine built with AngularJS, you can meet it right here.
This week, I decided return to my electron adventures and create another application, this time with Vue.js.

The OCR Project

Well as you can imagine, when I started this article (and now) the main goal was build something cool with electron and learn on the road, but the "what" we are going to build, in that moment wasn't clear. So I expended a couple of days reading and thinking a simple but cool exercise to do.

Yesterday like a heaven's signal, I found my brother typing on his laptop something for his homework from a printed document, so I told him... "What are you doing dude? you can do that pretty easily and fast with an OCR". That last word stayed like an echo on my mind and then I knew it... "I must create an OCR application".

The idea is pretty simple, basically we are going to have an application with a drop area, in that area we are going to drop the image file to process, then the text is extracted and displayed to user. Sounds good... right? so let's started!

Electron - Getting Started

Electron combine the power of Node.js and a dedicated Chromium Web browser instance in order to run Web/JavaScript applications like desktop application, that's the reason why we are going to use it as container for our Vue.js Web application, so let's started configuring our electron project!

Our project in essence is a Node.js based application so, first of all , we're going to create a new npm project in a new directory. With the -y parameter the package.json will be created with default values:

$ npm init -y

And add the electron dev dependency to the project

$ npm install --save-dev electron

Then in our package.json file, add the following lines:

  "main":"index.js",
  "scripts": {
    "start": "electron ."
  },

This allow us running our electron application with just npm start command

Finally in order to complete our electron setup let's create the index.js file, and there we are going to create the basic script to show the https://lexmartinez.com/ Web site contents. So, in our index.js we should have the following lines:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let screen;

const renderApp = () => {
 // create the browser window
 screen = new BrowserWindow()
 // render the required website/entrypoint
 screen.loadURL('https://lexmartinez.com/')

 // dereference the screen object when the window is closed
 screen.on('closed', () => {
  screen = null;
 });
}

// call the renderApp() method when Electron has finished initializing
app.on('ready', renderApp);

// when all windows are closed, quit the application on Windows/Linux
app.on('window-all-closed', () => {
 // only quit the application on OS X if the user hits cmd + q
 if (process.platform !== 'darwin') {
  app.quit();
 }
});

app.on('activate', () => {
 // re-create the screen if the dock icon is clicked in OS X and no other
 // windows were open
 if (screen === null) {
  renderApp();
 }
});

And we are going to get this result ...

Vue-lize it!!

As I announced above, we are going to use Vue.js for all front-end stuff, so the first step, will be setup webpack in order to bundle our Vue.js Web Application and display it into our electron container.

To do that and configure our Vue.js we are going to use the vue-cli scaffolding:

# In case that you dont have the vue-cli installed yet
$ npm install -g vue-cli

$ vue init webpack app

# Use this answers for the wizard
? Project name app
? Project description xxxxxxxxxx
? Author xxxxxx <xxxxxx@domain.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

That will create a new Vue.js project into the app folder, the next step would be merge our Vue.js and electron projects, We need to do the following four steps:

We have to combine our package.json files, copying the Vue.js dependencies and engines setup to electron project.
Remove the README.md, .gitignore and package.json files from app folder
Move the rest of app folder contents to the electron project root (including .xxx files like .babelrc and so on)
Finally, update the package.json scripts section like this:

"scripts": {
    "start": "electron .",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  }

Now you can delete the app folder and test the new setup with npm run dev command and navigate to http://localhost:8080

At this point we got the electron and Vue.js setup working separately, let's put all together, the idea is run the webpack-dev-server with our Vue.js application contained on electron with just one command for that we are going to use concurrently package:

$ npm install concurrently --save-dev

And then update the npm start command with this :

  "start": "concurrently --kill-others \"npm run dev\" \"electron .\"",

Finally update the index.js file in order to wait a bit to webpack-dev-server, let's rewrite the on ready handler:

// The loaded URL must be changed too
 screen.loadURL('http://localhost:8080/')

app.on('ready', ()=>{
 setTimeout(renderApp, 3000);
});

This is just for development purposes, this setTimeout should be removed when we are going to package the electron application

And this is the result ...

Now our workspace will be src directory, the first thing that we are going to do is refactor the default HelloWorld component, let's call it OCR.vue, then we must fix the imports on our routing file and remove the unused assets (Vue.js logo) from assets directory and App.vue file.

Component Template

Our OCR component template will be divided in three panels: The image file input panel with drag-drop zone in order to select the target file, progress panel with process status updates and results panel with the extracted text. Additionally we are going to use Vuetify as our application look n' feel:

$ npm install vuetify --save

Then in our main.js file:

import Vue from 'vue'
import Vuetify from 'vuetify'
import('vuetify/dist/vuetify.min.css')

Vue.use(Vuetify)

And finally using the Vuetify components this will be our OCR.vue component layout:

<template>
  <v-app id="inspire" dark>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-title>Simple OCR</v-toolbar-title>
      <v-spacer></v-spacer>
      <span v-if="isSuccess || isFailed">
      <v-btn icon @click="reset">
        <v-icon>refresh</v-icon>
      </v-btn>
      <v-btn icon @click="save">
        <v-icon>save</v-icon>
      </v-btn>
      <v-btn icon @click="drive">
        <v-icon>file_upload</v-icon>
      </v-btn></span>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <div class="container" v-if="isInitial">
            <form enctype="multipart/form-data" novalidate>
              <h1>Upload image</h1>
              <div class="dropbox">
                <input type="file" :name="'document'" :disabled="isSaving" @change="filesChange($event.target.files);" accept="image/*" class="input-file">
                <p v-if="isInitial">
                  Drag your file here to begin<br> or click to browse
                </p>
              </div>
            </form>
          </div>
          <div class="container text-xs-center" v-if="isSaving">
            <v-progress-circular v-bind:size="200" v-bind:width="15" v-bind:rotate="-90"
              v-bind:value="(status.progress * 100)" color="primary">
                  {{progress}}
            </v-progress-circular>
            <h2>{{status.status}}</h2>
          </div>
            <v-layout row wrap v-if="isSuccess || isFailed">
            <v-flex xs12>
              <v-divider></v-divider>
              <v-text-field label="Result" v-model="status.text" counter full-width multi-line single-line :auto-grow="true"></v-text-field>
            </v-flex>
            </v-layout>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app fixed>
      <span>&copy; 2017 - Lex Martinez &lt;@lexmartinez&gt;</span>
    </v-footer>
  </v-app>
</template>

<style>
  .dropbox {
    outline: 2px dashed grey; /* the dash box */
    outline-offset: -10px;
    background: transparent;
    color: dimgray;
    padding: 10px 10px;
    min-height: 200px; /* minimum height */
    position: relative;
    cursor: pointer;
  }

  .input-file {
    opacity: 0; /* invisible but it's there! */
    width: 100%;
    height: 200px;
    position: absolute;
    cursor: pointer;
  }

  .dropbox:hover {
    background: rgba(255,255,255,0.1); /* when mouse over to the drop zone, change color */
  }

  .dropbox p {
    font-size: 1.2em;
    text-align: center;
    padding: 50px 0;
  }
</style>

In that fragment we are including the mentioned three panels with some flags in order to switch them when the OCR process status changes, here you can found more information about Vuetify components.

OCR engine

Other awesome Node.js library is Tesseract.js, which provides a complete but simple text detection framework with a few code lines we are going to create our OCR feature:

const Tesseract = require('tesseract.js');

Tesseract.recognize('/Users/john-doe/Desktop/text.jpg')
 .progress(function(packet){
     console.info(packet)
    })
 .then(function(result){
  console.log(result.text)
 })

The Tesseract.js dependency could be installed with this command npm install tesseract.js --save, also you're going to need the language traineddata file, which can be found here

Let's include that on our Vue.js component script: On methods section we are going to create a ocr function :

methods: {
    ocr: function (event) {
      Tesseract.workerOptions.workerPath = 'http://localhost:8080/static/worker.js'
      Tesseract.workerOptions.langPath = 'http://localhost:8080/static/'
      Tesseract.recognize(event)
        .progress((status) => {
          this.status = status
        })
        .then((result) => {
          this.currentStatus = STATUS_SUCCESS
          this.status = result
        }).catch((error) => {
          this.currentStatus = STATUS_FAILED
          this.status = error
        })
    },

As we see the final ocr function is not very different to our initial snippet, we just add a few lines in order to setup the languages path and worker path.

You can found the worker.js file in your node_modules/tesseractjs folder, we put it with the traineddata in the static folder in order to easy the handle and configuration

Uploading Behaviour

If you see carefully the template above we are using a few flags in order to switch the component panel, and other more functions in order to handle the user events. There the main behaviour is the upload task a.k.a filesChange function let's see the simple implementation of that:

  filesChange (fileList) {
     if (!fileList.length) return
     this.currentStatus = STATUS_SAVING
     this.ocr(fileList[0])
   }

Hell Yeah!!! Our Simple OCR App is working 8-)

Electron.js documentation could be found right here! and Tesseract.js docs here!
Complete source code for this exercise could be found on this Github repo
Thanks for reading! comments, suggestions and DMs are welcome!
Finally, for me, this application seems to have potential, thus if you want contribute and improve this simple app I'm able to do that...

Build a Car Price Scraper-Optimizer Using Puppeteer

Lex Martinez — Tue, 05 Dec 2017 21:41:22 +0000

Originally published on my blog

Puppeteer is an awesome Node.js library which provide us a lot of commands to control a headless (or not) chromium instance and automatize navigation with few lines of code. In this post we are going to use the puppeteer superpowers and build a car information scraper tool for second hand car catalog and choose the best option.

A few days ago I was reading, with my teammate and big friend @mafesernaarbole about Web scraping and different online tools she needed for a personal project. Looking at different articles and repositories we found Puppeteer, which is a high-level API to control headless Chrome over the DevTools Protocol. That great tool woke up our interest and, although at the end of the day it wasn't useful for her, we both said "Hell yeah! We have to do something with this!!". A couple days after, I told her, Puppeteer would be a great topic for my blog's first article... and here I am. I hope you enjoy it.

Our Study Case

The idea is pretty simple, there is a second hand car catalog in our country, Colombia, it's tucarro.com.co. Basically given the make and model of the vehicle tucarro.com.co offers you a list of second hand cars that match and which are for sale over the country. The thing is, the possible customer have to search one by one of that results and analyze which is the best choice (or choices).

So, our focus is to create a small Node.js app for navigating the catalog website, searching as a human would, then we are going to take the first page of results, scrape its information (specifically the car year, kilometers traveled and price... and of course the ad URL). Finally with that information and using some optimization algorithm we are going to offer to customer best choice (or choices) based on price and kilometers traveled.

Disclaimer: This exercise has just academic purposes, not commercial interest. We don’t store anything of extracted data, which belongs to tucarro.com.co. The app's source code is distributed under MIT license, exempting us of any responsibility of derivate work . We highly recommend to use it with responsibly.

Initial Setup

We are about to create a Node.js application so, the first step of course, is create a new npm project in a new directory. With the -y parameter the package.json will be created with default values:

$ npm init -y

And add the puppeteer dependency to your project

$ npm install --save puppeteer

# or, if you prefer Yarn:
$ yarn add puppeteer

Finally in our package.json file, add the following script:

"scripts": {
    "start": "node index.js"
  }

This script simplifies running our app - now we can do it with just npm start command

Important: As you'll see soon, puppeteer needs async and await functions from Node.js core, so we are going to need a recent version of node which supports those functions (for this article we use v9.2.0 version, however since v7.6 both functions are supported)

Let's Rock

With our npm project successfully configured, the next step is, yes, coding , let's create our index.js file. Then here is the skeleton for our puppeteer app

'use strict'

const puppeteer = require('puppeteer')
async function run() {

 const browser = await puppeteer.launch()
 const page = await browser.newPage()

 browser.close()

}
run();

Basically we are importing a puppeteer dependency at line 2, then we open an async function in order to wrap all browser/puppeteer interactions, in the following lines we get an instance for chromium browser and then open a new tab (page) ... at the end in the last lines, we are closing the browser (and its process) and finally running the async function.

Navigating to our target site

Going to a specific website is a simple task using our tab instance (page). We just need to use the goto method:

 await page.goto('https://www.tucarro.com.co/')

Here is how the site looks in the browser

Searching

Our goal is to find and scrape the first page of results without any kind of filter, ergo all makes. To do that we just need to interact with the website and click on Buscar button, we can achieve it using the click method of page instance.

 await page.waitForSelector('.nav-search-submit')
 await page.click('button[type=submit]');

Note, the first line allows our script to wait for a specific element to load. We use that to make sure that Buscar button is rendered in order to click it, the second one just clicks the button and triggers the following screen

The surprise here is the motorcycles were loaded there, so we are going to need use the categories link for vehicles and trucks Carros y Camionetas using of course the same click function, first validating that the link was rendered.

 await page.waitForSelector('#id_category > dd:nth-child(2) > h3 > a')
 await page.click('#id_category > dd:nth-child(2) > h3 > a');

And there we go, now we have our car results page... let's scrape it!

Note: the selectors used in this section was discovered exploring the site html delivered to browser and/or using the copy selector option

Scrape it!

With our results page we just need to iterate over the DOM nodes and extract the information. Fortunately puppeteer can help us with that too.

 await page.waitForSelector('.ch-pagination')
const cars = await page.evaluate(() => {
  const results = Array.from(document.querySelectorAll('li.results-item'));
  return results.map(result => {
     return {
       link: result.querySelector('a').href,
       price: result.querySelector('.ch-price').textContent,
       name: result.querySelector('a').textContent,
       year: result.querySelector('.destaque > strong:nth-child(1)').textContent,
       kms: result.querySelector('.destaque > strong:nth-child(3)').textContent
     }
   });
  return results
 });

 console.log(cars)

In the script above we are using the evaluate method for the results inspection, then with some query selectors we iterate the results list in order to extract the information of each node, producing an output like this for each item/car

{ link: 'https://articulo.tucarro.com.co/MCO-460314674-ford-fusion-2007-_JM',
    price: '$ 23.800.000 ',
    name: ' Ford Fusion V6 Sel At 3000cc',
    year: '2007',
    kms: '102.000 Km' }

Oh yeah! we got the information and with JSON structure, however if we want optimize it, we need to normalize the data - after all the calculations are a bit complicated with those Kms and $ symbols, aren't they?... So we are going to change our results map fragment like this

  return results.map(result => {
     return {
       link: result.querySelector('a').href,
       price: Number((result.querySelector('.ch-price').textContent).replace(/[^0-9-]+/g,"")),
       name: result.querySelector('a').textContent,
       year: Number(result.querySelector('.destaque > strong:nth-child(1)').textContent),
       kms: Number((result.querySelector('.destaque > strong:nth-child(3)').textContent).replace(/[^0-9-]+/g,""))
     }
   });

Sure, Regular Expressions save the day, we have numbers where we want numbers.

Optimization time!!

At this point we already got a taste something of Puppeteer flavors, which was our main goal for this article, in this last section we are going to use a simple heuristic to get the best car choice based on the scraped data. Basically we'll create a heuristic function in order to calculate some score that allow us to rate each vehicle and choose the best option. For that purpose we consider the following points:

For each variable we assign a weight based on the importance for the potential customer then (price has 4, and year and kms has 3 each one).
Given the kms and price should be minimized we are going to use its values as fraction denominator
For calculation easiness we normalize the numeric factors for our variables so, each price would be divided between 1 million, year and kms by 1 thousand

This is the final formula Disclaimer : This is an hypothetical formula, in order to complete this exercise, so it lacks of any mathematical or scientific value in the real life

score = 4 (1/price) + 3 (year) + 3 (1/kms)

And the code snippet with that formula

 let car = {score: 0}
 for (let i = 0; i < cars.length; i++) {
    cars[i].score = (4 * (1/(cars[i].price/1000000))) + (3 * (cars[i].year/1000)) + (3 * (1/(cars[i].kms/1000)))
    if(cars[i].score > car.score){
      car = cars[i]
    }
 }
 console.log(car)

Finally with puppeteer we visit the result link and take a screenshot

 await page.goto(car.link)
 await page.waitForSelector('.gallery__thumbnail')
 await page.screenshot({path: 'result.png', fullPage: true});

and that's it !

Puppeter API documentation could be found right here!

Complete source code for this exercise could be found on this Github repo

Yeah! the optimization section, must be improved with some machine learning technique or optimization algorithm, but that is fabric for another t-shirt

Thanks for reading! comments, suggestions and DMs are welcome!