lionelB

// sticky element
var stickyHeader = document.querySelector( '.intro-banner' );
 
function handleFocus( e ){
  // don't try to change the scroll if the focused element is in the sticky element
  if( stickyHeader.contains( e.target )){
    return;
  }

  // quick & dirty client height on each focus

lionelB

const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)))

// Usage : compose functions right to left
// compose(minus8, add10, multiply10)(4) === 42
//
// The resulting function can accept as many arguments as the first function does
// compose(add2, multiply)(4, 10) === 42

lionelB

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

1. Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the

lionelB

// @flow

import React from "react"

import Hoverable from "../../modules/Hoverable"
import Focusable from "../../modules/Focusable"
import Touchable from "../../modules/Touchable"

type PropsType = {
  children?: React$Element<any>,

lionelB

import React, {Component, PropTypes} from "react"

import placesLoader from "./placesLoader"
import placesShape from "./placesShape"

import styles from "./GoogleMap.css"
import iconMarker from "./iconMarker.png"
import iconTrash from "./iconTrash.png"

const {arrayOf, func, number, shape, string} = PropTypes

lionelB

General

• create a single page javascript application
• be as low-level as possible to be able to control performance (=minimize layers)
• masterize your dev/build environnement so you can work/play nicely

Debug apps

• Open safari console in development menu with simulator or attached devices (enable debug in ipad/safari dev options)
• debug your app from xcode to get native debugger and performance metrics

lionelB

{
  "scripts": {
    "test": "mocha -g",
    "start": "babel-node server.js",
    "prestart": "npm run build",
    "build": "npm-run-all 'build:*'",
    "build:js": "cross-env NODE_ENV=production browserify -t babelify -t envify src/app.js > static/build.js",
    "postbuild:js": "uglifyjs static/build.js -o static/build.js",
    "build:css": "cross-env NODE_ENV=production stylus css/main.styl -o static",
    "watch": "npm-run-all --parallel 'watch:*'",

lionelB

lionelB

Numeric stepper

an angular directive for building a numeric stepper

##features

• Define minimun, maximun values and a stepSize,
• choose cycling through value when reach minimum or maximun
• integrate well whitin a form (update valid / invalid state)
• update value with keyboard arrow

lionelB

Smallest HTML5 shim ever

130 bytes, that's what it takes.

Script

"header footer section aside nav article figure figcaption hgroup time main video".replace(/\w+/g,function(a){document.createElement(a)})