Simen Brekken simenbrekken

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

Experimental Relay Implementation

Features:

Relay.fetch(graphqlQuery) returns subscribtion that could change over time by mutation queries.
Relay.update(m: UpdateMutation) optimistically updates resource in all previous queries that contains updated resource.
Relay.update(m: DeleteMutation) optimistically deletes resource from all previous queries that contains deleted resource.
Relay.update(m: CreateMutation) pessimistically creates resource and executes again all previous queries.
All objects with id key in graphql response explained as resources. Arrays, objects without id and scalars explained as static properties.

Reactjs conf 2015 Notes

react native announced
- Allows you to use react style javascript to target native ios and android, native views, live reloading
- intro pt1
- intro pt2
- facebook groups app uses react native with graphql and relay
realtime page tweaking
- rethink best practices and workflows
inmutability is a good idea

	import React from 'react';
	import { css as EmotionCSS } from 'react-emotion';

	import { jsxstyleFactory } from './jsxstyleFactory';

	const cx = (css, styles, className) =>
	EmotionCSS([{ ...css, ...styles }, className]);

	const jsxstyle = jsxstyleFactory(cx);
	export const Box = jsxstyle.Box;

	import React, {PropTypes} from 'react';

	class MyComponent extends React.Component {
	static propTypes = {
	foo: PropTypes.string,
	bar: PropTypes.number.deprecated("Use props.foo instead of props.bar"),
	});
	}

	<MyComponent foo="test"/>; // Works!

	machine:
	pre:
	- mkdir ~/.yarn-cache
	node:
	version: stable
	dependencies:
	pre:
	- curl -o- -L https://yarnpkg.com/install.sh \| bash
	cache_directories:
	- ~/.yarn-cache

	ssh-keygen -t rsa -b 4096 -m PEM -f jwtRS256.key
	# Don't add passphrase
	openssl rsa -in jwtRS256.key -pubout -outform PEM -out jwtRS256.key.pub
	cat jwtRS256.key
	cat jwtRS256.key.pub

	let timeout = 1000;

	/**
	* Create a custom observable that creates a XHR request and returns complete when the promise is fulfilled
	*/
	let observable = Rx.Observable.create((o) => {
	dataService.fetch('test.json')
	.then((data) => {
	o.onNext(data);
	o.onCompleted();

	// Have some complicated non-React widgets that manipulate DOM?
	// Do they manage a list of DOM elements? Here's how to wrap it
	// into a React component so you can "constantly rerender" it.

	// A dumb non-react widget that manually manage some DOM node that
	// represent a list of items
	function NonReactWidget(node) {
	this.node = node;
	}