git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

It gives you a graph, commit hash (red), decorations like branch names (yellow), commit subject / message (white), relative time (green), and author name (blue, wrapped in < >).

Make it an alias so you can just type git lg:
git config --global alias.lg "log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

Of course there are definitely nicer looking options in VS Code, VS Code extensions, stand alone Git GUIs, etc., but this is one of the best git log options to just run it from the terminal.

This problem is described:

Two strings are considered close if you can attain one from the other using the following operations:

• Operation 1: Swap any two existing characters.

  • For example, abcde -> aecdb

• Operation 2: Transform every occurrence of one existing character into another existing character, and do the same with the other character.

  • For example, aacabb -> bbcbaa (all a's turn into b's, and all b's turn into a's)

You can use the operations on either string as many times as necessary.

Given two strings, word1 and word2, return true if word1 and word2 are close, and false otherwise.

Example 1:

Input: word1 = "abc", word2 = "bca"
Output: true
Explanation: You can attain word2 from word1 in 2 operations.
Apply Operation 1: "abc" -> "acb"
Apply Operation 1: "acb" -> "bca"

Example 2:

Input: word1 = "a", word2 = "aa"
Output: false
Explanation: It is impossible to attain word2 from word1, or vice versa, in any number of operations.

Example 3:

Input: word1 = "cabbba", word2 = "abbccc"
Output: true
Explanation: You can attain word2 from word1 in 3 operations.
Apply Operation 1: "cabbba" -> "caabbb"
Apply Operation 2: "caabbb" -> "baaccc"
Apply Operation 2: "baaccc" -> "abbccc"

Constraints:

• 1 <= word1.length, word2.length <= 105

• word1 and word2 contain only lowercase English letters.

Key Insights

This problem does not seem that approachable until coming to the following two key insights:

• You can freely reorder the existing letters in a string by swapping any two existing letters. This is done through operation 1 in the problem description. For example, abcde -> aecdb .

• You can also freely reassign the frequencies that any letter occurs. This is done by transforming every occurrence of one existing character into another existing character, and doing the same with the other character. This is done with operation 2 in the problem description. For example, aacabb -> bbcbaa , (all a's turn into b's, and all b's turn into a's).

These insights are not easy to come by at first glance. A good way to approach something like this is to play around with the two operations with a few example strings. While doing this, think about questions like:

• What is the operation really doing?

• Is there a more basic, more abstract way to describe what the operation is doing?

If that doesn't work, luckily for this problem, the two insights are listed in the hints for the problem.

Solution

Since you can freely reorder the strings, and freely reassign the frequencies of the letters to other letters, this means that you just need to find a way to test whether the strings consist of the same letters, and whether the letter frequencies (separate from any particular letters) are the same for both strings.

Here is one way to solve the problem, annotated with explanations along the way:

var closeStrings = function(word1, word2) {
    // If the strings are not the same length, return 
    // false as there is no way they'll be considered 
    // "close" per the problem description
    if (word1.length !== word2.length) 
        return false;

    /* Process each string with the helper function 
    getData (see below). The data1 & data2 variables get 
    assigned to an object returned by the function. That 
    object has an array of letters from the string and an 
    array of their frequencies, both sorted. The frequencies 
    are just an array of numbers, no longer associated with 
    any particular letter. */
    const data1 = getData(word1);
    const data2 = getData(word2);

    // Loop through the array of letters from data1, which 
    // came from processing the first string. 
    for (let i = 0; i < data1.ltrs.length; i++) {
        /* if the sorted arrays of letters from both strings 
        do not match, return false, or if the sorted arrays of 
        frequencies do not match, return false */
        if(data1.ltrs[i] !== data2.ltrs[i] 
           || data1.times[i] !== data2.times[i]) 
            return false;
    }
    // Otherwise, return true, since the two strings 
    // are considered "close"
    return true;
};

