An Adobe Experience Manager (AEM) example to demonstrate development of a component for adding concept code to a page using a textarea field. Can be used for testing, prototyping and troubleshooting.

An Adobe Experience Manager (AEM) example to demonstrate development of a component using a composite multifield with a dynamic sling model that accepts a node name parameter.

An Adobe Experience Manager (AEM) example to demonstrate development of extending the core button component to allow an image to be added from the AEM Digital Asset Manager (DAM) and an option to open a button link in a new tab.

AEM tutorial for development of a message component to allow an AEM author to add message banners to a page. Features include a field to set how many days before the message will reappear after it has been closed and a toggle switch to enable or disable the message.

An Adobe Experience Manager (AEM) example to demonstrate development of a simple folding panel component to show or hide content by clicking the panel’s label element. AEM components can be added by an author to populate the folding panel content.

An Adobe Experience Manager (AEM) example to demonstrate development of a proof of concept copyright component that optionally renders the current year from code. Maven AEM Project Archetype 23 and AEM version 6.5 are used to show this component within the footer experience fragment.

Adobe Experience Manager (AEM) as a Cloud Service Developer Recertification Exam Study Guide.

Adobe Experience Manager (AEM) as a Cloud Service Developer Recertification Exam AD5-E112 topics and sample test. Note: This exam is based on the information and my experience for the AD5-E112 exam I took in December 2020. The exam has since been reformatted and the information and sample test below does not reflect the new format and updated material.

Adobe Experience Manager (AEM) Developer Exam 9A0-384 sample-test. This practice exam helped me prepare for the 9A0-384 exam.

An Adobe Experience Manager (AEM) example of a new blank slate starter component with stub data. The JavaScript Use-API returns the data to the HTL template for development.

JSON content parsing, e.g., jcr:content Type string[] with JSON values.

Tips and resources for using AEM’s Sightly / HTL JavaScript Use-API for writing server-side JavaScript. The AEM JavaScript Use-API ResourceUtils page contains examples for using ResourceUtils and functions.

ResourceUtils examples using an AEM Maven project and the We.Retail sample to show how to pass data from the HTL to server-side JavaScript, and use the /libs/wcm/foundation/components/utils/ResourceUtils.js to access properties from jcr:content.

Maven AEM Project Archetype 24 was released a few weeks ago for creating an AEM website project that utilize the latest Adobe Experience Manager standards and technologies. Requires AEM 6.5.5.0+, 6.4.8.1+ or AEM as a Cloud Service, Java 8 or 11 and Maven 3.3.9+.

Maven AEM Project Archetype 23 was recently released. To use, setup your local development environment for AEM as a Cloud Service SDK or use one of the following AEM versions: 6.5.0+, 6.4.4.0+ or 6.3.3.4+. Additionally, Java 8 or 11 and Maven 3.3.9+ is also required. Here is an overview of a few of the changes.

An Adobe Experience Manager (AEM) example to demonstrate the Webpack frontend build process included with Maven AEM Project Archetype 22. Follow the steps in part 1 of this series beforehand making sure to include the -DoptionIncludeFrontendModule=general option when running mvn archetype:generate. e.g.,

An Adobe Experience Manager (AEM) example to demonstrate creating and deploying a Maven Multi Module project using an aem-project-archetype. This tutorial was created for deployment using Java 11, Apache Maven 3.6.2, Maven AEM Project Archetype 22 and AEM version 6.5.

AEM website project that contains both the general and react ui.frontend modules. To create and name the project for your specific needs, refer to part-1 for the steps used to merge these two Maven archetype-23 modules, page templates and configurations.

At the time of this writing, the AEM project archetype doesn’t allow you to create a single site project containing both the generic and react frontend modules. Typically, there will be a mix of SPA and non SPA content pages in a site project. This post documents how I was able to set this up for Adobe Experience Manager version 6.5. using aem-project-archetype-23.

Google Map application that uses a draggable location marker to set address, longitude and latitude geocode inputs. This post covers some of the Webpack tools for both a local development environment and production build of the app constructed of a few JavaScript modules and css.

