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. This tutorial was created using AEM version 6.4

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.

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.

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.

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 created a blank Hugo starter theme that uses Webpack and optional webpack-plugin-serve for UI development build live reload.

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.

Follow these instructions for PHP provided with Mac OS X to phpize Xdebug source, configure, build and install the PHP Xdebug extension.

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 custom shortcode to display photos from flickr. This post documents using the Slick Lazy Load Photo Grid along with the flickr API to render photo albums in Wordpress Posts wherever the shortcode is entered. Webpack 4, autoprefixer, and babel are included for building the JS and CSS.

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.

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.

In the src/js/index.js javascript entrypoint file, import the style Sass entrypoint as follows. index.js import '../sass/style.scss' Add this bit of code to the .babelrc congfiguration file. Consult the babel docs for config changes based on the babel version as needed. .babelrc { "presets": ["env"] } Add this code to require the autoprefixer postcss plugin to the postcss.config.js configuration file. postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] } The package.json file defines our autoprefixer browser support.

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.

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.

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

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.

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

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.

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.

The objective of this post is to demonstrate some Vue.js basics for working with the WordPress REST API. This post continues where the last post left off with the following additions.

This post is a simple proof of concept for using the new WordPress REST API to submit a new post draft from the front end. The form and user inputs are built using the Vue.js framework and vue-cli to create a simple Webpack build configuration. Demo on YouTube

Webpack Vue.js CLI Use vue-cli to download vuejs, webpack and template dependencies and create the project in the root of our plugin folder. Navigate to the wp-content/plugins directory. Update or install globally as needed. # update npm update -g vue-cli # or install npm install -g vue-cli Change to the wordpress plugins directory and use vue-cli to install the webpack-simple template into the new wp-api-vuejs-poc folder. For example,

This post is a refresh of Laravel JWT Auth with Vue.js I posted in September that applies to the 1.x version of Vue.js. Evan You released vue.js version 2 shortly thereafter and this post will cover building the Laravel JSON Web Token based authentication with it.

Vue Resource In order to post the Registration form data, the Vue.js resource plugin needs to be installed. npm i vue-resource --save-dev Update resources/js/app.js to import the vue-resource plugin after the vue-router. Add the Vue.use statement for the vue-resource. Add the Vue.http.headers and Vue.http.options.root url. Laravel VerifyCsrfToken middleware will check for the X-CSRF-TOKEN request header. To make this token available to the client side script, it is being stored in the csrf-token meta tag near the top of the web page.

Sign in Form Add the following code to the Signin.vue file. Signin.vue <template> <div> <div class="alert alert-danger" v-if="error"> <p>There was an error, unable to sign in with those credentials.</p> </div> <form autocomplete="off" v-on:submit="signin"> <div class="form-group"> <label for="email">E-mail</label> <input type="email" id="email" class="form-control" placeholder="gavin.belson@hooli.com" v-model="email" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" class="form-control" v-model="password" required> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </div> </template> <script> import auth from '../js/auth.js'; export default { data() { return { email: null, password: null, error: false } }, methods: { signin(event) { event.

This post documents using Laravel to build JSON Web Token based authentication with a Vue.js 1.0 user interface. UPDATE: vue.js 2.0 version published.

API For form validation, create a FormRequest class. Use the command line and the php artisan make command to generate the class as follows. php artisan make:request RegisterFormRequest Edit app/Http/Requests/RegisterFormRequest.php. First, return true instead of false in the authorize function since using JWT for that. Then add the validation rules in the array that is returned in the rules function for the new User as follows. RegisterFormRequest.php public function authorize() { return true; } .

This post documents how to use the hbsfy precompiler plugin for Browserify to compile Handlebars templates into javascript. With this design, templates can be required as javascript modules in the views that use them.

This post documents how to add an e-mail confirmation to the Laravel User registration that is generated by the Artisan console. In this example, the registered user will not be able to login until the activation link that is sent to the users registered e-mail account has been loaded into the browser.

This post documents how to add Ajax form validation to Laravel User Authentication that is generated by the Artisan console.

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.

After discovering how nice the vscode-php-debug extension works in Visual Studio Code on my Windows 10 laptop, I wanted this same setup for a PHP project on my work Mac Book Pro running OS X Yosemite (10.10). The version of XAMPP I currently have installed on the Mac is 5.6.11-0 and for this tutorial, there are a few requirements to consider…

These examples show how to load copies of com_media views and templates instead of their core counterparts for customization without hacking any core Joomla files.

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.

This post documents my experience while following the Creating a simple module Joomla 3.x tutorial. I am brand new to Joomla and wanted to share my experience for anyone else trying to develop, install and demo this module in their Joomla 3 environment.

I wanted an efficient way to load page or post specific stylesheets and or scripts which lead me to see if I could utilize custom fields for this. Using custom fields combined with wp_enqueue_style and wp_enqueue_script worked perfectly. This solution allows me to link css or javascript files for only the posts or pages I want.

Browserify lets you write modular JavaScript in node.js style. At the beginning of each module you write, the respective dependencies are added using require statements. Then Browserify compiles the modules along with all of the dependencies into an optimized JavaScript file for use in the browser.

