asvny

URLs into Indexed DB, via Service Workers

Let's say you're using Indexed DB for the offline data store for a catalog. One of the object stores contains product images. Wouldn't it be great if you could just have something like this in your catalog page?

<img src="indexeddb/database/store/id">

asvny

var timing = performance.timing;
var requestEntries = performance.getEntries();
var perfData = {
	PageName: window.location.pathname,
	JSFilesCount: requestEntries.filter(function(element){return element.name.indexOf('.js')> -1;}).length,
	CSSFilesCount: requestEntries.filter(function(element){return element.name.indexOf('.css')> -1;}).length,
	FilesCount: requestEntries.length + 1,
	TimeToFirstByte: timing.responseStart - timing.navigationStart,
	TimeToDOMContentLoad: 
	timing.domContentLoadedEventEnd - timing.navigationStart,

asvny

var Middleware = function() {};

Middleware.prototype.use = function(fn) {
  var self = this;

  this.go = (function(stack) {
    return function(next) {
      stack.call(self, function() {
        fn.call(self, next.bind(self));
      });

asvny

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , http = require('http')
  , mongoose = require('mongoose')
  , path = require('path');

asvny

'use strict';

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/

(function() {

    // A cache for core files like CSS and JavaScript
    var staticCacheName = 'static';
    // A cache for pages to store for offline

asvny

'use strict';

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/

(function() {

    // Update 'version' if you need to refresh the cache
    var staticCacheName = 'static';
    var version = 'v1::';

asvny

/**
 * follows a path on the given data to retrieve a value
 *
 * @example
 * var data = { foo : { bar : "abc" } };
 * followPath(data, "foo.bar"); // "abc"
 * 
 * @param  {Object} data the object to get a value from
 * @param  {String} path a path to a value on the data object
 * @return the value of following the path on the data object

asvny

Function.prototype._curry = function (f=this) {
  return (...args) => args.length < f.length
    ? f._curry(args.reduce((g, arg) => g.bind(null, arg), f)) 
    : f.apply(null, args);
};

asvny

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

asvny

exessiveSpring = "spring(200, 15, -3)"
gentleSpring = "spring(40, 5, 0)"
swingSpring = "spring(120, 15, 0)"
smoothSpring = "spring(100, 20, 0)"
superSlowSpring = "spring(30, 20, 0)"
slowSpring = "spring(100, 15, -3)"
snapSpring = "spring(200, 20, 0)"
tightSpring = "spring(300, 25, 0)"
straightSpring = "spring(500, 40, 0)"