bhaidar

Two way iframe communication

The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.

Parent

Send messages to iframe using iframeEl.contentWindow.postMessage Recieve messages using window.addEventListener('message')

iframe

bhaidar

SSH Cheat Sheet

This sheet goes along with this SSH YouTube tutorial

Login via SSH with password (LOCAL SERVER)

$ ssh brad@192.168.1.29

Create folder, file, install Apache (Just messing around)

$ mkdir test

$ cd test

bhaidar

CSS Selectors Cheatsheet

Element selectors

Element -- selects all h2 elements on the page

h2 {
    foo: bar;

bhaidar

JavaScript Classes - ES5 vs ES6

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

Reference

bhaidar

/**
 * Get a random floating point number between `min` and `max`.
 * 
 * @param {number} min - min number
 * @param {number} max - max number
 * @return {number} a random floating point number
 */
function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
}

bhaidar

function diffArray(arr1, arr2) {
  let arr1UniqueItems = arr1.filter(item => arr2.indexOf(item) < 0);
  let arr2UniqueItems = arr2.filter(item => arr1.indexOf(item) < 0);
  return [...arr1UniqueItems, ...arr2UniqueItems];
}

bhaidar

Eslint and prettier config for nodejs and express projects

Eslint and Libs

You need to install eslint and some other config libs.

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier -D

yarn eslint --init

.eslintrc.js

bhaidar

useGeolocation

React sensor hook that tracks user's geographic location.

Hook

const useGeolocation = () => {
  const [state, setState] = useState({
    accuracy: null,

bhaidar

Laravel 6 - Diving Into Pivot Tables

Pivot tables can be confusing and a little hard to wrap your head around at first. In this quick article we are going to dive into what a pivot table is, how to create one and finally how to use the pivot table. Let's dive in!

What is a pivot table?

A pivot table is used to connect relationships between two tables. Laravel provides a Many To Many relationship where you can use a pivot table.

bhaidar

Vue.js and Vuex - best practices for managing your state

Modifying state object

Example

If you have to extend an existing object with additional property, always prefer Vue.set() over Object.assign() (or spread operator).

Example below explains implications for different implementations.