Skip to content

Instantly share code, notes, and snippets.

👨‍💻
write, the codes

Jason Miller developit

View GitHub Profile
View worker-dom-event-properties.js
'oncopy oncut onpaste onabort onblur oncancel onchange onclick onclose oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onprogress onreset onresize onscroll onselect onstalled onsubmit onsuspend ontoggle onwaiting onwheel onpointerdown onpointermove onpointerup onpointercancel onpointerover onpointerout onpointerenter onpointerleave onselectstart onselectionchange onbeforecopy onbeforecut onbeforepaste onsearch onfullscreenchange onfullscreenerror'
.split(' ')
.map(e => {
Element.prototype[e] = null;
});
View *respond.md

respond

this isn't a library, don't use this.

it's a 1.5kb react-ey thing but using HTML instead of VDOM. diffing done via a hacked up version of set-dom.

Important Counter Demo

// this is a standard react component, except render() returns an HTML string
View compat.js
module.exports = require('preact/compat');
@developit
developit / identity-component.js
Created Mar 25, 2019
The Identity Component is a component that does nothing but render its child/children.
View identity-component.js
/**
* The Identity Component is a component that does nothing but render its child/children.
*/
export default (props) => props.children;
View serialize.js
function serialize(node) {
if (node.nodeType === 3) {
return node.data;
}
else if (node.nodeType === 8) {
return '<!--' + node.data + '-->';
}
else if (node.nodeType === 1 || node.nodeType === 9) {
let str = '<' + node.nodeName;
const attrs = [];
View *webpack-size.md

webpack-size

Weigh current module:

npx webpack-size

Weigh the size of a specific module entry:

@developit
developit / *String.prototype.replaceAll() Ponyfill.md
Last active Feb 20, 2019
~80b ponyfill for String.prototype.replaceAll()
View *String.prototype.replaceAll() Ponyfill.md

@developit/replaceall NPM

~80b ponyfill for String.prototype.replaceAll() with good performance.

Why ponyfill? Because this is a proposal for a spec, and polyfilling it in-place before it gets solidified could break code that relies on an incorrect implementation.

Alternate Version
View preact-weak-component.js
import { Component } from 'preact';
/** Example:
* componentWillUnmount(){ uncache(this) }
*/
export function uncache(component) {
setTimeout(() => {
component.__b = component.nextBase = null;
})
}
View Importable Constructable Stylesheets.md

Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:

import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet

No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

@developit
developit / ie-cors-polyfill.js
Created Jan 9, 2019
A polyfill for CORS in older versions of IE.
View ie-cors-polyfill.js
var xhr2 = false;
try { xhr2 = 'useCredentials' in new XMLHttpRequest; } catch (e) {}
var old = window.XMLHttpRequest;
function XMLHttpRequest() {
if (xhr2) return new old();
}
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
var pageOrigin = location.protocol + ':' + location.host;
var self = this;
function wrap(m) {
You can’t perform that action at this time.