Ted Sean TedSean

Docker Commands, Help & Tips

Show commands & management commands

$ docker

Docker version info

Advanced Component Patterns

Also, check out Advanced Angular Component Patterns on Egghead!

* Titles subject to change

React	Angular
Introducing Advanced React Component Patterns	00 Introducing Advanced Angular Component Patterns (egghead)
Build a Toggle Component (source)	01 Build a Toggle Component (stackblitz) ([egghead](https:

While a lot of Node.js guides recommend using JWT as an alternative to session cookies (sometimes even mistakenly calling it "more secure than cookies"), this is a terrible idea. JWTs are absolutely not a secure way to deal with user authentication/sessions, and this article goes into more detail about that.

Secure user authentication requires the use of session cookies.

Cookies are small key/value pairs that are usually sent by a server, and stored on the client (often a browser). The client then sends this key/value pair back with every request, in a HTTP header. This way, unique clients can be identified between requests, and client-side settings can be stored and used by the server.

Session cookies are cookies containing a unique session ID that is generated by the server. This session ID is used by the server to identify the client whenever it makes a request, and to associate session data with that request.

*S

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

My preferred code style is 2-space K&R. This is intended to provide a justification for this style.

Why K&R?

K&R style has the following properties:

Provides symmetric size (in terms of screen space consumed) between the opening and closing syntax of a clode block.
Forces no empty or meaningless lines, thereby avoiding artificial distance between related things that should be together.
Consumes the minimum vertical space while keeping the opening and closing syntax of a block on separate lines from the content.

What forces layout / reflow

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

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	/* Loader that renders empty unless `props.active` is true */

	function Loader(props) {
	const { active } = props;
	return active && <div>Loading...</div>;
	}

	/* Loader class component that renders empty until a timeout */

	class LoaderWithDelay extends React.Component {

	// Children Extend Pattern

	// when to use it:
	// `Children Extend` is a pattern which focuses on passing down the state of the parent component to its children
	// Solving the problem that arise when a children component want to comunicate with their parent.

	// pros:
	// Simple to pass down state or a `callback` with basic javascript knowledge
	// Easy to understand, is just about extending a javacript object.

	import React from 'react';

	export default class CheckboxWithLabel extends React.Component {
	constructor(props) {
	super(props);
	this.state = {isChecked: false};

	// bind manually because React class components don't auto-bind
	// http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
	this.onChange = this.onChange.bind(this);

	function traverseTCPStates(eventList){
	var state = "CLOSED"; // initial state, always
	// Traversal code goes here
	var tcpStates = {
	'CLOSED' : [{ event: 'APP_PASSIVE_OPEN', new_state: 'LISTEN' }, { event: 'APP_ACTIVE_OPEN', new_state: 'SYN_SENT'}],
	'LISTEN': [ { event: 'RCV_SYN', new_state: 'SYN_RCVD' },
	{ event: 'APP_SEND', new_state: 'SYN_SENT' },
	{ event: 'APP_CLOSE', new_state: 'CLOSED' } ],
	'SYN_RCVD': [ { event: 'APP_CLOSE', new_state: 'FIN_WAIT_1' },
	{ event: 'RCV_ACK', new_state: 'ESTABLISHED' } ],