var list = [1,2,3,4,77,5,6];
var removeTheOne = (value) => {
  for(var i = 0; i < list.length; i++){
    if(list[i] === value) {
      list.splice(i, 1);
    }
  }
  return list;
};

var afterRemove5 = removeTheOne(5);
console.log(afterRemove5); // [1,2,3,4,77,6]

// Short tips:

// local storage: expires until you delete it
// session storage: expires when you close current tab
// cookie: manually set expire time (eg: set a year, very very future ..)
// eg: document.cookie = 'name=damon; expires=' + new Date(2021, 12, 12).toUTCString();

// cookie will be sent every time when user sends API request to the server, thats why cookie needs to be smaller size

// when deal with server, use cookie, deal with browser use session.local storage

shift + option + down key // copying current line of code to next line (handy one)
alt + up / down // moving code up or down

cacheMiddleware() {
  // is a function to save data into redis server for cache purpose
  ...
}
app.get('/path/route', cacheMiddleware, () => { cb ... });

// Why we need event bus? We want to share the data/props .. between siblings components

// Example Case: we want to share the title between Header and Footer components (siblings)

// Step 1: create event bus instance inside main function
export const bus = new Vue();

// Step 2: using bus and emit event for another component to listen to [For fire the event]
bus.$emit('titleChanged', 'New header title');

// completed version of Header Component:

// <template>
//   <div>
//     <h4 @click="changeTitle">{{ title }}</h4>
//   </div>
// </template>

// <script>
//   import { bus } from '../../main';
//   export default {
//     data() {
//       return {
//         title: 'Header before change'
//       }
//     },
//     methods: {
//       changeTitle: function() {
//         this.title = 'New header title'; // we trigger Header component title update
//         bus.$emit('titleChanged', 'New header title'); // we trigger Footer component title update
//       }
//     }
//   }
// </script>

// Step 3: the component which wants to get the updated data will listen and trigger the changes when another component fired the event bus [For listening the event]
bus.$on('titleChanged', data => {
  this.titleProp = data;
});

// completed version of Footer Component:

// <template>
//   <div>
//     <h4>{{ titleProp || 'default footer content' }}</h4>
//   </div>
// </template>

// <script>
//   import { bus } from '../../main';
//   export default {
//     props: {
//       titleProp: {
//         type: String,
//         required: true
//       }
//     },
//     created() {
//       bus.$on('titleChanged', data => {
//         this.titleProp = data;
//       });
//     }
//   }
// </script>

