ganapativs

• Install iTerm2 from https://www.iterm2.com/
• Install oh-my-zsh from https://ohmyz.sh/ or https://github.com/robbyrussell/oh-my-zsh
• Set iTerm2 theme tab theme to Dark - Preferences | Appearance | Tabs | Theme > Dark
• Install Fira Code fonts from https://github.com/tonsky/FiraCode (Clone and navigate to dstr > ttf, install all font files by double clicking)
• Install Powerline fonts from https://github.com/powerline/fonts
• Set fonts for iTerm2 - Preferences | Profiles | Text
  • Change Font to 14pt Fira code regular and Check Use Ligatures checkbox
  • Change Non ASCII Font to 14pt Fira mono and Check Use Ligatures checkbox
• Install iTerm2 snazzy theme from https://github.com/sindresorhus/iterm2-snazzy
  • Navigate to Preferences | Profiles | Color Presets > Snazzy

ganapativs

function logger(strings,...values) {
	var str = "";
	for (let i = 0; i < strings.length; i++) {
		if (i > 0) {
			if (values[i-1] && typeof values[i-1] == "object") {
				if (values[i-1] instanceof Error) {
					if (values[i-1].stack) {
						str += values[i-1].stack;
						continue;
					}

ganapativs

import React, { useState } from "react";
import { Machine, assign } from "xstate";
import { useMachine } from "@xstate/react";

const signupUser = email =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve("You are signed up!");
      reject("Unable to sign you up :(");
    }, 1000);

ganapativs

/* globals importScripts, workbox */
// https://developers.google.com/web/fundamentals/primers/service-workers/
// https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading

// https://developers.google.com/web/tools/workbox/modules/workbox-sw#using_workbox_sw_via_cdn
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
    console.log(`Yay! Workbox is loaded 🎉`);
} else {

ganapativs

var
    // Local ip address that we're trying to calculate
    address
    // Provides a few basic operating-system related utility functions (built-in)
    ,os = require('os')
    // Network interfaces
    ,ifaces = os.networkInterfaces();


// Iterate over interfaces ...

ganapativs

# generate a new pgp key: (better to use gpg2 instead of gpg)
gpg --gen-key
# maybe you need some random work in your OS to generate a key. so run this command: `find ./* /home/username -type d | xargs grep some_random_string > /dev/null`

# check current keys:
gpg --list-secret-keys --keyid-format LONG

# export private key in gpg:
gpg --export-secret-key -a "your_username"

ganapativs

Time Travel Debugging

Time Travel refers to the ability to record a tab and later replay it ([WebReplay][wrr]). The technology is useful for local development, where you might want to:

• pause and step forwards or backwards
• pause and rewind to a prior state
• rewind to the time a console message was logged
• rewind to the time an element had a certain style or layout
• rewind to the time a network asset loaded

ganapativs

git clone https://github.com/tj/n.git n --depth=1
cd n
make install
cd ..
rm -rf n
n latest
npm install --global yarn

ganapativs

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

ganapativs

# ----------------------
# Git Aliases
# ----------------------
alias ga='git add'
alias gaa='git add .'
alias gaaa='git add --all'
alias gau='git add --update'
alias gb='git branch'
alias gbd='git branch --delete '
alias gc='git commit'