/* A helper function that is used above to process the 
strings and return an object {ltrs: [array of letters], 
times: [array of numbers representing frequencies that 
letters occurred in the string]} */
function getData(word) {
    /* Create an empty object. It will store letters from 
    a string as keys and the number of times they appear 
    in the string as values */
    const map = {};

    // Loop through the string
    for (const char of word) {
        // If the letter does not exist as a key in the 
        // map object, add it with a value of zero
        if(!map[char]) map[char] = 0;
        // Increase the value of the letter/key in the map 
        // object by 1. This is recording the number of times 
        // the letter occurs in the string
        map[char]++;
    }

    /* Return an object with the key ltrs containing an 
    array of the string's letters. The key times contains 
    an array of the number of times the letters occurred. 
    Times is just an array of numbers (the frequencies). 
    The point here is that we ultimately want to test if 
    the letters from both strings are the same. We will 
    also test if the frequencies - separate from and not 
    associated with any letters because they can be freely 
    reassigned - are also the same. */
    return {
        // ltrs gets assigned the keys of the map object 
        // (which are letters), sorted
        ltrs: Object.keys(map).sort(),
        /* times gets the values of the map object 
        (frequencies), sorted. The callback is passed to 
        the sort function to sort numbers properly, because 
        sort tries to sort values after converting to 
        strings, which can cause errors when sorting numbers. */
        times: Object.values(map).sort((a, b) => a - b)
    }
}
/* Note - the letters and frequencies are both sorted so 
that we can use a loop to compare whether they are the 
same as letters and frequencies in the other string above. 
Sorting makes it easy to loop through and check if the 
values of arrays for both strings are the same at the 
same index. */

Here is the solution without the comments:

var closeStrings = function(word1, word2) {
    if (word1.length !== word2.length) 
        return false;

    const data1 = getData(word1);
    const data2 = getData(word2);

    for (let i = 0; i < data1.ltrs.length; i++) {
        if(data1.ltrs[i] !== data2.ltrs[i] 
           || data1.times[i] !== data2.times[i]) 
            return false;
    }
    return true;
};

function getData(word) {
    const map = {};

    for (const char of word) {
        if(!map[char]) map[char] = 0;
        map[char]++;
    }

    return {
        ltrs: Object.keys(map).sort(),
        times: Object.values(map).sort((a, b) => a - b)
    }
}

Install NPM package

First, install the NPM package with npm i google-map-react.

Create a map component

There is code on the NPM google map react page to get started building a map component.

• Import the NPM package at the top of the map component withimport GoogleMapReact from 'google-map-react';
• Build a standard component with props of zoom and center
• Add a prop for markers if desired
• Use the component and pass in the props

import GoogleMapReact from 'google-map-react';
import style from './Map.module.css';

export default function Map({center, zoom, markers}){

  return (
    <div className={style.map}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: process.env.REACT_APP_API as string }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        {markers}
      </GoogleMapReact>
    </div>
  );
}

The bootstrapURLKeys prop requires an API key. In the above example it is stored in an environment variable. Go to the Google cloud console to get one. It must be used in the front end here and would be insecure in the browser, but the Google cloud console allows you to restrict the API key to certain sites or IP addresses.

Markers component

Above, I am passing the variable markers as a prop to the map component. The markers variable is an array of marker components. They could be any React component. They need the props lat and lng in order to be placed on the map at the desired location. Below is an example of creating some markers from data fetched from a back end. The markers later get passed to the map component.

useEffect(() => {
    fetch(`/locations`)
    .then(r => {
      if(r.ok) {
        r.json().then(data => setMarkers(data.map(loc => 
          <Marker key={loc.id} 
            id={loc.id} 
            name={loc.name} 
            lat={loc.coordinates.split(',')[0]} 
            lng={loc.coordinates.split(',')[1]}
              // lat and lng are just numbers for latitude and longitude
          />
        )));
      } else {
        r.json().then(err => console.log(err));
      }
    })
  }, [])

The markers are passed to the map component when it is called like this:

<Map center={{lat: 39.725194, lng: -105.175531}} zoom={7} markers={markers}/>

