1 Overview of environment setup

There are two systems running on my Microsoft machine.

1.1 Windows

1.1.1 New laptop

Change user permission;

  • Refer to britec does not really work.
  • Method 1: add Everyone
  • Method 2: add a specifc user (Stewart Li) or a brand new laptop user
  • Method 3: edit group policy (gpedit.msc) which does not exit on windows 10
  • Method 4: whitespace
  • My users folder is under my control now, but still cannot install R packages.

Windows username/R library path;

library(devtools)
find_rtools()

Sys.setenv(PATH = paste(Sys.getenv("PATH"), "C:/Rtools/bin/",
                        "C:/Rtools/mingw_64/bin", sep = ";"))
                        
Sys.setenv(BINPREF = "C:/Rtools/mingw_64/bin/")

Sys.getenv()[grep("LIB|PATH", names(Sys.getenv()))]

.fixdevtools <- function() { httr::set_config( httr::config( ssl_verifypeer = 0L ) ) }
.fixdevtools()

write("TMP = C:/tmp", file=file.path(Sys.getenv('R_USER'), '.Renviron'))

.libPaths()

1.1.2 Visual studio code

  • Text editor: HTML, CSS, SVG, D3, JS, Node, React, Python, MD,

Extentions;

  • Live Server

  • Emmet Live (div>ul>li5, p{some text}, ul>li6{$})

  • Prettier - Code formatter
  • Bracket Pair Colorizer
  • Highlight Matching Tag

  • indent-rainbow by oderwat

  • CSS Peek by Pranay Prakash (edit css in html)
  • HTML CSS Support by ecmel (add bootstrap class)
  • Auto-open markdown preview by hnw
  • Simple react snippets by Burke Holland
  • ES7 React/Redux/GraphQL/React-Native snippets (imrc, cc, rce, rcf)

  • Python by Microsoft (linting)

