Peng Xiao pengx17

Everything I Know About UI Routing

Definitions

Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
1. pathname - The "file/directory" portion of the URL, like invoices/123
2. search - The stuff after ? in a URL like /assignments?showGrades=1.
3. query - A parsed version of search, usually an object but not a standard browser feature.
4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

2019 update: this essay has been updated on my personal site, together with a followup on how to get started

2020 update: I'm now writing a book with updated versions of all these essays and 35 other chapters!!!!

1. Learn in public

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos

Microsyntax

Microsyntax in Angular allows you to write <div *ngFor="let item of items">{{item}}</div> instead of <ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template.

Constraints

The microsyntax must:

be know ahead of time so that IDEs can parse it without knowing what is the underlying semantics of the directive or what directives are present.
must translate to key-value attributes in the DOM.

Raise Open File Limits in OS X

in OS X 10.4 to macOS sierra 10.12 and maybe higher!

Create Launcher Script:

`/Library/LaunchDaemons/limit.maxfiles.plist`

Copy this entire code block and paste it into your terminal and push Return to create this file for you with correct permissions. It will (probably) ask for your password:

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

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

Reposted from Qiita

For almost a year now, I've been using this "flux" architecture to organize my React applications and to work on other people's projects, and its popularity has grown quite a lot, to the point where it shows up on job listings for React and a lot of people get confused about what it is.

Why I'm tired of using and teaching flux

There are a billion explainations on the internet, so I'll skip explaining the parts. Instead, let's cut to the chase -- the main parts I hate about flux are the Dispatcher and the Store's own updating mechanism.

If you use a setup similar to the examples in facebook/flux, and you use flux.Dispatcher, you probably have this kind of flow:

	apiVersion: apiextensions.k8s.io/v1beta1
	kind: CustomResourceDefinition
	metadata:
	creationTimestamp: null
	labels:
	api: default
	platform: kubernetes_sigs_kubebuilder
	name: applications.app.k8s.io
	spec:
	group: app.k8s.io

	{
	"oneOf": [
	{
	"$ref": "https://gist.githubusercontent.com/JPinkney/847045c3b6691ba4b85c52fd77783867/raw/ef7a121250bf2174c0dcfd355a74b296bcfb65b5/openshift_schema.json#/definitions/io.k8s.kubernetes.pkg.apis.authorization.v1.NonResourceAttributes"
	},
	{
	"$ref": "https://gist.githubusercontent.com/JPinkney/847045c3b6691ba4b85c52fd77783867/raw/ef7a121250bf2174c0dcfd355a74b296bcfb65b5/openshift_schema.json#/definitions/com.github.openshift.origin.pkg.image.apis.image.v1.ImageStreamList"
	},
	{
	"$ref": "https://gist.githubusercontent.com/JPinkney/847045c3b6691ba4b85c52fd77783867/raw/ef7a121250bf2174c0dcfd355a74b296bcfb65b5/openshift_schema.json#/definitions/io.k8s.kubernetes.pkg.api.v1.AzureDiskVolumeSource"

	app.on('ready', function () {
	var globalShortcut = require('global-shortcut');
	globalShortcut.register('Alt+Command+I', function() {
	mainWindow.toggleDevTools();
	});
	});