My name is Ryan and I'm a coder. Hence matrixguy.com. After doing freelance work for a while, I decided to create a Google doc to briefly recap various technologies because, well, there can be so many to remember. I've decided to make this information available for others to benefit from, which will be updated from time to time. Enjoy!

Table of Contents

Amazon Elastic Transcoder

Apollo

apt-get

Bare Metal Server

BEM

Bootstrap

Browsersync

Bug-tracking services

Closure

Cloud Speech API

Composer

CORS

CSS

SASS

Tailwind

Docker

Elastic Beanstalk

ES6 / ES2015

Firebase

Frontend frameworks

git

Go

Google Tag Manager

GraphQL

Hadoop

HAProxy

Haskell

Headless browser

Heroku

HTML5

HTTP request methods

Hypervisor server

Idempotence

Javascript frameworks

Alpine.js

Angular

React

VueJS

Load balancing

Other JS libraries/frameworks

Babel

Bower

Webpack

TypeScript

JSON API

JWT

Kubernetes / K8S

Lisp

Machine learning

Maven

MongoDB

NFS/SMB

Node.js

NoSQL

npm/yarn

npm packages

grunt

gulp

Progressive Web App

React Native

RDS

Redis

REST

S3

Scala

Serverless Architecture

AWS Lambda

Google Cloud Platform

IBM Cloud Functions

Microsoft Azure

Software tools

InVision

Zapier

SQL JOINS

Television screens

Terms

UDP vs TCP

Vagrant

Video tech

Webkit

Web RTC

WebAssembly

Websockets

WebUSB

Wireless antenna

Wireless standards

Amazon Elastic Transcoder

• Service for converting video between different digital media formats in the cloud
• Cost-effective, easy-to-use and highly scalable way to transcode videos (stored in S3) into various versions
• Can create multiple pipelines for priority-handling
• Select from presets or define a custom one

Apollo

• Implementation of GraphQL , similar to Relay

apt-get

• install (one package):  apt-get install --only-upgrade <packagename>
• update : doesn't actually install new versions of software. Instead, it updates the package lists for upgrades for packages that need upgrading, as well as new packages that have just come to the repositories.
• upgrade : fetch new versions of packages existing on the machine if APT knows about these new versions by way of apt-get update
• dist-upgrade : will do the same job which is done by apt-get upgrade, plus it will also intelligently handle the dependencies, so it might remove obsolete packages or add new ones.

Bare Metal Server

• Same as a dedicated server
• No other users
• Compare with Hypervisor Server

BEM

• Block Element Modifier
• When it comes to larger, more complex projects, how you organize your code is the key to efficiency in at least these three ways: it affects how long it takes you to write code, how much of that code you’ll have to write and how much loading your browser will have to do
• Block : Standalone entity that is meaningful on its own

• header, container, menu, checkbox, input

• Element : A part of a block that has no standalone meaning and is semantically tied to its block

• menu item, list item, checkbox caption, header title

• Modifier : A flag on a block or element. Use them to change appearance or behavior.

• disabled, highlighted, checked, fixed, size big, color yellow

• 
• 
• 
• Benefits

• Modularity: Block styles are never dependent on other elements on a page, so you will never experience problems from cascading. You also get the ability to transfer blocks from your finished projects to new ones.
• Reusability: Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.
• Structure: BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

Bootstrap

• Build responsive, mobile-first  projects on the web with the world's most popular front-end component library.
• Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
• Bootstrap4 is easily customizable
• Two versions

• Starter template

• No SASS, full CSS
• Footprint:

• 145kb: CSS
• 19kb: popper JS
• 49kb: bootstrap JS

• w/ Node.js / npm

• Includes SASS
• npm init -y
• npm install gulp browser-sync gulp-sass --save-dev

• Concepts

• Card

• .card

• img.card-img-top
• .card-body

• <hX class=”card-title”>
• p.card-text

• Container

• Up to 12 in a grid
• .container
• .container-fluid

• .row

• Columns

• .col
• .col-4, .col-8
• .col-(xs|sm|md|lg|xl): Point at which horizontal will become vertical
• .col-sm-6, .col-sm-6
• Options

• .offset-sm-3: 3 blank columns (applies to the left)
• Can also set different breakpoints: .col-sm-6 .col-md-3 (take up half when small, quarter when larger)

• Options

• .no-gutters: No padding

• Form

• div.form-group,row

• label.col-sm-3,col-form-label
• div.col-md-9

• input.form-control

• Navbar

• <nav class=”navbar navbar-(light|dark) bg-(light|dark) navbar-expand-lg fixed-top”>

• <button class=”navbar-toggler” data-toggle=”collapse” data-target=”#navbarCollapse”>

• <span class=”navbar-toggler-icon”></span>

• </button>
• <div class=”collapse navbar-collapse ml-auto” id=”navbarCollapse”>

• <ul class=”navbar-nav”>

• li.nav-item
• .navbar-brand: Big link

• a.nav-link

• Navigation

• <ul class=”nav nav-(pills|tabs) nav-fill ^[a] ”>

• <li class=”nav-item”>

• <a class=”nav-link active disabled”></a>

• Dropdown:

• .dropdown-toggle
• data-toggle=”dropdown”
• div.dropdown-menu

• a.dropdown-item

• Table

• <table class=”table table-(dark|light) table-striped table-bordered table-sm”>

• <thead class=”thead-(dark|light)”>

• <tr class=”table-(success|danger|warning|primary)”>

Browsersync

