DEV Community: il3ven

Practice SQL using Cricket Dataset (Moneybowl)

il3ven — Tue, 31 Dec 2024 11:25:47 +0000

Introducing MoneyBowl!

Hello world! I have built a website where you can practice SQL on cricket stats. It's called 🏏 MoneyBowl.

If you are a fan of cricket and a data enthusiast, please visit. You can explore the data to find answers to questions you've always had or try to solve predefined queries.

Tech behind MoneyBowl

The website is built with Next.js. Users submit SQL queries, which are executed in the browser. If the results match the predefined answers, you earn points.

In-Browser SQLite

The database is loaded into memory using sqlite-wasm. All queries are executed in the browser, with no server involved.

Loading the Database into the Browser

The SQLite .db file loaded into memory is around 500MB. To load the database, users only need to download a pre-compressed Brotli file of around 50MB.

About the Data

The dataset is sourced from cricksheet.org and inserted into a SQL database by me. It contains information about players, teams, and matches. For each match, we have detailed information about each delivery, wicket, and run.

Nuitka vs PyInstaller | Distributing a Python application

il3ven — Thu, 11 May 2023 12:10:37 +0000

Alternative title: Execute Python code from other languages such as JavaScript
Alternative title: Can Python applications be compiled?

In broad terms, there are two ways to distribute your application to your users. Such that, your users don't require a working development environment. In other words, a standalone application.

Bundle

We can create a bundle that includes the Python interpreter, your application and all the other code your application depends on. PyInstaller does this.

Compile

We can compile your Python application and all the other code your application depends on to machine code. Nuitka can do this.

Difference between PyInstaller and Nuitka

Nuitka will convert your Python code and all of its dependencies into C code. It then compiles the C code using a standard compiler like GCC to machine code. The machine code can then be directly executed without a dev environment.

On the other hand PyInstaller will bundle your Python code, all its dependencies and include a Python interpreter in that bundle. The bundle can then be run without a dev environment.

Since Nuitka produces machine code reverse engineering it is harder. It is more suitable if you want to protect your IP. We can protect our code using PyInstaller too but that process requires more manual work (more information) and is not plug and play like Nuitka.

In terms of output size, I have found both to produce applications of similar size.

In terms of speed, the final application produced by Nuitka should be faster because it is compiled to machine code. But in practice I haven't found any significant difference.

PyInstaller and Nuitka solve the same problem but take different routes. Since there is no compiling involved in PyInstaller the distribution process is much faster.

Technically PyInstaller does compile

I have stated above that PyInstaller bundles your Python code but technically it bundles .pyc files and not .py files. .pyc are intermediate files generated by the Python interpreter by compiling .py files. .pyc files are not machine code. A Python interpreter is required to execute those files.

Check this excellent StackOverflow answer for more information.

What to do with a standalone Python application?

Distribute it as a CLI application.
Distribute it as a standalone script.
Make a GUI application using PyQT.
Use your Python code as a backend. We can expose an HTTP server from our standalone application. This HTTP server can be called by a frontend client or another backend service written in a different language. A good use case is to include the standalone application in an Electron app and the JavaScript frontend can execute Python code by calling the backend.

Help me out

I am looking for remote opportunities, full time or part time. I'm based out of India. I specialize in web development but my expertise lie in solving technical problems irrespective of the tech stack. You can reach out at to.vc95 (at) gmail (dot) com.

Your test cases should fail

il3ven — Sat, 22 Jan 2022 16:51:43 +0000

Writing tests are not enough. If the tests don't fail when a bug is introduced then what's the point of writing tests. Your test should fail when the application doesn't meet the requirements. In this article, we look at an example, then improve its test and later end with a few guidelines for writing tests.

Example

Suppose we are making an API that returns information about a user.

API

# GET /users/defunkt
$ curl https://api.github.com/users/defunkt

> {
>   "login": "defunkt",
>   "id": 2,
>   "node_id": "MDQ6VXNlcjI=",
>   "avatar_url": "https://avatars.githubusercontent.com/u/2?v=4",
>   "gravatar_id": "",
>   "url": "https://api.github.com/users/defunkt",
>   "html_url": "https://github.com/defunkt",
>   ...
> }

Test for the API

The following code sends a request to /user/defunkt. The test passes if the status code of the response is 200 else it fails.

