Skip to content

Instantly share code, notes, and snippets.

Avatar

Kevin Weber kevinweber

View GitHub Profile
@kevinweber
kevinweber / README.md
Created Jul 29, 2018 — forked from spraints/README.md
Set up git-hooks
View README.md

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://github.com/icefox/git-hooks.git
cd git-hooks
ln -s `pwd`/git-hooks /usr/local/bin/git-hooks
View aem-6-2-authoring-messaging.md

AEM 6.2 Authoring Editor to Site messaging API

API

/**
 *
 * @param group {String} group identifier name
 * @param [targetWindow=window.parent]
 * @param [origin='*']
 * @constructor
@kevinweber
kevinweber / giphy.js
Created Feb 19, 2018
Giphy API Example
View giphy.js
import {
checkStatus,
parseJSON
} from './request';
/**
* Request data Giphy API
* https://developers.giphy.com/explorer/
*/
@kevinweber
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: https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-wknd-tutorial-develop/part3.html
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
kevinweber / index.js
Last active Feb 12, 2018
AEM-React / AEM-Preact integration
View index.js
import './index.scss';
import {
isObject,
traverseObjectByPath,
} 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
kevinweber / built-in-tools.md
Last active Jun 17, 2020
Collection of AEM Links, Commands & Tips / Cheat Sheet
View built-in-tools.md

Web Consoles & Tools

@kevinweber
kevinweber / webpack.config.js
Last active Sep 13, 2019
AEM Front Webpack Plugin. Part of the AEM Front toolset. Learn more: https://kevinw.de/aem-front/
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
kevinweber / example.html
Last active May 19, 2020
AEM: Include another resource + modify tag and class name #data-sly-resource
View example.html
<!--/* More: https://docs.adobe.com/docs/en/htl/docs/block-statements.html#resource */-->
<!--/* 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' @
resourceType='about-project/components/content/c34-section-headline',
decorationTagName='span',
cssClassName='className'
}"></div>
<!--/* More about the decoration tag: https://docs.adobe.com/docs/en/aem/6-3/develop/components/decoration-tag.html */-->
@kevinweber
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) {
_self.doSomething(event);
});
// The new way (ES6)
this.element.addEventListener('click', (event) => {
this.doSomething(event);
});
@kevinweber
kevinweber / curve-example.png
Last active Jun 6, 2019
d3.js: Custom curve with rounded steps. Based on d3.curveStep.
You can’t perform that action at this time.