The center prop is an object with lat and lng keys, and zoom is an integer. The map component must have a defined height and width, otherwise it will not appear. In this example, it is the <div> containing the <GoogleMapReact> component that has a set height and width.

What it looks like

The markers can be customized to be anything, have modal windows appear when hovered, etc.

PostgreSQL

Heroku does not work with SQLite, so your app uses SQLite, you have to switch to using PostgreSQL in production. In your Gemfile in the root folder, remove gem "sqlite" and place it inside a development block so as not to use it for the deployment. Note: best practice would have been to use the same database type for both development and deployment.

group :development do
  gem "sqlite3", "~> 1.4"
  gem "pry", "~> 0.14.1"
  gem "rerun"
end

Add a production block to the Gemfile specify what the app will use once deployed. gem 'pg' adds an interface for Ruby to the PostgreSQL database. I also specified my deployment to use the 'psych' gem less than version 4 due to an error I was getting Psych::BadAlias: Unknown alias: default.

group :production do
  gem 'psych', '< 4'
  gem "pg"
end

It would also be a best practice to specify what version of Ruby you are using in the Gemfile. After editing the Gemfile, run bundle install.

Then edit config/database.yml to tell the app to use the PostgreSQL database in deployment. I changed the production block to the following:

production:
  adapter: postgresql
  encoding: unicode
  database: production

Procfile

Create a new file in the root directory of the app called Procfile. Add the contents: web: bundle exec rackup config.ru -p $PORT.

Heroku

Create an account and install the Heroku CLI if you haven't already. Next, go to Heroku.com, create a new app, import the repository from GitHub and deploy. I ran additional commands to run the database migration and then seed the database. Due to another error, I also removed require 'pry' from seeds.rb.

heroku run rake db:migrate

heroku run rake db:seed

Config Variables

I also added a config variable in Heroku with an API key I was using to seed the database. These can be set through Heroku's website by clicking the app > settings > and then a reveal config vars button. You can then add in the key and value. I deleted this variable after seeding, and it doesn't appear in this photo.

Frontend

Once the back end build is successful and you verify this by browsing to the API endpoints your front end is using, deploy the front end somewhere. Netlify is a good choice. You must make sure the URLs of all fetch requests in the front end go to the URL of the Heroku back end.

One way to do this instead of just hard coding in the URL is to use environment variables. In the root of the React front end, you can create two new files with these exact names: .env.development and .env.production.

In each file, assign a variable to the URL. The variable names must start with REACT_APP_ and there are no quotation marks around the string/URL. Mine looked like this:

• .env.development

  REACT_APP_URL=http://localhost:9292
  

• .env.production

  REACT_APP_URL=https://yelpcloneserver.herokuapp.com/
  

Then, anywhere in the front end you use a fetch, you can access the proper URL with process.env.REACT_APP_URL. React will determine which version of the URL to use based on whether the app is in development mode or production mode. The environment variable can be stored in a shorter variable to make the fetch URL look cleaner:

// Inside a React component

const url = process.env.REACT_APP_URL;

// code ...

fetch(`${url}/business/${id}`)
  // more code ....

Debug

If this is the first time you are doing this, it is exceedingly likely you will run into errors. Don't give up, check the logs on Heroku and any error messages, and start researching them on Google and Stack Overflow.

Links

Heroku docs:

• Getting started on Heroku with Ruby
• Sinatra on Heroku
• Heroku's statement on SQLite

Other guides:

• The Heroku Procfile
• Host your Sinatra app on Heroku
• Deploying a Sinatra app to Heroku
• Ruby Sinatra app and Heroku depoy

Yelp's star rating display rounds to the half star:

Yelp has over 5 million claimed businesses. Assuming an even distribution of average star ratings, rounding down from .2 and up from .8 suggests Yelp has over 2 million worth of fractions of stars either taken away or falsely awarded.

The version we will build here rounds to the tenth. It could go even further than this, but it wouldn't make a difference visually:

Star Rating Display

Overview

• Get the average star rating. This will be converted to an array.
• Calculate the number of full stars, the decimal/fraction of the partial star, and the number empty stars
• Push them into an array of 5, with 1s for full stars, a decimal for the partially filled star (like 0.3), and 0s for empty stars
• Map the array into divs and set the background color to a linear gradient that changes from your fill color (orange here), to an empty color (gray), based on the values in the array
• The 1s in the array become 100% full of the fill color, the partial star becomes partially full of the fill color based on the decimal, and the empty stars are 0% full of the fill color and only colored with the empty color

Code

const fullStars = Math.floor(starAverage);
  // Gets the number of full stars. starAverage is the rating, for example 
  // if the rating were 4.3, fullStars would now be 4.

const starArr = [];
  // Create an empty array. We will add 1s, 0s, and a decimal value for the 
  // partial star.

for(let i = 1; i <= fullStars; i++)
{
  starArr.push(1);
}
  // This adds a 1 to the array for each full star in our rating

if(starAverage < 5) {
  // Wrapped in an if block because the following only needs to occur if 
  // it's not a full 5.

  const partialStar = starAverage - fullStars;
    // Calculates the partial star. For example 4.3 - 4 = 0.3. 0.3 will get 
    // added to the array in the next line to represent the partial star

  starArr.push(partialStar);
    // Adds the partial star to the array

  const emptyStars = 5 - starArr.length;
    // Calculates the number of empty stars

  for(let i=1; i<=emptyStars; i++) {
    starArr.push(0);
  }
    // This for loop adds 0s to the array to represent empty stars
}

const stars = starArr.map((val, i) => {
  return <div key={i} 
    className={style.starBox} 
    style={{background: `linear-gradient(90deg, #ff643d 
    ${val * 100}%, #bbbac0 ${val * 100}%)`}}>★</div>
  })
  // This last block is explained in the following paragraphs below

The last block starting with const stars = takes the array of 1s, a decimal, and zeros we created and maps it to 5 div elements. The stars variable is then used later in the return statement of the React component where we want to show the star rating. The key to getting the color fill right is the style attribute.

style={{background: `linear-gradient(90deg, #ff643d ${val * 100}%, #bbbac0 ${val * 100}%)`}}>★</div> is setting the background color of each div using a linear gradient.

The first argument, 90deg, means the gradient color change is happening from left to right across the div. The next argument, #ff643d ${val * 100}%, is saying we start at the color orange, and continue right with solid orange until a certain percentage across. The percentage is calculated from val, which is the 1, decimal or zero coming from the starArr array. So if it is a 1, it colors orange 100% across the div for a full star. For a decimal, like 0.3, it will color orange 30% across the div.

The next argument, #bbbac0 ${val * 100}, is another color stop using gray, and the same calculated percentage. This just means that there is no smooth transition between colors because the percent value is the same as the last color stop, so there is an immediate change from orange to gray. Read the MDN linear gradient docs to learn more.

If the value getting mapped is a 0, then there will be no orange in the background of the div and only gray, because the switch from orange to gray happens at 0% of the way across the linear gradient.

Star Rating Picker

This is built in a similar way with some changes. The entire react component with commented explanations is below:

import React, { useEffect } from 'react';
import style from './StarRatingPicker.module.css';

export default function StarRatingPicker({ rate, rating, changeColor, color, 
  parent }) {

  const colors = ['#FFD56A', '#FFA448', '#ff7e42', '#ff523d', '#f43939'];
    // An array of colors going from yellow to dark red

  useEffect(() => {
    const i = colors[Math.floor(rating - 1)];
    changeColor(i)
  }, [])
    // This sets the initial color to state based on any initial rating.

  function hoverRating() {
    if (rating === 0) {
        return "Select your rating"
    }
    else if (rating === 1) {
        return "Not good"
    }
    else if (rating === 2) {
        return "Could've been better"
    }
    else if (rating === 3) {
        return "OK"
    }
    else if (rating === 4) {
        return "Good"
    }
    else if (rating === 5) {
        return "Great"
    }
  }
    // This provides text that goes with the different ratings

  const fullStars = Math.floor(rating);
    // Again calculating the number of full stars

  const starArr = [];

  for(let i = 1; i <= fullStars; i++)
  {
    starArr.push(1);
  }
    // Adding 1s to the starArr array to represent full stars

    if(starAverage < 5) {
      const partialStar = starAverage - fullStars;
      starArr.push(partialStar);
        // Calculate and add the partial star to the array as a decimal value

    const emptyStars = 5 - starArr.length;
      for(let i=1; i<=emptyStars; i++) {
      starArr.push(0);
        // Calculate and add the empty stars to the array as zeros
      }
    }

  const starRatingPicker = starArr.map((val, index) => {
    return <div key={index}
      className={style.starBox}
      onClick={() => rate(index + 1)}
      onMouseEnter={() => {
        rate(index + 1);
        changeColor(colors[index]);
      }
          // Again mapping the array to divs as in the previous example. 
          // Here we add an onClick listener to call a rate function that 
          // sets a rating state, which is used in a post to the server to 
          // create the actual rating.
          // ChangeColor sets a color state from the colors array at the 
          // top of the component, which will be used below
    } 
    style={{background: `linear-gradient(90deg, ${color}, ${color} 
      ${val * 100}%, #bbbac0 ${val * 100}%)`}}>★</div>
        // Setting the background color of the div. This is the same as 
        // the previous example, except instead of a hard-coded orange, 
        // the color value from state is used
  })

  return <div className={style.rating + ' ' + parent}>{starRatingPicker}
    <p className={style.hoverText}>{hoverRating()}</p>
    </div>
}

Solution

  describe "#print_board" do 
    it "prints current state of gameboard" do 
      game.board = ["O", "X", "O", "X", "O", "X", "O", "X", "O"]

      $stdout = StringIO.new
      game.print_board
      $stdout.rewind

      expect($stdout.gets).to eq(" O | X | O \n")
      expect($stdout.gets).to eq("-----------\n")
      expect($stdout.gets).to eq(" X | O | X \n")
      expect($stdout.gets).to eq("-----------\n")
      expect($stdout.gets).to eq(" O | X | O \n")
    end
  end

Ruby-Doc.org Definitions

• $stdout - The current standard output
• STDOUT - The standard output. It is the default value for $stdout
• StringIO - A class that is a "psuedo I/O on a string object."

What does any of this actually mean? Let's help Ruby-Doc.org out a bit

• $stdout - It's where the output currently goes. It can be reassigned to something else. If you reassign it to a file or a StringIO object, the output is now going there.
• STDOUT - This is where output goes at the time a Ruby process was launched. It is the default value for $stdout and unless $stdout is reassigned they are essentially the same. This is good because you can reassign $stdout to STDOUT to undo any reassignment you have made.
• StringIO - You can create a StringIO object from this class and do a number of things with it including write puts to it, or gets strings from it

Solution breakdown

The entire solution again:

  describe "#print_board" do 
    it "prints current state of gameboard" do 
      game.board = ["O", "X", "O", "X", "O", "X", "O", "X", "O"]

      $stdout = StringIO.new
      game.print_board
      $stdout.rewind

      expect($stdout.gets).to eq(" O | X | O \n")
      expect($stdout.gets).to eq("-----------\n")
      expect($stdout.gets).to eq(" X | O | X \n")
      expect($stdout.gets).to eq("-----------\n")
      expect($stdout.gets).to eq(" O | X | O \n")
    end
  end

Code breakdown

$stdout = StringIO.new

Assigns $stdout to a new StringIO object. Any console output is now being saved to a new StringIO object that $stdout points to.

game.print_board

This prints the board to the console.

$stdout.rewind

This calls a .rewind method available from the StringIO class (of which $stdout is pointing to a new instance of). This works basically like a tape, so our StringIO instance has been rewound and is at the beginning of the string input we captured.

      expect($stdout.gets).to eq(" O | X | O \n")
      expect($stdout.gets).to eq("-----------\n")
      expect($stdout.gets).to eq(" X | O | X \n")
      expect($stdout.gets).to eq("-----------\n")
      expect($stdout.gets).to eq(" O | X | O \n")

$stdout.gets simply gets the first line of the output we've captured. Any additional $stdout.gets will just get the next line, and then the one after that. Each string it received included '\n', designating a line break within a string, so the '\n' was included for the test to pass.

Reference

• Ruby-Doc.org
• Stack Overflow: How to test puts in RSpec
• Stack Overflow: Difference between $stdout and STDOUT in Ruby
• RSpec

navigator.vibrate()

At the spot in our code where we want to cause the phone to vibrate, just use navigator.vibrate(200); The 200 represents the number of milliseconds the vibration should last, and can of course be changed. For multiple pulses in a pattern, pass in an array of values. The array defines alternating times that the phone vibrates, pauses, vibrates, and so on:

navigator.vibrate([400, 300, 400])

Here the phone would vibrate for 400ms, stop for 300ms, then vibrate again for 400ms. There can be as many vibration/pause pairs "as you would like," according to Mozilla Developer Network (MDN) docs. But don't get too crazy, less is more here. No one wants their phone constantly vibrating every time something happens in a game. For haptic feedback on a button press, a very short time such as 50ms is probably about right.

Apple ...

The unfortunate reality about the vibration API is that this will only work on Android phones because Apple does not support it. Here is a Stack Overflow comment on the subject:

> From the developer prospective (trying to build an awesome website), it seems ridiculous that the vibration apis are not exposed for use on iOS; after all, it has been available in other browsers for almost 8 years. But when looked upon from Apple's perspective... think of all the terrible websites that would ruin your browsing experience by spamming vibration. They are smart enough to see that it would turn into another pop-up-ocalypse. And that is why we can't have nice things. -isaacdre >

In fact, just calling navigator.vibrate() when the user is on an Apple iPhone causes the entire program to freeze. But it's not an insurmountable problem.

Solution

A crashing Apple device can be prevented by first checking whether the device supports the navigator.vibrate() interface. Above the location where we actually want the vibration to happen, we can write this:

let canVibrate = false;
if('vibrate' in navigator)
  canVibrate = true;

We are creating a canVibrate variable that is set to false. It is then set to true only if the device supports the vibration interface. Then, at the spot where we want to cause the vibration, simply wrap it in an if block that checks if canVibrate is true:

  if (canVibrate) 
    navigator.vibrate(500);

What happens is that this will cause the vibration on Android phones, and do nothing on iPhones. The iPhone won't vibrate, but it also won't crash the website.

Stop vibration

It's possible to stop any ongoing vibrations by calling navigator.vibrate(0); However, it seems like a bad idea to be causing so much vibration or using setInterval() with this that we would need to stop the vibration.

What is navigator?

MDN says

> The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. A Navigator object can be retrieved using the read-only window.navigator property. >

The navigator interface also gives us a number of other things like navigator.geolocation that can be used to get a geolocation object and use the location of the device.

TL;DR

Use navigator.vibrate(500) (or another number of milliseconds) to cause a vibration on a mobile device. But it will crash an iPhone since Apple doesn't support the interface, so it's best write code that first checks if the interface is supported.

array1 === array2 ?

To compare arrays in JavaScript, don't assume you can check whether the contents of two JavaScript arrays are the same with === or == (the strict equality or equality operators). You can't.

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];

array1 === array2    // returns false

The code above is checking if the above two variables refer to the same array instance, and not whether their contents are the same. It would only return true for something like this:

const array1 = [1, 2, 3]
const array2 = array1;     // both variables point to the same array instance

array1 === array2  // now returns true

Solutions

JSON.stringify()

One way to solve the problem is to use JSON.stringify(), which converts a value to a JSON string.

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];

JSON.stringify(array1) === JSON.stringify(array2)   // returns true

JSON.stringify even works with multiple levels of nesting:

const array1 = [1, 2, 3, {x: 5}, [1, {y: 7}, 3]];
const array2 = [1, 2, 3, {x: 5}, [1, {y: 7}, 3]];

JSON.stringify(array1) === JSON.stringify(array2);    // returns true

However, this method is not perfect. It is dependent on the JSON.stringify() method implementation not changing. There are also edge cases that produce strange behavior. Undefined is not a valid JSON value, so JSON.stringify() converts undefined to null, and this method could falsely return true in that case:

const array1 = [null, 2, 3];
const array2 = [undefined, 2, 3];


JSON.stringify(array1) === JSON.stringify(array2)
  // returns true, should be false

null === undefined     
  // returns false

array.every()

Another method uses array.every(). It first checks if the arrays are the same length, and then checks that each value in the first equals the value in the second at the same index:

const isEqual = array1.length === array2.length 
&& array1.every((value, index) => value === array2[index])

console.log(isEqual);

However, the array.every() way won't work for arrays nested with additional arrays or objects, which would need to be checked recursively.

Recursive methods

This can be done with the isEqual method from the Lodash library. According to this gist, it is doing something under the hood like the following:

const array1 = [1, [1, [{a: 'b'}]], 3];
const array2 = [1, [1, [{a: 'b'}]], 3];

const isEqual = (first, second) => {
  if (first === second) {
    return true;
  }
  if ((first === undefined || second === undefined 
|| first === null || second === null) && (first || second)) {
    return false;
  }
  const firstType = first?.constructor.name;
  const secondType = second?.constructor.name;
  if (firstType !== secondType) {
    return false;
  }
  if (firstType === 'Array') {
    if (first.length !== second.length) {
      return false;
    }
    let equal = true;
    for (let i = 0; i < first.length; i++) {
      if (!isEqual(first[i], second[i])) {
        equal = false;
        break;
      }
    }
    return equal;
  }
  if (firstType === 'Object') {
    let equal = true;
    const fKeys = Object.keys(first);
    const sKeys = Object.keys(second);
    if (fKeys.length !== sKeys.length) {
      return false;
    }
    for (let i = 0; i < fKeys.length; i++) {
      if (first[fKeys[i]] && second[fKeys[i]]) {
        if (first[fKeys[i]] === second[fKeys[i]]) {
          continue; // eslint-disable-line
        }
        if (first[fKeys[i]] && (first[fKeys[i]].constructor.name === 'Array'
          || first[fKeys[i]].constructor.name === 'Object')) {
          equal = isEqual(first[fKeys[i]], second[fKeys[i]]);
          if (!equal) {
            break;
          }
        } else if (first[fKeys[i]] !== second[fKeys[i]]) {
          equal = false;
          break;
        }
      } else if ((first[fKeys[i]] && !second[fKeys[i]]) || 
          (!first[fKeys[i]] && second[fKeys[i]])) {
        equal = false;
        break;
      }
    }
    return equal;
  }
  return first === second;
};

console.log(isEqual(array1, array2));    // returns true

References

• 30secondsofcode.org
• flexiple.com
• Stack Overflow
• Shubham Jain's gist

Well done parallax scrolling effects can add incredible depth and interactivity to a web page. This simple example uses a fixed background image. The site content is stacked on top and scrolling over it, while transparent <div> elements reveal the background. The background moves at 40% of the window scroll speed.

Link to site

Implementation

This works by stacking the fixed background image underneath the other elements by using a lower z-index. The revealing <div> elements act as a transparent window by using the opacity: 0; CSS property.

The parallax scroll effect of the background image is done with the following JavaScript:

const background = document.querySelector('#background');

const parallax = () => {
  const { scrollY } = window;
  background.style.top = (scrollY * -.4) + 'px';
}
window.addEventListener('scroll', parallax);

The code above is

• Getting the background element
• Attaching a scroll event listener to the window
• Every time the window is scrolled, the callback function gets the position the user has scrolled down vertically in pixels from window.scrollY
• It then moves the background image .4x the distance the window was scrolled by editing the CSS top property

Links

• Simple parallax example with instructions
• Parallax scroll effect best practices with some incredible examples
• The Boat - an amazing, immersive, storytelling experience for inspiration

Let's just say you're taking a break from spending 17 hours per day on Codewars on your holy quest to become an 8-Dan supreme master. Say you are trying to create a gameboard for a Battleship project. Say you are trying to do this with:

const board = Array(10).fill(Array(10).fill(0));

Don't... just don't...

What will happen here is you will seemingly have the board you wanted, an array of 10 filled with nested arrays of 10 zeros:

[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

You would then assume you can just change some of the values with:

board[0][0] = 'battleship';

You would assume wrong. Every single one of the subarrays will now be set to 'battleship' at index 0 and this could be very difficult to debug without understanding what's going on.

But Why

What happened here with Array(10).fill(Array(10).fill(0))?

Well, .fill is evaluated one time, so each "array" is not a separate array, but is actually the same thing - that one array instance. They are all different references to the same array instance. See this also.

The Solution

Use a method that will actually create separate array instances for each element in board, perhaps:

let board= Array(10);
    for(let i = 0; i < board.length; i += 1) {
      board[i] = Array(10).fill(0);
    }

A Similarly Counterintuitive Example

A similar situation could occur if you have a factory with a method that changes some variable, but you have only returned the reference to a variable, rather than another method/function that gets the current actual state of the variable. Consider this:

const player = () => {
  let health = 100;
  const hit = (damage) => {
    health -= damage;
  }
  return {health};
}

Counterintuitively, health does not represent the current value of the health property of the player object. It is a reference to the value (which was 100) right after it was created in the player object and subsequently returned.

If the player is attacked, the value of health should change. This could lead to an incorrect value of health always being 100, because it is pointing to the snapshot of the variable at the time it was created, rather than the current state of it on the player object.

Another Solution

To fix this, we would need a method that gets the actual current value of health:

const player = () => {
  let health = 100;
  const hit = (damage) => {
  health -= damage;
  }
  const getHealth = () => { 
    return health; 
  }
  return {getHealth};
}

Reference vs Instance

An instance of an object is an object that has been created and exists in memory. Reference to an object is something (like a variable) that points to an instance, allowing us to access it. See this link

In JavaScript, primitives (string, number, bigint, boolean, undefined, symbol, and null) are passed by actual values. For example, let name = 'Sal'; creates a space in memory to store the value 'Sal'. And let person = 'Sal'; makes a different space in memory for the value 'Sal'. Changing the value of name won't affect person, since they are at different memory locations.

Arrays, objects, and functions do not operate the same way. Multiple variables can point to the same array, object, or function. For example, after const people = ['hal', 'bob', 'sal']; and const persons = people;, both people and persons are referring/pointing to the same array object at the one same location in memory. Changing either would change the array.

The Odin Project (TOP) is a free, open source resource to learn web development. For those who can learn in a self-directed way, it provides a clear roadmap to gaining the necessary skills to launch a career in full stack web development.

Contribute

For people not new to development, there is a great opportunity to cement knowledge by helping others and answering questions on TOP's Discord channel, and to gain experience as a contributor to the project.

Build projects

The project-oriented style is engaging and practical, as ultimately what you are able to build and how you do it is the most important thing. Projects start very simple and progress through things like building a to do list, a Battleship game, and eventually things like a photo tagging app and an app replicating the core functionality of Facebook. There is also a section sharing wisdom on the job search process.

Community

One of the greatest things about it is the TOP's community on Discord, where users can help each other or discuss searching for jobs. The success stories channel is the best, where seemingly every few days someone posts about getting their first developer job, thanking the TOP community, encouraging others, and talking about the value of grit and perseverance. Here is one success story:

An incredible self-paced curriculum that consists of the best resources for learning programming on the web! It was an invaluable resource on my path to a becoming a software developer. Thanks to The Odin Project I was able to get a job half way through the curriculum, and the projects completed as part of the curriculum gave me an edge compared to other junior developers with no experience.