test('if /user/:id API works', () => {
  const response = request(app).get('/user/defunkt');

  expect(response.statusCode).toBe(200);
})

What's wrong with the above test?

Imagine that while developing, someone makes a mistake and node_id is now missing from the API's response. Our test will still pass because the response status code is still 200.

Modifying the test to be more robust

Here, in addition to the status code, we check if the response has the desired properties.

test('if /user/:id API works', () => {
  const response = request(app).get('/user/defunkt');

  expect(response.statusCode).toBe(200);

  expect(response.login).toBeDefined();
  expect(response.id).toBeDefined();
  expect(response.node_id).toBeDefined();
  expect(response.avatar_url).toBeDefined();
  ...
})

Are we done?

We have made progress. Our test case fail when a property isn't present, but we can do better. If our API returns avatar_url: '' our app will crash but the test will still pass.

Modifying the test case to make them more robust

Here we check if avatar_url is a string and not an empty string.

test('if /user/:id API works', () => {
  const response = request(app).get('/user/defunkt');

  expect(response.statusCode).toBe(200);

  expect(response.login).toBeDefined();
  expect(response.id).toBeDefined();
  expect(response.node_id).toBeDefined();
  expect(response.avatar_url).toBeDefined();

  expect(typeof response.avatar_url).toBe('string');
  expect(response.avatar_url.length).toBeGreaterThan(0);
  ...
})

Guidelines for writing better tests

Code coverage is a necessary metric but not enough

In the subsequent iterations of our tests we didn't increase the code coverage. We only added more expect statements. Thus, a higher code coverage doesn't mean better tests.

When a bug is found, write a test for it

Great tests can't always be written in the first iteration, but over time they can be improved. Writing a test case for a bug ensures that the bug doesn't resurface.

Test driven development (TDD)

By the nature of TDD, it ensures that all your requirements are written down as tests. If the code fails to meet any requirement, the tests will fail.

Use the philosophy that your test should fail

In our first and second iterations, the test case did not fail in certain cases. Add a test for everything that can go wrong. In the above example, a property could be undefined, so we added an expect for it.

Easily implement Infinite Scrolling using Intersection Observer in vanilla JavaScript

il3ven — Fri, 23 Jul 2021 18:34:41 +0000

What is infinite scrolling?

It is when more items keep loading as we scroll. Below is a GIF for visual representation.

View this GIF in action

Difficult way to do it (using `getBoundingClientRect`)

Here we are discussing the difficult way in brief. It is to build up are appreciation for the better method (i.e Intersection Observer).

To implement infinite scrolling we would have to add a scroll event listener to a HTML Element. This will fire a callback every time the element gets scrolled.

In the callback we can use getBoundingClientRect to determine the relative position of any element. getBoundingClientRect returns us the left, top, right, bottom property of the element.

Using left, top, right, bottomwe can determine if the element is in our view port. If it is then we can add more items to our list or do perform some other action.

Here is a demo of getBoundingClientRect function.

Reasons to not use `getBoundingClientRect`

Complicated and requires to write more code. Hence, more chances of bugs.
Performance issues: The callback fires with each scroll and computes the logic. It all also runs on the main thread.

Easy way to do it (using `IntersectionObserver`)

Using IntersectionObserver we can observe any target element for its intersection with another element or the viewport. In simpler words, if the target element enters or leaves our viewport then a callback will be fired.

Note - Old browsers may not support the IntersectionObserver API. Check the latest support at MDN.

HTML structure of our example

<main  id="main">
  <h2>List of Random Names</h2>
  <ul id="ul"></ul>
  <button id="load">Load more names</button>
</main>

We have a unordered list (ul) and a button at the end of the list. This is how the above HTML structure looks when rendered.

Observing the 'load more names' button using IntersectionObserver

We will add an IntersectionObserver over the 'load more names' button. Whenever the button enters our view port a callback will be fired which will add li tags under the existing ul tags.

Adding an IntersectionObserver to the button

const loadBtn = document.getElementById('load')

// Observe loadBtn
const options = {
  // Use the whole screen as scroll area
  root: null,
  // Do not grow or shrink the root area
  rootMargin: "0px",
  // Threshold of 1.0 will fire callback when 100% of element is visible
  threshold: 1.0
};

const observer = new IntersectionObserver((entries) => {
  // Callback to be fired
  // Entries is a list of elements out of our targets that reported a change.
  entries.forEach((entry) => {
    // Only add to list if element is coming into view not leaving
    if (entry.isIntersecting) {
      // Perform some operation here
    }
  });
}, options);

observer.observe(loadBtn);

For detailed information on the options to IntersectionObserver visit the MDN page.

Adding items to the list

Using the above code we have added an observer to observe the load button. Now we need a function to fetch and add items to the list.

We will call this inside the callback.

async function addNamesToList(ul_id, num) {
  const ul = document.getElementById(ul_id);
  // Mock func to return array of dummy names
  const names = await mockAPI(num);

  // For each name in names append it to the ul element
  names.forEach((name) => {
    const li = document.createElement("li");
    li.innerText = name;
    ul.appendChild(li);
  });
}

Combining all the Code

import mockAPI from "./mockAPI";

const loadBtn = document.getElementById("load");

async function addNamesToList(ul_id, num) {
  const ul = document.getElementById(ul_id);
  // Mock func to return array of dummy names
  const names = await mockAPI(num);

  // For each name in names append it to the ul element
  names.forEach((name) => {
    const li = document.createElement("li");
    li.innerText = name;
    ul.appendChild(li);
  });
}

(function () {
  addNamesToList("ul", 50);

  // Observe loadBtn
  const options = {
    // Use the whole screen as scroll area
    root: null,
    // Do not grow or shrink the root area
    rootMargin: "0px",
    // Threshold of 1.0 will fire callback when 100% of element is visible
    threshold: 1.0
  };

  const observer = new IntersectionObserver((entries) => {
    // Callback to be fired
    entries.forEach((entry) => {
      // Only add to list if element is coming into view not leaving
      if (entry.isIntersecting) {
        addNamesToList("ul", 10);
      }
    });
  }, options);

  observer.observe(loadBtn);
})();

loadBtn.onclick = () => {
  addNamesToList("ul", 10);
};

In addition to the IntersectionOberserver we have also added an onClick handler to the load more names button. As a fallback, if the IntersectionOberserver doesn't work then the user can also click on the button to load more names.

Demo and Complete Code

Code Sandbox

Pythagorean triplet in an array - Interview Question

il3ven — Thu, 22 Jul 2021 14:45:52 +0000

Pythagorean triplet in an array - Interview Question

In the problem of Pythagorean triplet we are given an array of numbers.

array = [1, 2, 3, 4, 5]

We have to return true if there exists a triplet of (a, b, c) such that a^2^ + b^2^ = c^2^.

For example, in the above array the triplet (3, 4, 5) satisfies the condition.

3^2 + 4^2 = 5^2
9   + 16  = 25

Solution

There are three different methods to solve the problem Pythagorean triplet in an array.

Naive

Use three loop to check all triplets. Time Complexity - O(n^3).
Sort the Array

First sort the array. Fix one number out of the three triplet. Let it be a. Find b and c in O(n). Total time complexity - O(n^2)
Hashing

First create a hashmap of the array such that finding if an element exists an array takes O(1) time. Then iterate over all pairs (a and b). For each pair check if sqrt(a^2 + b^2) exists in the array using the hashmap. If it exists then we have found a triplet. Time complexity - O(n^2)

Read below to find more detail on each solution to solve the Pythagorean Triplet problem.

Simplifying the problem

Our task is to find if a triplet (a, b, c) exists such that c^2 = a^2 + b^2. If we square each element of the given array then the problem simplifies to finding a triplet (a, b, c) in the new squared array such that c = a + b.

Example

array = [1, 2, 3, 4, 5]
squaredArray = [1, 3, 9, 16, 25]

The problem simplifies to find a triplet (a, b, c) from squaredArray such that c = a + b. The triplet in this example that satisfies the condition is (9, 16, 25) because 25 = 16 + 9.

Naive Method

Find all the possible triplets in the array and for each triplet check if it satisfies the condition.

def pythagoreanTriplet(arr):
    squaredArray = [x ** 2 for x in arr]

    for i in range(len(squaredArray)):
        for j in range(i + 1, len(squaredArray)):
            for k in range(j + 1, len(squaredArray)):
                if (
                    squaredArray[i] == squaredArray[j] + squaredArray[k]
                    or squaredArray[j] == squaredArray[i] + squaredArray[k]
                    or squaredArray[k] == squaredArray[i] + squaredArray[j]
                ):
                    return True

    return False

