Forem: Ricardo de Arruda

Applying for 1000 jobs/hour

Ricardo de Arruda — Thu, 11 Jun 2020 14:23:22 +0000

Since over 90% of large companies use Applicant Tracking Systems 1,
your resume or application is scanned through a bot and pre-selected by some algorithm, for that we can do the same as the applicant, make a bot.

We could scrap some job posting using a powerful framework as scrapy or use beautifulsoup + request.
However if the website is a SPA or heavily use JavaScript we need to render the page before scrapping in this case we could use selenium or the JavaScript counterpart puppeteer, but since you probably just want a quick-and-dirty bot to apply for as many jobs that fit your requirement I recommend use the chrome plugin tampermonkey or Greasemonkey for firefox as a UserScript manager.

As exemple we are going to apply for jobs at cwjobs for all the jobs matching the search query.

In order to do that we need to install one of the UserScript managers mentioned on our browser.

Two Scripts are necessary, one to go to every page of the search query and open the link, and another one for applying to the job.

Every UserScript has a header that defines metadata as @name, for the name of the script and @version, the important for our case is the @match and @exclude tags.
@match defined the pages on which a script should run. And @exclude exclude URLs even if they are included by or @match .

Since our first script will run at the jobs list for the search query cwjobs.co.uk/jobs/?=keyword, so the plugin can automatically start running if the url is matched.

// ==UserScript==
// @name         CWJobs Search 
// @match        https://www.cwjobs.co.uk/jobs/*
// ==UserScript==

The script is a plain javascript file, with access to the page DOM API.

Since we can't open a new tab using the browser API we need to use TamperMonkey function to open a new tab:

// ==UserScript==
// @grant        GM_openInTab
// ==UserScript==

(function() {
    window.addEventListener('load', function() {
        start()
    }, false);

    function start () {
        // get an array of all applications in the page.
        const applications = Array.from(document.getElementsByClassName("job"))

        // a timer to open the link
        let timer = 0

        // iterate through all the jobs elements 
        for (let i in applications ) {

            // get link tag for the job post
            let aTag = applications[i].jobTitle?.firstElementChild

            // if already applied
            if (applications[i].classList.contains('applied')) { 
                continue
            }
            // open a new tab in time * 5s
            setTimeout(() => {
                if (aTag !== undefined && aTag.href !== undefined) {
                    // open a new tab but don't switch to it.
                    GM_openInTab(aTag.href, true)
                    }
                }, timer * 5000)
            timer += 1
            }

        // go to next jobs list page when finish  to open all links
        setTimeout(()=> {goNextPage()}, (timer * 5000 + 5000))
        function goNextPage(){
            const nextPageAtag = document.getElementsByClassName('btn btn-default next')[0]
            if (nextPageAtag.classList.contains('disabled')){ // end of list of jobs
                window.close()
            } else {
                nextPageAtag.click()
            }
        }
    }

})();

Right now, we are opening all the jobs links on the page in a new tab, and now need to apply for each one of them, and for that we need a new script, that will only include the job:

// ==UserScript==
// @name         Apply for JOB
// @description  try to take over the world!
// @match        https://www.cwjobs.co.uk/job/*/*
// @grant window.close
// ==/UserScript==

We included the function windows.close in order to close the tab after applying for the job.

Since we can apply using the one click the script should be simple:

(function() {
    window.addEventListener('load', function() {
        start()
    }, false);
    function start () {
      // iterate through all a tags until we find the right button
        for (let el of document.getElementsByTagName('a') ) {
             if (el.innerText === 'SEND APPLICATION') {
                 el.click()
                 break
             }
        }
         setTimeout(() => { window.close() }, 1000)
    }

})();

Final result:

WSL2 launch VSCODE (quick tip)

Ricardo de Arruda — Thu, 04 Jun 2020 23:12:52 +0000

If you are using WSL2 and want to launch the vscode from your Windows bin from WSL linux terminal, you can use this simple gist:

#!/usr/bin/env bash

username="Your Windows User Name"
bin_path="/mnt/c/Users/$username/AppData/Local/Programs/Microsoft\ VS\ Code/bin/code"

if [ $# -eq 0  ]; then
  eval "$bin_path -add $(pwd)"
else
  eval "$bin_path -add $1"
fi

If you don't want to hard-code your username:

username=$(/mnt/c/Windows/System32/cmd.exe /c 'echo %username%' |& tail -1)

And now you can user the command code to open the folder or code filename to open file, as the vscode CLI.

Be also sure to have Remote-WSl extension installed.

Now save at /usr/local/bin/ or anywhere in your PATH for global access.

React Trash Collector State Machine

Ricardo de Arruda — Sun, 22 Dec 2019 23:59:34 +0000

My brother gave me a problem to solve, he said that in Sean Carrol book Something Deeply Hidden he talks about a problem where a robot has to collect trashes in a 2D grid.

However the Robot can only see the top, down, left and right grid around it, moreover he has a short memory, he forgets about the past state (stateless) every time he perform a action, that could be, move left, right, up, down or get the trash.

The question is, what is the best set of action mapped to state that would get the minimum amount of moves and collect all trashes in a random grid size on average?

This problem can be define in a state machine model where the robot can be in 162 different states.

const SURROUND_GRID_POSITION = ['up, 'down', 'left', 'right', 'current'].length
const GRID = ['empty', 'wall', 'trash'].length
SURROUND_GRID_POSITION ** GRID === 162

However 25 are not possibles since is a 2D grid and some configuration, as been surround by wall are not possible.

State Machine Diagram

An nothing better than React from dealing with states.

For generating a new 2D grid with size and trash chance per grid and return a tuple [grid: Grid[][], robotPos: number[]], and grid been a nested array with [pos: number[], hasTrash: boolean, hasRobot: boolean], so we can map inside React.

export function generateGridArray(size, chanceOfTrash) {
    let robotPos;
    const genRobotPos = () => {
        const posX = Math.floor(Math.random() * size);
        const posY = Math.floor(Math.random() * size);
        robotPos = [posX, posY];
        //compare pos
        return (x, y) => (posX === x && posY === y ? true : false);
    };
    const checkPos = genRobotPos();
    // generate 2D grid
    const grid = [];
    for (let x = 0; x < size; x++) {
        const boxes = [];
        for (let y = 0; y < size; y++) {
            const pos = [x, y];
            const hasTrash = Math.random() * 100 < chanceOfTrash ? true : false;
            const hasRobot = checkPos(x, y);
            const oldPos= checkPos(x,y)
            boxs.push([pos, hasTrash, hasRobot]);
        }
        grid.push(boxes);
    }
    return [grid, robotPos];
}

In order for a O(1) lookup we should have a unique value for the 137 possible states and create a Object representing the state with the equivalent action:

export const stateValues = {
    left: { trash: 2, empty: 3, wall: 5 },
    right: { trash: 7, empty: 11, wall: 13 },
    up: { trash: 17, empty: 19, wall: 23 },
    down: { trash: 29, empty: 31, wall: 37 },
    current: { trash: 41, empty: 43 }
};

function getGridArrayStateSum(gridArray) {
    //return a unique gridArray value that represent the state grid
    let stateSum = 0;
    let robotPos = []
    let boxNum = 1;
    for (let i = 0; i < gridArray.length; i++) {
        for (let j = 0; j < gridArray[i].length; j++) {
            let box = gridArray[i][j];

            if (box[1]){ // has trash
                stateSum += boxNum * (gridArray.length ** 2)
            }
            if (box[2]){ // has robot
                robotPos = boxNum
            }

            boxNum++;
        }
    }
    return [stateSum, robotPos]
}

Another helper function is to check if the game is over or if the Robot got into a infinite loop, by saving the passed states.

function gameOver(gridArray) {
    return !gridArray.some(arr => arr.some(e => e[1] === true));
}

export function infinitLoop() {
    let passedState = {}; 

    return function(gridArray) {
        // robotBoxnum is the position of the robot in the grid starting at 1
       let [currentStateSum, robotBoxNum] = getGridArrayStateSum(gridArray)

        let trashStates = passedState[robotBoxNum]

        if (!trashStates){ // if no passed state in robot location
            passedState[robotBoxNum] = [currentStateSum] // add new location with trash sum
        }else{ // if robot been in passed location
            if (trashStates.includes(currentStateSum)){ // check if trash sum already in the location
                return true  // robot been save position with same trash configuration

            }else {
                passedState[robotBoxNum].push(currentStateSum)
            }
        }
        return false
    };
}

Also the default game logic will move the Robot randomly to a grid if has a trash on it, get the trash if its in current position of the Robot or move to a random grid, behaving as so:

Intuitively I supposed that the best behavior to collect all trashes in a random Grid with the minimum amount of moves, on average, would be the default game logic, and I need tools in order to test this hypothesis.
For doing that I need to map my custom action, for each state, and score the efficiency of each state. Doing in a reducer fashion way, so I can have access in all components later:

    const {state, dispatch} = useContext(Pcontext);

    function mapStateAction (newAction){
        let newPayloadState = {[stateSum]: newAction }
        dispatch({type:'mapStateAction', value: newPayloadState })
    }

But I need also a way to generate new Robots, test it and quantify its result, and for that a simple table that can compute the average for each game would be enough.

However there's too many different states, for a 5x5 grid size there's is 3400 different possible Robots. I need a way to generate random Robots and select the best ones.

And for that I need many states:

    const [sampleSize, setSampleSize] = useState(10)
    const [selectionPercetage, setSelectionPercetage] = useState(30)
    const [iteration, setIteration] = useState(30)
    const [robots, setRobots] = useState(null)
    const [movesMultiplier, setMovesMultiplier] = useState(1)
    const [trashCollectedMultiplier, setTrashCollectedMultiplier] = useState(10)
    const [displayGrid, setDisplayGrid] = useState(false)
    const [running, setRunning] = useState(false)
    const [gridSize, setGridSize] = useState(5)
    const [trashChange, setTrashChange] = useState(20)
    const [gridArray, setGridArray] = useState(null)

And now, I need to generate an array of random robots that only do possible action in the Grid, run them in on the grid and save the total of moves, size of grid, and total trashes collected and compute a score.

Since JavaScript Objects are assign by reference, and I need a new Grid Object for each Robot iteration the only way I found to make React update the Grid was by transforming in a string and parse back to object, probably not the best way ...

    JSON.parse(JSON.stringify(gridArray))

I have all my tools in order to test many iteration and select the one which has the higher score by the top selection percentage * sample size of each sample, and add to the new iteration, N iteration time.

let selectedRobots = []
 robots.sort((a, b) => b.score - a.score) 
    for (let robot of robots) {
        if (selectedRobots.length < selectionNumber){
            selectedRobots.push(robot)
        }
    }

After trying some huge iteration (10^5), that took some time ... I think I found my answer for the question, however I wont give any spoiler, be welcome to try for yourself at:

trashcollectorrobot.netlify.com

or using Code Sand Box:

Ricardo de Arruda.

React Hooks Tic-Tac-Toe

Ricardo de Arruda — Sun, 22 Sep 2019 01:36:08 +0000

Introduction

React Hooks is a new addition to React version 16.8, allowing to use State in Function. I personally prefer to work with Function over Class in Javascript and now we can do it.
The Idea for this Tutorial is to reproduce the game Tic-Tac-Toe using React Hooks.

Setup

For this tutorial we going to user create-react-app , so be sure to have Nodejs and NPM install in your computer.

In your terminal execute the command:

npx create-react-app tic-tac-toe
cd tic-tac-toe

Now that we create a React App open the directory with a text editor of your choice e.g vim

Create Components

All your source files will be inde de src/ directory. Lets create a new directory for our components.

Inside tic-tac-toe/src create a new /components directory and two new files Table.js and TicBlock.js.
The Table.js going to be a component that going to wrap the TicBlock.js, Ticblock.js are going to be each of the 9 blocks that the user can add X or O.

We need to import Table to our App.js first.

App.js

import React from 'react';
// Allow us to use JXS
import './App.css';
// Import the Style
import Table from './components/Table'
// Import the Table.js components
function App() {
  return (
      <div>
          <Table />
       </div>
  );
}


export default App;
//export in order to be imported by index.js, that is the root file for this App.

If you need more information about the JSX please check this Link.

Know we can edit the Table.js component.
First we need to import the Hook userState and useEffect . Hooks are functions that let you “hook into” React state and lifecycle features from function components¹
For Table we can set three useState, that Table and Table's child will have access.

    const [table, setTable] = useState([0,0,0, 0,0,0, 0,0,0])
    const [winner, setWinner] = useState([])
    const [last, setLast] = useState(Math.random() > 0.5? 5:3)

table and setTable will manage the table state for the X and 0.
winner and setWinner will track the winners
last and setLast will track the last move beeing integer 3 mapping the X
and 5 mapping the O. and set a random last to be 5 or 3.

Now we can use the React Hook useEffect that will run everytime that table state changed.
The useEffect will check if the game is over, if the sum of a row get's to 9,3x3,we X is the winner if
the sum gets 15, 3x5, we know that the O is the winner, and the same applying to diagonal.

    useEffect(()=>{
        //checking winner row and col
        for (let i = 0; i <= 2; i++){
            const idx = (i % 3) * 3 // -> 0,3,6
            //check row
            if ( (table[idx] + table[idx+1] + table[idx+2] )=== 9 || (table[idx] + table[idx+1] + table[idx+2] ) === 15){
                setWinner([idx,idx+1,idx+2])
                gameOver()
            }
            //check col
            if ((table[i] + table[i+3] + table[i+6] )=== 9 || (table[i] + table[i+3] + table[i+6] ) === 15){
                setWinner([i,i+3,i+6])
                gameOver()
            }
        }
        //checking winner diagonal
        if ((table[0] + table[4] + table[8] ) === 15 || (table[0] + table[4] + table[8] ) === 9 ){
            setWinner([0, 4, 8])
            gameOver()
        }
        if ((table[2] + table[4] + table[6] ) === 9 || (table[2] + table[4] + table[6] ) ===15){
            setWinner([2, 4, 6])
            gameOver()
        }
        // check if table completed
        if (table.indexOf(0) === -1){
            gameOver()
        }
    }, [table])

The last argument [table] is the component that React is going to check and run the useEffect
for any update in [table] in this case.

For the blocks we created a component call TicBlock that have an attribute number
that will be unique, last that will receive the last and setLast Hooks and table that
will receive the Hooks table and setTable.

<TicBlock number={0 to 9} last={[last,setLast]} table={[table,setTable]} winner={winner}/>

For the TicBLock we gonna define get the props for the parent table:

    const number = props.number 
    const [last, setLast] = props.last
    const [table, setTable] = props.table
    const winner = props.winner

So we can use the props to check if we render a empty space, X or O

if is Circle:

<Circle fill={winner.indexOf(number) !== -1? 'red':""} width="100%" height="100%"/>

If is X:

<x fill={winner.indexof(number) !== -1? 'red':""} width="100%" height="100%"/>

Now we need a onClick event listening on the TicBLock and change the
state setTable to X or O:

<div className="ticblock" onClick={() => {
    if (table[number] === 0 && winner.length === 0) {
    setTable(( () => {
        let newTable = [...table];
        let newLast = last === 3? 5:3
        newTable[number] = newLast
        setLast(newLast)
        return newTable
    })())}

You can test the game here.

https://reactjs.org/docs/introducing-jsx.html ↩