Forem: Ady Ngom

Move Zeros Code Challenge

Ady Ngom — Wed, 25 Nov 2020 15:44:01 +0000

There are usually two variations of this challenge, the only difference being if the zeroes need to be moved to the end (right) or start (left ) of the array. Below is the challenge as copied from the geeksforgeeks website:

Given an array of random numbers, push all the zero’s of a given array to the end of the array.

For example, if the given arrays is {1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0},
it should be changed to {1, 9, 8, 4, 2, 7, 6, 0, 0, 0, 0}.

The order of all other elements should be same.
Expected time complexity is O(n) and extra space is O(1).

We will cover two ways of solving for this, the first a brute force or a first best guess on a working solution, then we will tackle the recommended way to have a point of comparison.

Video here

Brute Force - First solution

My first intuition could be broken down into the steps below:

Get the size of the current array
Create a second array the size of the first one and fill with zeroes
Filter out all zeroes from the first array which will maintain the order of the non zero items
Take the difference of lengths between the first array and the filtered array to get the offset index
If the zeroes need to be on the end of the array, fill the holder array from the start to the length of filtered array
If the zeroes need to be at the start, replace the items starting from the offset to the end.
Return the holder array

Now that we have the steps, let's look it with code and hopefully make it easy to register. Let's start with the function declaration:

const moveZeroes = ( arr, dir = 'end') => {
    // body of function here
}

Our function expects a well formed array of digits and an optional direction parameter that defaults to 'end'. Now on to the steps for the body of the function:

Get the size of the current array

const size = arr.length;

Create a second array the size of the first one and fill with zeroes

let holder = Array.from({ length: size}, () => 0);

Filter out all zeroes from the first array which will maintain the order of the non zero items

let filtered = arr.filter( v => v !== 0);

Take the difference of lengths between the first array and the filtered array to get the offset index

let offset = size - filtered.length;

If the zeroes need to be on the end of the array, fill the holder array from the start to the length the filtered array

if( dir === 'end' ) {
    filtered.forEach( (v, i) => holder[i] = v );   
}

If the zeroes need to be at the start, replace the items starting from the offset to the end.

if( dir === 'start' ) {
    filtered.forEach( (v, i) => holder[ i + offset] = v );
}

Return the holder array

Au final, we get the code below as our brute force solution:

const moveZeroes = ( arr, dir = 'end') => {
    const size = arr.length;
    let holder = Array.from({ length: size}, () => 0);

    const filtered = arr.filter( v => v !== 0);
    const offset = size - filtered.length;

    if( dir === 'end' ) {
        filtered.forEach( (v, i) => holder[i] = v );
    }

    if ( dir === 'start' ) {
        filtered.forEach( (v, i) => holder[ i + offset] = v )
    }

    return holder;
}

And we can test it with:

let arr = [1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0];
console.log('Zeroes to end: ', moveZeroes(arr));
console.log('Zeroes to start: ', moveZeroes(arr, 'start'));

Which outputs

Zeroes to end   :   [1, 9, 8, 4, 2, 7, 6, 0, 0, 0, 0]
Zeroes to start :   [0, 0, 0, 0, 1, 9, 8, 4, 2, 7, 6]

This satisfies the expected output of the challenge but, we should run an auto critique and see the many things that make our solution not so optimized:

First we are creating a second array to hold the the filtered items
Second we create a third array then fill it with zeroes, each of those steps is an additional computation step and increase the execution time as the array grows in size
Lastly, we iterate and change the newly created array to place our filtered items and respect the order of the items

So the big question is can we achieve the same with only the one array passed and not to have to create all this new ones and how do we swap the zeroes to an end without affecting the order.

The answer is of course yes and like the first solution we will start with a breakdown of the logic of the solution to hopefully help with understanding

Optimized solution - recommended one

We will operate within only one array and keep track of two indexes: a read index and a write index which both start at the same position.

We will use the readIndex to scan the array from end to end and skip any cell that contains a zero.

When we encounter a non-zero, we update the value at the writeIndex with the non-zero value then we decrement or increment the writeIndex based on which side we need to move the zeroes to.

If your head is spinning from reading the above steps, I have put up a visualization that might help you understand it quickly. This below shows the step by step of moving the zeroes to the left

Let's translate that into code with two separate functions this time starting with the zeroes to the left.

[Optimized] Move Zeroes Left

As always we start with the function declaration

const moveZeroesLeft = function(arr) {

}

Then we declare two local variables to hold a writeIndex and a start position

let writeIndex = arr.length - 1;
let start = writeIndex;

Both indexes start at the end of the array.

You might've guessed from the visualization that we will run two internal loops.

The first loop will scan for non-zeroes with a readIndex and put the value found at the writeIndex.
The writeIndex will decrement every time after such an operation

for(let readIndex = start; readIndex >= 0; readIndex-- ) {
    if( arr[readIndex] !== 0) {
        arr[writeIndex] = arr[readIndex];
        writeIndex--;
    }
}

The second loop will start at the beginning now and swap each value with a zero up until it reaches the writeIndex cell which also will get a zero value

for (let j = 0; j <= writeIndex; j++) {
    arr[j] = 0;
}

To finish, we can now simply return the updated array

return arr;

The complete code:

const moveZeroesLeft = function(arr) {
    let writeIndex = arr.length - 1;
    let start = writeIndex;

    for(let readIndex = start; readIndex >= 0; readIndex-- ) {
        if( arr[readIndex] !== 0) {
            arr[writeIndex] = arr[readIndex];
            writeIndex--;
        }
    }

    for (let j = 0; j <= writeIndex; j++) {
        arr[j] = 0;
    }

    return arr;
}

We can verify that this works with the statements and the output below:

let arr = [1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0];
console.log('\n------------ Move zeroes left --------\n');
console.log(moveZeroesLeft(arr));
// outputs to console
[0, 0, 0, 0, 1, 9, 8, 4, 2, 7, 6]

[Optimized] Move Zeroes Right

The code to have the zeroes at the right is following the same logic as the previous one.

The main difference is that the readIndex and writeIndex will start at the beginning of the array instead of the end.

No need for a step by step then, here is the finished code:

const moveZeroesRight = function(arr) {
    let writeIndex = 0;
    const size = arr.length;

    for(let readIndex = 0; readIndex < size; readIndex++) {
        if(arr[readIndex] !== 0) {
            arr[writeIndex] = arr[readIndex];
            writeIndex++;
        }
    }

    for(let j = writeIndex; j < size; j++) {
        arr[j] = 0;
    }

    return arr;
}

We can expect and verify the zeroes to be moved to end of the array with the below statements again:

let arr = [1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0];
console.log('\n------------ Move zeroes right --------\n');
console.log(moveZeroesRight(arr));
// outputs to console
[1, 9, 8, 4, 2, 7, 6, 0, 0, 0, 0]

Conclusion

I tried to be thorough in showing you multiple ways to solve this fun challenge.

I hope you enjoyed the [long] read and more importantly understand both approaches and why one is a better option than the other.

How to build a simple counter and a vending machine app with React hooks

Ady Ngom — Mon, 08 Jul 2019 18:48:26 +0000

Today I will introduce to you what many would argue is the shiniest new feature of the popular React library - React Hooks.

I personally am falling in love with the React.memo concept, but we can reserve it for another tutorial though.

We are here to talk about Hooks so let's get into it.

First thing first what are hooks??

Fair question. Components are at the heart of the React library and there are essentially two ways to write them. Either as a class base component or a functional component.