Time Complexity to find Pythagorean Triplet in an Array using Naive Method

We are using three loops to check all the triplets. Hence, the time complexity is O(n^3) where n is the size of the array. The space complexity is O(1) as no extra space is used.

Sorting the Array

Intuition

The triplet that will satisfy the condition c = a + b will also satisfy the condition a <= c and b <= c. For an number c we only need to consider pairs (a, b) that are less than c.

Algorithm

Square each element of the array.
Sort the array in ascending order in O(n*logn) time.
Pick c to be an element from the sorted array.
Pick a to be the first element of the array. Pick b to be element just left of c.

Reason: As established in the intuition a and b should be less than c and all elements less that c are to its left.
If a + b > c then move b to it's left.
If a + b < c then move a to it's right.

(Note the invariant here. We only move a to the right and b to the left. This approach is known as the two pointer approach.)

Reason: If a + b > c then we need to reduce a + b which can only be done by moving a or b to the left. If we move a to the left we will be able to see new pairs but the sum of those pairs will always be less than c. This is because we have already considered the pair of elements left to a with the elements to the right of b. Since, the sum was less than c we moved a to the right. The only choice we are left with is to move a to the right. Similarly, the argument applies for a + b < c. We move b to the right.
If for the current c there is no pair (a, b) such that c = a + b then we pick a new c from the sorted array.
Keep picking new c until every element has been picked or we find the triplet.

In the above solution to the Pythagorean triplet problem we can start from c as the rightmost/largest element of the sorted array. This ensures that we have a large subset of the array in the first iteration from which we can find a and b. Further we can keep moving c to the left.

Time Complexity to find Pythagorean Triplet in an Array using Sorting

Total time Complexity is O(n^2).

Steps 4, 5 and 6 take O(n) time. We traverse each element at most once. Keep in mind the invariant that a only moves right and b only moves left.

Steps 4, 5 and 6 can be repeated for at most O(n) time for different c. Hence the total time complexity is O(n^2)

Animation

Given array = [1, 4, 8, 10, 15, 16, 17], the Pythagorean triplet is (8, 15, 17)

Code

def pythagoreanTriplet(arr):
    squaredArray = [x ** 2 for x in arr]
    squaredArray.sort()

    for c in range(len(squaredArray)-1, 0, -1):
        # find a and b such that squaredArray[c] = squaredArray[a] + squaredArray[b]
        a = 0
        b = c - 1

        while(a != b):
            if(squaredArray[a] + squaredArray[b] == squaredArray[c]):
                return True

            # refer to step 5 in the algorithm
            if(squaredArray[a] + squaredArray[b] > squaredArray[c]):
                b -= 1

            # refer to step 6 in the algorithm
            elif(squaredArray[a] + squaredArray[b] < squaredArray[c]):
                a += 1


    return False

Hashing

Creating an hashmap

A hashmap is an undordered_set in C, a hasSet in Java and a dictionary in Python. It is a data structure that allows us to insert elements in O(1) time. We can also query in O(1) time if the hashmap contains the given element.

Intuition

Once we have a hashmap of our squared array (see simplifying the problem) we can pick (a, b) and ask the question if a + b is present in the array or not. This question can be answered in O(1) time using the hashmap. We can ask the question for all the possible pairs in O(n^2) time.

Algorithm

Square each element of the array.
Create a hashmap of the array.
Loop through all the pairs (a + b) using two loops and check if a + b is present in the array or not using the hashmap.
If present return True else if no pair found return False

Time Complexity to find Pythagorean Triplet in an Array using Hashing

Total Time Complexity: O(n^2)

Time complexity for steps 1 and 2 O(n). Time complexity to loop through all pairs using two loops is O(n^2).

Animation

Given array = [1, 4, 8, 10, 15, 16, 17], the Pythagorean triplet is (8, 15, 17)

Code

from collections import defaultdict

def createHashmap(arr):
    hashmap = defaultdict(list)
    for elm in arr:
        hashmap[elm] = hashmap[elm] if elm in hashmap else 1

    return hashmap

