$ docker
/* 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. |
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: |
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' } ], |
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
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.
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.
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.
elem.offsetLeft
,elem.offsetTop
,elem.offsetWidth
,elem.offsetHeight
,elem.offsetParent