5/7/20

Binary Tree Height Exersise

Recently i was at interview and asked following question:
Lest say, there is a binary tree like this:

Write a function which returns a highest level of the tree (in our exmaple is 3)

Solution

Here is a solution i came up with:
My assumption was that node structure has "name" property with node data and "children" with list of pointers to children nodes:


const tree = {
  name: 'a',
  children: [
    {
      name: 'b',
      children: [
        {
          name: 'd',
          children: []
        },
        {
          name: 'e',
          children: [{
               name: 'g',
               children: []
             },{
               name: 'h',
               children: []
             }        
          }]
        }       
      ]
    },
    {
      name: 'c',
      children: [
        {
          name: 'f',
          children: []
        },
        {
          name: 'g',
          children: []
        }        
      ]
    }    
  ]
}
Here is my solution:
I did it iterative way, because recursion can have space complexity issues

 
 function treeHeight(rootnode) {
    let nodes = [rootnode], maxLevel = 1; 
    nodes[0].level = 1;
    // loop through all the nodes
    while(nodes.length) {
       let node = nodes[0]
      
       if (node.children.length) {
         nodes = nodes.concat(node.children.map(ch => {ch.level = node.level + 1; return ch;})); /* if node has children - push them to the end of queue */
       }
       maxLevel = maxLevel < node.level ? node.level : maxLevel;    /* set maxLevel if some node level is bigger;*/
       nodes.shift(); /* remove the first node at each iteration */
    }
  
  	return maxLevel
}

5/5/20

Dont Afraid To Use Webpack

I must admit - im afraid of configuring the webpack by myself.
Im usually use create-react-app or angular-cli or some other boilerplate projects that have webpack configured already...
So the purpose of this post is: to create the simpliest configuration of webpack ever.
But first we need to ask - what is the main purpose of webpack anyway?
According to their site - webpack is module bundler Which means: a tool which concats all javascript modules (or files) into one big file. (that's all).

Experiment number one

Lets install webpack and play a little:

npm i -D webpack webpack-cli

Here is our first the webpack.config.js file:

const path = require('path');

module.exports = {
  entry: './myfile.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

At myfile.js lets put some very complicated code:

console.log('Hi@!')

And now lets run npx webpack

You can see that 'my-first-webpack.bundle.js' file created at 'dist' directory (wow!)
Note that it is minified and uglyfied (which is good...)

Experiment 2

Now - to something little more complicate: lets create another file, name it "other.js" and import it from the 'myfile':
other.js


export default Other = () => {
  console.log('Hi@!')
}

Again, run npx webpack
and we got only one 'my-first-webpack.bundle.js' in the dist (and yes it contains 'console.log' statement)

Experiment 3

Ok, you may say, but... how this webpack thing can help me with using some external library like, say React?
The answer is: lets try and see:

npm i react react-dom

Now lets change our myfile.js code to:

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
  return React.createElement("div", {}, 'Hi!');
};
ReactDOM.render(React.createElement(App), document.getElementById("root"));

run npx webpack
Now create index file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="dist/my-first-webpack.bundle.js"></script>
</body>
</html>

double click it and... whoale!
We can see our React app is running

Getting started with docker

It is very simple to get started usig docker. All you need to do-is download the docker desktop for your system Once you get docker syste...