DEV Community: Srecko Kostic

Build library using JavaScript, Webpack and Workspaces

Srecko Kostic — Sat, 20 Aug 2022 06:09:25 +0000

A guide on building library using Webpack and Yarn workspaces. The explained goal and source code is in this repository.

Requirements

These are the requirements. But if you do check out the repository, there are references and explanation. I tried to provide explanation as good as I could, but it’s rarely perfect or univeral for everyone. There are steps to build and test the code so you can play around with it. Plenty of resources to dig and learn how it works.

Familiarity with JavaScript.
Some familiarity with Webpack. The code is using minimal configuration of around 15 lines of code.
Some familiarity with Yarn workspaces.

The goal

Build an app that demonstrates building packages using JavaScript and monorepo.

Split logic using monorepo

Use module bundler to create a package that depends on another package which isn’t published to NPM.
Specs

For the sake of brevity let’s make a calculator.

We will build a calculator app that has four operations:

+    add
-    subtract
*    multiply
/    divide

We are building a calculator. We split logic to the four packages.

Our calculator will use four packages. We use webpack to build our calculator package.

Initiate repository

Run (The following command is a shorthand for yarn install):

yarn

Build package

Development and production

yarn build

Run tests

First build the package.

To test in browser:

Go to __tests__ directory.
Open useDevBuild.html in browser.
Open useProdBuild.html in browser.
Open the developer console and verify that output is there.

To test in nodejs run:

yarn test

References

Read about Yarn workspaces.

Build C++ project using CMake on Windows

Srecko Kostic — Wed, 17 Aug 2022 03:13:23 +0000

Building a basic project structure using CMake and CMakeLists.txt on windows. A short and concise set of steps I did to build and run the C++ project structure.

Description

Using base structure:

building-with-cmake/
building-with-cmake/.gitignore
building-with-cmake/README.md

building-with-cmake/CMakeLists.txt
building-with-cmake/source
building-with-cmake/source/CMakeLists.txt
building-with-cmake/source/main.cpp

Learn to build a project using CMake. At least a small one, like this one.

Goals

Build and run the code.

Build steps

I created this sample on windows machine. I think that is relevant information.

When first opening the directory

Run the steps in the following order:

@REM this is a comment

@REM create directory
mkdir build

@REM go to directory
cd build

@REM setup the project
cmake ..

@REM build the program
cmake --build .

@REM run the program
Debug\building-with-cmake

After we create the build directory

Run the following:

@REM build the program, probably after code change
cmake --build .

@REM run the program
Debug\building-with-cmake

Alternatively, we may have to run one more step. Probably if we
change CMakeLists. I am not sure about that.

@REM setup the project
cmake ..

@REM build the program
cmake --build .

@REM run the program
Debug\building-with-cmake

Algorithm - Combinations, of Four, and Sum

Srecko Kostic — Thu, 11 Aug 2022 00:43:36 +0000

Using sequence: 1, 2, 3, 4, 5

I was looking for combinations of:

One
Two
Three
Four

Explanation and example

In the following sample are combinations of:

One
Two
Three
Four

Combinations are by columns. Each colum represents combination of amount of numbers it holds.

Read the sample top-down.

The sample:

Task

Take each number and combine it with each of the subsequent ones. Then take next number and do the same.
Ignore the last element in combinations of one.

For input sequence A, for example:

A[1] A[2], A[1] A[3], to A[1] A[A.length]

A[2] A[3], A[2] A[A.length]

Repeating the steps until the end.

COMBINATIONS-OF-TWO(A)
  combinations = [];
  count = 1;
  for i=1 to A.length - 1
    for j=i+1 to A.length
      combinations[count] = [i, j];
      count++;
  return combinations;

Conclusions and implementation

Using mathematical induction we conclude that:

One

Combinations of one take each element from an array.

Two

Combinations of two take each combination of one
Then append each subsequent element to each.
Ignoring last element in combination of one.

