Skip to content

Instantly share code, notes, and snippets.

@Surajkamdi

Surajkamdi/built-in-tools.md

Forked from kevinweber/built-in-tools.md
Created September 19, 2018 09:47
Show Gist options
  • Save Surajkamdi/5780b05d16db15367a625f2a2fb5b82c to your computer and use it in GitHub Desktop.
Save Surajkamdi/5780b05d16db15367a625f2a2fb5b82c 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
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