AEM Composite Multifield Component and Sling Model

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.

Golf Scorecard React App GIR

React Golf Scorecard Part II. This post documents the updates made to the React app for Greens in Regulation (GIR) when entering scores. For this we needed figure out how to trigger an on change event when the input value for GIR is updated dynamically when strokes and putts are entered.

Golf Scorecard React App

This tutorial demonstrates how to create a React application that is used in a great many golf apps, a way to display and edit golf course scorecard data. This application uses React Hooks, a functional approach to manage state and lifecycle methods without writing classes.

WordPress Post from Front End using REST API and React

This post is a proof of concept for using the WordPress REST API to demonstrate how to build CRUD (Create, Read, Update, and Delete) functionality within a React application running on a frontend WordPress page.

AEM Content Fragment Composite Multifield

This example demonstrates how to create a composite Coral.Multifield for Content Fragments and store the data in the JCR as JSON. This example was created and tested with Adobe Experience Manager 6.5.7.0

JavaScript Multi-Filter

This code sample shows how to create a multiple list filter using vanilla JavaScript (no jQuery).

Filtering is done by counting matches of filter selections against matches of the same for each of the element data attributes. Match counts are displayed in each filter label and in the app heading.

Cascade Select Dropdown in AEM Component Dialog

This tutorial demonstrates how to populate CoralUI Select dropdowns in an AEM component dialog from a JSON data source using JavaScript. For added complexity, we’re cascading the dropdowns in multiple instances within a Multifield component.

Hugo Shortcodes

Hugo shortcodes are useful when you need to output HTML from your markdown that is incompatible with the goldmark or black friday parser. When the markdown parser encounters an HTML element, it skips processing until that element is closed. The div custom shortcode shows how to workaround this issue.

Custom shortcode elements include: div, picture and tabs.

Adobe Experience Manager (AEM) Maven Project Archetype 24

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+

SEO Checklist

Search Engine Optimization (SEO) can be a moving target. Here is an up-to-date checklist of things that you should know to help you obtain a higher ranking in Google's search results.

WSL2 with Windows Terminal

Windows has finally created a developer command line experience that can compete with OS X and bare metal Linux with the release of WSL2 combined with the new Windows Terminal. This overview shows Git, NPM, NVM, ZSH, Java and Maven operability and some Windows Terminal settings. Free your mind of an inferior Windows developer experience and make the jump.

Adobe Experience Manager (AEM) Message Component

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.

Adobe Experience Manager (AEM) Folding Panel Component

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.

AEM Maven Project Including React SPA Part I

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.

Adobe Experience Manager (AEM) Copyright Component

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) Maven Project Archetype 23

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+. This post contains an overview of some of the changes.

Adobe Experience Manager (AEM) Maven Project Part II

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 option when running mvn archetype:generate.

AEM Application Debugging with Visual Studio Code

Example of how to debug Adobe Experience Manager (AEM) component Java code using Visual Studio (VS) Code. This Java debug configuration listens on localhost port 8000 matching the address set in the remote debugging JVM parameter that was used to start AEM in debug mode.

Adobe Experience Manager (AEM) File Transfers for Developers

There are several different ways to handle file transfers between AEM and your local file system. In this post, I’m going to go over a couple command line tools to transfers files between my local file system and AEM 6.5: AEM repo tool and FileVault VLT.

Adobe Experience Manager (AEM) Maven Project

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.

Adobe Experience Manager (AEM) Blank Slate Starter Site

An Adobe Experience Manager (AEM) "Blank Slate" basic starter site example to demonstrate creating basic pages, templates and their components. This site uses static templates and covers a couple of key AEM concepts including the Proxy Component Pattern.

Hugo + Node.js Koa App Connected to MongoDB Part II

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.

Adobe Experience Manager (AEM) JavaScript Use-API Resources Added

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.

Hugo + Node.js Koa App Connected to MongoDB

How to create a development environment utilizing a Docker stack of Nginx to serve the static website generated by Hugo, Nodejs for the api applications, MongoDB for the api data and Traefik for reverse proxy.

Slick Carousel Responsive slidesToShow Recipe

Designs typically require more than the out of the box demos provide, which is understandable. While the slick carousel demos will get you most of the way there, this post is an example of how to dynamically update the slick `slidesToShow` value as the viewport is resized.

Hugo Content with Pages and Navigation