Prior to version 16.8 I believe, using the class base syntax was the only way to tap in into the component life cycle methods and also the only way to directly access the very important state object.

The workaround or status-quo was to wrap the functional component inside a class component and have it pass the state as props.

With the addition of hooks, that is no longer necessary since functional components are now literally able to "hook into" the React exposed methods such as useState and useEffect which we are going to look into extensively.

Now that we have that out of the way, let's see it in code

A simple counter

Let's put together our example functional component. The user interface is two buttons in charge of incrementing or decrementing a count value that defaults to 0.

The code below is one of the ways we could go about it

import React, { useState } from "react";
import { render } from "react-dom";
import "./styles.css";

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div id="counter">
      <div id="wrapper"> </div>
      <header id="counter-header">
        <div id="header-wrapper"> </div>
        // The fun stuff
        <button
          className="cbtn" onClick={e => {
            if (count > 0) setCount(count - 1);
          }}
        >
         -
        </button>
        <h1>Simple Counter </h1>
        <button
          className="cbtn" onClick={e => {
            setCount(count + 1);
          }}
        >
        +
        </button>
      </header>
      <p className="count">{count} </p>
      <p className="label">Off the hooks!!! </p>
    </div>
  );
};

render(<Counter />, document.getElementById("root"));

Just like we would've imported Component on the opening line, we are instead adding the useState hook. Then a destructuring like statement is used to set the internal state

const [count, setCount] = useState(0);

The first variable - count, on the construct is the value and the second setCount is the name of the function you will later use to update the value - you can call it whatever you see fit.

Finally, useState on the right of the statement takes what looks like an argument but is actually initial value of the state key.

So in plain English:

Using the state hook, create a variable named count and associate a function named setCount that will be in charge of updating the value of it. In the meantime, set the initial value of count to 0

We then add event listeners on the buttons and for each we make use of the *setCount * to update the *count * value accordingly

 <button className="cbtn" onClick = {(e) => { if(count> 0) setCount(count - 1)}}>
-
 </button>

 <h1>Simple Counter </h1>

 <button className="cbtn" onClick = {(e) => { setCount(count + 1)}}>
+
 </button>

There you have it for a simple example :) Now let's look at something more involved that will allow us to take advantage of a few lifecycle methods inside a functional component

A Vending Machine

If you have read some of my articles, you might've come across my JavaScript - 28 relevant questions series.

One of the challenges is to build a "simplified" Vending Machine.

You can read more about and definitely take a stab at it following the link below.

# 6 Vending Machine -
Bob runs a successful Vending Machine business. He wants to add an interface ...

One of the solution that I have devised for it uses a function as a module. We will import that inside a React functional component and use it to update various states of the application

The complete code can be found here: React vending machine with hooks but let's quickly go step by step.

Let's first look at our Vending Machine module

export default function VendingMachine(inventory) {
  var drinks = inventory || null;

  if (!drinks) {
    throw new Error("No inventory: Cannot add a new VM");
  }

  const drinksKeys = Object.keys(drinks);

  var sale = function(pid) {
    if (!drinks[pid]) {
      return;
    }

    if (drinks[pid].stock > 0) {
      drinks[pid].stock--;
      return `1 ${drinks[pid].name} - Thank you, come again!!`;
    } else {
      drinks[pid].stock = 0;
      return ` ${drinks[pid].name} is out of stock :( Come back tomorrow`;
    }
  };

  var stock = function() {
    const total = drinksKeys.reduce((c, n) => c + drinks[n].stock, 0);
    return total;
  };

  return Object.freeze({ sale, stock });
}

The Vending Machine exposes two public methods *sale * and *stock. * It also needs to be passed an inventory object that looks like this

{
  "1": {
    "name": "Mango Juice",
    "stock": 2
  },
  "2": {
    "name": "Banana Smoothies",
    "stock": 2
  },
  "3": {
    "name": "Guava Mix",
    "stock": 1
  },
  "4": {
    "name": "Citrus Blend",
    "stock": 3
  }
}

Let's assume that this object is coming from an HTTP call. In a class based component scenario, we would have probably use the ComponentDidMount lifecycle method to make the request and update the state. In the case of the functional component we will hook into the useEffect method to do so.

Now let's set a few rules/goals that we want our React component to do:

The UI should only render when the VM has been properly set with a valid inventory
The component will need to make an HTTP request call to get that initial inventory
The UI will show a loading state until it is ready to render the VM
Once loaded, each drink from the inventory will be represented by a button.
Clicking on any of the drinks button will trigger the VM sale method call and displaying either a successful sales or an out of stock message
The UI will display the starting stock and that number will be updated each time a successful sale is made

1. Initial setup

Let's put the initial wrapper for our little app

import React, { Fragment, useState, useEffect } from "react";
import { render } from "react-dom";
import VendingMachine from "./FunModules/VendingMachine";

const LocalVM = () => {
  // functional logic here
  return <Fragment>// view logic here</Fragment>;
};

render(<LocalVM />, document.getElementById("root"));

As we did with the Simple Counter, we are importing useState but also useEffect and Fragment.

My personal like on Fragment is how easy it let us choose if we want add additional tags to the DOM or not - very powerful.

The last import line simply get us our VM module. Whether I work on an Angular or React project, I usually create a folder of utilities with pure Vanilla JS that are easy to reuse in either framework or library.

2. Declaring our State(s)

The state syntax in a class component is a key value object. We could definitely repeat that same pattern here, but what it is very interesting and flexible with the *useState * hook is that you could set each individual state you want to track.

Let's illustrate that in our functional logic section

// functional logic here
const [vm, setVM] = useState({});
const [loading, isLoading] = useState(true);
const [data, setData] = useState({});
const [message, setMessage] = useState("...");
const [stock, setStock] = useState(0);

I really like how this reads, it is almost self-documenting and probably easy to figure out what each of these does. Let me know if you don't agree :)

To be crystal clear though, this is what each will handle:

vm will be the local instance of our Vending Machine and starts as an empty object
loading is a boolean that defaults to true and will be false when the VM UI is ready to be rendered
data is the inventory object that we will get back from our HTTP request call
message is going to be use to display a success or out of stock status
and finally stock will display the initial count of the total inventory of drinks and update that number anytime a purchase is made

3. Requesting the inventory

Now comes the fun part where we get to take advantage of useEffect to wrap around our HTTP request.

useEffect(
  () => {
    fetch("https://my-json-server.typicode.com/adyngom/vmapi/db")
      .then(response => response.json())
      .then(data => {
        setData(data);
        setVM(VendingMachine(data));
        isLoading(false);
      });
    // return function statement when component unmounts
  },
  [] // empty array as second argument to ensure the effect runs once
);

The hook wraps our fetch call and once we get a response, setData updates the data state and setVM attaches an instance of the VendingMachine with the new inventory to our vm state.

Please note that we haven't added error handling on our fetch call for brevity.

The code adds two very important comments that touch on lifecycle management. It is extremely important to understand that useEffect is the equivalent of ComponentDidMount, ComponentDidUpdate and ComponentWillUnmount lifecycle methods combined

If we don't pass the empty array as a second argument, the "effect" will run every single time the component gets updated.

That would be great for certain use cases, but in this particular one , we would be telling our component to go fetch and setup a Vending Machine every single time something gets updated in the UI.

The empty array as second argument helps us prevent that by making it a one and done deal.

The commented out return function statement is a placeholder of where you would put your code if you wanted to do operations when the component unmounts.

