Skip to content

Instantly share code, notes, and snippets.

kevinweber /
Created Jul 29, 2018 — forked from spraints/
Set up git-hooks

Install git hooks

git-hooks is a tool that makes it easy to re-use hook scripts across projects.

I installed it by cloning the repo and symlinking it into /usr/local/bin.

git clone git://
cd git-hooks
ln -s `pwd`/git-hooks /usr/local/bin/git-hooks

AEM 6.2 Authoring Editor to Site messaging API


 * @param group {String} group identifier name
 * @param [targetWindow=window.parent]
 * @param [origin='*']
 * @constructor
kevinweber / giphy.js
Created Feb 19, 2018
Giphy API Example
View giphy.js
import {
} from './request';
* Request data Giphy API
kevinweber / aem-grid-v2.less
Last active Jul 9, 2018
Collection of AEM CSS/LESS snippets (responsive grid). Get an exemplary grid from the WKND tutorial:
View aem-grid-v2.less
/* 6.3 Path to Responsive Grid */
/* @gridpath : "/etc/clientlibs/wcm/foundation/grid"; */
/* 6.4 Path to Responsive Grid */
@gridpath : "/libs/wcm/foundation/clientlibs/grid";
@import "@{gridpath}/grid_base.less";
/* maximum amount of grid cells to be provided */
kevinweber / index.js
Last active Feb 12, 2018
AEM-React / AEM-Preact integration
View index.js
import './index.scss';
import {
} from 'utils/methods';
import {
// INFO: The 'h' function import gets used in the final, transpiled code as a drop in replacement for React.createElement, and so needs to be imported even if you don't explicitly use it in the code you write
// eslint-disable-next-line no-unused-vars
kevinweber /
Last active Apr 19, 2021
Collection of AEM Links, Commands & Tips / Cheat Sheet

Web Consoles & Tools

kevinweber / webpack.config.js
Last active Sep 13, 2019
AEM Front Webpack Plugin. Part of the AEM Front toolset. Learn more:
View webpack.config.js
const path = require('path');
const AEMFrontPlugin = require(path.join(__dirname, './webpack.plugin.aem-front.js'));
//... your Webpack configuration ...
plugins: [
new AEMFrontPlugin({
exclude: '**/webpack.module/**',
watchDir: './../'
kevinweber / example.html
Last active May 19, 2020
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 / 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 / curve-example.png
Last active Jun 6, 2019
d3.js: Custom curve with rounded steps. Based on d3.curveStep.