Skip to content

Instantly share code, notes, and snippets.

Kevin Weber kevinweber

View GitHub Profile
@jkrems
jkrems / es-module-history.md
Last active Jun 17, 2020
History of ES modules
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"
@nateyolles
nateyolles / aemTouchUIValidation.js
Last active Jul 25, 2018
AEM Touch UI validation
View aemTouchUIValidation.js
var $input = $('.my-input-field'),
errorMessege = 'This field is required';
if ($input.willValidate()) {
$input.checkValidity(); // true
$input.validationMessage(); // ''
/* Set input field as invalid */
$input.setCustomValidity(errorMessage);
$input.checkValidity(); // false
@vasanthk
vasanthk / System Design.md
Last active Aug 4, 2020
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?
@nateyolles
nateyolles / aemMultifieldAdapter.js
Last active Apr 14, 2018
AEM Touch UI, Granite UI Multifield adapter
View aemMultifieldAdapter.js
/**
* Granite UI Multifield adapter
*
* Has improved setDisabled method which disables all form input fields, the
* delete buttons, the reorder buttons and the add button within the Multifield.
* The adapter also contains a new method to enable and disable just the add
* button which can be used to limit the size of the multifield.
*
* Usage:
* var field = $('.coral-Multifield').adaptTo('nateyolles-field');
View plugin.js
(function($) {
"use strict";
// Create the defaults once
var pluginName = "defaultPluginName";
var defaults = {
propertyName: "value"
};
@paulirish
paulirish / what-forces-layout.md
Last active Aug 4, 2020
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
@paucoma
paucoma / gglCalEventsOnSpreadSheet.gs
Last active Jul 29, 2020
Script to read Google Calendar Events and Count total Hours
View gglCalEventsOnSpreadSheet.gs
var gblFromYear = 2015;
var gblToYear = 2015;
var gblFromMonth = 01;
var gblToMonth = 04;
var gblFromDay = 01;
var gblToDay = 01; // Not Included as time is 00:00 of specified day
var gblTimeZone ="Europe/Madrid"
var gblCalendarName = "Work";
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;
@sebmarkbage
sebmarkbage / Enhance.js
Last active Jun 26, 2020
Higher-order Components
View Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
You can’t perform that action at this time.