Think about use cases such as removing event listeners, unsubscribing from an observable etc...

I highly recommend to read more about those on the React documentation page.

4. Rendering the UI at last

Now that most of our logic is taken care of, we can focus on putting the meat of the component on the page. If we have received data ** from our fetch call, this will mean that the **loading state has finished and is now false.

Using the ternary operator, we could compose our view like below

return (
  <Fragment>
    {loading ? (
      <p>loading... </p>
    ) : (
      <div>// loading is done put the VM interface here</div>
    )}
  </Fragment>
);

Let's also add two helpers function just before the useEffect block that will allow for a clean way to call on the sale and stock methods of the VM

const sale = pid => {
  return vm.sale(pid);
};

const getStock = () => {
  return vm.stock();
};

With everything in place, let's add the final piece of the UI inside the falsy section
of the ternary statement

return (
  <Fragment>
    {loading ? (
      <p>loading... </p>
    ) : (
      <div>
        <h3>Pick a fresh drink and enjoy </h3>
        <p>{message} </p>
        <br />
        <div>
          {Object.keys(data).map(d => {
            return (
              <button
                key={d}
                id={d}
                onClick={e => {
                  setMessage(sale(e.target.id));
                }}
              >
                {data[d].name}{" "}
              </button>
            );
          })}
          <br /> <br />
          <small>VM current stock: {getStock()} </small>
        </div>
      </div>
    )}
  </Fragment>
);

So if we are going from top to bottom on the last block we are essentially:

Putting a reactive message string. This gets updated anytime we click on one the buttons which come next
Using the data object we cycle through the keys and dynamically build our buttons UI.
Each button gets an event listener attached to it and will pass the purchased id or pid to the local sale function.
The action is wrapped in a setMessage call that updates our message string with proper success or out of stock string
Finally getStock will be called initially and anytime the component updates to give the updated value of the stock count

5. Let's see it in action

And if you do have the React Developer Tools extension installed here is a very slick representation of our UI inside the React DOM

Conclusion

I've warned you or at least I've tried in the title to tell you that this was going to be lengthy. If you've made it this far though, I hope that like myself you have learned a thing or two about this fascinating way of composing slick UIs with the React library.

The effect and state hooks, are most likely to be the most prominent ones for many of the use cases in a functional component. But don't cut yourself short by limiting yourself to those two.

I cannot recommend enough this gem of an article by Aayush Jaiswal:
10 React Hooks you Should Have in Your Toolbox

Antonin Januska has also put together a nice Hooks cheat sheet:
The Definitive React Hooks Cheatsheet

If you create bits of reusable code, you could definitely take a stab at creating some custom hooks and share with the rest of us. The React docs are surely a great place to start:
Building Your Own Hooks

In the end, don't forget to pace yourself. Some are pretty intuitive and straightforward and some might take a few head scratches.

Thanks for reading this far and don't forget to "hook" a few friends up by sharing the article ;)

[JavaScript] - How to craft intuitive and self-documenting code

Ady Ngom — Mon, 10 Jun 2019 18:08:55 +0000

As a developer you probably spend more time reading code than actually writing it. Besides your regular outputs and refactors, think about the amount of time you spend on reading tutorials, documentations, reviewing a pull request, checking the latest cool repos on Github, maintaining a project etc…, the list goes on.

Unfortunately, reading does not necessarily translate into understanding.
I’m here to bet that one the main reasons a codebase or project does not get adoption or gets abandoned is simply because it requires too much brain processing power and put simply is not intuitive.

Many in western cultures are familiar with the 5 second rule when it comes to food, I know some who count a very slow 5 in that predicament :).

When it comes to code though, John Papa rightfully states that:

If you can’t understand the code in 5 seconds, there is probably a smell, there is probably an idea that you should probably refactor.
__ John Papa — Readable Code

So to put it in perspective, let me:

First run you through a practical use case of a code refactor.
Then we can discuss the added value and benefits it could provide and finally
Share a few useful resources that have been very helpful in this “clean code” quest

If you are a seasoned clean coder, we hope you can help us further improve by sharing some cool tips and resources on the subject in the comments.

A “simple” user story

Given a list of hotels, please select those that are located in the US and provide the filtered list with a properly formatted phone number. Below is a sample of the list of hotels.

const hotels = [
    {
     name: "Panthers Alley",
     country: "Wakanda",
     address: "123 Best Luck Finding, 3 Rivers, Wakanda",
     phone: "5551790871"
    },
    {
     name: "The Golden Thread",
     country: "USA",
     address: "5 Maple Street, Los Angeles, CA, 90000",
     phone: "2125552345"
    },
    {
     name: "12 Crowns",
     country: "Japan",
     address: "36 Wide Alley Blvd, Tokyo",
     phone: "5558725910"
    },
    {
     name: "Petit Paris",
     country: "usa",
     address: "3669 Elm Street, New York, 30000",
     phone: "7075559087"
    },
    {
     name: "The Empress Lounge",
     country: "USA",
     address: "1 Kings Place, Atlanta, GA, 30000",
     phone: "6785553125"
    }
];

If you are able to read the above and understand without a squint what’s going on in 5 seconds or less, I bow to you 🙂

To be fair though there are a lot of good in the proposed solution such as:

A very descriptive choice on the naming of the constant USHotels. This implicitly indicates the type of value it will hold which is likely to be a list of hotels in the US.
The use of map and filter to extract and transform the result to a new set, leaving the original unchanged or in more technical terms help avoid mutating the original object.
Map and filter also allow for a more declarative coding style rather than the imperative that would’ve been unavoidable with the for or forEach loops.

If you want to learn more about imperative vs declarative, do yourself a favor and read this great piece from Tyler McGinnis: Imperative vs Declarative Programming

In short, declarative is more concerned about the WHAT whereas imperative is explicit on the HOW.

This point us to the first area of what might need revision in our solution — the map block is too verbose and is a deep dive into HOW to transform an unformatted number to the US standard.

In our refactoring effort we will create a set of specialized units — read functions, that will help us ease in reading and understanding at first glance but also will have the side effect of creating reusable code.

I personally call this the “Toolify” step — a cool made up word 😉 Feel free to propose something else. I’m listening.

Let’s abstract and conquer

The map block is lengthy and will be the bulk of our refactor but let’s start with the filter step.

Let’s first create a helper function named propEquals which will only worry about if a property on an object x is equal to a value y.

Feel free to make the name more descriptive if it is not obvious to you. What is important is the name carries an implicit return type.

It’s almost obvious that it will return a boolean.

function propEquals(key, value, matchCase = false) {
 return function(obj) {
   return (!matchCase) ? obj[key] === value 
         : obj[key].toLowerCase() === value.toLowerCase();
   }
}

propEquals is generic enough to look up any key / value pair against any object. For example if we want to know if the first object in the hotels array is Wakanda, we could call it like this:

const IsWakanda = propEquals(‘country’, ‘Wakanda’)(hotels[0]);
console.log(IsWakanda); // will output true

Now let’s add a more specific function that will only target the US countries.

Using the outer function of propEquals, we can “fix” the arguments values to always default to the US. Let’s name this new functionality isUSCountry.

const isUSCountry = propEquals.call(null, ‘country’, ‘USA’, true);

In plain English, we could say that isUSCountry derives from propEquals and set the default values of the parent function to:

country as key,
USA as value,
and want to select either lower or uppercase values of the string USA.