def pythagoreanTriplet(arr):
    squaredArray = [x ** 2 for x in arr]
    hashmap = createHashmap(squaredArray)

    for a in range(len(squaredArray)):
        for b in range(a+1, len(squaredArray)):
            if(squaredArray[a] + squaredArray[b] in hashmap):
                return True

    return False

Common Error: Accidentally Mutating State in React

il3ven — Mon, 14 Jun 2021 18:01:07 +0000

In React, the state is immutable. In simple terms it means that you should not modify it directly. Instead a new object should be created to set the state using setState.

Here are two examples.

Modifying the state directly - Not Acceptable

onChange(event) {
  this.state.value = event.target.value
}

Using `setState()` - Acceptable

onChange(event) {
  this.setState({ value: event.target.value })
}

The above is clear to almost all react developers. However, developers still make the above mistake accidentally. Have a look at the code snippet below.

Common Mistake

const [arr, setArr] = useState([])

const handleSubmit = (event) => {
  event.preventDefault()

  arr.push("New Item")
  setArr(arr)
}

In the above code snippet the developer did use setArr but still modified the arr. The .push() modifies the arr.

Why will the above code not work?

React compares the previous state with the updated state to decide if the component needs to be re-rendered. Modifying the state directly will disturb this process. As a result the component will behave unexpectedly. In some cases not re-rendering at all even though the state has been modified.

The above mistake is independent of functional or class components.

Solution

const [arr, setArr] = useState([])

const handleSubmit = (event) => {
  event.preventDefault()

  setArr([...arr, "new value"])
}

The spread syntax creates a copy of the array. Hence we are not modifying the original array.

Subtler Way of Making the Same Mistake

const [obj, setObj] = useState({
  key: 'value',
})

const handleSubmit = (event) => {
  event.preventDefault()

  const tempObj = obj
  tempObj.key = "new value"
  setObj(tempObj)
}

In the above snippet, it may seem at first that we made a copy of obj and modified that but in JavaScript the objects copied through reference. In other words, tempObj and obj are the same. Any changes made to tempObj is also reflected on obj.

CodeSandbox Demo

Brief Introduction to ORM

il3ven — Sat, 29 May 2021 14:11:29 +0000

ORM (Object-Relational Model) in 50 words

Relational databases like MySQL are not object oriented. An ORM solves this problem. It provides an abstraction layer over relational databases.

In other words, ORM is an library using which you can create objects for your entities. For example, the entities for an ecommerce app can be Users, Orders and Products. These entities will get converted into tables by an ORM. An ORM will generate SQL queries for you and communicate with your database.

Example

Creating tables with one-to-many relationships in ORM is as easy as creating a class. Here one teacher teaches many courses.

class Teachers {
    id: Primary_Key,
    name: String,
    age: Number,
    courses: Courses[], // one-to-many relationship is as simple as creating an array
}

Inserting entries into the table is as easy as using the new operator.

teacher = new Teacher()

teacher.name = 'Alice'
teacher.age = 32

teacher.save()

Pros of an ORM

Modelling data is easier because instead of tables you are working with objects.
Time is saved as fewer queries have to written.
Cleaner code is produced when using an ORM.
Switching databases is easier as it is abstracted.

Cons of an ORM

Different ORMs have slightly different syntax and need to be learned.
Some queries cannot be performed with an ORM and one needs to use SQL for them.

Popular ORMs

ORM is a library available in many different programming languages.

JavaScript

Python

Java

Hibernate

Fix Warning in React: Update was not wrapped in act()

il3ven — Sat, 06 Mar 2021 19:48:22 +0000

The purpose of this article is to fix the following error.



Warning: An update to App inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act

Why am I seeing this?

In my experience this happens because your component performs some state change after the test has finished running.

How to fix this?

Add more expect statements to expect the change in state. This makes sure that tests do not finish before.

Example

Let's look at a code that shows the act() warning and then try to fix that code.

Bad Code

App.js



function App() {
  const [todo, setTodo] = useState("");

  useEffect(() => {
    const fetch = async () => {
      const _todo = (
        await axios.get(`https://jsonplaceholder.typicode.com/todos/1`)
      ).data;
      setTodo(_todo.title);
    };

    fetch();
  }, []);

  return (
    <div className="App">
      <h1>React App</h1>
      <h2 data-testid="title">Title: {todo}</h2>
    </div>
  );
}

