Derek Reynolds derekr

ES6 Defaults / Overrides Pattern

Combine default parameters and destructuring for a compact version of the defaults / overrides pattern.

function foo ({
    bar = 'no',
    baz = 'works!'
  } = {}) {

Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.

Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.

This also means that when doing server-side rendering of a redux app, you can just do:

var app = require('your/redux/app')
var React = require('react')

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

intro

we've had great success building modular database stuff on top of leveldb with node, but as I have learnt more about databases it's become apparent to me that the idea of a modular database would be better implemented at a slightly lower level.

Level db provides a sorted key:value store, which, because of the sorted property, many things can be implemented on top of. For example, for replication, or for consistent materialized views, we often need a write ahead log. This can easily be implemented via a batch write to level, and writing the log into a section of the leveldb key space which is treated as append only.

Run each of the following lines, replacing yourdomain.com and codehere with your details:

now dns add yourdomain.com @ TXT google-site-verification=codehere
now dns add yourdomain.com @ MX ASPMX.L.GOOGLE.COM 1
now dns add yourdomain.com @ MX ALT1.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT2.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT3.ASPMX.L.GOOGLE.COM 10
now dns add yourdomain.com @ MX ALT4.ASPMX.L.GOOGLE.COM 10

tracked

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

	require_relative "test_helper"

	require "open-uri"
	require "net/http"

	class EmojiTest < Blog::Test
	def test_no_emoji
	posts.each do \|post\|
	content = File.read(post)
	refute_match /:[a-zA-Z0-9_]+:/, content,

	// the two testing modules I like
	var test = require('tape')
	var spawn = require('tape-spawn')

	var execspawn = require('npm-execspawn') // can spawn from require() scope, check it out!

	// put this in outer scope so we can kill the local server at the end
	var server

	test('start test server', function (t) {

	import React, { PropTypes } from 'react';
	import { TransitionMotion, spring } from 'react-motion';

	/**
	* One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
	*
	* Usage is simple, and really only requires two things–both of which are
	* injected into your app via react-router–pathname and children:
	*
	* <RouteTransition pathname={this.props.pathname}>

	function createDisabledUntilClientRendersComponent(component, displayName='ClientComponent') {
	return React.createClass({

	displayName,

	propTypes: {
	disabled: React.PropTypes.bool
	},

	getInitialState() {