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.
Acquia Certified Site Builder – Drupal 8
Earlier this week I took and passed the Acquia Certified Site Builder exam for Drupal 8. Here are some tips and a few resources that helped me prepare for this 50 question, 75 minute exam.