• Browser testing tools it seems like
• File sync: Browsers are automatically updated as you change HTML, CSS, images and other project files.
• Interaction synchronization: It means that all your actions are mirrored across every browser. This little feature is useful for testing, especially, when testing across many devices. You can also customize what actions are mirrored across browsers.`

Bug-tracking services

• Bugsnag

• Capture every error: For web, mobile, and backend. Automatically collect diagnostics. Group errors by root cause
• Focus on impact: Assess impact of each error. Track release health. Spot regressions and spikes
• Fix any error: See the crashing line of code. Dig deep into difficult errors. Track progress on fixes
• Lots more I didn’t read up on because it’s a bit much for this project

• Sentry

• Similar. Maybe a little cleaner than Bugsnag

Closure

• A function that has a reference to a private/free var
• So like:

• function Person(pName) {

• var _name = pName;
• this.getName = function() { return _name }

• var me = new Person(‘Ryan’)
• me._name = undef
• me.getName = “Ryan”

Cloud Speech API

• Speech to text conversion powered by machine learning

• “enables developers to convert audio to text by applying powerful neural network models in an easy to use API. The API recognizes over 110 languages and variants”
• The service can successfully handle noisy audio from a variety of environments.
• Speech recognition can be tailored to context by providing a separate set of word hints with each API call. Useful especially for device/app control use cases.

• Pricing: $0.006 / 15 seconds
• Client libraries are alpha status as of Feb 2018

Composer

• composer self-update

• Update composer itself

• composer require $package to install

• But I guess can also be used to update a package. For example:

• composer update sentry/sentry-laravel did nothing
• composer require sentry/sentry-laravel: Updating sentry/sentry-laravel (1.1.0 => 1.4.1): Downloading (100%)  

• In detail composer update will:

• Read composer.json
• Remove installed packages that are no longer required in composer.json
• Check the availability of the latest versions of your required packages
• Install the latest versions of your packages
• Update composer.lock to store the installed packages version

• composer update $package
• composer install will:

• Check if composer.lock file exists (if not, run composer-update and create it)
• Read composer.lock file
• Install the packages specified in the composer.lock file

CORS

• Cross-Origin Resource Sharing
• Allows cross-domain requests through new request and response headers

• Request

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

• Response

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Max-Age: gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a maximum internal value that takes precedence when the Access-Control-Max-Age is greater.

• Used to enable cross-domain http requests for:

• XMLHttpRequest or Fetch API
• Web Fonts
• WebGL textures
• Images/video frames drawn to a canvas using drawImage
• Stylesheets
• Scripts (for unmuted exceptions)

• Overview: The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.  Additionally, for HTTP request methods that can cause side-effects on server's data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.
• Examples of access control scenarios

• Simple requests that don’t require CORS (requires all 3 )

• GET / HEAD / POST
• Limited to headers: Accept / Accept-Language / Content-Language / Content-Type / DPR / Downlink / Save-Data / Viewport-Width / Width
• Content-Type:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

• Preflighted requests

• Unlike “simple requests” (discussed above), "preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.
• Any  of these 3

• PUT / DELETE / CONNECT / OPTIONS / TRACE / PATH
• Same header rule above
• Same Content-Type rule above

CSS

• flex

• The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
• Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children (said "flex items").
• 
• Parent properties

• display: flex
• flex-direction: row | row-reverse | column | column-reverse
• flex-wrap: nowrap | wrap | wrap-reverse
• flex-flow: This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
• align-items: This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
• align-content: This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

• Child properties

• order: By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
• flex-grow (default 0):

• This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
• If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

• flex-shrink (default 1): This defines the ability for a flex item to shrink if necessary.
• flex: This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters are optional. Default is 0 1 auto.

SASS

• Syntactically Awesome Style Sheets
• Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

• Variables :  You can store things like colors, font stacks, or any CSS value you think you'll want to reuse.
• Nesting : let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML
• Partials : You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. A partial is simply a Sass file named with a leading underscore. Sass partials are used with the @import directive.
• Import : Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
• Mixins :  A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.
• Extend/Inheritance : This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.
• Operators : Sass has a handful of standard math operators like +, -, *, /, and %

Tailwind

• Benefits

• Customize colors, spacing, fonts, etc
• By using utility classes, don’t need to name classes
• No context switching b/w HTML and CSS?
• Dev speed
• Responsive
• Small size: Use PurgeCSS to remove unused classes (sub-10k)

• Usage

• No pre-styled components
• End up writing classes very similarly to how I use Bootstrap: bg-purple text-white font-bold p-4 rounded
• Requires a pre-processor

Docker

• https://www.youtube.com/watch?v=5N6gTVCG_rw
• Different than Vagrant. Not a fair comparison
• Docker Engine sits on top of OS, runs images as containers

• Uses minimal resources, but there is a performance hit. Each service should run in its own container
• Has a dockerfile (5-30 lines) which builds a…
• Docker image file (complete application)

• Project code
• Software packages
• It’s not a full machine (like Ubuntu) because we don’t need  all that, it sits on top  of a machine
• 

• Run images as a container, run as many as you want until you run out of resources
• Push updates to Docker Hub (default) or Quay.io (the Github of Docker images)
• Docker makes it easy to join servers together to form a cluster, called a Docker Swarm

• Create server w/ a docker image (like Ubuntu w/ Docker installed)

• Commands

• Create container: run <image> [-d (daemon) -p $external:$internal --name $name]
• Start/stop container: start/stop <name|id>
• List containers: ps [-a for stopped containers]
• Remove container: rm <name|id>
• Login to container hub: login

Elastic Beanstalk

• Deploys, manages and scales web apps/services using managed containers
• Can build: websites, CMS, APIs, SaaS apps
• Get to market faster
• Auto load-balance and scale
• Tweak any resource
• No additional charge

ES6 / ES2015

• anonymous functions

• add(): function() {}
• add() {}

• arrows : Shorthand for anonymous functions. Note: changes the behavior of this . In the example below, it’s value does not change, rather than undefined  (or window , not sure) if function  was used.

function(task) {

        return console.log(‘foo’);

}

(task) => {

         console.log(‘foo’); ^[b]

}

task ^[c]  => {

        console.log(‘foo’);

}

task => console.log(‘foo’)

• backticks

• string delimiter
• template literals
• can be multiline
• allows interpolation and any valid JS expression (operators, functions)
• can use tagged templates to call a function

• fn`foo, ${bar} and ${baz}`
• fn is called once with template, ...expressions
• template is ['foo, ', ' and ', ''] and expressions is [bar, baz]

• default values :

• discount = discount || 10
• function (cost, discount = .10 ^[d] ) {

• fetch:  
• let : the new var. Block-scoped rather than lexically scoped. Meant to fix mistakes where you reassign a variable and lose a reference that was passed along somewhere else
• promises : A placeholder for an operation that has not yet taken place. Promises avoid callback hell, which is a series of nested callback functions (ends with a series of braces at the end)

Firebase

• In short Firebase is platform which allows one to build web and mobile applications without server side programming language.

• Or: A frontend-focused NoSQL realtime datastore

• Clients connect to it directly. Don’t have to go through a server. Or a REST api. BaaS
• Don’t have to worry about hosting and in fact you can’t host it. Scales automatically
• For smaller or mid-sized apps. For the presentation layer.
• From Google I/O 2016

• Scales automatically
• Handles auth

• Google, Fb, Twitter, Github, Email/password, SMS
• Multiple attached to a single account
• Session mgmt
• Passwords resets
• Anonymous accounts (guest shopping cart -> login)

• Realtime database stores JSON data in ms

• The original magic of Firebase
• Most dbs work on request/response model
• FB notifies of changes to the data and is synchronized to all connected devices within ms
• Automatically handles lost inet connections by queuing up messages in memory and syncing when there is a connection again
• Event logging

• File storage

• Uses GCS
• Also auto handles connection issues

• Demo

• Realtime database

• Load config
• Init services (auth, storage, database)
• Get reference to db schema
• Push new message to db
• Listen to event on db reference

• Auth

• Enable signin options in console
• Add code to signin with Google (the web option shown)
• Listen for auth change event and set user’s name

• Storage

• Set a reference to the folder to upload to
• Create new photo reference with filename
• Upload file
• Listen for stage change event and get download url

• New in 2017:

• DebugView: Test out analytics
• Cloud Functions: Same as Lambda
• Performance Monitoring: Performance data from actual users
• Hosting: For static content

• An easy-to-use hosting service for all of your static files. It serves them from a global CDN with HTTP/2.

• Analytics for Firebase: Custom events?

• New in 2018:

• Crashlytics (mobile only):

• Automatically collects, analyzes and organizes crash reports
• Understand which ones are most important to fix first
• Consists of dashboard and alerts
• Crashes are intelligently grouped across versions w/ individual stack traces. Also supports log messages and key/value pairs to be used in conjunction to understand.

Frontend frameworks

• Angular, React, Vue

Learning curve: Vue > React > Angular

Popularity: React > Angular > Vue

git

• branches: Because a branch in Git is actually a simple file that contains the 40 character SHA-1 checksum of the commit it points to, branches are cheap to create and destroy. Creating a new branch is as quick and simple as writing 41 bytes to a file (40 characters and a newline).

• delete all merged branches: git branch --merged | egrep -v "(^\*|master|dev)" | xargs git branch -d

• init

• git init
• git add
• git commit
• (Create repo in bitbucket)
• git remote add origin git@bitbucket.org :futzlarson/matrixguy.git
• git push -u origin master

• remote servers

• git remote: lists the shortnames of each remote handle you’ve specified
• git remote -v:  shows you the URLs that Git has stored for the shortname to be used when reading and writing to that remote
• origin: default remote name when you clone a repo
• If you have more than one remote, the command lists them all. This means we can pull contributions from any of these users pretty easily.
• git remote add <shortname> <url>
• For example, if you want to fetch all the information that Paul has but that you don’t yet have in your repository, you can run git fetch pb
• git remote show <shortname>

• lists the URL for the remote repository as well as the tracking branch information. The command helpfully tells you that if you’re on the master branch and you run git pull, it will automatically merge in the master branch on the remote after it fetches all the remote references. It also lists all the remote references it has pulled down.

• Check out remote branch

• git checkout -b serverfix origin/serverfix

• fetch vs pull

• fetch : only downloads the data to your local repository – it doesn’t automatically merge it with any of your work or modify what you’re currently working on. You have to merge it manually into your work when you’re ready.
• pull : automatically fetch and then merge that remote branch into your current branch

• by default, the git clone command automatically sets up your local master branch to track the remote master branch (or whatever the default branch is called) on the server you cloned from
• Running git pull generally fetches data from the server you originally cloned from and automatically tries to merge it into the code you’re currently working on.

• push

• git push [remote-name] [branch-name]
• This command works only if you cloned from a server to which you have write access and if nobody has pushed in the meantime

• merge:

• Doesn’t rewrite history, no commits are being changed
• More flexibility with your commits, no danger of overwriting history that people are concerned with

• rebase:

• Take all the changes that were committed on one branch and replay them on another one. This removes the original commit and creates a new one (new author?, new timestamp)

• tag:

• git tag: List tags
• git show MVP1: Show tag info
• Two kinds:

• Lightweight: very much like a branch that doesn’t change — it’s just a pointer to a specific commit
• Annotated (recommended): Stored as full objects in the Git database. They’re checksummed; contain the tagger name, email, and date; have a tagging message; and can be signed and verified with GNU Privacy Guard (GPG). It’s generally recommended that you create annotated tags so you can have all this information

• git tag -a MVP1

• HEAD

• a lot different than the concept of HEAD in other VCSs you may be used to, such as Subversion or CVS
• In Git, this is a special pointer to the local branch you’re currently on. In this case, you’re still on master. The git branch command only created a new branch – it didn’t switch to that branch.

• submodules: Repo within a repo

• clones all files into the repo with full git history from specific commit, so it won’t break or update
• to update, check out latest commit

• files to commit

• composer.json | lock: Yes
• composer.phar: No
• yarn.lock: Yes

• You don’t need to read or understand this file - just check it into source control.

Go

• ‘Cool’ language designed by Google because of frustration with C++ to solve Google-like problems (large programs, high efficiency, lots of users/developers, good tooling) with cloud computing, big data
• Strongly-typed. Compiles to machine code but is far newer than the competition: (C or C++, Java kind of). Builds in a second or two at most. Simple dependency model that only compiles everything (libraries) once
• Remove complex bits (memory mgmt, pointers) and go down to the simplest possible tool that can do the job, with the same performance as C++
• Focus on the problem you’re trying to solve, rather than how you solve it
• Doesn’t try to compete with other languages that are constantly adding features and likewise become similar. The language is fixed. No significant changes since Go1
• Focus on readability. Not allowed to do any of the complex things. No heap or stack. There are pointers, but you can’t delete them. There is a garbage collector
• Conscious decision: More fun to write in vs Easier to maintain
• Performance over expressiveness (map, filter) that is often slower

Google Tag Manager

• Acts as a bridge between marketers and developers
• Tags mean script tags
• Lets the marketer manage Google Analytics, Hubspot, etc.

GraphQL

• A simple query language for your API
• Get many resources in a single request so cut down on calls
• Know exactly what data you can request from your API without leaving your editor, highlight potential issues before sending a query, and take advantage of improved code intelligence.
• Evolve your API without versions
• Presentation

• 5 default scalar type: int, float, string, boolean, id
• Custom types: Date, JSON

• Implementation

• Only a spec, many implementations available
• Define shape of data and resolvers (queries)

Hadoop

• Apache Hadoop is a collection of open-source software utilities that facilitate using a network of many computers to solve problems involving massive amounts of data and computation. It provides a software framework for distributed storage and processing of big data using the MapReduce programming model

HAProxy

• TCP/HTTP load balancer and proxy server that allows a webserver to spread incoming requests across multiple endpoints
• Used for TCP and HTTP-based applications. Over the years it has become the standard for open source load balancing. It’s also free and comes with most Linux distributions.

Haskell

• Functional PL
• Looks like a math equation
• Functions don’t affect input and so can easily run in parallel and use multiple cores

Headless browser

• Use to run JS within a terminal. Standalone program you can download.

• Scripts are based on PhantomJS API

• Anything you can do in a browser

• Page manipulation

• Submit forms
• Click buttons
• Actions on input fields
• Login
• Wait for AJAX
• Queue URLs

• Simulate user interaction
• Capture data / screenshots

• Most often used for testing, but also for scraping
• PhantomJS: Full web stack, no browser required

• Test w/ frameworks: Jasmine, QUnit, Mocha, Capybara, WebDriver
• Quick start

• Type phantomjs and hit enter. If you see the prompt phantomjs> then you’re all set.

• This is known as REPL: Read-Eval-Print-Loop

• Type phantom.exit() to end the PhantomJS program.

• Must be called

• Works within working directory
• Same as .js files

• Others: Zombie.js, SlimerJS, trifleJS
• Most importantly, Chrome provides this. Not sure about APIs, but works for pulling urls and having JS run (like to save google chart images)

Heroku

• Platform-as-a-Service, useful if you need a backend and want to host a project for free
• Supports: Ruby, PHP, Node.js, Python, Java, Go, Clojure, Scala
• Hosts back and frontend
• Starting plan is free
• More for starting out or hobby projects

HTML5

• <article> and <address>: Semantic tags that give context that a <div> would not
• localStorage

• data cache, 5mb limit
• key/value string pairs
• sessionStorage only lasts the session, duh

HTTP request methods

• CONNECT: establishes a tunnel to the server identified by the target resource.
• HEAD: asks for a response identical to that of a GET request, but without the response body.
• OPTIONS: an HTTP/1.1 method that is used to determine further information from servers, and is a safe method, meaning that it can't be used to change the resource
• PATCH: apply partial modifications to a resource.
• PUT: method replaces all current representations of the target resource with the request payload. i.e. update versus create (POST)
• TRACE: performs a message loop-back test along the path to the target resource.

Hypervisor server

• Software that runs virtual manager servers
• A slice of a dedicated server
• Limited access to system resources, shared with other users
• Compare with Bare Metal Server

Idempotence

• Basically, that an operation can be repeated without negative effect. GET / PUT / DELETE vs POST

Javascript frameworks

Alpine.js

• “A rugged, minimal framework for composing JavaScript behavior in your markup”
• Similar to Vue but lightweight. For sprinkling in JS behavior here and there.
• Done entirely in HTML w/ attributes

• x-data=”{ open: false }”: Init/define state available to that scope
• x-show=”open”: Show based on this value
• @click=”open = true”: Event method
• @click.away=”open = false”: Do this when clicking off element
• @keydown.escape=”open = false”
• :class=”{ ‘active’ : tab == ‘tab1’ }”

• Limitations:

• No for-loop as of Jan 2020 but added in v1.9

Angular

• TypeScript framework by Google to build client-side apps, particularly SPA
• Similar to React but does more. Feature-rich, everything built in (validation, routing, cli)
• Learning curve: steep (more complex setup / optimization steps, uses TypeScript). Not just import library and go
• Developed with three key concepts in mind:

• Modular: Clear structure, reusable components
• Testable
• Maintainable

• History: Updated twice per year

• 2010: v1 known as AngularJS
• 2016: v2 Angular
• 2016 Dec: v4 (v3 skipped)
• 2017 Nov: v5
• 2018 May: v6
• 2018 Oct: v7
• 2019 May: v8
• 2020 Feb: v9

React

• JS framework for building user interfaces maintained by Facebook and Instagram
• Learning curve: Steep but less than Angular (JS + JSX, merges HTML + JS)
• Fast, simple, scalable
• The V in MVC. Can be used with Laravel
• Create reusable components in JS
• Update UI whenever needed without a reload
• Similar: preact, inferno
• https://github.com/facebookincubator/create-react-app#getting-started
• Codecademy

• JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML. Has to be compiled into regular JS
• Multiline JSX expressions need to be enclosed in parens (like function/object brackets)
• Must have at most one outermost element
• ReactDOM.render() only updates DOM elements that have changed. Accomplished via The Virtual DOM:

• Copy of the DOM that can be updated much faster.
• Changes are compared (diffed) to a previous snapshot, figuring out what has changed.
• Updates only those objects on the real DOM
• Three attributes of the virtual DOM that don’t appear in “real” DOM - key, ref and dangerouslySetInnerHTML
• A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element.
• What differs ReactComponent from ReactElement is - ReactComponents are stateful.

VueJS

• In between Angular (full-featured) and React (minimal)
• Vanilla JS and vanilla HTML separate with some special instructions/attributes
• Learning curve: Easy (complex setup not always req’d, import and go)
• Has a powerful CLI

Load balancing

DNS

• Load balance a domain over multiple servers. When performing traffic load balancing with DNS, you don’t have any control over the balancing algorithm. It always uses round robin to dedicate a server it has listed for a given record
• Can be very limiting. If a server becomes unavailable in the listed pool, DNS still provides the IP address to clients that are sending the requests. This can continue for hours until that DNS record is removed and all instances of that record expire from every DNS servers cache

Hardware

• Dedicated hardware device that handles traffic load balancing. Most dedicated hardware load balancers are simply servers running Linux. Either that or an embedded Linux distribution with some management tool that allows ease of access and a configuration overview
• The downside of load balancing with hardware is that it’s very expensive. While considered the most reliable (less chance of capping or dead-locking), set up right, software load balancing can perform just as well, and with much less resources

Software

• Software-based load balancing is a very powerful and reliable method for distributing load between servers. As it’s name suggests, software performs the balancing of requests usually on a Linux platform with a wide variety of algorithms for server allocation. One of these solutions is IPVS, a powerful load balancer that’s been included in every Linux kernel since version 2.4.
• However, the solution we always happily choose is HAProxy

Other JS libraries/frameworks

• flux: Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
• redux* (many things): open-source JavaScript library designed for managing application state. It is primarily used together with React for building user interfaces.
• clojurescript: Probably fuck off
• lodash: JavaScript library which provides utility functions for common programming tasks using the functional programming paradigm.
• axios

• npm package
• Works similarly to jQuery’s $.ajax() but with Promises

mounted() {

        axios.get(‘/skills’).then(response => this.skills = response.data);

}

• apisauce
• fetch
• recompose
• meteor

Babel

• Translate modern JS (like ES2015) to be backwards-compatible
• AKA Javascript compiler
• But with only IE11 not supporting ES6, what’s the point anymore?

• ES6 support: https://caniuse.com/#search=ES6
• IE11 has 2%: https://www.w3schools.com/browsers/browsers_explorer.asp

Bower

• Manages front-end dependencies

Webpack

• Module bundler for modern JS apps
• When Webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles — often only one — to be loaded by the browser.
• In 2017 Webpack 2 and Webpack 3 have been released and the module bundler has grown to become standard of module bundling in the JS world.

TypeScript

• Typed superset of JS that compiles to plain JS by Microsoft
• Requires a build process (Webpack, gulp, grunt)
• Features

• Static typing: Inferred from context, used to catch errors early
• Classes
• Interfaces
• Strict null checks:

• cannot read property 'x' of undefined
• undefined is not a function

• Use ES2015 features

JSON API

• A SPECIFICATION FOR BUILDING APIS IN JSON
• From Ember docs:

• JSON API standardizes how JavaScript applications talk to servers, so you decrease the coupling between your frontend and backend, and have more freedom to change pieces of your stack.
• By using JSON API to interop between your Ember app and your server, you can entirely change your backend stack without breaking your frontend. And as you add apps for other platforms, such as iOS and Android, you will be able to leverage JSON API libraries for those platforms to easily consume the same API your Ember app uses.

• From JSON API site

• If you’ve ever argued with your team about the way your JSON responses should be formatted, JSON API can be your anti-bikeshedding tool.
• By following shared conventions, you can increase productivity, take advantage of generalized tooling, and focus on what matters: your application.
• Clients built around JSON API are able to take advantage of its features around efficiently caching responses, sometimes eliminating network requests entirely.
• MIME type: application/vnd.api+json

JWT

• JSON Web Token
• Client:Login request -> Server:Create token -> Client:Store token and use as needed -> Server:Replies

Kubernetes / K8S

• Resources

• https://www.linode.com/docs/kubernetes/deploy-and-manage-a-cluster-with-linode-kubernetes-engine-a-tutorial/
• https://www.linode.com/docs/kubernetes/beginners-guide-to-kubernetes/
• https://linuxacademy.com/

• Auto-scaling

• Optimizes container orchestration deployment and management for cloud infrastructure by creating groups (Pods) of containers that scale without writing additional lines of code and responding to the needs of the application
• Infrastructure will self-heal
• Environmental consistency from development through to production

• Initially designed by Google

• Manages the lifecycle of containers, creating and destroying them depending on the needs of the application
• Has become one of the most discussed concepts in cloud-based application development, and the rise of Kubernetes signals a shift in the way that applications are developed and deployed

• Overview

• Formed by a cluster  of servers, called Nodes, each running Kubernetes agent processes and communicating with one another
• The Master Node  contains a collection of processes called the control plane that helps enact and maintain the desired state of the Kubernetes cluster, while Worker Nodes  are responsible for running the containers that form your applications and services.
• Kubernetes is a container  orchestration tool and, therefore, needs a container runtime installed to work.
• The default container runtime for Kubernetes is Docker

• Containers  are similar to virtual machines. They are light-weight isolated runtimes that share resources of the operating system without having to run a full operating system themselves. Containers consume few resources but contain a complete set of information needed to execute their contained application images such as files, environment variables, and libraries.
• Containerization  is a virtualization method to run distributed applications in containers using microservices. Containerizing an application requires a base image to create an instance of a container. Once an application’s image exists, you can push it to a centralized container registry that Kubernetes can use to deploy container instances in a cluster’s pods
• Orchestration  is the automated configuration, coordination, and management of computer systems, software, middleware, and services. It takes advantage of automated tasks to execute processes. For Kubernetes, container orchestration automates all the provisioning, deployment, and availability of containers; load balancing; resource allocation between containers; and health monitoring of the cluster.
• API

• Kubernetes is built around a robust RESTful API. Every action taken in Kubernetes—be it inter- component communication or user command—interacts in some fashion with the Kubernetes API. The goal of the API is to help facilitate the desired state of the Kubernetes cluster.
• The Kubernetes API is a “declarative model,” meaning that it focuses on the what, not the how. You tell it what you want to accomplish, and it does it. This might involve creating or destroying resources, but you don’t have to worry about those details. To create this desired state, you create objects , which are normally represented by YAML files called manifests , and apply them through the command line with the kubectl  tool.

• Servers

• Master  and Node . Together form a cluster , controlled by services that make up the Control Plane , which refers to the functions that make decisions about cluster maintenance, whereas the Master is what you interact with on the command-line interface to assess your cluster’s state.
• The Kubernetes Master is normally a separate server responsible for maintaining the desired state of the cluster. It does this by telling the Nodes how many instances of your application it should run and where
• Nodes are worker servers that run your application, that also run two processes

• kubelet  receives descriptions of the desired state of a Pod from the API server, and ensures the Pod is healthy, and running on the Node.
• kube-proxy  is a networking proxy that proxies the UDP, TCP, and SCTP networking of each Node, and provides load balancing. kube-proxy is only used to connect to Services.

• Control Plane

• Responsible for making decisions about the cluster and pushing it toward the desired state
• Three processes

• kube-apiserver  is the front end for the Kubernetes API server
• kube-controller-manager  is a daemon that manages the Kubernetes control loop
• kube-scheduler  is a function that looks for newly created Pods that have no Nodes, and assigns them a Node based on a host of requirements

• One database

• Etcd  is a highly available key-value store that provides the backend database for Kubernetes. It stores and replicates the entirety of the Kubernetes cluster state. It’s written in Go and uses the Raft protocol, which means it maintains identical logs of state-changing commands across nodes and coordinates the order in which these state changes occur

• Objects: Represent your application, its networking, and disk resources–all of which together form your application

• Pods

• All containers exist within pods. Smallest unit of architecture. Think of them as a wrapper for your container. Each Pod gets its own IP address with which it can interact with other Pods within the cluster
• Usually, a Pod contains only one container, but a Pod can contain multiple containers if those containers need to share resources
• Are “mortal”, which means they are created and destroyed depending on the needs of the application. Pods get destroyed without respect to which Pod was created first
• Example manifest:

• Services

• Services group identical Pods together to provide a consistent means of accessing them. For instance, you might have three Pods that are all serving a website, and all of those Pods need to be accessible on port 80. A Service can ensure that all of the Pods are accessible at that port, and can load balance traffic between those Pods
• A Service can allow your application to be accessible from the internet. Each Service gets an IP address and a corresponding local DNS entry. Additionally, Services exist across Nodes
• Four types of services:

• ClusterIP : Exposes the Service internally to the cluster. This is the default setting for a Service.
• NodePort : Exposes the Service to the internet from the IP address of the Node at the specified port number. You can only use ports in the 30000-32767 range
• LoadBalancer : This will create a load balancer assigned to a fixed IP address in the cloud, so long as the cloud provider supports it. In the case of Linode, this is the responsibility of the Linode Cloud Controller Manager , which will create a NodeBalancer for the cluster. This is the best way to expose your cluster to the internet
• ExternalName : Maps the service to a DNS name by returning a CNAME record redirect. ExternalName is good for directing traffic to outside resources, such as a database that is hosted on another cloud

• Example manifest:

• Volumes

• A way to share file storage between containers in a Pod. Kubernetes Volumes differ from Docker volumes because they exist inside the Pod rather than inside the container. When a container gets restarted, the Volume persists. Note, however, that these Volumes are still tied to the lifecycle of the Pod, so if the Pod gets destroyed, the Volume gets destroyed with it
• Linode also offers a Container Storage Interface (CSI)  driver that allows the cluster to persist data on a Block Storage volume
• Example manifest:

• Namespaces

• Virtual clusters that exist within the cluster that help to group and organize objects. Every cluster has at least three namespaces: default, kube-system, and kube-public. When interacting with the cluster it is important to know which Namespace the object you are looking for is in as many commands will default to only showing you what exists in the default namespace
• Example manifest:

• Controllers: Control loop that continuously watches the Kubernetes API and tries to manage the desired state of certain aspects of the cluster

• Deployment:

• Keep a defined number of replica Pods up and running. A Deployment can also update those Pods to resemble the desired state by means of rolling updates.
• For example, if you want to update a container image to a newer version, you would create a Deployment. The controller would update the container images one by one until the desired state is achieved, ensuring that there is no downtime when updating or altering your Pod
• Example manifest:

• Jobs

• Controller that manages a Pod created for a single or set of tasks. This is handy if you need to create a Pod that performs a single function or calculates a value. The deletion of the Job will delete the Pod
• Unsure of exact purpose

• Benefits

• Load balancing

• Container orchestration system

• Uses node pools: a group of Linode servers that all have the same compute resources
• Can work with  Docker

• Enforce “desired state management”
• First building block: Cluster Services / Master

• You feed the Cluster Services a specific config (yaml) and run that config

• Pod config can have one or more container images
• Configure via kubectl command

• Manages where to host containers/applications, how to piece them together and orchestration (starting, stopping, updates, etc)
• Contains the API

• Second building block: Worker

• Container host
• Contains the Kublet process which communicates w/ the CS

Lisp

• Second high-level programming language
• Often thought of as a functional PL but isn’t
• Lots of parens
• Can redefine the language itself to change how you think about a problem
• S-expressions, macros

Machine learning

• TensorFlow
• IBM Watson
• turi
• Onnx
• Yandex CatBoost
• dmlc XGBoost
• Keras
• Caffe
• scikit learn
• libsvm
• mxnet

Maven

• Maven is a build automation tool used primarily for Java projects

MongoDB

add field

db.actors.update({}, {

$set: { "approved": true }

}, { upsert: false, multi: true })

rename field

        db.actors.updateMany({}, {

                $rename: { “resume_url”: “resume” }

        })

NFS/SMB

• Networked File System

• Originally designed by Sun
• V3 (1995): 64-bit support, files larger than 2gb
• V4 (2000): Performance, security improvements

• Server Message Block

• Designed by IBM
• Microsoft added features, made it able to be mapped and accessed like a local hard disk

Node.js

• Runtime JS environment for running JS server-side, based on V8
• Not a full-stack framework, so not bloated
• Really fast, non-blocking. Delivers JSON really well
• Can use one language for backend and frontend
• Used by: LinkedIn, Walmart, Paypal, Uber, Netflix
• Used for:

• npm/yarn utils
• web server: express, koa

• $ node to enter js shell
• No window  or document  but there is global  and process
• Comes with npm, creates package.json
• http is built-in web server

NoSQL

Quite simply, doesn’t use SQL. But generally they are non-relational, of which there are three categories:

1. Document model : Stores data in documents such as JSON, eliminating the need for joins. Also, each document can contain different fields.

1. Examples : MongoDB, CouchDB
2. Consistency : MongoDB provides tunable consistency. By default, data is consistent — all writes and reads access the primary copy of the data. As an option, read queries can be issued against secondary copies where data maybe eventually consistent if the write operation has not yet been synchronized with the secondary copy; the consistency choice is made at the query level.
3. Visualization and Reporting : Many companies conduct data visualization, analytics, and reporting using SQL-based BI platforms that do not natively integrate with NoSQL technologies. To address this, organizations turn to OBDC drivers that provide industry-standard connectivity between their NoSQL databases and 3rd party analytics tools. For example, the MongoDB Connector for BI allows analysts, data scientists, and business users to seamlessly visualize semi-structured and unstructured data managed in MongoDB, alongside traditional data from their SQL databases, using the most popular BI tools.

2. Graph model :  Data is modeled as a network of relationships between specific elements. While the graph model may be counter-intuitive and takes some time to understand, it can be useful for a specific class of queries. Its main appeal is that it makes it easier to model and navigate relationships between entities in an application. Graph databases are useful in cases where traversing relationships are core to the application, like navigating social network connections, network topologies or supply chains.

1. Examples : Neo4j, Giraph

3. Key-Value model : Most basic type of non-relational database. Every item in the database is stored as an attribute name, or key, together with its value. The value, however, is entirely opaque to the system; data can only be queried by the key. Key value stores and wide column stores are useful for a narrow set of applications that only query data by a single key value. The appeal of these systems is their performance and scalability, which can be highly optimized due to the simplicity of the data access patterns and opacity of the data itself.

1. Examples : Riak, Redis

npm/yarn

• But why versus CDN?

• Although a CDN might be easier, it's still another request to a server. Your browser can currently do 5 requests at the time. This means that if you load multiple resources using urls you need to wait a bit until the whole page is loaded. When you minify and compile everything together you only need to include one file.

• HTTP/2 reduces the benefit of combining files
• CDNs cache files in locations around the world ("edge caching"), i.e. closer to the user than your own server. This reduces latency.

• My recommendation: For development and trying out stuff a CDN is fine. For an actual application I would advise you to compile and minify everything into one file and include that

• Node.js package manager for utility modules

• Inspired by shortcomings of pear and cpan
• No vetting process (relies on user reports)
• Install all dependencies in one command (like composer)

• Uses packages.json
• Consists of two parts

• npm $command

• install/uninstall packages

• --no-audit to skip retarded security vulnerabilities I couldn’t get around

• version mgmt: easy to keep packages up to date and switch to any version
• dependency mgmt

• npm site: publish/share tools written in JS (browser, server, command-line)

• yarn: faster
• Packages

• Development

• browser-sync: Auto refresh browser on file changes
• gulp: Javascript task runner

• gulpfile.js

• gulp-sass: SASS compiling

• Development/Production

• bootstrap: Duh
• jquery
• popper.js: Positioning of popovers, tooltips

npm packages

• grunt

• similar to gulp
• as of 3/2015:

• older, has more plugins and steeper learning curve
• slower

• gulp

• A build system aka task runners that automate repetitive work
• Works with other tools like package managers
• Components of a modern front-end workflow

• package manager: composer, npm, bower
• pre-processors

• css: sass, less
• js: coffeescript, typescript
• html: haml, jade, markdown, slim

• task runners & build tools: gulp, grunt

• Typically made up of 4 components

• required modules
• named tasks (compressing images, copying files, deployment build)

• usage: gulp scripts (scripts being the name of the task)

• watch task: watch files/folders for changes and run a named task
• default task: main function

• runs tasks asynchronously

Progressive Web App

• Creating mobile apps is daunting

• Would be great to just make a website that can access native features:

• Install on home screen
• Access offline (with service workers)
• Get push notifications

• Minimum criteria of a PWA:

• HTTPS
• Register a Service Worker (for offline access) with a fetch event handler

• Javascript file run by the browser in the bg and handles events fired by the browser or the page
• Since it’s run in the bg, page doesn’t need to be open and no markup required
• Events like fetch for intercepting and responding to network requests, which enables push notifications (which iOS does not yet support)

• Valid web manifest file with a minimal homescreen icon set (which iOS does not fully support as of June 2020: https://bugs.webkit.org/show_bug.cgi?id=183937 )

• But also:

• Take advantage of platform APIs

• PWAs are still new and changing:

• Still accessed via url and run in the browser (but seems like there is support for a full-screen experience)
• Not supported by all browsers
• Install banner is Android-only

• While there is an official specification for the web manifest, it leaves it open to browsers as to how they will handle the add to homescreen experience.
• https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

• Questions:

• Requirements: TLS, service workers and push notifications for offline capabilities
• Have to meet a quality/engagement bar set by Google?

React Native

• Build native mobile apps using JavaScript and React
• Not a Cordova webview solution, but uses real native components and APIs

RDS

• Amazon Relational Database Server
• Solves the scale problems of: installs, patching, monitoring, performance tuning, backups, scaling, security, hardware upgrades and storage management
• Use relational db of choice
• Uses Amazon’s relational db for the cloud: Aurora, which is MySQL-compatible
• Scale across a global footprint of data centers
• Automatic: Failover, Backups and point-in-time restore, disaster recovery, access management, encryption, security, monitoring, performance optimization

Redis

• REmote DIctionary Server
• In-memory non-relational database with fast reads/writes

• 110k SETs per second, 80k GETs per second

• NoSQL key/value store, but is simple and supports a huge number of data types
• Written in C. 1.5 million ops/sec with sub-1ms latency
• Can be used by almost any language
• Offers 5 data structures:

• strings
• hashes ^[e] : key/value pairs
• lists: lists or strings, sorted by insertion order
• sets : unordered collection of strings
• sorted sets: non-repeating collections of strings
• hyperloglogs / bitmaps: based on strings
• geospatial indexes
• bitfields
• streams

• Use cases

• Real-time analytics
• High speed transactions / data ingest
• Message queues
• Session storage
• In-app social functionality
• App job mgmt
• Search
• Machine learning
• Caching

• LRU: Less Recently Used

• allkeys-lru

• LFU: Starting with Redis 4.0, a new Least Frequently Used eviction mode is available. This mode may work better (provide a better hits/misses ratio) in certain cases, since using LFU Redis will try to track the frequency of access of items, so that the ones used rarely are evicted while the one used often have an higher chance of remaining in memory.

• allkeys-lfu

• maxmemory directive: Use a specified amount of memory for the data set

• maxmemory 100mb

• maxmemory-samples directive: Set # of samples to use to approximate LRU, since a true implementation costs more memory

• maxmemory-samples 5
• Can try setting to 10 at the expense of cpu and check cache miss rate

• maxmemory-policy: Policy to follow when memory max is reached

• Use the allkeys-lru policy when you expect a power-law distribution in the popularity of your requests, that is, you expect that a subset of elements will be accessed far more often than the rest. This is a good pick if you are unsure.

• Can monitor number of cache misses/hits w/ INFO output
• Setting an expiration costs memory, so allkeys-* is more efficient

• Persistence

• RDB, AOF [Append-only File: write all commands to file] (can use both)
• SAVE <seconds> <if-this-many-keys-have-changed>

• Usage

• $ redis-cli (default port 6379)

• CONFIG SET maxmemory-samples <count>
• DEL bar

• GET bar (nil)

• ECHO
• EXISTS foo (boolean)
• EXPIRE greeting 50 (seconds)

• PERSIST greeting (remove expiration)
• TTL greeting (seconds left)

• FLUSHALL
• GET foo
• HSET user:brad name “Brad”

• HGETALL user:brad

• INCR/DECR foo
• LPUSH people “Brad”

• LRANGE people <start> <length, -1 for all>
• RPUSH people Harry (right push)
• LLEN people (length of list)
• LPOP people
• RPOP people

• PING
• QUIT
• RENAME key1 greeting
• SADD cars “Ford”

• SISMEMBER cars “Ford” (boolean)
• SMEMBERS cars (list all members)
• SCARD cars (number of elements)

• SET foo 100

• APPEND key1 “ world”
• MSET key1 “foo” key2 “bar”
• SETEX greeting 30 “hello”

• PHP installation

• apt-get install tcl
• apt-get install redis-server
• redis-server: How to autostart?
• composer install nrk/predis (I think)
• Code:

• Connect to server
• Issue commands

• Questions

• LRU or LFU?
• Maybe think about data persistence: Having the cache’s data available for loading immediately after restart allows for much shorter cache warm-up and removes the load involved in repopulating and recalculating cache contents from the primary data store.

REST

• GET /posts: Show all posts

• GET /posts/create: Display create form
• POST /posts: Create a new post

• GET /posts/{id}: Show post

• GET /posts/{id}/edit: Display edit form

• PATCH /posts/{id}: Modify an existing post
• DELETE /posts/{id}: Delete an existing post

S3

• Amazon Simple Storage Service
• 3 types of storage that can automatically migrate

• Standard
• Infrequent access
• Glacier

Scala

A general-purpose programming language providing support for functional programming and a strong static type system. Designed to be concise,[10] many of Scala's design decisions aimed to address criticisms of Java

Serverless Architecture

• Pros:

• Still a server, but not one you manage, so you no longer have to be a sysadmin
• Scales super easily
• Only pay for active compute time
• Handles Authentication and Routing

• Cons:

• Managing state is complex
• Higher latency due to spin-up time
• Vendor lock-in

AWS Lambda

• FaaS: Function as a Service
• Compute service that runs backend code (lamdba function) in response to events

• HTTP request
• On a timer schedule
• S3 bucket change

• Handles capacity, scaling, patching and infrastructure admin
• Low cost (usage in terms of 100ms), no upfront investment
• No new tools or languages to learn
• Any third-party library
• Updating

• Upload as .zip
• Use IDE in AWS Management Console
• Select from pre-built use cases like image conversion, file compression, change notifications

• Built-in support for AWS SDKs
• Select event source to monitor

• S3 bucket
• DynamoDB table

Google Cloud Platform

• Merge in WM notes

IBM Cloud Functions

Microsoft Azure

• Who cares

Software tools

InVision

• Prototypes: Drag in images and click clickable buttons
• Feedback: Circle and comment
• Collaboration: Realtime screenshare, self-guided tours (beacon icon) with comments questions
• Workflow: Project mgmt tool basically Trello
• User Testing: Record screen and their face (mobile only?)
• Boards: Pinterest

Zapier

• Zapier moves info between your web apps automatically, so you can focus on your most important work.
• Trigger -> Prepare data -> Action (webhook)

SQL JOINS

Television screens

• LCD (Liquid Crystal Display)

• Backlight (usually fluorescent) with an LCD screen in front of it
• Can never produce true black
• Inexpensive

• LED (Light Emitting Diode)

• LCD w/ LED backlight
• Lower power consumption
• Truer blacks

• OLED

• Emits its own light rather than relying on backlight
• Currently (2017) very expensive

Terms

• Singleton: Ensures a class has only one instance and provides global access to it
• SPA: Single Page App (index.html)
• Traits

• Essentially language assisted copy and paste
• Like a class that can be used in other classes

UDP vs TCP

• Used for sending packets of data. Delivery difference
• User Datagram Protocol

• Faster
• Sends data without keeping order
• Often used for video streaming, video calls, games or any app that requires fast transmission
• Caught by firewalls because it uses common VPN ports

• Transmission Control Protocol

• More reliable
• Slower due to higher encryption
• Ensures packets arrive in the right order with none missing
• Most commonly used Internet Protocol since it offers error-checking
• Get by firewalls because it uses common ports like 80, 443

Vagrant

• A simple, elegant way to manage and provision Virtual Machines.
• Leverages a declarative configuration file which describes all your software requirements, packages, operating system configuration, users, and more
• Vagrant aims to mirror production environments by providing the same operating system, packages, users, and configurations, all while giving users the flexibility to use their favorite editor, IDE, and browser

Video tech

• MSE: Media Source Extensions

• Build your own buffer?

• DASH: Dynamic Adaptive Streaming over HTTP

• Instead of one resolution file, different quality a/v and swap depending on bandwidth
• Uses a DASH manifest with metadata, handed to a DASH-compatible player

• HLS: HTTP Live Streaming

• Similar to MPEG-DASH, developed by Apple
• Also uses a manifest

Webkit

• Open-source HTML/CSS web browser rendering engine for Safari/Chrome
• Other browsers

• Edge: EdgeHTML
• Firefox: Gecko
• Chrome: Blink (fork of Webkit)

Web RTC

• An open source project to enable realtime communication of audio, video and data in Web and native apps via simple APIS

• Browsers: Firefox, Opera and in Chrome on desktop and Android. WebRTC is also available for native apps on iOS and Android

WebAssembly

• A web standard that defines a binary format and a corresponding assembly-like text format for executable code in Web pages. It is meant to enable executing code nearly as quickly as running native machine code. It was envisioned to complement JavaScript to speed up performance-critical parts of web applications and later on to enable web development in languages other than JavaScript. It is developed at the World Wide Web Consortium (W3C) with engineers from Mozilla, Microsoft, Google, and Apple.

Websockets

• WebSockets represent a long awaited evolution in client/server web technology. They allow a long-held single TCP (rather than HTTP) socket connection to be established between the client and server which allows for bi-directional, full duplex, messages to be instantly distributed with little overhead resulting in a very low latency connection.
• Cross domain communication has been considered from day one and is dealt with within the connection handshake
• WebSockets don’t make AJAX obsolete but they do supersede Comet (HTTP Long-polling/HTTP Streaming) as the solution of choice for true realtime functionality. AJAX should still be used for making short-lived web service calls, and if we eventually see a good uptake in CORS supporting web services, it will get even more useful. WebSockets should now be the go to standard for realtime functionality since they offer low latency bi-directional communication over a single connection.

WebUSB

• A way for web apps to communicate with USB devices
• https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web

Wireless antenna

• Routers will have a constant signal output (like 10 milliwatts) to the antenna that can’t be changed, but you can redirect where the power goes
• Think of gain as a way of focusing the signal where you want it to go, to give it further range
• Measured in dbi
• A “high gain” antenna manipulates the signal so it goes further

Wireless standards

• 802.11, in order of speed / range

• Higher frequency (5Ghz) absorbed by other objects
• MIMO = Multiple Input/Output
• MU-MIMO = Multiple User MIMO
• a/2: OG. Oct 1999. 5Ghz. 54 Mbit/s [not used anymore]
• b/1: Also OG, same time. 2.4Ghz. 11 Mbit/s [less absorption issues, more frequency conflicts]
• g/3: June 2003. 2.4Ghz. 54 Mbit/s, backwards-compatible w/ b [same frequency issues]
• n/4: Oct 2009. Both 5Ghz and 2.4Ghz. 600 Mbit/s

• Uses MIMO. 4 streams of 150 Mbit/s

• ac/5: Jan 2014. 5Ghz.

• 8 MIMO streams
• 7 gigabits per second

• ax/6: 2019. 2.4/5Ghz

• Huge change to wifi
• Uses numbers instead of 802.11ax, and will show in the wifi icon
• 600 (1 spatial stream) to 9608 (8 spatial streams) Mbit/s
• Handles more clients (reduced latency via OFDMA) and cluttered environments better
• Devices:

• Samsung Galaxy S10+: 608 down / 809 up!
• iPhone 11 and up (or SE)