AEM Content Fragment Composite MultifieldThis 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 126.96.36.199
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.
Hugo ShortcodesHugo 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 24Maven 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 188.8.131.52+, 184.108.40.206+ or AEM as a Cloud Service, Java 8 or 11 and Maven 3.3.9+
SEO ChecklistSearch 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 TerminalWindows 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 ComponentAEM 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 ComponentAn 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 IAt 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 ComponentAn 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 23Maven 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+, 220.127.116.11+ or 18.104.22.168+. This post contains an overview of some of the changes.
Adobe Experience Manager (AEM) Maven Project Part IIAn 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 CodeExample 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 DevelopersThere 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 ProjectAn 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 SiteAn 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 IIIn 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.
Hugo + Node.js Koa App Connected to MongoDBHow 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 RecipeDesigns 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 NavigationWhile 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 ThemeI'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 SetupHow 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 PHPFollow 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 PluginI 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 AlbumsHow 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 ToggleThis 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 ThemeThis 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 UbuntuGit 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 IIThis 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 DockerThis 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 TraefikThis 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 TraefikThis 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 IIThis 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 3How 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 WorkflowBasic Webpack 3 Sass preprocessor workflow using cssnano for postprocessing minification and optimization.
Docker Laravel Dev EnvironmentThis 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 DevFor 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 AccessThere 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 EnvironmentThis 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.