Skip to content

Instantly share code, notes, and snippets.

Kevin Weber kevinweber

Block or report user

Report or block kevinweber

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@jkrems
jkrems / es-module-history.md
Last active Oct 7, 2019
History of ES modules
@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 Oct 17, 2019
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 Oct 17, 2019
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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
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 Oct 15, 2019
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() {
@toodooleedoo
toodooleedoo / README.md
Last active Jun 23, 2017
#AEM #Sightly #SSJS Server Side JavaScript Use-API Breadcrumbs
View README.md

###Description Retrieve a Page Object from all pages which are in the Site root then build a breadcrumb component and display the current pages title in a submenu.

###Use case Display a bar under eg a menu which displays the current pages title and functional breadcrumb components o the right.

##Requirements

  • Responsive and which works on all mobile devices and desktop.
  • Current pages title on the left
  • Breadcrumbs on the right
View how to screencapture and make animated gifs or whathaveyou.md

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

You can’t perform that action at this time.