Shu Ding shuding

codegolf JS

Mini projects by Maxime Euzière (xem), subzey, Martin Kleppe (aemkei), Mathieu Henri (p01), Litterallylara, Tommy Hodgins (innovati), Veu(beke), Anders Kaare, Keith Clark, Addy Osmani, bburky, rlauck, cmoreau, maettig, thiemowmde, ilesinge, adlq, solinca, xen_the,...

(For more info and other projects, visit http://xem.github.io)

(Official Slack room: http://jsgolf.club / join us on http://register.jsgolf.club)

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.

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
It is free, with no quotas.
Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.

	<?xml version="1.0" encoding="UTF-8" ?>
	<opml version="1.0">
	<head>
	<title>寸志 subscriptions in Digg Reader</title>
	</head>
	<body>
	<outline text="Framer Blog" title="Framer Blog" type="rss" xmlUrl="http://framerjs.tumblr.com/rss" htmlUrl="http://framerjs.tumblr.com/" />
	<outline text="粉丝日志" title="粉丝日志" type="rss" xmlUrl="http://blog.fens.me/feed/" htmlUrl="http://blog.fens.me" />
	<outline text="AngularJS" title="AngularJS" type="rss" xmlUrl="http://blog.angularjs.org/feeds/posts/default" htmlUrl="http://blog.angularjs.org/" />
	<outline text="blog.izs.me" title="blog.izs.me" type="rss" xmlUrl="http://blog.izs.me/rss" htmlUrl="http://blog.izs.me/" />

	So, this is where swift lives, after you've installed XCode 6 Beta:

	/Applications/Xcode6-Beta.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swift

	Also, there's a directory named swift which has various libraries:

	/Applications/Xcode6-Beta.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/swift

	To start playing in a terminal:

	// Usage example:
	//
	// willTransitionTo(transition, params, query, callback) {
	// observeStore(DraftStore, s => s.isLoaded()).then(() => {
	// if (DraftStore.isMissingTitle()) {
	// transition.redirect('composeDraft', params);
	// }
	// }).finally(callback);
	// }

	/**
	* Fancy ID generator that creates 20-character string identifiers with the following properties:
	*
	* 1. They're based on timestamp so that they sort after any existing ids.
	* 2. They contain 72-bits of random data after the timestamp so that IDs won't collide with other clients' IDs.
	* 3. They sort lexicographically (so the timestamp is converted to characters that will sort properly).
	* 4. They're monotonically increasing. Even if you generate more than one in the same timestamp, the
	* latter ones will sort after the former ones. We do this by using the previous random bits
	* but "incrementing" them by 1 (only in the case of a timestamp collision).
	*/

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	var pureRender = (Component) => {
	Object.assign(Component.prototype, {
	shouldComponentUpdate (nextProps, nextState) {
	return !shallowEqual(this.props, nextProps) \|\|
	!shallowEqual(this.state, nextState);
	}
	});
	};

	module.exports = pureRender;