Kim Chen ohmyhusky

Fixing our local environment with Browsersync

Whenever we change our templates we still have to use our build script and this can get annoying. Thankfully with webpack-dev-server and BrowserSync we can fix this:

npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server

BrowserSync will act like a proxy, waiting for webpack to do its thing and then reloading the browser for us.

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

why?

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.

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.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

Update May 2017

Eric Bidelman has documented some of the common workflows possible with headless Chrome over in https://developers.google.com/web/updates/2017/04/headless-chrome.

Update

If you're looking at this in 2016 and beyond, I strongly recommend investigating real headless Chrome: https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

Windows and Mac users might find using Justin Ribeiro's Docker setup useful here while full support for these platforms is being worked out.

	var gulp = require ( 'gulp' );
	var minifyCSS = require ( 'gulp-minify-css' );
	var uglify = require ( 'gulp-uglify' );
	var clean = require ( 'gulp-clean' );
	var rename = require ( 'gulp-rename' );
	var jshint = require ( 'gulp-jshint' );
	var plumber = require ( 'gulp-plumber' );
	var sass = require ( 'gulp-sass' );
	var autoprefixer = require ( 'gulp-autoprefixer' );
	var concat = require ( 'gulp-concat' );

	# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
	# Change example.com (server_name) to your website url
	# Change /path/to/your/root to the correct value

	server {
	listen 80;
	server_name example.com;

	root /path/to/your/root;
	index index.html;

	configureDragDrop(registerType) {
	var imageThreshold = Math.max(120, window.innerHeight / 4),
	sectionThreshold = Math.max(140, window.innerHeight / 4),
	currentDY = 0,
	frame;

	function makeScrollingHandler(threshold) {
	function getScrollDY(clientY) {
	var speed;
	if (clientY < threshold) {

	#!/bin/bash

	# References
	# http://www.computerhope.com/unix/nc.htm#03
	# https://github.com/daniloegea/netcat
	# http://unix.stackexchange.com/questions/26715/how-can-i-communicate-with-a-unix-domain-socket-via-the-shell-on-debian-squeeze
	# http://unix.stackexchange.com/questions/33924/write-inside-a-socket-open-by-another-process-in-linux/33982#33982
	# http://www.linuxjournal.com/content/more-using-bashs-built-devtcp-file-tcpip
	# http://www.dest-unreach.org/socat/
	# http://stuff.mit.edu/afs/sipb/machine/penguin-lust/src/socat-1.7.1.2/EXAMPLES

	1. Build GraphQL server using `express-graphql` package.
	2. Configure `schema.js` file.
	3. Query for data.