Three

Combinations of three take each combination of two.
Then append each subsequent element to each.
Ignoring last 2 elements in combination of one.
Ignoring last 1 element in combination of two.

Four

Combination of four take each combination of three.
Then append each subsequent element to each.
Ignoring last 3 elements in combination of one.
Ignoring last 2 elements in combination of two.
Ignoring last 1 elements in combination of three.

Implementation

COMBINATIONS-OF-FOUR(A)
  combinations = [];
  // use counter because loops
  // don't track amount combinations
  count = 1;

  // combinations of one
  for i to A.length - 3

    // combinations of two
    for j=i+1 to A.length - 2

      // combinations of three
      for z=j+1 to A.length - 1

        // each subsequent element
        // on top of combination of three
        // gives combination of four
        for k=z+1 to A.length
          combinations[count] = [i, j, z, k];
          count++;

  return combinations;

As a bonus, here is implementation using JavaScript. Copy-Paste runnable.

function combinationsOfFour(A) {
  let combinations = [];
  let count = 0;
  let i, j, z, k;
  const len = A.length;

  for (i = 0; i < len - 3; i++) {
    for (j = i + 1; j < len - 2;j++) {
      for (z = j + 1; z < len - 1; z++) {
        for (k = z + 1; k < len; k++) {
          combinations[count] = [i, j, z, k];
          count++;
        }
      }
    }
  }

  return combinations;
}

const numbers = [0, 1, 2, 3, 4];
console.log(combinationsOfFour(numbers));

Find valid sums of 4

Now, I'll modify the algorithm. I need to return quadruples with indices whose values match sum.

// find sums of 4 that match sum
SUMS-OF-FOUR(A, sum)
  sums = [];
  // use sum counter because loops
  // don't track amount of sums we have
  count = 1;

  // combinations of one
  for i to A.length - 3
    for j=i+1 to A.length - 2
      for z=j+1 to A.length - 1
        for k=z+1 to A.length
          // if combination of four
          // is the sum we need
          if A[i] + A[j] + A[z] + A[k] == sum
            // save the indices representing sum
            sums[count] =[i, j, z, k];
            count++;

  return sums;

How many loops do I need?

I figured out how many loops I need. I did that by observing behavior which I used.

Using sequence 1, 2, 3, 4, 5 get combinations of one.

That was linear. Now, do it for combinations of two.

Using sequence 1, 2, 3, 4, 5, get combinations of two.

First number:

1
  append 2 => 1, 2
  append 3 => 1, 3
  append 4 => 1, 4
  append 5 => 1, 5

Second number:

2
  append 3 => 2, 3
  append 4 => 2, 4
  append 5 => 2, 5

Notice the loop behavior? I was doing that all the time. It took me a few hours until I realized how many iterations my mind does.

Using mathematical induction, we conclude the following

We can repeat the steps for combination of n.
Combinations of one use one loop, and are linear.
Combinations of two use two loops, and are quadratic.
Combinations of three use three loops, and are cubic.

Implementing combinations for any valid r

Using the sequence 1, 2, 3, 4, 5.

Given the transformations up to level 3, or r=3.

We can observe columns as levels or combinations r. Each combination is transformation of previous one. To get to combination of 2, we transform each combination of 1. For each previous combination, we take last value (index). Then append each subsequent index to that combination. That gives us new combination. Creating equal amount of combinations as subsequent iterations. Exception is initial combinations, they are empty. We have to populate them. We keep transforming combinations untill we exhaust amount of values per level. We need one level for each transformation.

Implementation

COMBINATIONS(array, r, combinations = [])
  if combinations.length == 0
    // populate combinations of 1
    for i=1 to array.length
      combinations[i] = [i]

  if r > 1
    // next combinations
    next = []
    count = 1
    // transform each combination
    // to next one
    for i=1 to combinations.length
      // take current combination
      c = combinations[i]
      // take last index
      last = c[c.length]
      // append next indexes to
      // current combination
      for j=last+1 to array.length
        // copy current combination
        next[count] = c
        // append index to current comb.
        // which creates new one
        next[count][c.length + 1] = j
        count++

    COMBINATIONS(array, r-1, next)
  else
    return combinations

