Skip to content

Instantly share code, notes, and snippets.

Avatar

Kevin Weber kevinweber

View GitHub Profile
@jkrems
jkrems / es-module-history.md
Last active Oct 24, 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 Nov 28, 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 Aug 9, 2020
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 Nov 27, 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 Oct 26, 2020
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 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 Nov 20, 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.