Modern web dev stuff I am, after all, learning while working on a WYTIWYS (What You Tree Is What You Search) corpus query interface and a recipe website for programmers.

Nodenotes

Setting up nvm (Node Version Manager)

  1. install nvm from your package manager
  2. add 
     . /usr/share/nvm/init-nvm.sh

    to the shell config file.

Installing version n of Node

nvm install n

Using version n of Node

nvm use n

Installing a TypeScript project

npm install

Using a local module in a TypeScript project

  1. package the module into a .tgz: 
    npm pack
  2. move to the project folder and install the package: 
    npm install --save PATH-TO-TGZ

CSS

Hiding stuff

  • visibility: hidden is like the invisibility cloak (the element becomes transparent, but still takes up space)
  • display: none prevents the element from showing up at all

Selectors

Basic selectors:

  • *
  • tag
  • .class
  • #id
  • [attribute]

Useful combinations:

  • tag.class (all tags of a given class)
  • .class tag (all tags that are descendants of a tag with a given class)
  • .class>tag (all tags that are direct descendants (children) of a tag with a given class)
  • tag[attribute] (all tags with a given attribute)
  • .class1.class2 (all elements that have both class1 and class2)

TypeScript

Array concatenation

Given

const a: number[] = [1, 2];
const b: number[] = [3, 4];
const c: number[] = [5];

  • spread operator:

     const abc = [...a, ...b, ...c];

  • concat method:

     const abc = a.concat(b).concat(c);

    but also:

     const abc = a.concat(b, c);

    and even:

     const abc = a.concat(3, 4, 5); // wild!

Last element of an array

xs.slice(-1)[0]

Introspection

Two operators:

  • typeof X
  • OBJ instanceof TYPE

Integer to string and vice versa

int.toString();
parseInt(str, base);

Lambdas

(par1: type2, par2: type2): returnType => expression

JSON object operations

Kinda like a Python dictionary:

  • does a json object have a certain key? 
    key in json
  • delete a key-value pair from a json object: 
    delete json[key]
  • add a key-val pair to a json object: 
    json[key] = val

Ternary operator

I guess Javascript is a bit like Java:

condition ? what_if_true : what_if_not

React

Using variables

{variable}

Passing a tag its props

If a tag was a function, props would be its (named) parameters:

<Tag propName={propVal}/>

<!--or simply-->
<Tag {propVal}/>