Kalpesh Patel kalpeshhpatel

Source : Learn to combine RxJs sequences with super intuitive interactive diagrams

Legend

Merge

Concat

This list has been updated for Big Sur (and later). Since I don't use these versions, this guide might still need further improvements. For older macOS versions, please see this older revision.

Open in Sublime Text

Open Automator
Quick Action
Set “Service receives selected” to files or folders in any application
Add a Run Shell Script action
Set the script action to /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl -n "$@"
Set “Pass input” to as arguments

3 hidden CSS tips

1. Use empty-cells to style table empty cells:

Surprisingly the browser support is quite good and extends back to IE8. Convenient to give less visual predominance to empty cells.

table {
  empty-cells: hide;
}

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

Promises puzzle answer sheet

Solution to https://twitter.com/nolanlawson/status/578948854411878400.

Puzzle #1

doSomething().then(function () {

CSS Selectors Cheatsheet

Hi! If you see an error or something is missing (like :focus-within for few years :P) please let me know ❤️

Element selectors

Element -- selects all h2 elements on the page

h2 {

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	import { Component, OnInit, OnDestroy } from '@angular/core';
	import {Http} from "@angular/http";
	import { LocalCacheService } from "./local-cache.service";

	@Component({
	selector: 'app-example',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss']
	})
	export class ExampleComponent implements OnInit, OnDestroy {