julienetie

// Just add water
const = document.getElementById('water'); // Demo 

/**
 * setFPS sets the frame rate of the rAF function
 * with minimum overhead.
 * @Copyright Julien Etienne 2015
 * @License MIT
 */

julienetie

// new Date().getTime() is only used to set inital time once for outdated browsers.

    /**
     * setFPS sets the frame rate of the rAF function
     * with minimum overhead.
     * @Copyright Julien Etienne 2015
     * @License MIT
     */
    function setFPS(callback, rAF, fps) {
        // indexOf polyfill from MDN

julienetie

/**
 * Gets the DOM element, index is optional
 * @param  {String} type    Selector type
 * @param  {String} element Selector reference
 * @param  {Number} index   Collection index.
 * @return {Object}         node | HTMLCollection.
 */
function get(type, element, index) {
  var elementReference, htmlObject,
    hasIndex = typeof index == 'number';

julienetie

const delay = (callback, duration) => {
    let startTime = 0;
    let terminate = false;
    const raf = requestAnimationFrame;
    const loop = (timestamp) => {
        startTime = startTime || timestamp;
        if (timestamp > startTime + duration && !terminate && callback) 
            return callback(),terminate = true;
        raf(loop);
    }

julienetie

/**
 * Creates an equalateral triangle inside a given SVG parent node.
 * @Author Julien Etienne - 2015
 * @param  {Number} sideLength     - Length of side
 * @param  {Array} centerPosition  - central position the of triangle.
 * @param  {Object} parentNode     - The parentNode of the new triangle.
 * @return {Object}                - The polygon element.
 */
function equilateral(sideLength, centerPosition, parentNode) {
    var points,

julienetie

function isObjectLiteral(value){
  return value === Object(value) && Object.prototype.toString.call(value) !== '[object Array]';
}

julienetie

function flattenObject(ob) {
  let toReturn = {};
  let flatObject;
  for (let i in ob) {
  	console.log(i+ ' ' + typeof(ob[i]));
    if (!ob.hasOwnProperty(i)) {
      continue;
    }
    //Exclude arrays from the final result
    //Check this http://stackoverflow.com/questions/4775722/check-if-object-is-array

julienetie

<div className="hello" id="world">
    <h1>Hello World!</h1>
    <p>How are you?</p>
    <figure className="img-section">
        <figcaption>Three different breeds of dogs</figcaption>
        <img alt="Maltese Terrier" src="dog1.jpg" />
        <img alt="Black Labrador" src="dog2.jpg" />
    </figure>
</div>

julienetie

div({ class: 'hello', id: 'world' },
    h1('Hello World!'),
    p('How are you?'),
    figure({ class: 'img-section' },
        figcaption('Three different breeds of dogs.'),
        img({ alt: 'Maltese Terrier', src: 'dog1.jpg' }),
        img({ alt: 'Black Labrador', src: 'dog2.jpg' })
    )
)

julienetie

import { createNodes, div, h1, p, figure, figcaption, img } from 'hypertext';

const helloWorldTree =
        div({ class: 'hello', id: 'world' },
            h1('Hello World!'),
            p('How are you?'),
            figure({ class: 'img-section' },
                figcaption('Three different breeds of dogs.'),
                img({ alt: 'Maltese Terrier', src: 'dog1.jpg' }),
                img({ alt: 'Black Labrador', src: 'dog2.jpg' } })