While converting my WordPress content into markdown files for Hugo, I wanted to keep my permalinks exactly the same. For my existing content that spans more than a single page, I created a way to do this without server rewrite rules or Hugo aliases that use meta refresh which is sub-optimal for SEO performance.

Hugo Static Site Generator Blank Starter Theme

I'm in the process of converting my WordPress site into a static site compiled from markdown files using the Hugo static site generator. For this task, I have created a blank Hugo starter theme that uses Webpack and webpack-plugin-serve for development.

AEM Dispatcher CentOS Virtual Machine Setup

How to setup AEM Dispatcher on a CentOS Virtual Machine (VM) alongside Author and Publish instances. This solution gives an Adobe Experience Manager developer a complete end-to-end environment for local AEM development.

Xdebug for Mac OS X PHP

Follow these instructions for PHP provided with Mac OS X to phpize Xdebug source, configure, build and install the PHP Xdebug extension. On Mac OS X Mojave, use the Xdebug extension included with the system in /usr/lib/php/extensions/no-debug-non-zts-20160303.

New Webpack Development Server Plugin

I always thought it was odd to use the `webpack-cli` command `webpack-dev-server` instead of `webpack` in my npm script for development. Lo and behold, last month, `webpack-plugin-serve` was released, a new webpack plugin to use instead of the quirky webpack-dev-server.

How To Create a WordPress Shortcode for flickr Albums

How to create a WordPress custom shortcode to display photos from flickr using the the Slick Lazy Load Photo Grid. Using the flickr API, render photo albums in your Wordpress Posts wherever the shortcode is entered. Webpack 4, autoprefixer, and babel included.

CSS Flexbox with Sidebars Toggle

This post documents how to create a fully responsive flexbox content layout that contains a pure CSS open/close toggle for the left and right sidebars. The CSS is built from Sass using Webpack with Autoprefixer. For development, a Webpack Dev Server is included.

Completely Blank (no css) _s WordPress Starter Theme

This post documents how to take the WordPress Starter Theme _s or underscores, if you like and build only the CSS components you want using Webpack 4. This modern toolset also includes autoprefixer and browserlist support.

Git Updates for Windows, PowerShell and WSL Ubuntu

Git released new versions of their version control software last month and documented here is my experience installing version 2.18.0 64-bit Git for Windows and version 2.18.0 built from the source on WSL Ubuntu.

WordPress from Development to Production using Docker Part II

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

WordPress from Development to Production using Docker

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.

WSL ubuntu zsh nvm etc.

The Windows Subsystem for Linux (WSL) seems to be mature enough now to give it another shot. Copy and paste, and other simple annoyances that kept me away before are working better. Also, I've been reading that nvm (Node Version Manager) works now, so here goes.

SSL Certificate Authority for Docker and Traefik

This post documents how to get https working on your local Docker development environment using Traefik as a reverse proxy for multiple services.

VPS Proof of Concept for Docker and Traefik

This is a proof of concept for a VPS that includes ConfigServer Firewall (csf), Docker, Open SSH Server and Traefik as a reverse proxy to host multiple applications on the same Docker host.

Webpack 3 Sass cssnano Autoprefixer Workflow II

This follow up to the basic Webpack 3 Sass preprocessor workflow a couple months ago includes how to handle processing of relative URLs in the Sass for things like fonts and images.

Slick Lazy Load Photo Grid Using Webpack 3

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.

Webpack 3 Sass cssnano Autoprefixer Workflow

Basic Webpack 3 Sass preprocessor workflow using cssnano for postprocessing minification and optimization.

Docker Laravel Dev Environment

This post documents building a local Laravel development environment with Docker. Included are examples for debugging Laravel's PHP with Xdebug using the Visual Studio Code editor. Source Code available on GitHub.

Drupal 8 Custom Block Module Dev

For those ready to move beyond a simple "Hello World" module, this post documents building a Drupal 8 module with a Giphy search form in a custom block. The form uses jQuery to request data from the Giphy API and display the results.

Remote Device Dev Environment Access

There are various ways to connect a mobile device to the computer running the local development instance of your web application for testing and debugging. A proxy server and/or USB cable are popular options.

Docker Drupal Dev Environment

This post documents mounting a new Drupal Composer project as a volume in a Docker container. Features include Drush, Drupal Console, mailhog and phpMyAdmin. A Docker-sync configuration is available for OS X.