It is now 2015 and with it a new version of Visual Studio that includes tools for Bower front end package management, Node Package Manager (NPM) and the Grunt JavaScript Task Runner. Not surprisingly, Microsoft has its own way of implementing Grunt, Bower and Node Modules in their upcoming Visual Studio debut. You don’t have to wait for Visual Studio 2015. Grunt, Bower, Node Modules and Bourbon can easily be included in a Visual Studio 2012 MVC 4 web application.

This post is not about a barrel-aged distilled spirit made primarily from corn. Instead, it is about a Sass mixin library. To add Bourbon to your web project, visit the Bourbon GitHub repo and take a look at the requirements.

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.

This tutorial covers using Git to clone, branch and merge the latest Bootstrap source code, modifying and compiling your modifications to the source LESS variables using Grunt and viewing your compiled changes with a local Node.js web server.

This tutorial describes how to setup and use the Grunt JavaScript task runner to automate repetitive tasks such as minification and compilation. Grunt is installed using npm, the Node.js package manager. You will also need Git to work with the tagged source code. This makes it easy to reset and compare your working copy of the code at each step. I discovered commit tags while using the AngularJS tutorial.

This blog post addresses a common scenario — a local LAMP development environment on your Windows or OS X computer. You could use XAMPP on either Windows or OS X, MAMP on OS X or native Apache in OS X. Here, we will create a Linux virtual machine with Samba configured to share the Virtual Machine file system with the host computer. We will also create virtual hosts, install and configure WordPress and Xdebug.

As a follow up to jQuery Mobile Cascaded Selects using MVC4 and KnockoutJs, I have created this AngularJS Cascaded Selects tutorial that gets it’s data from the Chinook Web API Project. The application uses angular data-binding and the ngOptions attribute to dynamically generate a list of option elements for each of the three HTML select elements.

This tutorial will walk you through the creation of a basic Windows Forms application to test remote authentication and authorization when communicating with a DNN CMS web portal using its web services framework / Web API. This is for development and educational purposes only running locally. You will at least want to make sure that you have SSL enabled for your DNN Web Services in a real world scenario.

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:

This tutorial will guide you through the steps necessary to add a session timeout timer and alert dialog within a DotNetNuke (DNN) Module using AngularJS. Key concepts:

When building the DotNetNuke Web Services API controllers, I want to use this REST convention for the endpoints to access a resource such as the Chinook database. Note: My DotNetNuke website is running under IIS 7.5 with “dnn7” as the host name binding. Only the request method, url, protocol, content-type and content-body are included in request examples below.

For this project, you will need to have access to the Chinook SQL Server Database.

Requirements Magento Apache, MySQL & PHP - for more info, read Mint LAMP Development Environment Requirements Test Does your server meet the requirements for Magento? Install Sample Data Before installing Magento, download and install sample data and media. Using phpMyAdmin, import the sample data sql file “magento_sample_data_for_1.6.0.0.sql” into an empty magento database. Copy the contents of the sample “media” folder into the media folder of your Magento installation.

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.

I needed to setup a localhost Drupal development environment to upgrade a Drupal 6 theme and do some testing prior to upgrading a live site to Drupal 7. I decided to give the Microsoft Web Platform Installer a try on my Windows 8 computer.

This post documents building cascading select inputs using jQuery and Knockout for the user interface and MVC4 to serve the content.

For this tutorial, you will need: Visual Studio Express 2012 for Windows 8 download details SQL Server Express Database using Visual Studio 2012 with SQL Server Express in this tutorial. Other versions may work (untested). msdn.microsoft.com Chinook database github.com/jimfrenette/chinookdatabase SQL Server 2012 Express Management Studio download details In Visual Studio, create a new C# ASP.NET MVC 4 Web Application: Next, select the Mobile Application Project Template. This template includes jQuery, jQuery intellisense for Visual Studio, jQuery Mobile and Knockoutjs javascript files.

The Chinook Database is a sample database available for SQL Server, Oracle, MySQL, PostgreSQL, SQL Server Compact, SQLite and more. It is ideal for demos, application prototypes and perhaps even a digital media store application. It includes tables for artists, albums, media tracks, invoices and customers. Download and Installation Download the Chinook database from GitHub. Chinook Database Make sure you can Access your SQL Server [Configure Windows Firewall]

Task 1, create a jQuery UI dialog to confirm a postback action invoked by a ASP.NET button control. In your module’s ascx file, add a button control and a div to contain you dialog.

This Tutorial is written with Drupal 7 in mind. However, it can be applied to any website.

Checkout this blog article at infinality.net: Subpixel Hinting and Other Enhancements for Freetype & Fedora 15 RPM Packages Per the infinality article, install the infinality-settings package Edit /etc/X11/.Xresources to read: Xft.autohint: 0 Xft.lcdfilter: lcddefault Xft.hintstyle: hintfull Xft.hinting: 1 Xft.antialias: 1 Xft.dpi: 96 Xft.rgba: rgb Install Windows fonts. To do this, I copied all the .ttf fonts from my mounted Windows 7 device (/mnt/ntfs/Windows/Fonts) to /usr/share/fonts.

Here is a tutorial to show you how to paginate JSON data in the client using jQuery, jQuery Templates plugin, ASP.NET and SQL Server.