Constraints to consider

array must be array of numbers
1 <= r <= ar
- info: we can't make non-repeated combination of 6 from 5 numbers
- info: combinations of 0 make no sense?
combinations must be either
- empty array (because of initial value)
- array of numbers

Send data using JSONP

Srecko Kostic — Tue, 26 Jul 2022 19:17:00 +0000

JSONP complete source code using NodeJS, Express, and JavaScript. JSONP and a server whose response is a function call. Quote from w3schools "JSONP is a method for sending JSON data without worrying about cross-domain issues.". Here is the reference https://www.w3schools.com/js/js_json_jsonp.asp.

That made me curious, and I wanted to do it using JavaScript.

JSONP

We will need:

A client with a script:

<script src="/jsonp-static"></script>

A server with a route:

const app = require('express')();
app.get('/jsonp-static', (req, res) => {
  res.send(`jsonp({ data: 'data' })`);
});

What happens?

A script targeting a request that returns a string that is a function call tries to call that function on the client.

If that function doesn't exist on the client, we get the reference error.

It appears that we "call" the client function from the server. That call happens when a script points to a request that returns a string-like function call.

Return JavaScript code from the server

The code is only text. We can transfer it however we wish. Once the script receives the code, it tries to run it.

app.get('/js-code', (req, res) => {
  res.send(`
    console.log(
      'Hi there! A script <script src="js-code"></script> will run me'
    );
    function iCanDoAnything() {
      // i can add an element
      const body = document.getElementsByTagName('body')[0];
      const h1 = document.createElement('h1');
      h1.innerText = 'Daayum! I really can do anything.';
      body.appendChild(h1);
    }
    iCanDoAnything();
  `);
});

Complete source code

JSONP complete source code using NodeJS, Express, JavaScript.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JSONP Client</title>
  </head>
  <body>
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->
    <!--  NOTE!                                                         -->
    <!--  TO RUN THE EXAMPLE, PLACE THIS FILE IN 'public' DIRECTORY!!!  -->
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->

    <!--  The definition of a function that our server calls.  -->
    <script>
      // Try commenting out the function
      // The script with src="jsonp-static" throws ReferenceError jsonp
      function jsonp(data) {
        console.log(data);
      }
    </script>

    <!--  Request a server to call our function with the data.  -->
    <script src="jsonp-static"></script>

    <!--  Inspect the server response.  -->
    <script>
      // SyntaxError
      // JSON.parse: unexpected character at line 1 column 1 of the JSON data
      fetch('jsonp-static')
        .then((res) => res.json())
        .then(console.log)
        .catch(console.error);

      // Read raw response from the stream because res.json() throws an error
      fetch('jsonp-static')
        .then((res) => res.body.getReader())
        .then((reader) => {
          let res = '';
          let decoder = new TextDecoder();

          // Parse data from the stream
          return reader.read().then(function readStream({ value, done }) {
            res += decoder.decode(value);

            // Keep reading data until we are done, then return data
            if (done) return res;
            else return reader.read().then(readStream);
          });
        })
        .then(console.log)
        .catch(console.error);
    </script>

    <!--  The code received from the server should run.  -->
    <script src="js-code"></script>
  </body>
</html>

server.js

const express = require('express');
const { join } = require('path');
const app = express();

// NOTE!!!
// This is a gist, we can't use directories here.
// Make sure to place index.html in the 'public' directory.
app.use(express.static('public'));

app.get('/jsonp-static', (req, res) => {
  res.send(`jsonp({ foo: 'foo' })`);
});