This post documents how to use local JavaScript modules with Browserify and the Google Maps JavaScript API. In this example, the Google Map contains a marker that can be dragged to reset the browser form with the marker position location data. Additionally, Browserify shim is used to require jQuery since it is already being loaded from a CDN.

This post documents how to create a RequireJS module that loads the Google Maps JavaScript API and is used by a web page to populate form inputs with location data. The Google Map contains a marker that can be dragged to reset the form with the marker position location data.

In part 2 of the series, we’re adding the site content to a search.json file when the Hugo static site is built and importing it into a MongoDB collection. Then in the Node.js Koa app, we create an API endpoint that returns search results from the collection in MongoDB.

This project demonstrates how to create a development environment utilizing a Docker stack of Nginx to serve the static website, Nodejs for the api applications, MongoDB for the api data and Traefik for reverse proxy. This stack is suitable for deployment to staging and production environments.

Linux Mint 15 ‘Olivia’ I decided it was time to ditch my Linux 13 KDE setup and try the improved MATE 1.6 desktop now that Linux Mint 15 released. I find it pretty slick and fast, a nice change from Windows when I decide to do some development in a true LAMP environment. Speaking of which, we need to get that installed. Before doing that, the first thing I like to do is open up a terminal and run:

OPERATING SYSTEM: Linux Mint 13 Maya For Drupal development, since I already have a Linux Mint system setup, I decide to focus on it rather than the Windows 8 Acquia Drupal setup I blogged about a few days ago. Apache, MySQL & PHP Install all of these applications with a single command. Thanks to Unix System Engineer, Nitin Sookun for posting this on the Linux Mint Community website. Since you will need root permissions when performing write operations outisde of your home directory, the commands shown below presume that you are logged in as root or are in a root instance of the terminal.

Designs typically require more than the out of the box demos provide, which is understandable. The slick carousel demos will get you most of the way there and provide examples for various settings. This post is an example of how to dynamically update the slick slidesToShow value as the viewport is resized, demo.

How to layout and lazy load images in a flexible grid similar to how facebook displays them in a post. Selected images open a lightbox for previewing within a carousel. Image alt text is converted into a caption below the image. YouTube Video

Sass Install the loaders to preprocess the Sass files. SASS Loader compiles Sass to CSS, also requires node-sass. npm install --save-dev sass-loader node-sass PostCSS Loader processes CSS with PostCSS. npm install --save-dev postcss-loader CSS Loader resolves import at-rules and url functions in the CSS. npm install --save-dev css-loader Style Loader inlines <style></style> in the DOM. npm install --save-dev style-loader URL Loader and Resolve URL Loader handle relative paths.

This follow up to the basic Webpack 3 Sass preprocessor workflow I wrote about here includes how to handle processing of relative URLs in the Sass for things like fonts and images. Ken Wheeler’s popular Slick carousel contains these asset types in its Sass, so let’s use that for this exercise. Getting Started Prerequisite: Node.js with npm. Navigate to the project root in your CLI, such as Terminal, Cygwin or PowerShell.

Basic Webpack 3 Sass preprocessor workflow using cssnano for postprocessing minification and optimization. The Autoprefixer PostCSS plugin is also included in this configuration to automatically add vendor prefixes for only the browsers that need to be supported. Before getting started, install Node.js and NPM. The default package manager for the Node.js JavaScript runtime environment, NPM is included with the Node.js installation. Project Navigate to the project root in your CLI, such as Terminal in OS X, PowersShell in Windows.

This post continues where part one left off. Topics include mysql data migration, staging and production docker configurations with optional https.

This post will cover how to use Docker for a local WordPress development environment and how to deploy it to an Ubuntu Linux server running docker.

In an earlier post, I documented my XAMPP Windows Setup for myself and anyone else would find it useful. Now I am adding SSL to the virtual host configuration and this post will document that process.

Documenting my XAMPP for Windows setup for myself and anyone else who finds it useful. For those of you that do not know, XAMPP is a completely free, easy to install Apache distribution containing MySQL, PHP, and Perl. I still have my Virtual Machine for LAMP Development which I will use for test deployments of my localhost LAMP development prior to production deployment. This local XAMPP setup will be better for debugging, working with node modules and grunt tasks for preparing the deployment build.