Krzysztof Kornacki korof

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

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

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.

	# I'll be doing another one for Linux, but this one will give you
	# a pop up notification and sound alert (using the built-in sounds for macOS)

	# Requires https://github.com/caarlos0/timer to be installed

	# Mac setup for pomo
	alias work="timer 60m && terminal-notifier -message 'Pomodoro'\
	-title 'Work Timer is up! Take a Break 😊'\
	-appIcon '~/Pictures/pumpkin.png'\
	-sound Crystal"

	const express = require('express');
	const app = express();

	// Application
	app.get('/', function(req, res) {
	if (process.env.NODE_ENV === 'development') {
	for (var key in require.cache) {
	delete require.cache[key];
	}
	}

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	import React, { Children } from 'react'
	import Router from 'next/router'
	import smoothScroll from '../utils/smoothScroll'

	// this HOC is taken from https://github.com/zeit/next.js/blob/master/lib/link.js and modified
	export default class LinkSmoothScroll extends React.Component {
	constructor (props) {
	super(props)
	this.linkClicked = this.linkClicked.bind(this)
	}

	function waitForElement(selector) {
	return new Promise(function(resolve, reject) {
	var element = document.querySelector(selector);

	if(element) {
	resolve(element);
	return;
	}

	var observer = new MutationObserver(function(mutations) {

	Day 1

	Julian Cheal
	Dancing with Robots
	?

	Tero Parviainen
	Build Your Own AngularJS
	?