This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
'use strict'; | |
/** | |
* Core method, similar to jQuery (only simpler) | |
* | |
* @param {String|HTMLElement} s The CSS selector to search for or HTML element to wrap with functionality | |
* @param {HTMLElement} root OPTIONAL An HTML element to start the element query from | |
* @return {Array} The collection of elements, wrapped with functionality (see API methods) | |
*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
This demo shows two ways to detect changes to a DOM node `.textContent`, one | |
using a `MutationObserver` and the other using an ES2015 `Proxy`. | |
From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50. | |
**Update**: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy. | |
This has something to do with how the browser queues/prioritizes Proxies over MO. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @param {object} scope - Object that all bound data will be attached to. | |
*/ | |
function twoWayBind(scope) { | |
// a list of all bindings used in the DOM | |
// @example | |
// { 'person.name': [<input type="text" data-bind="person.name"/>] } | |
var bindings = {}; | |
// each bindings old value to be compared for changes |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Sometimes it's pretty easy to run ito troubles with React ES6 components. | |
Consider the following code: */ | |
class EventStub extends Component { | |
componentDidMount() { | |
window.addEventListener('resize', this.onResize.bind(this)); //notice .bind | |
} | |
componentWillUnmount() { | |
window.removeEventListener('resize', this.onResize.bind(this)); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Copyright 2014 Google Inc. All Rights Reserved. | |
Licensed under the Apache License, Version 2.0 (the "License"); | |
you may not use this file except in compliance with the License. | |
You may obtain a copy of the License at | |
http://www.apache.org/licenses/LICENSE-2.0 | |
Unless required by applicable law or agreed to in writing, software | |
distributed under the License is distributed on an "AS IS" BASIS, | |
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
See the License for the specific language governing permissions and |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Watch accesses/sets on a DOM element property. | |
function watchPropsOn(el) { | |
return new Proxy(el, { | |
get(target, propKey, receiver) { | |
//return Reflect.get(target, propKey, receiver); | |
console.log('get', propKey); | |
return el[propKey]; | |
}, | |
set(target, propKey, value, receiver) { | |
console.log('set', propKey, value); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Storage(name) { | |
this.ready = new Promise((resolve, reject) => { | |
var request = window.indexedDB.open(location.origin); | |
request.onupgradeneeded = e => { | |
this.db = e.target.result; | |
this.db.createObjectStore('store'); | |
}; | |
request.onsuccess = e => { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Produces a function which uses template strings to do simple interpolation from objects. | |
* | |
* Usage: | |
* var makeMeKing = generateTemplateString('${name} is now the king of ${country}!'); | |
* | |
* console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'})); | |
* // Logs 'Bryan is now the king of Scotland!' | |
*/ | |
var generateTemplateString = (function(){ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//events - a super-basic Javascript (publish subscribe) pattern | |
var events = { | |
events: {}, | |
on: function (eventName, fn) { | |
this.events[eventName] = this.events[eventName] || []; | |
this.events[eventName].push(fn); | |
}, | |
off: function(eventName, fn) { | |
if (this.events[eventName]) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
@class BroadcastChannel | |
A simple BroadcastChannel polyfill that works with all major browsers. | |
Please refer to the official MDN documentation of the Broadcast Channel API. | |
@see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API on MDN</a> | |
@author Alessandro Piana | |
@version 0.0.6 | |
*/ | |
/* |