Andre Zimpel andrezimpel

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

WebSockets + Reflux + React

Using WebSockets, React and Reflux together can be a beautiful thing, but the intial setup can be a bit of a pain. The below examples attempt to offer one (arguably enjoyable) way to use these tools together.

Overview

This trifect works well if you think of things like so:

Reflux Store: The store fetches, updates and persists data. A store can be a list of items or a single item. Most of the times you reach for this.state in react should instead live within stores. Stores can listen to other stores as well as to events being fired.
Reflux Actions: Actions are triggered by components when the component wants to change the state of the store. A store listens to actions and can listen to more than one set of actions.

Visual instructions how to enable Google Maps on IOS using `react-native-maps`

UPDATE: Following instructions are now a year old. I have recently managed to upgrade react-native-maps from 0.17 to the latest version 0.21 with react-native 0.51 - if you want to follow my instruction scroll down to the end this doc! Hope that will work for you too!

This is for my personal use, things might not be correctly explained here. For the official docs please check https://github.com/airbnb/react-native-maps

Steps from scratch:

1.react-native init GoogleMapPlayground

Crossy Road with three.js

An interactive tech demo inspired by Crossy Road using three.js where I put together a scene with an orthographic camera that follows the player, a few simplified 3D objects with some texture, lights and shadows, and a basic game logic that randomly generates a level that you can walk through.

A Pen by Hunor Marton Borbely on CodePen.

License.

PoC: GraphQL Ruby fragment caching

This example demonstrates how we can cache the response fragments in graphql-ruby.

Existing solutions only allow caching resolved values but not all the GraphQL machinery (validation, coercion, whatever).

Caching response parts (in case of Ruby, sub-Hashes) is much more efficient.

	var accounts = [
	{ name: 'James Brown', msgCount: 123 },
	{ name: 'Stevie Wonder', msgCount: 22 },
	{ name: 'Sly Stone', msgCount: 16 },
	{ name: 'Otis Redding', msgCount: 300 } // Otis has the most messages
	];

	// get sum of msgCount prop across all objects in array
	var msgTotal = accounts.reduce(function(prev, cur) {
	return prev + cur.msgCount;