VSC hotkeys;

  • cmd code
  • ctrl+k+ctrl+s = open shortcuts
  • ctrl+shift+p = command pallete
  • ctrl+p = look for files
  • ctrl+d = select multi tags
  • ctrl+alt+up/down = select multiple lines
  • ctrl+space = suggestion
  • ctrl+/ = comment
  • ctrl+enter = start a new line
  • shift+alt+up/down = copy new lines
  • ctrl+shift+` = ternimal
  • cls = clear

  • exit()

  • shift+alt+left/right(2) = select the whole line, move to the end of lines,
  • ctrl+left/right = move each word

  • shift+tab = move each tab

1.1.3 RStudio

  • Text editor: R
  • Hotkeys: refer to individual documents.

1.2 Ubuntu

1.2.1 Ubuntu installation

  • Activate developer mode on windows system.
  • Select linux on Turn on and off windows features
  • Download ubuntu 18.4 from Microsoft store
  • sudo apt update
  • sudo apt upgrade
  • VIM, Tmux and Python are included

1.2.2 Tmux (Ctrl + b)

For document, refer to tmux. For tutorial, refer to tmux.

Tmux configuration;

Hotkeys;

  • c, w, p, n, f, ,, &,
  • %, ", o,
  • exit, tmux ls,

1.2.3 VIM (3 modes)

For breif tutorial, refer to VIM.
For book Learn Vimscript the Hard Way.
Show Nerdtree.

.vimrc configuration;

  • Refer to Vim - Setting up .vimrc and Vundle.
  • Download Vundle
  • Configure basics - set format and filetype
  • Add Plugins - :PluginInstall, search
  • Create .vim/bundle folder
  • Finally, I decided to use amix.
  • vim foo.py, index.html, main.js,

Hotkeys;

  • leaderkey, ,
  • normal!, qq, ., register, ctrl + [ = Esc, ctrl + j,
  • G, gg, H, M, L,
  • /, ?, $, %s, :, {, w, wq, q, q!, ZQ,
  • A, a, I, i, x, c, ci(, d, dd, dj, dw, ds, dp, p, f, zz, ZZ, w, W, r, u,
  • v, sp, vslipt,

1.2.4 Emmet-vim (Ctrl + y)

install to ubuntu;

Useless emmet-vim stuffs in my folder;

  • Failure of (1st) emmet-vim inside of bundle
  • Vundle and emmet-vim download are inside of my_configs.vim (in vim_runtime)

1.3 System hotkeys

1.3.1 Linux command line

  • Refer to linux.
  • bin folder contains all scripts and functions
  • etc folder contains all configuration
  • var folder contains caches
  • Write scripts inside of .bashrc file,

  • set | less (entire environment), ls /etc/bash*, ls /etc/bash*,

  • sudo -s (don’t do it)
  • Ctrl+h (., show all folders)
  • ctrl+x+e (execute command line in bash)
  • su cindy (login as another person)
  • chmod 755 hello (permission deny)
  • sudo shutdown -h (-r) now, sudo shutdown -h 15, sudo shutdown -c,

  • sudo !! (permission denied, redo last command as root)

  • man nodejs, man man,
  • ping www.goolge.com -c 3
  • nano, ctrl+x,
  • less, more, cat, |,
  • htop, sudo reboot, killall, clear, Ctrl+l, q, exit, ctrl+c,
  • mkdir, mk, rm -r mydir, cd ., .., ~, ./, pwd, cd &&,
  • mkdir -p folder/{sub1, sub2}/{sub1, sub2, sub3}, mkdir -p folder/{1..100}/{1..100},
  • history, echo, curl, fc, ssh -L, cat | tee,
  • sleep, bg, disown -a && exit, ps aux | grep sleep,

  • which, touch, cp, mv, ls -lart, ls -alh, ls -la, ls -a, ls -l, ll, ls, \ls, grep.

1.3.2 Windows hotkeys

Windows hotkeys (version 1809 or above);

  • Refer to TechGumbo
  • Windows powershell: properties, run as administrator,
  • User name: $env:username
  • Windows version: Windows key + R + winver
  • Cloud clipboard: Windows key + V
  • Snip: Windows key + Shift + S
  • Microsoft virtual windows: Ctrl + windows key + arrow, windows key + Tab, windows key + F2 = PrtScr,
  • Charmap, Realiability, Calibrate display color, Services

2 Frontend development

2.1 HTML

For tutorial, refer to html begainer.
For html layout, refer to w3school.

html tags;

  • ! html 5 document, language is en,
  • <html>
  • <head>
  • <meta name="" content="">, <link>, <script>, <title>, <style>,
  • <body>
  • <header>, <nav>,
  • <main>, <article>, <section>,
  • <aside>, <details>, <summary>,
  • <footer>, &quot; &copy;
  • <script src="">,

  • </body>

  • <div><img src="../logo_original.png"/></div>, (block)
  • <span>, (inline)

  • <hr>, <br>, <strong>, <b>, <big>, <i>, <em>, <blockquote>, <code>, <sup>, <pre> (prefix),

  • <h1>, <h2 id="world">World ecomonic</h2>
  • <p class="aside"></p>, <p style="color: red; background-color: blue;">,
  • <ul>, <li>, <ol type="I">, <dl><dt><dd>,
  • <table><thead><tbody><caption><tr><th><td colspan="">,
  • <figure><img src="" alt="" width=10% height=10%><figcaption>This</figcaption></figure>
  • <a href="#n3" target="_blank">back to top</a>, (external link/internal id/about html/img/text button)

  • <iframe src="" frameborder="0">, <video src="" controls>, (insert vedios/website)

  • <form action="" method="">
  • <label for="id">, (or directly use <p>)
  • <input type="text/file" name="" id="id" value = "Enter" />, <textarea rows="10">,
  • <button type="submit">, (or use <a>)
  • <select>, <option value="">,

  • </form>

  • import fontawesome: place scripts from inside of html head.
  • import google fonts: place it inside of html head or import to css.

  • import d3js: <script src="https://unpkg.com/d3@5.9.7/dist/d3.min.js"></script>

2.2 CSS

For css tutorial, refer to freecodecamp full.
For grid tutorial, refer to freecodecamp.
For practice, refer to Netflix Landing Page.
For clean css code, refer to CSS trick.

selectors;

  • html tags, #id, .class, ;,
  • .root{–}, var(–), *{}, .{},
  • h1,h2{}, .class h1{}, ul li{}, article > *{grid-column:2; min-width=0; font-size: 0em;},
  • blockquote{border-left:10px solid #eee;}
  • bootstrap class names

pseudo elements (add html in css);

  • ::before{content: "“;}, ::after {content:”";}, (not for img)
  • div:hover::before, div:hover::after{top:0; left:0;};
  • ::first-line, ::first-letter,

media;

  • @media screen and (min-width: 600px){}, (max-width)
  • @media (min-width: 600px){}

browser prefix;

  • -webkit-box-shadow:
  • -moz-box-shadow:

units;

  • height, width, top, bottom,
  • pt, px, rem (depend on html), em (depend on parent), vw, vh, fr, (absolute, relative)
  • min-height, calc(100vh - 100px),

color;

  • color: rgba(); opacity, visibility, background-color,
  • background: linear-gradient(to top/to top left, 150deg, red, green, rgba);
  • background: url(), [(repeat) no repeat, (size) cover, (position) center, 20%]
  • background-attachment: fixed;
  • background: linear-gradient(), url()center/cover no-repeat fixed; (overlay)

text;

  • line-height: 1.5em; letter-spacing; word-spacing;

  • list-style-type: none; (remove bullet points)

  • font-family: monospace;
  • font-size: 16em;
  • font-weight: bold;

  • font-style: italic;

  • text-transform: uppercase;
  • text-decoration: line-through/none;
  • text-indent: 50px;
  • text-align: right; (only for inline element)

  • text-shadow: 1px 1px 3px red;

  • a:link{}; a:visited{}; a:active{}; a:hover{}; cursor: pointer;

transform/transition/animaion;

  • transform: translate (move); rotate (45deg); scale (enlarge); skew (20deg);

  • transition: property (background, border-radius;); duration (4s, 2s); delay;
  • transition: background 3s 5s, border-radius 3s 2s; (, is vital)

  • transition: all 3s ease-in (linear) 2s;

  • @keyframes move{0%{transform:translate(20px);} 50%{transform:translate(100px);}}
  • animation: move 5s infinite;
  • animation-name: move; animation-duration: 10s; animation-iteration-count: 2;

  • animation-fill-mode: forwards; (stay the last status after animation)

border;

  • box-sizing: border-box;
  • float: right; clear: both; overflow: hidden; img {float: left;},

  • box-shadow: 1px 1px 3px red;

  • margin (-, 0, auto); (for div to be center)
  • outline; outline-offset;
  • border: 3px solid black; border-style: solid; border-radius: 20px;

  • padding (clockwise);

  • position: relative; top: 50px; right: 50%;
  • position: absolute; top: 0; right: 0;
  • position: fixed; top: 0; right: 0;

  • z-index: (z axis, default is 0, far away -2, only for position relative and absolute);

  • justify-content: center; justify-items: stretch; justify-self: start;
  • align-content: end; align-items: center; align-self: start;

  • display: block (4dim), inline (2dim), inline-block, none, flex (direction, 1dim), grid (2dim),

grid;

  • display: grid;
  • grid-template-columns: repeat(2, 1fr);
  • grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  • grid-template-rows: repeat(4, 1fr);

  • grid-auto-rows;

  • grid-template-areas:“title title .”; (. white space)
  • grid-cloumn-start/end; grid-coulmn-end: span 2;

  • grid-column: 1/3 (-1); grid-cloumn: auto/span 2; grid-cloumn: span 2;

  • grid-auto-flow: dense;
  • grid-gap: 10px; grid-column-gap: 10px;

  • .grid div:nth-child(){},

  • grid-template: /;

  • grid-area;

bootstrap;

<div class="row">
  <div class="col-xs-4 menu"></div>
  <div class="col-xs-8 content"></div>
</div>

2.3 SVG

  • css can be applied to svg by giving svg class names.
  • svg provides coordinate, circles, rectangles, lines, colors, groups,
  • body{margin: 0px; overflow: hidden;} (remove defaults)

svg tags;

  • <svg width="" height="">
  • <circle cx="100" cy="100" r="100" fill="red">

  • <rect x y width height>

  • <g transform="translate(x, y)" transform="scale(1.5)" fill="blue" stroke="black" stroke-width="5">
  • <line x1 y1 x2 y2 stroke stroke-width>; (M: move to, L: lie to)
  • <path d="M300 280 L350 200" stroke="black" stroke-width="5" stroke-linejoin="round" fill="none">
  • </g>

  • </svg>

2.4 D3js

For document, refer to d3js.
For tutorial, refer to Data Visualization.

I am unable to import {select arc} from ‘d3’
 d3.select,
* svg.style, .append, .attr, .transition().duration.attr,

3 JS

For js book, refer to jsbook.
For official document, refer to ECMAScript 6.
For relevant document, refer to MDN.
For js tutorial, refer to js crash 2019.
For js practice, refer to .

3.1 Run JS

  • embed js inside of html to show up in the browser.
  • download node.js (e.g. cmd $node index.js)
  • for modules: export const cars =; import {} from ‘cars.js’;

3.2 JS language

operators/object/array;

  • ctrl+shift+j = console; console.log();
  • do, try catch,
  • //, /*, ;,
  • ’’, "", `(newline),${js}`, .,
  • =, ==, ===, !=, !==, <=, &&, ||,

  • +, concat(), ++, –, +=,

  • types: string, number, boolean, undefined, null, symbol,
  • typeof(), length(), toUpperCase(), substring(5), split(‘,’),
  • parseFloat(svg.attr(“height”)); +svg.attr(“height”);
  • new Date();

  • var, const, let,

  • objective = {: ,}, (overwrite value =, delete),
  • [], .,
  • let property = ‘year’; car[property]; (select)

  • const{address: { city }} = objective; (object destruction)

  • new Array(), [,], [{}, {}], Array.isArray,
  • indexOf, [0], [new list], (Select)
  • cars.push(), unshift, shift, pop, (add/change)

  • JSON.stringify(cars, null, 2); const newCars = JSON.parse(``);

  • for (let i=0; i<cars.length; i++){const car=cars[i]; console.log(car.price);} (for loop)
  • for (Car of cars){console.log(car.price);} (for of)

  • cars.forEach(car=>{console.log(car.price);}); (todos.forEach(function(todo){})

  • cars.map(Car=>return car.price);
  • prices.sort();
  • cars.filter(car=>car.price < 2000);

  • reduce;

let formatCar = car=>`${car.year} ${car.make} ${car.model}: $${car.price}`;
let formatCar = car=>{const{year, make, model, price}=car; return `${year} ${make} ${model}: $${price}`;}
cars
 .filter(cars=>car.price<2000)
 .map(formatCar)
 .join(`\n`);

OOP;

Keywords: Person, this, prototype, constructor, super,

  • function Person(firstName, lastName, dob){this.firstName = firstName;}, const person1 = new Person();
  • Person.prototype.getBirthYear = function(){return this.dob.getFullYear();}
  • class Person{constructor(firstName, lastName, dob){this.firstName=firstName;}, getBirthYear(){return this.dob.getFullYear();}}

conditional;

  • for(let i=0; i<=10, i++){;}, for(let todo of todos){;}, todos.forEach(function(todo){}
  • let i=0; while(i<10){console.log(i); i++;}

  • switch(color){case ‘red’: console.log(); break; default:}

  • if, if-else, if-else if-else,

  • const color = x>10 ? ‘red’ : ‘black’; (? :)

functions;

  • function greet (var1, var2){return var1 + var2;}, (=>)
  • const greet = (var1, var2) => {const x; return var1 + var2;}
  • const greet = (var1, var2) => var1 + var2;
  • const greet = var1 => var1 + 5;

DOM;

  • on website: console.log(window), alert, fetch, document, monitor, localStorage,

  • const message = cars; document.getElementById(‘id’).textContent = message;

  • getElementByClassName, getElementByTagName,

  • document.querySelectorAll, (for id/class)
  • const ul = document.querySelector(‘.items’);
  • ul.firstElementChild.textContent=‘hello’;,
  • ul.lastElementChild.remove();,
  • ul.children[1].innerText=‘brad’; innerHTML;
  • ul.classList.add();

  • ul.addEventListener();

  • document.createElement(‘li’); li.appendChild(document.createTextNode());

  • setTimeout(()=>msg.remove(), 3000); clearTimeout;

  • new Promise((resolve, reject)=>{;}); myPromise.then(()=>{;}); resolve(message);

* btn.style.background='red';
* btn.addEventListener('click', (e) => {e.preventDefault(); document.querySelector('#my-form').style.background = 'red';});,

3.3 Nodejs

For download, refer to nodejs.
For download to ubuntu, refer to How to install Node.js, npm on Ubuntu.

install to windows;

  • node –version
  • npm –version
  • npm -v

install to ubuntu;

  • sudo apt install nodejs
  • nodejs –version
  • sudo apt install npm
  • npm –version
  • sudo apt remove nodejs npm

3.4 Reactjs

For theory, refer to React JS Crash Course 2019.
For details, refer to beginners 2019.
For practice, refer to React JS Crash Course - 2019.
For npx reactjs, refer to facebook github.

install to windows;

  • Refer to reactjs on windows
  • if it does not work, delete everything and create a new folder
  • install react developer tools (google extention)
  • npm install -g create-react-app (or npm i -g )
  • create-react-app –version
  • create-react-app my-app (current folder .)
  • npm run eject (remove server, webpack, babel=JSX)
  • npx create-react-app my-app
  • cd my-app
  • npm start (live preview)
  • npm i (download bootstrap class
  • import“bootstrap/dist/css/bootstrap.css”;
  • npm install react react-dom –save
  • npm i react-router-dom
  • npm i axios (= JS fetch API)
  • npm run build

theory;

  • Keywords: React, compare DOM, state/this/propTypes/props/bind/render/return, JSX,
  • import React from ‘react’; (React.createElement)

  • import ReactDOM from ‘react-dom’; (compare Virtual DOM to real DOM)

  • cc(OOP) > state > render(return) > {this.state.count} > objct destruction > {this.formatCount()}
  • const element = <h1>Hellow<h1>; (JSX)

  • ReactDOM.render(element, document.getElementById(‘root’)); (Render components)

  • className
  • style = {{backgroundColor: ‘red’}}
  • const itemStyle = {backgroundColor: ‘red’}; style={itemStyle}
  • JS return HTML and CSS, CSS render {JS}

  • <input>{' '},

  • src folder (fully deleted)
  • create components folder > counter.jsx (or counter.js)

  • App.js -> Component.js -> Item.js -> (create a functional html tag)

functions;

  • Refactor = ctrl+shift+r (clean up JSX code)
  • <ul>{this.state.tags.map(tag => <li key={tags.id}>{tag}</li>)}</ul>
  • true && ‘Hi’ === ‘Hi’, !==,
constructor(){
  super();
  this.handleIncrement = this.handleIncrement.bind(this);
}

handleIncrement = (product) => {}
this.setState({count: this.state.count+1})
onClick={() => this.handleIncrement(product)}
componentDidMount(){
 axios.get('https://API server')
  .then(res => this.setState({todos: res.data}))
}

axios.post("https://APT server", {title, completed: false})
 .then(res => this.setState({todos: [...this.state.todos, res.data]}));

axios.delete(`https://API server/${id}`)
  .then(res => this.setState({todos: [...this.state.todos.filter(todo => todo.id !== id)]}));

3.5 Electron

To make a desktop application. Install in the way which is same as reactjs.
For beginner tutorial Traversy Media.
For beginner tutorial codedamn.

Install to ubuntu;

  • Global (useless on Ubuntu): ./home/stroot/node_modules
  • npm install -g electron
  • npm install electron
  • mkdir stapp (../app)
  • cd stapp
  • npm init
  • package.json
  • npm install electron –save

4 Python Django

4.1 Git

download to windows;

install to ubuntu;

  • sudo apt-get install git

4.2 Python

For Django tutorial, refer to Python Django Web Framework - Full Course for Beginners 2019.
For python tutorial, refer to Mosh.

install to windows;

For download, refer to python.org.

install to ubuntu;

  • Refer to Install Pip on Ubuntu 18.04.
  • sudo apt install python3-pip
  • python3 -m pip install numpy
  • python3 -m pip search Sci
  • numpy, scipy, pandas,
  • scikit-learn, tensorflow
  • matplotlib, seaborn

IDE;

  • VSC is only for running python code, instead of being a fully integrated IDE.
  • Use Pycharm and Jupiter instead of VSC.
  • For set up python on VSC, refer to setup.
  • & python -m pip install -U pylint –user
  • virtual environment

5 R environment

For Microsoft Rtools.
For animation ImageMagick.
For PDF pandoc. It is included in new version package.
For PDF MikTex. Use tinytex.

5.1 R

5.2 RStudio

Basic workflow;

  • R -> RMD -> Shiny -> PPT, PDF, Word, Excel and others
  • RStduio server pro
  • RStduio connect (security issue)
  • RStduio package manager (docker like)

5.3 R packages

When you install those most important R packages, such as tidyverse and tidymodel, you have all other important dependency packages too.

Must have;

6 General tools