Compilation (for dummies like me)

Lexing (tokenizer)

Takes an input and produces a list of tokens e.g. variable declaration and remove whitespace and comments

var a = 5;---------------[{value: 'const', type: 'keyword'}, {value: a, type: 'identifier'..... }]

Lexical errors arise when the input does not correlate with any tokens regex. Eg const a = @ 54; using @ generates a lexical error.

https://dzone.com/articles/hand-written-lexer-javascript

Parsing

Dissects the tokens into logically meaningful parts to produce an Abstract Syntax Tree.

[{value: 'const', type: 'keyword'}, {value: a, type: 'identifier'..... }]---------------{"type": "VariableDeclarator", "id": {"type": "Identifier", "name": "a"}}

Syntax errors arise when the src code can be tokenized however the syntax is incorrect e.g. …

Truthy, Falsy and Comparisons in Javascript

There are number of for loops with javascript which use the following syntax.

for (var i = 0, key; key = uniqueLocations[i++];) {
 colorMap[key] = colorArray[index + i];
}

1. Initialisation, initialise both values: var i = 0, key
2. Condition, performs assignment and rests the result of the assignment: key = uniqueLocations[i++];
3. Control factor, absent (e.g. i++): Managed within the condition

initialization;
while (condition) {
 body;
 control factor;
}

So when we substitute the loop, we get:

var i = 0, key;
while (key = uniqueLocations[i++]) {
 // fancy stuff here
}

The condition checks whether the newly assigned value is truthy or falsy. Once it tries to access an element beyond its length (or unfilled element), the array returns “undefined” which is converted to boolean FALSE. …

So you want to set up a react application? ….there’s more than one way to skin a cat…

Browser Based?

Managed by Facebook, create-react-app is a starter kit. It creates boilerplate configuration for your application.

yarn global add create-react-app
create-react-app <project-name>
cd <project-name>

Native App?

There are three main ways to start a new react native application. React Native CLI, Create React Native App or via Expo.

React Native CLI

Managed by Facebook, React Native CLI is a command line shell used to scaffold a react native application leveraging the react-native library.

yarn global add react-native-cli
react-native init <project-name>
cd <project-name>
react-native run-ios / run-android

Expo

Managed by Expo. Running on Expo means that you will not need to use Android Studio or XCode to run your application, you can configure your application via the app.json. Using Expo, you can download an application which allows you to scan a barcode that can run on your phone wirelessly through your network. …

Dependencies, understand them, manage them

I use yarn in my react development environment. As someone with experience in Composer (PHP), there are a number of similarities, but enough differences to make this post useful for me.

There is a lot of documentation out there regarding Node, NPM and Yarn, however it is important to understand that unlike many dependency management tools, NPM installs a tree of dependencies.

NPM, great, so what?

With many other dependency tools, we choose one version of a package, which is made available to any other module that may need it. …

{Babel, Webpack } = this.post

{NVM, Node, NPM, Yarn, VSCode, ESLint} = that.post // create-react-app
{VirtualBox, Genymotion, Watchman} = another.post // react-native-app
{Expo, Android Studio} = another.post // expo ap

CRA (create-react-app) installs and configures webpack and babel automatically. However if you want to work on your own projects outside of this realm you will need to configure these manually.

Webpack

> Why: At is core ‘webpack’ is simply a module bundler and task runner.

Bundler

Identifying the root [path]/ src directory. Everything that is bundled with a webpack application is normally included via one entry point (normally index.js), when deploying, webpack then bundles any imports that point to individual JS files within the development environment. Webpack follows these paths and imports and bundles the application into a production list of static assets.This …

{NVM, Node, NPM, Yarn, VSCode, ESLint, Flow} = this.post

{Babel, Webpack } = another.post // custom js project
{VirtualBox, Genymotion, Watchman} = another.post // react-native-app
{Expo, Android Studio} = another.post // expo app

Node Package Managers

Node Version Manager (NVM)
>Why: Node Version Manager allows easy updating of node versions, it also avoids permission errors as global packages are installed via ~/.nvm
> Install: https://github.com/creationix/nvm

Yarn

> Why: Yarn is the Facebook interpretation of NPM aimed at solving some issues such as speed, dependencies, cache management. With two Node Package Managers (NPM comes packaged with Node) they need to play nice. …

ASCII(American Standard Code for Information Interchange).

A representation a text using numbers. It was originally designed for teletypes, essentially plain text with no formatting. ASCII is a 7 bit character set containing 128 characters. It includes upper and lower case A-Z, numbers and special chars (line break, carriage return, escape etc.).

N.B. Line breaks

CR and LF are ASCII control characters. CR is a bytecode for carriage return (from the days of typewriters) and LF similarly, for line feed.

Different OS uses different bytecode for line breaks (Windows uses CR LF line endings while Unix just uses LF). This can cause issues when saving documents cross-platform.

UNICODE

UniCode is a much larger character set. It maps any text in any language (https://unicode-table.com/en/#control-character). The first 128 characters of Unicode, correspond one-to-one with ASCII. …

1) Check there are no existing keys on the system

$ ls -la id_* ~/.ssh

2) Create new ssh key

$ ssh-keygen -t rsa

3) Get new ssh public key

$ cat ~/.ssh/id_rsa.pub

ssh: service that connects to remote machines via OpenSSH SSH

sshd: the daemon that allows other to connect to the machine via OpenSSH

ssh-keygen : bash command to create new private ssh key and corresponding public key.

ssh-add : adds RSA or DSA identities to the authentication agent

ssh-agent is a program to hold private keys used for public key authentication (RSA, DSA).

Setting up SSH Keys For Multiple Accounts

Like most people I have a work account and a personal account when working with git repo’s in GitHub/Bitbucket. Fortunately there is a simple way to create two separate keys. One for the work account and one for your own personal meanderings. …