Skip to content

Instantly share code, notes, and snippets.

@jakerella
jakerella / jkq.js
Last active May 3, 2024 01:49
An ultra-light, jQuery-like micro-library for selecting DOM elements and manipulating them.
(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)
*/
@ebidel
ebidel / mo_vs.proxy.js
Last active April 19, 2025 05:01
MutationObserver vs. Proxy to detect .textContent changes
<!--
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.
@straker
straker / two-way-binding.js
Last active October 14, 2024 19:31
Simple and small two-way data binding between DOM and data
/**
* @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
@Restuta
Restuta / the-bind-problem.jsx
Last active March 16, 2024 00:22
React, removeEventListener and bind(this) gotcha
/* 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));
@felquis
felquis / sw.js
Created December 9, 2015 19:41
sw.js
/*
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
@ebidel
ebidel / dom-property-watcher.js
Created September 12, 2015 17:01
DOM property watcher using ES6 proxies.
// 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);
@wilsonpage
wilsonpage / storage.js
Created September 11, 2015 14:25
Simple localStorage like wrapper around indexeddb
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 => {
/**
* 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(){
@learncodeacademy
learncodeacademy / pubsub.js
Created July 29, 2015 02:54
Basic Javascript PubSub Pattern
//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]) {
@alexis89x
alexis89x / broadcast-channel-es6.js
Last active July 23, 2024 06:31
Broadcast Channel API polyfill
/**
@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
*/
/*