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
kevinweber / img
Last active Aug 13, 2019
1:1 (and other) ratio placeholder image / pixel. Generate custom sizes via
View img
<!--/* This is a 1x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
<!--/* This is a 2x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=">
<!--/* This is a 3x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAQAAACx6dw/AAAAC0lEQVR42mNkAAMAAA4AAjOwv9wAAAAASUVORK5CYII=">
<!--/* This is a 4x3 sized PNG */-->
View buttongroup.xml
<alignment jcr:primaryType="nt:unstructured"
fieldLabel="Alignment of components"
<items jcr:primaryType="nt:unstructured">
<default jcr:primaryType="nt:unstructured"
kevinweber /
Last active Jul 23, 2019
Collection of AEM Links, Commands & Tips / Cheat Sheet

Web Consoles & Tools

kevinweber / curve-example.png
Last active Jun 6, 2019
d3.js: Custom curve with rounded steps. Based on d3.curveStep.
kevinweber / this.js
Created Jun 24, 2017
JavaScript: Ways to use `this` in callback function
View this.js
// The old way (before ES6)
var _self = this;
this.element.addEventListener('click', function (event) {
// The new way (ES6)
this.element.addEventListener('click', (event) => {
kevinweber / example.html
Last active Jun 6, 2019
AEM: Include another resource + modify tag and class name #data-sly-resource
View example.html
<!--/* More: */-->
<!--/* By default, the AEM decoration tags are disabled, the decorationTagName option allows to bring them back, and the cssClassName to add classes to that element. */-->
<div data-sly-resource="${'headline' @
<!--/* More about the decoration tag: */-->
kevinweber / component.html
Last active May 14, 2019
HTL/Sightly: "Use and call template" pattern. Put template into separate file for reusability, and pass parameters when calling it. Note that in most cases it's not necessary to pass "properties" to the template because they work even if they're not passed explicitly.
View component.html
<sly data-sly-use.component="template.html"
data-sly-call="${component.template @ properties=properties}" />
kevinweber / encodeSvg.js
Created Oct 31, 2016
Helper: Convert React component (SVG element) to base64 encoded URL. Useful for adding a background image.
View encodeSvg.js
import ReactDOMServer from 'react-dom/server';
export function encodeSvg(reactElement) {
return 'data:image/svg+xml,' + escape(ReactDOMServer.renderToStaticMarkup((reactElement)));
kevinweber / e.164.phoneNumber.js
Last active Sep 27, 2018
Convert string to match E.164 phone number pattern (e.g. +1234567890)
View e.164.phoneNumber.js
* Convert string to match E.164 phone number pattern (e.g. +1234567890),
* otherwise return empty string.
function enforcePhoneNumberPattern(string) {
let newString = string.match(/[0-9]{0,14}/g);
if (newString === null) {
return '';
kevinweber / Sightly Pattern "Inline List"
Last active Sep 19, 2018
AEM/HTL: Define a list/array within a HTL template (and avoid redundant code!)
View Sightly Pattern "Inline List"
<!--/* We can define a list within a Sightly template to avoid redundant code */-->
<sly data-sly-test.versions="${['desktop', 'mobile']}"/>
<sly data-sly-list.identifier="${versions}">
<div class="element ${identifier}">Repeated content</div>
You can’t perform that action at this time.