In “simpler” technical terms, isUSCountry is a composition of propEquals.

Putting it to use will give us a very nice and intuitive syntax:

const USHotels = hotels.filter(isUSCountry);
console.table(USHotels);

And below is the output of the filtered array

[
    {
      "name": "The Golden Thread",
      "country": "USA",
      "address": "5 Maple Street, Los Angeles, CA, 90000",
      "phone": "2125552345"
    },
    {
      "name": "Petit Paris",
      "country": "usa",
      "address": "3669 Elm Street, New York, 30000",
      "phone": "7075559087"
    },
    {
      "name": "The Empress Lounge",
      "country": "USA",
      "address": "1 Kings Place, Atlanta, GA, 30000",
      "phone": "6785553125"
    }
  ]

This syntax where USHotels construct is not explicitly specifying any arguments and just the function reference, is called tacit programming or point free composition

The more helpers the merrier

Now that we are done with the filter part, let’s attack the transform part or map with the same approach.

First let’s extract the phone formatting functionality an decouple it from the fact that it is always tied to an object.

We should be able to format a number whether it is part of an object or not.

So below we now have our USPhoneFormat function:

function UPhoneFormat(tel) {
    let area, prefix, line;
    area = tel.substr(0, 3);
    prefix = tel.substr(3, 3);
    line = tel.substr(6, 4);
    const formatted = `(${area}) ${prefix} ${line}`;
    return formatted;
}

Now let’s add our final helper transformProp. It will basically take a key and a transform function and apply the value transformation on a given object.

function transformProp(key, fn) {
   return function(obj) {
     return {…obj, [key]: fn.call(null, obj[key]) };
   }
}

Now following the same logic we did with isUSCountry, we can “compose” a more specific functionality that only handles phone number formatting

const formatPhone = transformProp.call(null, ‘phone’, UPhoneFormat);

The big payoff

Now that we have all of our “tools” in place, we can finally revise our original syntax to just this “above the fold”:

const USHotels = hotels.filter(isUSCountry).map(formatPhone);
//add all the functions below the fold or better yet use imports

Logging USHotels to the console will output the following:

[
 {
 “name”: “The Golden Thread”,
 “country”: “USA”,
 “address”: “5 Maple Street, Los Angeles, CA, 90000”,
 “phone”: “(212) 555 2345”
 },
 {
 “name”: “Petit Paris”,
 “country”: “usa”,
 “address”: “3669 Elm Street, New York, 30000”,
 “phone”: “(707) 555 9087”
 },
 {
 “name”: “The Empress Lounge”,
 “country”: “USA”,
 “address”: “1 Kings Place, Atlanta, GA, 30000”,
 “phone”: “(678) 555 3125”
 }
]

Some might scratch their heads right now thinking “that’s an awful lot of steps to essentially get the same result. What do we gain from this?” I’m glad you asked.

The true gain can be summed up in what I called the S.C.R.E.A.M.S principle. Using it, I try to always ensure that my code is:

Self-documenting — hopefully this is an obvious one
Composable — made up word but gives you the idea
Readable — for human first and minified next for machines
Eloquent — subjective but you define what is and stick with it
Abstraction layer — add it wherever it makes sense
Maintainable — small units are easy to test
Scalable — separate and generic functions are easy to reuse

In closing

I have honestly started to make that extra “craft” effort in the past few months and I can admit that it was a very, very slow start.

If that is something that might be of interest to you, I suggest to start with small refactors.

Using a combination of map, filter, reduce and bind, call, apply is your Swiss-knife that can carry you a long way and is one of the routes that will help in producing “clean-code” in JavaScript.

If you are convinced, it’s now time to craft some code that S.C.R.E.A.M.S!! 🙂

A few resources

From the master himself — bookmark it!!!
Readable Code

An oldie but still a goodie
JavaScript Apply, Call and Bind Methods Are Essential for JavaScript Professionals

Can’t thank Cristian Salcescu enough for this great piece
How point-free composition will make you a better functional programmer

Hello I’m Ady Ngom. Professionally I carry the fancy title of Solutions Designer / JS Tech Lead. At the core though, I’m just a passionate about all things JavaScript and the Front-end ecosystem. Connect with me on Twitter, LinkedIn and visit my blog adyngom.com

Just launched my personal website and I need your honest feedback

Ady Ngom — Wed, 05 Jun 2019 18:30:42 +0000

Visit the new blog - adyngom.com

Just about couple months ago, I've decided to really get back into writing and share the different bits and crazy ideas that throttle my mind. I have found in dev.to a very welcoming community and at the same time very on point and focused on just us - the devs.

In parallel the plan was always to have an official space to gather everything Ady lol. But I do suffer from the "perfectionist syndrome" unfortunately and I have many times attempted to build my own platform because nothing else cut it for me.

Call it pretentious, I won't be mad - I deserve it, I simply call it a simple waste of time and more a huge waste of opportunities. I will write more about those two in a separate article.

In the meantime, I would appreciate it a lot if you were to take a minute from your busy lives and give me an honest feedback on your first impression.

My aim is to make it very welcoming and very easy to read. Let me know what you think and if you like what you read here and there, please subscribe.

Visit the new blog - adyngom.com

How to create an off-canvas navigation menu with CSS

Ady Ngom — Tue, 21 May 2019 10:29:13 +0000

Popularized by apps like Facebook on mobile, the off canvas menu allows to save valuable real screen estate by toggling the navigation into view only when needed. We will dive and explore one way of achieving the effect using some overlooked CSS properties.

Goals and Challenges

Create additional screen real estate by hiding the navigation
Easily access the menu via clicking off canvas icon and having it slide into place
Only CSS will be used for the effect
Support a many browsers as possible

The markup

Starting with a wrapper div, we will use some of the new HTML5 elements to host the two main elements : the navigation and the content

<div class="wrapper"> 
 <aside> 
  <nav> 
   <ul> 
    <li>nav_1</li>
    <li>nav_2</li>
    <li>nav_3</li>
    <li>nav_4</li>
    <li>nav_5</li>
   </ul> 
  </nav> 
 </aside> 
</div>

We will then wrap the main content in a section tag

<section>
  <div class="container">
    <div class="row">
      <h2>Lorem ipsum dolor sit amet.</h2>
      <p>Lorem ipsum......</p>
    </div>
    <!--- add as many rows needed --->
  </div>
</section>

The container div is not really necessary and is the result of my habit of coding responsive sites, which we'll do a little of - just enough to stay within the scope.

The CSS

I have kept the CSS inline to keep it concise but it can easily be part of an external script.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 63.5%;
  font-family: "Roboto Slab", serif;
  height: 100%;
}
body {
  font-size: 1.6rem;
  line-height: 2.8rem;
  height: 100%;
}
.wrapper {
  height: 100%;
}
.container {
  margin: 0 15px;
}
.row {
  padding: -15px;
  margin: 15px 0;
}
.row:before,
.row:after {
  content: "";
  display: table;
}
nav li {
  padding: 8px;
}

Now that we have the initial styles in place let's take care of the two main elements.
So for the sidebar we will set an initial width of 40%, float it to the left and position it off the screen with a margin-left of -40%, also we'll add a position absolute to avoid having it stacked on the main content.

aside {
  background-color: #333;
  color: #fff;
  width: 40%;
  margin-left: -40%;
  float: left;
  height: 100%;
  position: absolute;
}

Now for the section element that houses the main content we will float it to the right with a width and height of 100% and a margin-right of 0.

section {
  width: 100%;
  height: 100%;
  float: right;
  margin-right: 0;
}

The Toggle

Now lets' add a checkbox at the top of our markup just before the wrapper div.

<input type="checkbox" id="offcanvas" class="toggle" />
<div class="wrapper"><!--- wrapper content here ---></div>

We gave it and id of offcanvas this will be used later by labels to trigger the toggle.

Now we essentially want to react to the checked state of the input and bring the navigation to view when checked and hide again when uncheked.

We will use the adjacent selector in our CSS and target the aside element first

.toggle:checked + .wrapper > aside {
  margin-left: 0;
}

and the same for the section element

.toggle:checked + .wrapper > section {
  margin-right: -40%;
}

Make It Pretty

The main goal of hiding and showing the navigation has already been taken care of. We will just make it a little nicer by adding the infamous "hamburger" button and make the transition smooth.

Let's add a label that will contain the button and that will trigger the toggle. At the top of the section element let add this code:

<div class="container">
  <div class="row">
    <label for="offcanvas" class="toggler">
      <span class="navicon"></span>
    </label>
  </div>
</div>

The label for attribute has a value of offcanvas which is the same as the id of our input button.

This allow us to trigger the toggle from anywhere on the page where the label code exist. Now let's add some styles

.toggler {
  display: inline-block;
  cursor: pointer;
}
.navicon {
  width: 28px;
  height: 28px;
  background: url("navicon.png") no-repeat;
  background-size: cover;
  display: block;
}

We can now hide the input button

.toggle { display: none; }

A Big Hit

When the navigation is in view the only way to hide it again is by precisely hitting the menu button.

This might be ok on a desktop screen but can be challenging on smaller resolutions.

We will make the entire content clickable during that state to alleviate that issue.

So back to the html before the first label we will add another one

<section>
  <label for="offcanvas" class="biglabel"></label>
  <!--- section content --->
</section>

We gave it a class of biglabel. In our CSS we will hide it when the navigation is hidden and have it cover the entire content as a big button.

.toggle,
.biglabel {
  display: none;
}
.biglabel {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}
.toggle:checked + .wrapper > section .biglabel {
  display: block;
}

When we refresh the browser we can see now that the entire content becomes clickable when the navigation is in view. Perfect!! Well almost.

Smooth Like a Moonwalker

The last step is to handle the transition and make the navigation slide in nicely.

Using CSS3 transition makes it very easy. We will target both the sidebar and the main content

aside,
section {
  -webkit-transition: margin 0.5s ease-in-out;
  -moz-transition: margin 0.5s ease-in-out;
  -ms-transition: margin 0.5s ease-in-out;
  -o-transition: margin 0.5s ease-in-out;
  transition: margin 0.5s ease-in-out;
}

And Voila!! Our menu now kicks out nicely the content when coming to view and leaves without a noise.

Hopefully you found it useful and enjoyed it as much as I did. Please share and let me know your thoughts in the comments.

Cheers

How to approach solving a challenge during a coding interview

Ady Ngom — Mon, 13 May 2019 14:23:53 +0000

Like many things in life, mastery requires practice and the coding interview is no exception. Often times though, the focus is on trying to find the best solution from the get go rather than the approach on how to iterate and maybe get there.

The most important part, in my humble opinion is to get it right first. In your normal coding life you would rarely, if ever, be able to produce "perfect" code without first going through a set of iterations.

The approach during the coding interview should not differ and if played well should help you score invaluable points into demonstrating your problem solving skills.

I'm going to walk you through of what could be an actual conversation between you and an interviewer if you were asked to solve for the [in]famous FizzBuzz challenge.

The challenge

Write a program that prints the numbers from 1 to 100. But for multiples of three print Fizz instead of the number and for the multiples of five print Buzz. For numbers which are multiples of both three and five print FizzBuzz

The context

The FizzBuzz challenge is not specific to JavaScript and has been part of the coding interview process in almost every programing language. It is usually a quick check to assess the candidate basic programing instincts, but can also be turned in an assessment for in depth knowledge if the interviewer decides to do so.
It is usually part of a light weight first technical interview done while screen sharing. It is also a favorite from a non JavaScript programmer to ask and quickly gauge your technical knowledge and approach.

In a Javascript context familiarity with some or all the following concepts are expected to be demonstrated:

Logical operators
Looping
Falsy values
Ternary operator
Type coercion

The approach

As with any problems that you might encounter, even those that seem familiar, a good read and break down to small pieces is a must. Be clear to the interviewer that you need 3 to 5 minutes to read it calmly and propose a rewrite of your understanding.

If you are comfortable doing that part out loud, that's even better. For example this is how I might go for the rewrite:

So log to the console numbers from 1 to 100 - I'm going to need a loop
For multiple of 3 instead of the number output the string 'Fizz'
Do the same for multiples of 5 with the output being 'Buzz'
In the case the number is a multiple of both 3 and 5 then output 'FizzBuzz' - how to check if a is a multiple of b??
If all the above cases fail then just output the number as is

I would probably ask to the interviewer if I should worry about edge cases or bad inputs. It is usually implied that the input will be correct and edge cases might not be necessary. The fact that you ask though, adds a touch of eloquence to your problem-solving approach.

The solution(s)

One thing that is key and is worthy of practice is walking the person through your steps as you are building the solution during the interview. Start with the obvious, you will probably need a function or class as your primary construct. Start there and always think of the K.I.A.S.S.A.P :) principle - Keep It As Stupid Simple As Possible

First step

// comments are me talking out loud
// let's build the function structure
function fizzBuzz( start = 1, end = 100) { // default parameters to set the default range
    // I need a loop - let's go with for
    for( let i = start; i <= end; i++) {
        // probably a variable for what will be outputted
        let output = i;

        // rest of the logic here

        // outputting the result
        console.log(output);
    }
}
// call the function
fizzBuzz(); // this prints out 1 to 100 - fancy ;)

The above satisfies my first goal on my rewritten challenge understanding

Second step

Now if I follow the cadence of the challenge I will solve for two things:

- Choosing the proper operator to find if a number is a multiple of another
- Apply it for the multiple of 3 condition and output 'Fizz'

The remainder operator - %, is the perfect tool here. If number a is a multiple of number b then

( b % a) === 0; // will be true;
// 4 is a multiple of 2
( 4 % 2 ) === 0; // is true

Let's apply this in the body of our function

// rest of the logic here
if( (i % 3) === 0 ) {
    output = 'Fizz';
}
// Knowing that 3,6 and 9 are multiple of 3 let's
// quickly test a small sequence by calling

fizzBuzz(1,10); 
// this should output
// 1, 2, 'Fizz', 4, 5, 'Fizz', 7, 8, 'Fizz', 10

Final step

Since the Fizz condition ran perfect we can now apply the same logic to the rest

// multiple of 5
if( (i % 5) === 0 ) {
    output = 'Buzz';
}

// multiple of 3 and 5
if( (i % 3) === 0  && (i % 5 === 0)) {
    output = 'FizzBuzz';
}

Wowza!! this satisfies all the conditions and gives us this chef d'oeuvre of a solution once assembled
and stripped out of all comments

function fizzBuzz( start = 1, end = 100) { // default parameters to set the default range
    for( let i = start; i <= end; i++) {
        let output = i;
        if( (i % 3) === 0 ) {
            output = 'Fizz';
        }
        if( (i % 5) === 0 ) {
            output = 'Buzz';
        }
        if( (i % 3) === 0  && (i % 5) === 0) {
            output = 'FizzBuzz';
        }
        console.log(output);
    }
}
fizzBuzz();

Now at this point, I have a working solution that satisfies the challenge request. What follows is very delicate in an interview situation. Something is bugging me about my code. The last if block that checks for multiples of 3 and 5 seem redundant.

Now should I voice that out loud and propose to refactor it or should I wait for the interviewer to call it out?

Interviews are about managing time and maximizing your pluses over your minuses. If you feel super confident that you have a good shot at coming up with something more solid in a manageable time then go for it. If in doubt, wait to be asked.

This way, the interviewer has decided that the remainder of your time might be worth digging deeper on this question.

If it is decided that it would be interesting to look at a refactor, this might be a way to approach the refactor steps

The refactor

We could, of course, get to a fancy one-liner here for this particular challenge, but I'm not a particular fan of doing stuff for the sake of fancy or pretty.

So let's flip the switch what I'm going to do this time is I will show you my final solution and I will walk you through how did I get to it.

This can turn into a handy skill if you are to read and understand other people's code or if you are to explain it to someone else. Through the years I have provided many solutions for this challenge, but the one below is by far my favorite.

function fizzBuzz( start = 1, end = 100) {
    for( let i = start; i <= end; i++) {
        let output =  ( (i % 3) ? '' : 'Fizz' ); // if multiple of 3 is falsy
        output += ( (i % 5) ? '' : 'Buzz') ; // if multiple of 5 is falsy
        console.log(output || i); // output value or i if output is falsy
    }
}
fizzBuzz(1,15);

The solution uses the ternary operator syntax to set the conditions and takes advantage of something that might not very obvious at first for the untrained eye - JavaScript falsy values.

Let's start with falsy values JavaScript, what in the heck are we talking about. A great definition is provided by the Mozilla Developer Network (MDN ):

A falsy value is a value that is considered false when encountered in a Boolean context.
JavaScript uses Type Conversion to coerce any value to a Boolean in contexts that require it, such as conditionals and loops.

For our particular context the important keywords are "Boolean context" and "conditionals" since they are relevant to our solution. Before looking at how it applies, here is the list of the most common falsy values in Javascript:

The boolean false not the same as the string 'false'
The number 0 - once again this is different from the string '0'
The null object
The primitive type undefined assigned to a non-initialized variable
Any representation of an empty string such as a single quote, double quotes or back-ticks.

The rewrite

Let's focus on one segment of our fizzBuzz function

if( (i % 3) === 0 ) {
output = 'Fizz';
}
// this could be refactored as
if( !(i % 3) ) output = 'Fizz';

Breaking down the refactored line gives us this picture

if (...) ==> conditional construct outside - boolean context inside
! ==> is false
(i % 3) ==> type coercion - will check if value is falsy or truthy

Replace i by a few numbers to better understand it

if (!( 1 % 3) ...) /*becomes*/ if (!( 3 ) ...) /*3 is not false or falsy so check fails*/
if (!( 2 % 3) ...) /*becomes*/ if (!( 6 ) ...) /*6 is not false or falsy so check fails*/
if (!( 3 % 3) ...) /*becomes*/ if (!( 0 ) ...) /*0 is not false but is falsy so check passes*/

I can rewrite now my entire function using the logic above

function fizzBuzz( start = 1, end = 100) {
    for( let i = start; i <= end; i++) {
        let output = i;
        if( !(i % 3) ) output = 'Fizz';
        if( !(i % 5) ) output = 'Buzz';
        if( !(i % 3) && !(i % 5) ) output = 'FizzBuzz';
        console.log(output);
    }
}

I was quite ecstatic when I got to this solution, but it did not too long unfortunately. The last line was still redundant to me and honestly was bugging me. How could I combine the checks of 3 and 5 in one pass.

And then it hit me, what if I could start with an empty string, attach to it the word 'Fizz' if it passes the 3 condition and attach the word 'Buzz' if it passes the 5 condition too. I drew this on a piece of paper

i = 1 ==> no Fizz '' ==> no Buzz '' ==> output is 1
i = 3 ==> yes 'Fizz' ==> no Buzz '' ==> output is 'Fizz'
i = 5 ==> no Fizz '' ==> yes 'Buzz' ==> output is 'Buzz'
i = 15 => yes 'Fizz' ==> yes 'Buzz' ==> output is 'FizzBuzz'

The ternary operator will allow assigning a value if condition checks and an alternate value if it fails in a very terse manner.

Something else became obvious, we are outputting either a string or a number while we cycling through the values of i and as we saw in a previous section an empty string is a falsy value. So how do we translate all that intelligence into working code?

The essential piece to achieve that was that the value of output was either going to be one of the possible strings 'Fizz', 'Buzz', 'FizzBuzz' or be falsy. In the falsy case i will just be passed as is.

So the final rewrite with more comments

function fizzBuzz( start = 1, end = 100) {
    for( let i = start; i <= end; i++) {
        let output =  ( (i % 3) ? '' : 'Fizz' ); // output is assigned a value or empty
        output += ( (i % 5) ? '' : 'Buzz') ; // output concatenates the next value
        console.log(output || i); // || or operator if output is falsy will show i value
    }
}
fizzBuzz(1,15);

Hopefully, you followed all of that :) This was a very satisfying solution to me since I believe it was easy to read, solved the problem and had a touch of eloquent JavaScript in it.

Final words

The coding exercise covers only one aspect of the many things that happen during the coding interview.

As I mentioned the steps and being able to deliver, regardless of the complexity of the problem, take a solid amount of practice.

Don't hesitate to use mock interviews (we will be offering some in Javascript soon but more on that later) to practice the conversational aspect of it.

I hope this was useful, share and live a comment if you please :)

4 more relevant JavaScript questions to help fix the broken coding interview

Ady Ngom — Wed, 08 May 2019 13:37:34 +0000

As a quick refresher, there is a general sense that technical interviewing is broken. JavaScript is probably the most popular programming language today and certainly part of the top fives.

Hiring the right candidate in the JS world - which has become a multiverse - is turning into an experimental art form.

I have, like many before and many more to come, been a witness of the impact of a poor screening process and this is my attempt to be a part of the solution.

You can read more about my mission statement in the first article of the series but without further ado here is your next relevant four in descending order for a change.

#8. Input autocomplete
Best suited for: Senior | Expert Stage: At home | Round 2 | Onsite

#8A. The challenge
The UX team has insisted that the country search input form needed to be more user-friendly.

They have their mind made on a "simple" autocomplete search box. What's not so simple and not obvious to the UX team, is that you have a huge dataset of possible results that would not be feasible to store on the client side.

Your task is to create a program that listens to user input events and fetches a list of possible matches. The UX team is not a big fan of dirty matching and wants the list to only show the country names that start with the search term entered by the user - oh and they want matches to be highlighted by the way on the list results

8B. The context
I have had similar tests provided and with usually a 48 to 72 hours to submit it back. I strongly advise that you use all the time allocated to come up with the most refined solution available.

This has the advantage to mimic to a certain extent what an actual user story might be and you are given time to execute.

And please, please don't just go blindly copy and paste a solution that you do not have a full grasp on.

You will be expected to come on site or online to talk about your solution, your reasoning and more than often a 'feature creep' will happen during evaluation to see how you will handle it.

For this particular problem, the async nature of the search and filter is going to be the first hurdle, but I would not personally start there. I would probably start with a small set of local data and focus on making the autocomplete and highlight as solid as possible.

As an interviewer I would love to see the candidate talk about and integrate all or most of the concepts below:

Throttle link
Debounce link
Caching
Memoization link
Error Handling

Take-homes are more challenging than they might seem at first. Usually, enough is given to get you started, but a lot is expected on your delivery.

#7 Mini testing library
Best suited for: Junior | Senior | Expert Stage: Round 3 | Onsite

#7A. The challenge
The dev team is shyly making its debut to the TDD approach. They don't want to commit yet to a full-fledged library but want to write simple tests directly on the console to test their most important functions. They have dubbed the experiment project dotLog and have provided the initial structure below:

var dotLog = ( function() {
 return {
    describe(desc = 'test description:', testSet = []) {
        console.groupCollapsed(`${desc}: 0 passed - 0 failed`);
            // console out each test
        console.groupEnd();
    }
 }
}());

The describe method takes in a test label string and an array of test objects. The test object uses the following model:

var testOne = { rule: ( 3 < 4), label: " 3 is less than 4" };
var testTwo = { rule: (Math.max.apply(null,[3,4,1,2,0]) === 4), label: " should output 4" };

Now those can be added to a testSet and be passed to the describe method

var testSet = [testOne, testTwo];
dotLog.describe("Basic Math tests:", testSet);
Given the following 'naïve' function
function sum (x, y) {
    return x + y;
}

Fix it and the describe method so the following output is displayed:

sum(): 3 passed - 1 failed
    √ Should return 0 if no arguments
    √ Should add two numbers
    √ Should add up any amount of numbers
    x Should convert any non-digit to 0 and return the right amount

#7B. The context
I have had my share of rejections but have also been very successful at landing the job. In all the interviews I have been through, only two companies have ever presented a challenge similar to this one.

The particularity of it was that I was actually seating with the entire development team, where would eventually be my work station and participated in the standup and was given half the day to solve for the problem. At the end of the four hours, I was taken to lunch and bid farewell.

Though I landed both of those, the interesting part was the process. I got to work directly in what would be my daily environment, the challenge was an actual user story in their backlog.

I could not cheat on my soft skills if I wanted to be successful, I had to reach out to my "soon to be" teammates to find out more details, or a quick setup issue. I had to submit my changes via a PR.

Word of advice, commit often and use descriptive messages about your changes.

In summary, I think companies can invest some time in accommodating this type of setup. Another approach might be to give it as an at home exercise with a time limit and have the candidate come and discuss her solution onsite with the team.

#6 Vending machine
Best suited for: Junior | Senior | Expert Stage: Round 2 | Round 3 | Onsite

#6A. The challenge
Bob runs a successful Vending Machine business. He wants to add an interface that makes them a bit user-friendly and make it easy to add and track inventory. Below is the typical inventory model for the machines:

const drinks = {
    1: { name: "Mango Juice", stock: 2 },
    2: { name: "Banana Smoothies", stock: 2 },
    3: { name: "Guava Mix", stock: 1 },
    4: { name: "Citrus Blend", stock: 3 }
  };

Write a program that creates an instance of the Vending Machine (VM) with the following specifications:

The VM needs to be passed an inventory object in order to create an instance
If the object is not passed, the program should throw a descriptive error:

const vm = new VM(drinks); // instance get created
// but
const emptyVM = new VM(); // throws a no inventory error

VM should assign the newly passed inventory to a private drinks variable that is not modifiable from the instance

vm.drinks; // should output undefined

VM should have a callable sale method that takes the drink id as an input and return a success message if in stock or a failed message if out of stock
VM will always deduct one (1) from the product id stock after a successful sale

vm.sale(1);
// output: 1 Mango Juice - Thank you, come again!!
vm.sale(1);
// output: 1 Mango Juice - Thank you, come again!!"
vm.sale(1);
// output: Mango Juice is out of stock :( Come back tomorrow
vm.sale(4);
// output: 1 Citrus Blend - Thank you, come again!!

Finally VM should also have a callable stock method. It does not take any parameters and should display the total count of available drinks.

The drinks object given as an example has a total of 8 drinks. After buying 2 mango juice, the output of the stock method should 6. it should also output 'Out of stock' if empty.

vm.stock(); // should output total of all drinks left or Out of stock

#6B. The context
Function with a constructor, new ES6 class, or Object create?? There are so many ways to approach this that I hope that the interviewer should be as prepared as the candidate.

A solid understanding of closures is going to help tremendously. It will be interesting also to see how the candidate approach scope and private variable and see if any design patterns are implicitly or explicitly used.

I think that no matter the level of the candidate, this type of exercise should allow touching on many key concepts of the JS language.

#5 Code analysis and possible refactor
Best suited for: Senior | Expert Stage: Round 2 | Round 3 | Onsite

#5A. The challenge
The sales team wants to have a small program that helps them remove any duplicates from a batch of tickets. Tickets batches are usually between 1,000 to 10,000 unfiltered items. The following solutions have been submitted by 3 developers in your team.

Developer 1

if( !Array.prototype.uniq ) {
    Array.prototype.uniq = function() {
        let _singles = [];
        const arr = this;
        for ( let i = 0; i < arr.length; i++ ) {
            if(_singles.indexOf(arr[i]) === -1 ) {
                _singles.push( arr[i] );
            }
        }
        return _singles;
    }
}

Developer 2

if(!Array.prototype.uniq) {
    Array.prototype.uniq = function() {
        return this.reduce( (arr, val) => {
            if (!arr.includes(val)) arr.push(val);
            return arr;
        }, [] );
    }
}

Developer 3

if(!Array.prototype.uniq) {
   Array.prototype.uniq = function() {
       return new Set([...this]);
   }
}

Two tests files are provided onekTickets.js and tenkTickets.js.

Only one solution can be pushed to production. Which, if any, would you pick based on readability and performance?

Can any of the proposed solutions be even more optimized to get to a better one?
What would be the PR message you will leave for each of the developers regarding their solution and why it was or was not chosen?

#5B. The context
In a normal development environment, you will be expected to read, evaluate and eventually critique other people's code.

The PR reviews are a critical step in making sure quality code is being pushed to the main repo.

Now each team or company can have their own take about how to define quality, but cannot walk away from clearly outlining standards, conventions and coding culture.

This type of question is both beneficial to the employer but to the candidate as well. Your main interaction with the team will be through similar exercises on a daily basis.

As an interviewer, my expectation will be for the candidate to reference some benchmarking tools to help determine which block of code is the fastest.

I surely will be impressed if she could eyeball it and clearly explain why, but since we are talking about giving feedback, it will be always easier to show rather than just tell.

console.time and console.timeEnd might kick off the conversation in the right direction, jsperf.com is also one the industry's favorite, but ultimately looking for, suggesting, doing a basic setup and running a quick benchmark would be a clear winner.

Finally, I would like to have an open discussion about readability, and maybe why sometimes it might be beneficial to sacrifice a little speed in spite of it.

In closing
This ends the second batch. Today we have introduced a DOM-related exercise with the input autocomplete. Expect a lot more of those to come in the next installment.

In the meantime don't forget to share, clap or whatnots but most important to add to the discussion in the comments.

Cheers

Javascript Sock Merchant Challenge - Solution 2

Ady Ngom — Fri, 26 Apr 2019 16:16:08 +0000

You can find Part 1 here

02:15

Javascript Sock Merchant Challenge - Solution 1

