GS500 The Coder

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

3/31/20

My Solution Of Rotate-Matrix question

Once i was asked to write a code which, given a matrix "rotates" it in a way that the "rows" become "columns".
For example:


const matrix = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
]

Should become:


const result = [
  [1,4,7],
  [2,5,8],
  [3,6,9]
]

here is y solution for this challenge


function r(mat) {
  return mat.reduce((acc, row, idx) => {
     return [...acc, mat.map(itm => itm[idx])]
  }, [])
}
let res = r(matrix)
console.log({res})

Or it can be written as one row:


const r = mat => mat.reduce((acc, row, idx) => [...acc, mat.map(itm => itm[idx])], [])
let res = r(matrix)
console.log({res})

3/22/20

Non recursive way to write vibonachy sequence

It is very common interview question i see in many places: write a function which receives a serial number as a parameter and returns a fibonacci number.



// num -> 1 => 0

// num -> 2 => 1

// num -> 3 => 1

// num -> 4 => 2

// num -> 5 => 3

Usually i was quickly writing an answer using a recursion:


function f(num) {
  if (num === 0) return 0;
  if (num === 1 || num === 2 || num === 3) return 1;
  return f(num - 1) + f(num - 2);
}
console.log(f(5))

But ,since i found out that recursion has much more space complexity than iterative way, Here is that i come with trying to implement the fibonacci challenge using iterations (of while loop):


function f(num) { 
  if (num === 1)  return 0;
  if (num === 2 || num === 3) return 1;
  let counter = 4; // important to begin from 4, because we already taked care of 1 and 2 and 3 
  let result = 1, old = 1;
  while (counter <= num) {
    let temp = result;
    result = old + result;
    counter++;
    old = temp;    
  }
  return result;
}
let num = 1;
console.log(`${num} => ${f(num)}`)