Skip to content

Instantly share code, notes, and snippets.

Avatar

Kevin Weber kevinweber

View GitHub Profile
@staltz
staltz / introrx.md
Last active Jan 15, 2021
The introduction to Reactive Programming you've been missing
View introrx.md
@paulirish
paulirish / what-forces-layout.md
Last active Jan 15, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@paulirish
paulirish / rAF.js
Last active Jan 15, 2021
requestAnimationFrame polyfill
View rAF.js
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
@branneman
branneman / better-nodejs-require-paths.md
Last active Jan 15, 2021
Better local require() paths for Node.js
View better-nodejs-require-paths.md

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

@vasanthk
vasanthk / System Design.md
Last active Jan 15, 2021
System Design Cheatsheet
View System Design.md

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

  1. Clarify and agree on the scope of the system
  • User cases (description of sequences of events that, taken together, lead to a system doing something useful)
    • Who is going to use it?
    • How are they going to use it?
View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
@jkrems
jkrems / es-module-history.md
Last active Jan 8, 2021
History of ES modules
@paucoma
paucoma / gglCalEventsOnSpreadSheet.gs
Last active Jan 7, 2021
Script to read Google Calendar Events and Count total Hours
View gglCalEventsOnSpreadSheet.gs
const gblFrom = {
year : 2020 ,
month : 01,
day : 01
};
const gblTo = {
year : 2020 ,
month : 10,
day : 01 // Not included as time is 00:00 of specified day
View buttongroup.xml
<alignment jcr:primaryType="nt:unstructured"
name="./alignChildren"
fieldLabel="Alignment of components"
required="{Boolean}true"
selectionMode="single"
sling:resourceType="granite/ui/components/coral/foundation/form/buttongroup">
<items jcr:primaryType="nt:unstructured">
<default jcr:primaryType="nt:unstructured"
name="./default"
View *webpack-plugin-modern-npm.md

webpack-plugin-modern-npm

Automatically transpile modern packages in node_modules.

Available in 3 fun flavours: plugin, loader and loader factory.

Plugin

Add the plugin to your webpack config, and it should handle everything for you.

You can’t perform that action at this time.