Skip to content

Instantly share code, notes, and snippets.

@kevinweber

kevinweber/built-in-tools.md

Last active April 26, 2022 13:50
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save kevinweber/b708a3923ecb17dad8841433459e94e0 to your computer and use it in GitHub Desktop.
Save kevinweber/b708a3923ecb17dad8841433459e94e0 to your computer and use it in GitHub Desktop.
Download ZIP
Collection of AEM Links, Commands & Tips / Cheat Sheet
Raw
built-in-tools.md

Web Consoles & Tools

Raw
core-components.md

Adobe's Core Components

If you wonder if they're installed in a project, check CRXDE: http://localhost:4502/crx/de/index.jsp#/etc/packages/adobe/cq60 (or a similar folder). It should contain ZIP files from the core release page: https://github.com/Adobe-Marketing-Cloud/aem-core-wcm-components/releases

If you use the core image component, make sure that its JavaScript is loaded on the page. Otherwise the image won't show up because of its lazy loading functionality. Example for including the JavaScript:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories='core.wcm.components.image.v1'}"/>
</sly>
Raw
cq-templates.md

CQ Templates

  • Allowed Paths Property (allowedPaths)
  • Allowed Templates Property (cq:allowedTemplates)
  • Allowed Parents Property (allowedParents)
  • Allowed Children Property (allowedChildren)

See: http://versatileankur.blogspot.com/2015/07/aem-templates-in-details.html

Components

Create a cq:template node under the cq:Component and populate with default properties or default resource tree

/apps/.../demo[cq:Component]
/apps/.../demo/cq:template[nt:unstructured]
/apps/.../demo/cq:template@cat = "meow"
/apps/.../demo/cq:template@sling:resourceType = ".../demo"

Templates

Create a jcr:content node under the cq:Template and populate with default properties or default resource tree

Raw
example-sites.md
Raw
getting-started.md

Adobe Experience Manager Links - Front End

First...

HTL (formerly Sightly)

Customizing the Authoring Page (editor.html)

Testing

Various

Tools

Trends

Raw
java-packages.md
Raw
localhost.md

Custom domain on AEM project

Edit hosts file: vi /etc/hosts

Add: 127.0.0.1 localhost.my-website.com

Then clear cache and localhost.my-website.com:4502 should work immediately: sudo dscacheutil -flushcache

Raw
minification.md

Enable minification

This is helpful to debug production issues where minification is normally enabled. Go to http://localhost:4502/system/console/configMgr and check the "Minify" checkbox for "Adobe Granite HTML Library Manager”

Issues with AEM's built-in YUI Compressor / minifying CSS?

calc(): If whitespace gets removed, change calc(1.5rem + 20px) to calc(1.5rem - -20px)

0s: "transition: all 0.3s ease-in-out 0s;" gets changed to "transition: all 0.3s ease-in-out 0;" and makes the value invalid. Solution: Don't remove " 0s”.

hsla(0,0%,100%,.95); or rgba(255,255,255,.95); gets changed to hsla(0,0,100%,.95); which is an invalid property value. Workaround: Use a not perfectly white RGBA value: rgba(255, 255, 254, 0.95).

Customize preprocessors

See: [Clientlibs Basics](https://docs.adobe.com/docs/en/aem/6-3/develop/the-basics/clientlibs.html#Using Preprocessors) Example in .content.xml:

<?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"
    jsProcessor="[min:gcc;minify=false]"
    // YUI Compressor for CSS Minification and GCC for JS
    cssProcessor: ["default:none", "min:yui"] jsProcessor: ["default:none", "min:gcc;compilationLevel=advanced"]
    // Typescript to Preprocess and Then GCC to Minify and Obfuscate
    jsProcessor: [
       "default:typescript",
       "min:typescript", 
       "min:gcc;obfuscate=true"
    ]
    categories="[project-name.parsley]"
    dependencies="[jquery]"/>

Image optimization

AEM seems to use javax.imageio.plugins.jpeg with a compression mode of (int) 2 and whatever quality param you set, defaulting to .80.

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/javadoc/ch/randelshofer/media/jpeg/package-summary.html

Raw
sling.md

Apache Sling

Output Rewriting Pipelines

https://sling.apache.org/documentation/bundles/output-rewriting-pipelines-org-apache-sling-rewriter.html#implementing-a-processor

The Apache Sling Rewriter is a module for rewriting the output generated by a usual Sling rendering process. Some possible use cases include rewriting or checking all links in an HTML page, manipulating the HTML page, or using the generated output as the base for further transformation. An example of further transformation is to use XSLT to transform rendered XML to some output format like HTML or XSL:FO for generating PDF.

Sling Pipes

https://sling.apache.org/documentation/bundles/sling-pipes.html

At this moment, there are 3 types of pipes to consider:

  • "reader" pipes, that will just output a set of resource depending on the input
  • "writer" pipes, that modify the repository, depending on configuration and input
  • "container" pipes, that contains pipes, and whose job is to chain their execution : input is the input of their first pipe, output is the output of the last pipe it contains.
Raw
url-query-parameters.md

Query Parameters

?wcmmode=( design | disabled | edit | preview )
?debug=(layout | mdev | mdevc )
?debugConsole=true
?debugClientLibs=true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment