Skip to content

Instantly share code, notes, and snippets.

View kevinweber's full-sized avatar

Kevin Weber kevinweber

113 followers · 17 following
View GitHub Profile
@kevinweber
kevinweber / img
Last active May 7, 2021 07:47
1:1 (and other) ratio placeholder image / pixel / svg. Generate custom sizes via http://png-pixel.com/
<!--/* 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 */-->
@kevinweber
kevinweber / replaceOrAddValue.js
Last active February 23, 2017 22:50
URL query algorithm. A very basic solution to add or replace a property and its value to a URL.
/*
* A very basic solution to add or replace a property and its value to a URL
*
* Usage example:
* url = replaceOrAddValue(url, "property_name", "value");
*
* Source: https://gist.github.com/kevinweber/58a1b1bdcbab109018dc01a619f9b730
*/
function replaceOrAddValue(query, variable, value) {
var findVariable = variable + "=",
@kevinweber
kevinweber / Sightly Pattern "Inline List"
Last active February 1, 2024 18:09
AEM/HTL: Define a list/array within a HTL template (and avoid redundant code!)
<!--/* 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>
</sly>
@kevinweber
kevinweber / aemsync.sh
Last active August 12, 2016 20:25
AEMSync pushes changes into your local AEM instance. Run it so you don't have to manually run the maven build all the time. Note that aemsync works for many files (XML, HTML, CSS, ...) but not for all of them, especially Java files. UPDATE: Use the AEM Front solution instead: https://github.com/kevinweber/aem-front
#! /bin/bash
# https://www.npmjs.com/package/aemsync
# Usage: Run `$ sh aemsync.sh` in your terminal from the folder where this script is located.
if ! type "aemsync" > /dev/null;
then
echo "aemsync is not installed. Installing..."
sudo npm install aemsync -g
fi
@kevinweber
kevinweber / component.html
Last active September 7, 2022 13:07
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.
<sly data-sly-use.component="template.html"
data-sly-call="${component.template @ properties=properties}" />
@kevinweber
kevinweber / Throttle
Last active December 23, 2016 17:38
Throttle
/**
* Throttle function
* based on https://remysharp.com/2010/07/21/throttling-function-calls
*/
function throttle(fn, threshold, scope) {
threshold = threshold || 250;
var last,
deferTimer;
@kevinweber
kevinweber / generateObjectKey.js
Last active April 7, 2017 04:56
Convert a given string so it can be used as the unique key/id of a JavaScript object. If no string is provided, a random string is generated.
/**
* Converts a given string so it can be used as the key of a JavaScript object.
* If no string is provided, a random string is generated.
*/
function generateObjectKey(string) {
var key;
if (typeof string === "undefined") {
string = Math.random().toString(36).substr(2, 5);
}
@kevinweber
kevinweber / debug-events.js
Last active December 9, 2016 14:07
Monitor events associated with DOM elements (for debugging only)
// See also: https://developers.google.com/web/tools/chrome-devtools/debug/command-line/events
monitorEvents(document.body); // logs all events on the body
monitorEvents(document.body, 'mouse'); // logs mouse events on the body
monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs
@kevinweber
kevinweber / gist:ddfb8e0e3763915a314234f589530ce9
Created September 16, 2016 17:44
Sightly/HTL: Arrays
// See: http://blogs.adobe.com/experiencedelivers/experience-management/htl-intro-part-3/
<!--/* Accessing a value */-->
${properties['jcr:title']}
<!--/* Printing an array */-->
${aemComponent.names}
<!--/* Printing the array, separating items by ; */-->
${aemComponent.names @ join=';'}
@kevinweber
kevinweber / .content.xml
Last active August 24, 2022 02:01
AEM: Add JavaScript (including events) to AEM loaded on editor.html. Solution: Create clientlib with category "cq.authoring.dialog". Exemplary usage: Reload page if layer changes.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[cq.authoring.dialog]"/>