kevinweber

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

kevinweber

AEM 6.2 Authoring Editor to Site messaging API

API

/**
 *
 * @param group {String} group identifier name
 * @param [targetWindow=window.parent]
 * @param [origin='*']
 * @constructor

kevinweber

import {
  checkStatus,
  parseJSON
} from './request';

/**
 * Request data Giphy API
 * https://developers.giphy.com/explorer/
 */

kevinweber

/* 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

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

Web Consoles & Tools

• Clientlibs
  • Find/see all ClientLibs: http://localhost:4502/libs/granite/ui/content/dumplibs.html
  • See the expected HTML output of clientlib includes based on category: http://localhost:4502/libs/granite/ui/content/dumplibs.test.html
  • Highlights any dependencies or embedded categories that cannot be found: http://localhost:4502/libs/granite/ui/content/dumplibs.validate.html
  • Force AEM to rebuild ClientLibs via this url: http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html
• CRX: /crx/explorer/index.jsp
• Link Checker – find broken links: http://localhost:4502/etc/linkchecker.html
• QueryBuilder: https://docs.adobe.com/docs/en/aem/6-3/develop/search/querybuilder-api.html

kevinweber

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

<!--/* 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

// 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