Nicolas Gryman ngryman

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

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.

🎨 when improving the format/structure of the code
🚀 when improving performance
✏️ when writing docs
💡 new idea
🚧 work in progress
➕ when adding feature
➖ when removing feature
🔈 when adding logging
🔇 when reducing logging
🐛 when fixing a bug

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.

REST Service for LoL spectators

This is an unofficial, uncomplete and (pretty sure) wrong documentation of the RESTful service which powers the League of Legends spectator mode.

This documentation is desgined to be community driven and should be extended by everyone. If you find things missing, add them please!

How it works

Riot's spectator mode works by requesting replay data via HTTP form a service. The data is split in chunks which usually contain about 30 seconds of gameplay. Additionally there are key frames which seem to contain more information then a single chunk. They seem to be used to support

	<h1>Safari 8 is a no go (iOS & Mac OS)</h1>
	<p>Desktop version 8.0 (10600.1.25), Mobile v. 8.0.2</p>
	<h2>Before the svg sprite as symbol</h2>

	<svg class="icon">
	<use xlink:href="#icon-airplane" />
	</svg>


	<svg xmlns="http://www.w3.org/2000/svg" style="display:none; position:absolute; width:0; height:0;">

	[url "https://github.com/"]
	insteadOf = git://github.com/
	insteadOf = [email protected]:
	insteadOf = gh:
	insteadOf = github:
	[url "https://github.com/standard-analytics/"]
	insteadOf = sa:
	[url "https://git.apache.org/repos/asf/"]
	insteadOf = apache:
	[url "https://github.com/strmpnk/"]

	module.exports = curry;

	function curry (f) {
	var arity = f.length;
	var params = [];
	var end = createEnd(f, arity);
	return createCurried(params, arity, end);
	}

	function createEnd (f, arity) {

	define(function(require) {
	var React = require('react');

	var paramRegex = /__(\d)+/;
	var parser = new DOMParser();
	var errorDoc = parser.parseFromString('INVALID', 'text/xml');
	var errorNs = errorDoc.getElementsByTagName("parsererror")[0].namespaceURI;

	// turns the array of string parts into a DOM
	// throws if the result is an invalid XML document.

	var express = require('express');
	var app = express();
	var router = express.Router();
	var hbs = require('hbs');

	app.set('view engine', 'html');
	app.engine('html', hbs.__express);

	app.use(express.json());
	app.use(express.urlencoded());