View full file

Here we fetch some data from API in useEffect then setState to show the data in a h2 tag.

App.test.js



jest.mock("axios");

test("renders learn react link", () => {
  axios.get.mockImplementation(() => {
    return {
      data: {
        userId: 1,
        id: 1,
        title: "delectus aut autem",
        completed: false,
      },
    };
  });

  render(<App />);

  expect(screen.getByText(/React App/i)).toBeInTheDocument();
});

View full file

Why the above test does not work?

React Testing Library renders <App/> component. After the initial render it expects React App to be present. Since, it is present the test will finish.

useEffect is called after the initial render and calls setTodo to set state. But the tests have finished until then.

Maybe after setting the state something changes and your tests start failing but that would not be tested. So, you should not be ignoring these warnings.

Good code

To fix the above error you should make sure tests finish after all the state changes have been done.

To do this we add the following line in the above App.test.js.



test("renders learn react link", () => {
  axios.get.mockImplementation(() => {
    return {
      data: {
        userId: 1,
        id: 1,
        title: "delectus aut autem",
        completed: false,
      },
    };
  });

  render(<App />);

  expect(screen.getByText(/React App/i)).toBeInTheDocument();
+ expect(screen.getByTestId('title').innerHTML).toBe('Title: delectus aut autem');
});

View full file

The above alone will not work. This is because the expect runs before the state has been set. To solve this problem we can use waitFor from @testing-library/react. This will wait for whatever is inside it to be true or timeout.



- expect(screen.getByTestId('title').innerHTML).toBe('Title: delectus aut autem');
+ await waitFor(() => {
+  expect(screen.getByTestId("title").innerHTML).toBe(
+    "Title: delectus aut autem"
+  );
+ });

View full file

Now the tests work fine without any warnings. You can view the full working code at this repository.

DEV Community: il3ven

Practice SQL using Cricket Dataset (Moneybowl)

Introducing MoneyBowl!

Tech behind MoneyBowl

In-Browser SQLite

Loading the Database into the Browser

About the Data

Nuitka vs PyInstaller | Distributing a Python application

Bundle

Compile

Difference between PyInstaller and Nuitka

Technically PyInstaller does compile

What to do with a standalone Python application?

Your test cases should fail

Example

API

Test for the API

What's wrong with the above test?

Modifying the test to be more robust

Are we done?

Modifying the test case to make them more robust

Guidelines for writing better tests

Code coverage is a necessary metric but not enough

When a bug is found, write a test for it

Test driven development (TDD)

Use the philosophy that your test should fail

Easily implement Infinite Scrolling using Intersection Observer in vanilla JavaScript

What is infinite scrolling?

Difficult way to do it (using getBoundingClientRect)

Reasons to not use getBoundingClientRect

Easy way to do it (using IntersectionObserver)

HTML structure of our example

Observing the 'load more names' button using IntersectionObserver

Adding an IntersectionObserver to the button

Adding items to the list

Combining all the Code

Demo and Complete Code

Code Sandbox

Pythagorean triplet in an array - Interview Question

Pythagorean triplet in an array - Interview Question

Solution

Simplifying the problem

Naive Method

Time Complexity to find Pythagorean Triplet in an Array using Naive Method

Sorting the Array

Intuition

Algorithm

Time Complexity to find Pythagorean Triplet in an Array using Sorting

Animation

Code

Hashing

Creating an hashmap

Intuition

Algorithm

Time Complexity to find Pythagorean Triplet in an Array using Hashing

Animation

Code

Common Error: Accidentally Mutating State in React

Modifying the state directly - Not Acceptable

Using setState() - Acceptable

Common Mistake

Why will the above code not work?

Solution

Subtler Way of Making the Same Mistake

CodeSandbox Demo

Brief Introduction to ORM

ORM (Object-Relational Model) in 50 words

Example

Pros of an ORM

Cons of an ORM

Popular ORMs

JavaScript

Python

Java

Fix Warning in React: Update was not wrapped in act()

Why am I seeing this?

How to fix this?

Example

Bad Code

View full file

Difficult way to do it (using `getBoundingClientRect`)

Reasons to not use `getBoundingClientRect`

Easy way to do it (using `IntersectionObserver`)

Using `setState()` - Acceptable