app.get('/js-code', (req, res) => {
  res.send(`
    console.log(
      'Hi there! A script <script src="js-code"></script> will run me'
    );
    function iCanDoAnything() {
      // i can add an element
      const body = document.getElementsByTagName('body')[0];
      const h1 = document.createElement('h1');
      h1.innerText = 'Daayum! I really can do anything.';
      body.appendChild(h1);
    }
    iCanDoAnything();
  `);
});

app.listen(3000, () => console.log('server: http://localhost:3000'));

package.json

{
  "version": "0.1.0",
  "name": "jsonp",
  "description": "Send data using html script tags",
  "author": "Kostic Srecko",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/srele96/sk-experiments.git"
  },
  "bugs": {
    "url": "https://github.com/srele96/sk-experiments/issues"
  },
  "scripts": {
    "start": "nodemon server"
  },
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.18"
  }
}

Run gists using npx

Srecko Kostic — Sat, 23 Jul 2022 21:33:00 +0000

We can run gists using npx. I learned about that after reading this: https://nodejs.dev/learn/the-npx-nodejs-package-runner.

I want to run my gist

I created a gist that prints some text. I ran the command, but it didn't work. I figured I needed package.json, so I added it and ran it, but it still didn't work. I remembered I needed a shebang comment and bin property. After adding those and running it, it worked. Here is the full gist:

code.js

#!/usr/bin/env node

console.log('Does that even work?');

// --------------------------------------------------
// To let npx run the gist we need
//
//   - package.json
//   - shebang comment at the top of file
//     - https://en.wikipedia.org/wiki/Shebang_(Unix)
//   - bin property in package.json
// --------------------------------------------------

package.json

{
  "name": "npx-runs-gist",
  "description": "the gist to run it with npx command",
  "version": "0.1.0",
  "bin": "./code.js"
}

run-the-gist.bat

REM this is a comment in .bat files
REM runs the gist on Windows OS

npx https://gist.github.com/srele96/55260739ddef08389a2d992e132c843e

Use library in the gist

Armed with knowledge, I wanted to use a library. It was straightforward. I copy pasted the example from https://www.npmjs.com/package/commander. Afterward, I ran it, and it worked. Much less effort this time. Here is the full gist:

split.js

#!/usr/bin/env node

const { program } = require('commander');

program
  .option('--first')
  .option('-s, --separator <char>');

program.parse();

const options = program.opts();
const limit = options.first ? 1 : undefined;
console.log(program.args[0].split(options.separator, limit));

package.json

{
  "name": "split",
  "version": "0.1.0",
  "description": "run split example from commander docs using gist and npx",
  "dependencies": {
    "commander": "9.4.0"
  },
  "bin": "./split.js"
}

run-the-gist.bat

REM intentionally misspeleld --fits
npx https://gist.github.com/srele96/c4e645abd50c0b3c2e543c8557c044c9 -s / --fits a/b/c

REM uses the correct flag --first
npx https://gist.github.com/srele96/c4e645abd50c0b3c2e543c8557c044c9 -s / --first a/b/c

REM no flag 
npx https://gist.github.com/srele96/c4e645abd50c0b3c2e543c8557c044c9 -s / a/b/c

Request and Response Stream - Observations

Srecko Kostic — Sat, 18 Jun 2022 18:46:00 +0000

HTTP Request and Response streams. This is a story how I used postman to understand HTTP streams and their chunking.

First, the source code

// The source: https://nodejs.org/api/stream.html#api-for-stream-consumers
const http = require('http');

const server = http.createServer(
  function toUnderstandRequestAndResponseStreamRoleInDataFetching(req, res) {
    let body = '';
    let chunksReceived = 0;
    req.setEncoding('utf8');

    req.on('data', function saveChunkDataAndChunkCount(chunk) {
      body += chunk;
      chunksReceived += 1;
    });

    req.on('end', function sendReceivedChunkDataStatistic() {
      try {
        const chunkStatistic = JSON.stringify({
          chunkCount: chunksReceived,
          received: body,
        });

        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.write(chunkStatistic);
        res.end();
      } catch (error) {
        // treat all errors as internal server error
        res.statusCode = 500;
        // let the user know what happened
        return res.end(error.message);
      }
    });
  }
);

