| /** | |
| WHAT: A very simple example of redux + redux-simple-router using Typescript. | |
| WHY: The official example found here: https://github.com/rackt/redux-simple-router/tree/1.0.2/examples/basic has problems: | |
| 1) it is spread over many files making it very hard to "skim" | |
| 2) it is organized by function, not by feature. (Example: learning "how to manipulate redux state" is spread over 5 files in 4 folders) | |
| 3) there are no comments explaining what's going on/why. | |
| WHO: by JasonS@Novaleaf.com |
| function logClass(target: any) { | |
| // save a reference to the original constructor | |
| var original = target; | |
| // a utility function to generate instances of a class | |
| function construct(constructor, args) { | |
| var c : any = function () { | |
| return constructor.apply(this, args); | |
| } |
| /** | |
| * Caches the return value of get accessors and methods. | |
| * | |
| * Notes: | |
| * - Doesn't really make sense to put this on a method with parameters. | |
| * - Creates an obscure non-enumerable property on the instance to store the memoized value. | |
| * - Could use a WeakMap, but this way has support in old environments. | |
| */ | |
| export function Memoize(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<any>) { | |
| if (descriptor.value != null) { |
#A brief intro into Stateless functions#
So stateless functions are new in React 0.14 which are quite interesting. They look a bit like this.
const Test = ({name, amount}) => {
return <div className="test">{name} has £{amount}</div>;
};
ReactDOM.render(<Test name="ben" amount="-2000" />) // <div className="test">ben has £-200</div> 
| /** | |
| * Detects if two elements are colliding | |
| * | |
| * Credit goes to BC on Stack Overflow, cleaned up a little bit | |
| * | |
| * @link http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery | |
| * @param $div1 | |
| * @param $div2 | |
| * @returns {boolean} | |
| */ |
| const React = require('react'); | |
| const _ = require('lodash'); | |
| var model = new falcor.Model({ | |
| cache: { | |
| movies: [ | |
| { | |
| title: "Daredevil", | |
| plot: "Marvel lol", | |
| year: "2015-", |
| #!/usr/bin/env bash | |
| # A basic Self Signed SSL Certificate utility | |
| # by Andrea Giammarchi @WebReflection | |
| # https://www.webreflection.co.uk/blog/2015/08/08/bringing-ssl-to-your-private-network | |
| # # to make it executable and use it | |
| # $ chmod +x certificate | |
| # $ ./certificate # to read the how-to |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Chat</title> | |
| <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'> | |
| <link href="style.css" rel="stylesheet" type="text/css"> | |
| <script src="https://d2g2wobxbkulb1.cloudfront.net/0.0.19/tmi.js"></script> <!--For developement--> | |
| <!--<script src="https://d2g2wobxbkulb1.cloudfront.net/0.0.19/tmi.min.js"></script>--> <!--For "production"--> | |
| </head> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body.loading #splash { | |
| opacity: 1; | |
| } | |
| #splash { | |
| position: absolute; | |
| top: 0; |
| var gulp = require("gulp"); | |
| var browserify = require("browserify"); | |
| var babelify = require("babelify"); | |
| var source = require("vinyl-source-stream"); | |
| var config = { | |
| src: "index.js", | |
| filename: "bundle.js", | |
| dest: "./" | |
| }; | |
| var extensions = ['.js', '.ts', '.json']; |