// email validator:
function isValidEmail(email) {
   return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

// replace all occurrence in this string
stringTextVariable.replace(/filter/g, '&filter');

// 
var str = "Remove  extra   spaces    inside  string       text          content";
var newStr = str.replace(/\s\s+/g, " ");
console.log(newStr); // "Remove extra spaces inside string text content"

{
  "alg": "HS256", // JWT algorithm
  "typ": "JWT" // JWT type
}

// If we use SHA256 algorithm, this is how signature looks like:
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

{
  name: 'damon',
  handsome: true
}

// Javascript part: main.js
const constants = {
  pageOne: [
    {
      id: 1,
      name: 'one 1'
    },
    {
      id: 2,
      name: 'one 2'
    },
    {
      id: 3,
      name: 'one 3'
    }
  ],
  pageTwo: [
    {
      id: 1,
      name: 'two 1'
    },
    {
      id: 2,
      name: 'two 2'
    },
    {
      id: 3,
      name: 'two 3'
    }
  ],
  pageThree: [
    {
      id: 1,
      name: 'three 1'
    },
    {
      id: 2,
      name: 'three 2'
    },
    {
      id: 3,
      name: 'three 3'
    }
  ],
};

const routes = ['pageOne', 'pageTwo', 'pageThree'];

document.getElementById('category').addEventListener('click', (e) => {
  // change url from url bar
  location.href = `${location.origin}${location.pathname}#${e.target.id}`;

  const nodes = document.getElementsByClassName('viewComponent');
  const pathHash = location.hash.substr(1);

  for (let index = 0; index < nodes.length; index++) {
    if (nodes[index].id.includes(pathHash) || location.href.includes(nodes[index].id)) {
      nodes[index].classList.remove('hide');
      nodes[index].classList.add('show');
    } else {
      nodes[index].classList.remove('show');
      nodes[index].classList.add('hide');
    }
  }
});

window.addEventListener('popstate', () => {
  module.renderOnPageLoadOrURLChange();
});

// popstate: is fired when active history entry get changed

window.onload = () => {
  module.renderOnPageLoadOrURLChange(); // get current route page content when page loaded
}

var module = {
  renderSpecificItems: (data, selector) => {
    var div = document.createElement('div');
    div.setAttribute('id', `component-${selector}`);
    
    if (!document.getElementById(`component-${selector}`)) {
      if (typeof data === 'object') {
        data.map(item => {
          var span = document.createElement('span');
          span.innerText = item.name;
          div.appendChild(span);
          div.appendChild(document.createElement('br'));
        });
      } else {
        div.innerHTML = "<p>Default Home Component</p>";
      }
  
      return document.querySelector(`#${selector}`).appendChild(div);
    }
  },
  renderOnPageLoadOrURLChange: () => {
    var currentPath = location.hash.substr(1);

    routes.map(route => currentPath === route ? module.renderSpecificItems(constants[route], `${route}Renderer`) : false);

    // using `map` just one line, using `switch` too many lines, thats the powerful place of using map method, better performance !!

    // switch(currentPath) {
    //   case 'pageOne':
    //     module.renderSpecificItems(constants.pageOne, 'pageOneRenderer');
    //     break;
    //   case 'pageTwo':
    //     module.renderSpecificItems(constants.pageTwo, 'pageTwoRenderer');
    //     break;
    //   case 'pageThree':
    //     module.renderSpecificItems(constants.pageThree, 'pageThreeRenderer');
    //     break;
    //   default:
    //     module.renderSpecificItems(constants.error, 'errorRenderer');
    //     break;
    // }
  }
}

// After few hours coding, just found that I just coded a big tab ...
// I was feeling like SPA is a big tab, each component is the tab content, each link is the tab title !!! 

// data to use
var data = [{x: 1, y: 2}, {a: 1, b: 2}, {special: 'hahaha'}];
// functionality
data.forEach(val => {
  if(val.special === 'hahaha') {
    const valIndex = data.indexOf(val);
    if(valIndex > -1) {
      data.splice(valIndex, 1);
    }
  }
});
// output:
data; // [{x: 1, y: 2}, {a: 1, b: 2}]

const fn = () => {
  let rand = 0;
  
  while (true) {
    rand = Math.floor(Math.random() * 90 + 10);
    console.log(rand);
    if (rand === 12) {            
      break;
    }
  }
}

fn();

console.clear();

const stores = [
  {
    items: ["apple", "banana", "flour", "salt"]
  },
  {
    items: ["flour", "salt", "sugar"]
  },
  {
    items: ["apple", "apple", "flour", "lemon", "salt", "sugar"]
  }
];

console.log("hello");

// my code: during live coding test

function getFirstFindResult(keyword) {
  let keywordFoundArray = [];

  for (var i = 0; i < stores.length; i++) {
    for (var j = 0; j < stores[i].items.length; j++) {
      for (var k = 0; k < keyword.length; k++) {
        if (stores[i].items[j] === keyword[k]) {
          keywordFoundArray.push(keyword[k]);
        }

        if (keywordFoundArray.length === keyword.length) {
          return stores[i].items;
        }
      }
    }
  }
}

console.log(getFirstFindResult(["flour", "salt"]));

console.clear();

const stores = [
  {
    items: ["apple", "banana", "flour", "salt"]
  },
  {
    items: ["flour", "salt", "sugar"]
  },
  {
    items: ["apple", "apple", "flour", "lemon", "salt", "sugar"]
  }
];

console.log("hello");

// my code: after one day I started for dignity fight

function getFirstElement(paramsArray) {
  return stores.map(store => {
    if (store.items.join().includes(paramsArray.join())){
      return store.items;
    }

    return false;
  })[0];
}

console.log(getFirstElement(["flour", "salt"]));

<script src="jquery.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
// without implementation (just put into html file)

<script src="bundle.js" type="text/javascript"></script>
// with webpack implementation

let pluginPartial = "";

if (appcuesEnabled) {
  pluginPartial += fs.readFileSync(path.resolve(__dirname, `./src/partials/appcues.html`), "utf8");
}
// include html inside `HtmlWebpackPlugin` plugin
new HtmlWebpackPlugin({
  title: "Bundle HTML files together",
  template: "index.html",
  plugin: pluginPartial,
}),

// inside `./src/partials/appcues.html` file, we have:
<script src="//fast.appcues.com/specific_id.js"></script>