const port = 3001;
server.listen(port);

Chunk collecting

The listener receives data in chunks. Because the server receives data in chunks, the data is split.

req.on('data', function saveChunkDataAndChunkCount(chunk) {
  body += chunk;
  chunksReceived += 1;
});

How large can each chunk be?

How I used postman

I opened postman and started sending get requests. I added more characters to each request. I printed each chunk and incremented chunk counter. I observed that it took 50kb or more to increase chunk count. I started sending requests with more characters. I observed that request with 88 chunks took 'a while'.

const chunkStatistic = JSON.stringify({
  chunkCount: chunksReceived,
  received: body,
});

All previous observations draw the following conclusions

Request and Response are streams.
Request is a readable stream.
Response is a writable stream.

Reading and writing to Request and Response streams is kind of hidden from the user. But there is possibility to manually fetch and write data to streams. Manual control of reading and writing allows us to control the fetch priority.

References

NextJS - Streaming SSR

I wanted to add a link to the document by Dan Abramov about the streaming SSR, but I couldn't find it. Still, I wanted to note that it exists.

Relevant reads

ReactJS mouse-move throttle

Srecko Kostic — Fri, 17 Jun 2022 18:26:00 +0000

Throttling mouse-move events in ReactJS. Throttle the event handler and save the coordinates to state. The hook must run only after the component is initially mounted.

Throttling

Throttling examples:

I decide to move a hundred steps but skip every second step (Throttle every second step).
I decide to wave while I move for twenty seconds, but I wave every third second (Three-second throttle).

I hope you get the point.

Mouse-move events

console.clear();
console.log({ React, ReactDOM });
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

function PrintMouseMoveEvent() {
  React.useEffect(() => {
    document.addEventListener('mousemove', (event) => {
      console.log('mousemove', event);
    });
  });

  return <h1>Open console to see mouse-move event output</h1>
}

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<PrintMouseMoveEvent />);

Mouse-move events get fired frequently. Too many events cause performance issues. Open the console with the Codepen example below to try it out.

In the picture below, you can see the mouse-move events.

ReactJS philosophy

Use state to control the components. Following the ReactJS philosophy, I need to do the following:

Listen to mouse-move events.
Save the mouse-move events to the state.
Use the saved coordinates to move the header.

The mouse-move event provides mouse coordinates, and that is the hardest part.

Component life cycle

THE FOLLOWING APPLIES TO FUNCTIONAL COMPONENTS!

I believe the components have two different types of life cycles.

The component becomes available in the DOM.
The component state is updated.

The components birth

The component uses the initial state only once when it is mounted.

I like to call it the components birth.

Setting the state in the component does not destroy it.

Conditional rendering is an example of the component's birth.

Importance of understanding life cycle

The hooks are often the source of useless component updates.

The most important thing is to have a hook run when I want.

Attaching the mouse-move event listener only needs to happen after initial birth.

Removing the mouse-move event listener needs to happen before the component's removal.

ReactJS mouse-move non-throttled

Easier to understand. The throttling adds layers of complexity.

First, the source code:

console.clear();
console.log({ React, ReactDOM });
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

function createMousePosition(x, y) {
  return { x, y };
}