Ady Ngom ・ Apr 23 '19

#showdev #javascript #beginners #career

The challenge

Hacker Rank Sock Merchant Page

John works at a clothing store. He has a large pile of socks that he must pair by color for sale. Given an array of integers representing the color of each sock, determine how many pairs of socks with matching colors there are.

The code

javascript
function stockAndCount( n, arr ) {
let pairs = 0;
const colors = arr.reduce((acc, val) => {
(!!acc[val]) ? acc[val] += 1 : acc[val] = 1;
return acc;
}, {});

Object.keys(colors).forEach( n => {
    let _pair = parseInt( colors[n] / 2);
    if ( _pair >= 1 ) pairs += _pair;
});

return pairs;

}

Video Transcript

In part 1 we solved the challenge using a sort first and compare approach, let’s clean up and look at an alternative solution.

Using the stockAndCount function, we will create an object that will stock each of our colors as keys.

So we will still create a pairs variable, then we will have a colors variable here but using the reduce method here we will be building up this object as we go.

In the reduce callback we setup an accumulator and the current value - doing this on the fly we check to see if our current value exists as a key in our accumulator object, if so we add one to it if not we create the key and initialize it with 1.

Let’s not forget to add the empty object as the second argument and return the accumulator after each iteration

Let’s make sure the function is properly closed

What we have done above is what I call the Dictionary approach.

Now that we have an object with each color as a key ket’s loop through it.

We iterate through each key and we create a local pair variable. We initialize the pair by dividing the colors n key value by 2

Now we can check if the pair value is greater or at least equal to 1. If true we can increment the total pairs value on line 17 with the number of pairs found

We can then simply return the total count after the loop. Running it in the terminal gives us again 3 pairs - If that went too fast let’s add to our console statement and run it again

We first used a sort and count approach in the last episode and today we looked at the Dictionary approach to stock each color as key and total up the pair count.

In the next and final episode we will discuss why the second approach is a better approach. In the meantime please let me know what you think about each and why one might be better than the other in the comments.

Cheers

CSS Grid Layout - A "Quick" Overview

Ady Ngom — Thu, 25 Apr 2019 16:06:54 +0000

A quick warning and request

One of my friend told me that he learned a lot from the video even though it was a bit long - 25mn is kinda long. If you speed it up to 1.5x it is still watchable but at 2x I start to sound like a total chipmunk and you might find it entertaining.
I hope you enjoy it and learn something from it if CSS Grid is new to you. I really miss working on the User Interface side, let me know in the comments if you would like to see more posts around UI

In this tutorial we’ll take quick look at the power offered by the CSS grid system. It’s almost time to get rid of all the framework code you’ve grown so used to once you see the potential of the CSS grid.

The starter coded is added inline or you can copy it from here:
Grid starter code

And the template used can be downloaded here:
Elton UI Kit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Elton ui Kit</title>
    <style>
        @import 'https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400';

        html {
            background-color: #eee;
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        body {
            counter-reset: section;
        }
        .wrapper {
            width: 1170px;
            margin: 30px auto;
            box-sizing: border-box;
        }
        .box {
            border-radius: 3px;
            background-color: #ffffff;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
        }
        .hero-fashion > .box {
            width: 1170px;
            height: 505px;
            margin-bottom: 30px;
        }
        .row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-auto-rows: 238px;
            grid-gap: 30px;
        }
        .tall-span {
            grid-row: span 2;
        }
        .wide-span {
            grid-column: span 2
        }

    </style>
</head>
<body>
    <div class="wrapper">

        <!-- hero section -->
        <div class="hero-fashion">
            <div class="box"></div>
        </div>

        <!-- grid section -->
        <div class="row">
            <div class="box tall-span"></div>
            <div class="box wide-span"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box wide-span"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

Javascript Sock Merchant Challenge - Solution 1

Ady Ngom — Tue, 23 Apr 2019 18:39:37 +0000

READ FIRST: As noted in the comments and on the twitter thread, the solution in part 1 is not necessarily a performant one. A second solution will be shared in the second part and is usually more optimized for these types of challenges.

A quick preface

Truth be told I'm not a fan at all of algorithm code challenges. That might be surprising to hear from someone who's putting up a tutorial on how to solve one, and who on top of it has made a mission of 'fixing the Javascript Interview process'. The reality is that, if you are to get hired anywhere as a Javascript developer, it would be hard and almost impossible in the current state to bypass these types of challenges.

Hacker Rank is the perfect playground to get your feet wet and build up your algorithms-building skills. The Sock Merchant challenge is one of the fun ones. It might be a bit scary if you have never been presented to problems this way, but I can guarantee you that you are subconsciously solving way more complex ones every day.

The challenge

Hacker Rank Sock Merchant Page

The code

function sortAndCount( n, arr ) {
    let sorted = arr.sort( (a,b) => a - b);
    let pairs = 0;

    for (let i = 0; i < n - 1; i++) {
        if ( sorted[i] === sorted[i + 1]) {
            pairs++;
            i += 1;
        }
    }

    return pairs;
}

Video Transcript

So one way to solve for the sock merchant challenge is to sort the array, compare each item side by side to find a pair and total the number of pairs we find

So our first step, we will create a variable to hold the sorted array and use the built-in sort method the sort method can take a compare function as an argument. The passed-in compare function will ensure that items are sorted in ascending order

Next, we create a pairs variable which will hold the final count, we default it to 0

At this point, this would be the expected output from sorted if we were to pass in our socks array

Next, we set up a for loop.
We naturally start at index 0 but since we are going to compare items side by side we make a full stop at last index

Now we can compare each item of the array with its direct sibling to
Find a pair

We increment the pair's value if we find a match. We also increment i
By one to skip the next item since we have already checked it

If the two items do not match the normal loop cycle will continue

We have now sorted and compared side by side let’s run our solution

This is a good first solution suitable for small arrays but can surely be improved upon. Let me know about your take on it in the comments

I Want to start a mini JS conference catering to beginners. What do you think?

Ady Ngom — Mon, 22 Apr 2019 21:46:01 +0000

Hello, all. Some of you might cringe at the idea of 'Yet Another Tech Conference', but I will plead with you to read me out here for a minute.

We have been blessed | spoiled | overwhelmed | fatigued - pick your devil, by the amount of Javascript conferences that have sprouted along. There is a need for it and it definitely helps our community as a whole feel more connected, vibrant and more important move forward.

The flip side of it though is that I personally feel like, though the content and events have been getting better, the largest portion of our community - beginners to early intermediates - are being completely left off.

I remember the first time I went to the jQuery conference and John Resig himself was there with speakers such as Nicholas Zakas, Paul Irish, Alex Sexton etc... I was in awe to see these amazing individuals sharing their craft. But when the dust settled, and I went back to my studio apartment I came to one big realization: dude I totally suck at this, I could not relate or begin to comprehend the level in which these people were navigating.

I, fortunately, stayed with it but subconsciously was avoiding to go through another one and feel like a plain idiot when it seemed so obvious to the rest of the world.

Long story short, I want to create a different feel to this great community event model. The idea has been in my head for a while, but I was very inspired by the tinyconf model and Sid's article.

Lessons learned from starting a small conference

Sid ・ Apr 22 '19 ・ 5 min read

#conference

I want to mirror that model with those at the early stage or who just started to figure it out as the main audience.

What do you think??

[Video] Javascript - Quick tips on how to add items to array

Ady Ngom — Sat, 20 Apr 2019 22:04:44 +0000