function MouseMove() {
  const [mousePosition, setMousePosition] = React.useState(createMousePosition(0, 0));

  // i absolutely don't want to rerun this hook at any other time
  // then initial mount and last unmount
  React.useEffect(() => {
    // saveMousePosition must be defined in the hook
    // when a hook calls a function that references state or props
    // they must be declared in dependency array
    // if saveMousePosition is outside of the hook
    // i would need to use React.useCallback to wrap it
    function saveMousePosition(event) {
      setMousePosition(createMousePosition(event.clientX, event.clientY));
    };

    document.addEventListener('mousemove', saveMousePosition);
    return () => {
      document.removeEventListener('mousemove', saveMousePosition);
    };
  }, [setMousePosition]);

  return (
    <h1
      style={{
        position: 'absolute',
        top: `${mousePosition.y}px`,
        left: `${mousePosition.x}px`,
        transform: 'translate(-50%, -50%)',
        margin: 0
      }}
    >
      reactjs mousemove non-throttled version
    </h1>
  );
}

const root = document.getElementById('root');
ReactDOM.createRoot(root).render(<MouseMove />);

The component stores initial coordinates.
Attach listener after component's birth.
Remove listener before component's death.
Update the component's state.

The Codepen runnable example:

https://codepen.io/Flexos96/pen/eYVoYgJ?editors=0010

ReactJS mouse-move throttled

First, the source code for throttled version:

console.clear();
console.log({ React, ReactDOM });
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

const DURATION = 10;

const throttle = (function() {
  let timeout = undefined;
  return function throttle(callback) {
    if (timeout === undefined) {
      callback();
      timeout = setTimeout(() => {
        // allow another call to be throttled
        timeout = undefined;
      }, DURATION);
    }
  }
})();

/**
 * Wraps callback in a function and throttles it.
 * @returns Wrapper function
 */
function throttlify(callback) {
  return function throttlified(event) {
    throttle(() => {
      callback(event);
    });
  }
}

function createMousePosition(x, y) {
  return { x, y };
}

function MouseMove() {
  const [mousePosition, setMousePosition] = React.useState(createMousePosition(0, 0));

  // i absolutely don't want to rerun this hook at any other time
  // then initial mount and last unmount
  React.useEffect(() => {
    const saveMousePosition = throttlify((event) => {
      setMousePosition(createMousePosition(event.clientX, event.clientY));
    });

    document.addEventListener('mousemove', saveMousePosition);
    return () => {
      document.removeEventListener('mousemove', saveMousePosition);
    };
  }, [setMousePosition]);

  return (
    <h1
      style={{
        position: 'absolute',
        top: `${mousePosition.y}px`,
        left: `${mousePosition.x}px`,
        transform: 'translate(-50%, -50%)',
        margin: 0,
        transition: `${DURATION}ms linear`,
      }}
    >
      reactjs mousemove throttled version
    </h1>
  );
}

const root = document.getElementById('root');
ReactDOM.createRoot(root).render(<MouseMove />);

The only difference is throttling. I have two functions that handle throttling.

The throttle function limits execution.
The throttlify wraps around the argument and returns throttled version.

The throttle function doesn't allow me to do the cleanup. I don't have a reference for the event handler. Throttlify returns a throttled version so I can clean it up.

The Codepen runnable example:

https://codepen.io/Flexos96/pen/qBxvQPV?editors=0010

React-Scripts from an empty directory

Srecko Kostic — Thu, 09 Jun 2022 20:53:00 +0000

We will set up everything from an empty directory using react-scripts. The setup supports up to medium-sized projects.

The create-react-app scripts

When I started learning ReactJS, the documentation suggested using create-react-app. The create react app is the fast way to set up our app. There is more to setting up with react scripts.

Requirements

You are familiar with Yarn and NPM package managers and NodeJS.
You will install NodeJS, NPM, and Yarn.

Install NodeJS LTS version https://nodejs.org/en/.
Run npm --version to verify that the installation succeeded.
Run npm install -g yarn.
Run yarn --version.

Initial setup

I did the following steps to set up the project:

Create an empty directory, and name it however you wish.
Create a file package.json.
Run yarn install in the directory you created.
Create a public directory and index.html inside.
Create an src directory and an index.js inside.

The package.json content.

{
  "name": "initial-setup",
  "version": "0.1.0",
  "description": "create-react-app initial setup",
  "scripts": {
    "start": "react-scripts start"
  },
  "devDependencies": {
    "react-scripts": "5.0.1"
  },
  "dependencies": {
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

The index.js content:

import { createRoot } from 'react-dom/client';

function App() {
  return <h1>React App Setup</h1>
}

createRoot(document.getElementById('root')).render(<App />);

The complete project setup with source code is here.

Multi-root setup

The multi-root is the fancy name for calling create root function multiple times.

Here is the simple set of changes to create a multi-root app:

diff --git a/public/index.html b/public/index.html
index 6672ed0..b5ed2a2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,8 @@
   <title>React App Setup</title>
 </head>
 <body>
-  <div id="root"></div>
+  <div id="foo"></div>
+  <div id="bar"></div>
+  <div id="baz"></div>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
index 5521a9e..9bac9ba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,17 @@
 import { createRoot } from 'react-dom/client';

-function App() {
-  return <h1>React App Setup</h1>
+function Foo() {
+  return <h1>Foo Root</h1>
 }

-createRoot(document.getElementById('root')).render(<App />);
+function Bar() {
+  return <h1>Bar</h1>
+}
+
+function Baz() {
+  return <h1>Baz</h1>
+}
+
+createRoot(document.getElementById('foo')).render(<Foo />);
+createRoot(document.getElementById('bar')).render(<Bar />);
+createRoot(document.getElementById('baz')).render(<Baz />);

Understanding the term multi-root allows us to add react to existing web apps. Imagine the existing web app. That app is using a template engine or something else. We don't want to rewrite the whole app. What do we do? Create a div with an ID to serve as a root and mount a react tree.

An example that renders react tree in the nested HTML structure:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>React App Setup</title>
</head>
<body>
  <div id="foo"></div>
  <div id="bar"></div>
  <div id="baz"></div>
  <article>
    <h1>An existing title</h1>
    <p>An existing paragraph</p>
    <div>
      <div>
        <div>
          <h2>A form created by react lives here</h2>

          <!-- react can live anywhere inside our app -->
          <div id="nested-root"></div>
        </div>
      </div>
    </div>
  </article>
</body>
</html>

JS:

import { createRoot } from 'react-dom/client';

function Foo() {
  return <h1>Foo Root</h1>
}

function Bar() {
  return <h1>Bar</h1>
}

function Baz() {
  return <h1>Baz</h1>
}

// deeply nested authentication form
// that lives with the regular html
function Form() {
  return (
    <form action="#">
      <label htmlFor="username">
        Username:
        <input type="text" id="username" />
      </label>
      <label htmlFor="" id="password">
        Password:
        <input type="password" id="password" />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}

createRoot(document.getElementById('foo')).render(<Foo />);
createRoot(document.getElementById('bar')).render(<Bar />);
createRoot(document.getElementById('baz')).render(<Baz />);
createRoot(document.getElementById('nested-root')).render(<Form />);

The source code:

multi-root.
nested-root.

The good side of react-scripts

The react-scripts support every we need. The two requirements are src and public folders. If we try to start the dev-server, we will get a message that the public and src folders are missing.

The complete source code is here.

The summarized content

The four examples this repository features:

Alternatively, you can open branches yourself. The examples are part of this repository.

GraphQL learning path

Srecko Kostic — Sun, 05 Jun 2022 15:15:00 +0000

A segmented story of my GraphQL learning path.

The first interaction

The first GraphQL page getting started link leads to the learning page. I am learning GraphQL for the first time and feel lost. After reading the topics on the learning page, I wondered how to use GraphQL. What is this page trying to teach me? What part of the GraphQL is on this page? Are there more GraphQL tools? What GraphQL tool should I use? I had a lot of questions and no answers.

Time spent: ~2 hours.

The second interaction

The learning problem analysis went something like this:

GraphQL is a client-server tool.
GraphQL client needs a GraphQL server.
I can't use a client without a server, so I should start with the server.
Does the GraphQL documentation offer a list of tools? They do, handy.
Hmm, the GraphQL Apollo server should be a good start.
Apollo server documentation looks good. I will be up and running soon.
After the first page, I had a running GraphQL server.

Some things I tried:

Modify a query.
Add a variable.
Read about caching.
Mutations.
...

Time spent: 2 days

Day 1: ~1 hour.

Day 2: ~10 hours (breaks and other activities included).

Conclusions from the second round:

Multi-language support for GraphQL.
Multi-layer topic and relatively steep learning curve.
Easy to get into but hard to master.

The third interaction

The situation is getting heated. I want to use typescript, so I set up nodemon and ts-node. Five minutes in, and the typescript server runs. Fifteen minutes in, and I'm looking at the type declarations. A feature creep creeps in, and I want to use schema. The first feature creep was the typescript. The schema didn't work, and I'm reading the apollo documentation. Forty-five minutes in, nothing works. I'm wasting time. The javascript server was running, and I didn't need typescript or schema. Restored the setup to javascript and had the server running again. I made a promise to make a minimal viable product. Fighting the feature creeps continues.

I am trying to create a GQL schema for Apollo, doesn't work. Open the Apollo docs, but not much about the schema. TypeDefs and Resolvers are everywhere, but are they the way to go?

I open the GQL documentation to find out how to create a schema. No luck. Wait, that's weird. The docs for creating schema aren't the ones I used the first time. Hmm, why is there more than one documentation? What is their difference? I opened the old documentation, and it used the GraphQL express server. More than one documentation about the same thing. Are these docs about the same thing? They describe it differently, and I figured it out. The multi-layer thing:

GraphQL schema.
Resolvers.
We can write schema in a file with the .gql extension.

Oh my god...

The only topic I have more problems with is C++. Yesterday I tried to figure out how does the C++ class inheritance work. Why is there the keyword public in front of the parent class? There are three class inheritance modes: private, protected, and public inheritance. The class inheritance is by default private, but they needed a public. It took me half an hour of research to figure it out.

Closing words

I can comfortably write entry-level GraphQL apps. The experimental journey was fun. When I'm in the mood, I will look more at GraphQL. The concept feels exciting.

The repository

At the moment of writing, the GraphQL work is in progress. If there is a branch called graphql-checkout, open it. In the experiments directory is the graphql-checkout folder.

My work is in this repository.

DEV Community: Srecko Kostic

Build library using JavaScript, Webpack and Workspaces

Requirements

The goal

Split logic using monorepo

Initiate repository

Build package

Run tests

References

Build C++ project using CMake on Windows

Description

Goals

Build steps

When first opening the directory

After we create the build directory

Algorithm - Combinations, of Four, and Sum

Explanation and example

Task

Conclusions and implementation

One

Two

Three

Four

Implementation

Find valid sums of 4

How many loops do I need?

Using mathematical induction, we conclude the following

Implementing combinations for any valid r

Implementation

Constraints to consider

Send data using JSONP

JSONP

A client with a script:

A server with a route:

What happens?

Return JavaScript code from the server

Complete source code

index.html

server.js

package.json

Links

Run gists using npx

I want to run my gist

Use library in the gist

Request and Response Stream - Observations

First, the source code

Chunk collecting

How I used postman

All previous observations draw the following conclusions

References

Relevant reads

ReactJS mouse-move throttle

Throttling

Mouse-move events

ReactJS philosophy

Component life cycle

The components birth

Importance of understanding life cycle

ReactJS mouse-move non-throttled

ReactJS mouse-move throttled

React-Scripts from an empty directory

The create-react-app scripts

Requirements

Initial setup

Multi-root setup

The good side of react-scripts

The summarized content

GraphQL learning path

The first interaction

The second interaction

The third interaction

Closing words

The repository