DEV Community: Jim Frenette

Cascade Select Dropdown in AEM Component Dialog

Jim Frenette — Tue, 03 Nov 2020 05:30:32 +0000

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.

Component Dialog

Rather than create a new component, we're just going to modify the existing helloworld component that is included with the project.

In the helloworld dialog .content.xml, add the following component nodes after the existing text component node.

1. Heading component (optional)

<heading
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/heading"
    text="Cars"
    level="3"/>

2. Composite Multifield component

<cars
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
    composite="{Boolean}true">
    <field
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        name="./cars">
        <items jcr:primaryType="nt:unstructured">
            <make
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                emptyText="Select a make"
                fieldLabel="Car"
                name="./make">
            </make>
            <model
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                emptyText="Select a model"
                name="./model">
            </model>
        </items>
    </field>
</cars>

The Multifield needs to be composite to store the cars jcr:content as item nodes.

Cars Data

A endpoint that returns a JSON response could be used instead, but for this proof-of-concept we're just adding a static JSON file resource to the existing clientlib-base. Create the folders resources/data in clientlib-base and add this cars.json file to it. e.g.,

clientlib-base/resources/data/cars.json

{
  "cars": [{
     "make": "Chevy",
      "models": ["Camaro Z28", "Camaro ZL1", "Chevelle SS 454",  "Nova SS"]
    },{
      "make": "Dodge",
      "models": ["Challenger", "Charger Daytona", "Dart 426 Hemi"]
    },{
      "make": "Ford",
      "models": ["Fairlane Torino GT", "Mustang Boss 429", "Mustang Mach 1", "Mustang Shelby GT500", "Talladega", "Torino Cobra"]
    }
  ]
}

Component Dialog JavaScript

To add JavaScript that will be used by our component dialog, we're going to create a clientlib-edit folder with a jcr:primaryType of cq:ClientLibraryFolder in our component folder. To ensure that the library is only loaded for authoring dialogs, it needs to have its category set to cq.authoring.dialog. Additionally, to use the ClientLibraryProxyServlet that allows us to modularize our client libraries under /apps, set the allowProxy property. For example,

helloworld/clientlib-edit/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:ClientLibraryFolder"
          allowProxy="{Boolean}true"
          categories="[cq.authoring.dialog]"
          dependencies="[cq.jquery]"/>

Note the cq.jquery dependency. This is for just a couple jQuery methods included in our dialog.js and since it is already being loaded by AEM for its authoring environment, there is no additional overhead. Most of the script is using vanilla JS for modern browsers. As for the couple of jQuery functions, they could be refactored to vanilla JS pretty easily.

For the dialog.js JavaScript that includes the Coral UI API object. Please continue to the original post at jimfrenette.com/aem/components/dialog-coral-ui-select-cascade

WSL2 with Windows Terminal

Jim Frenette — Sun, 05 Jul 2020 01:37:36 +0000

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. For WSL2 installion and updates, refer to the official Windows Subsystem for Linux Documentation.

Free your mind of an inferior Windows developer experience and make the jump

The following has been tested on Windows 10 build 19041 with WSL2 enabled and set as the default version.
Additionally,

Ubuntu from the Windows Store
Windows Terminal from the Windows Store

Windows Terminal

One of the things I really like about the new Windows Terminal is the cut, copy and paste keybindings. No more Ctrl+Shift needed, just use Ctrl+V to paste. For example, here are some snippets from my terminal settings.json.

settings.json

...

// If enabled, selections are automatically copied to your clipboard.
"copyOnSelect": true,

// If enabled, formatted data is also copied to your clipboard
"copyFormatting": false,

// A profile specifies a command to execute paired with information about how it should look and feel.
// Each one of them will appear in the 'New Tab' dropdown,
//   and can be invoked from the commandline with `wt.exe -p xxx`
// To learn more about profiles, visit https://aka.ms/terminal-profile-settings
"profiles":
{
  "defaults": {
    // Put settings here that you want to apply to all profiles.
    "fontSize": 11
  },
  ...
}

...

// Add custom keybindings to this array.
// To unbind a key combination from your defaults.json, set the command to "unbound".
// To learn more about keybindings, visit https://aka.ms/terminal-keybindings
"keybindings":
[
    // Copy and paste are bound to Ctrl+Shift+C and Ctrl+Shift+V in your defaults.json.
    // These two lines additionally bind them to Ctrl+C and Ctrl+V.
    // To learn more about selection, visit https://aka.ms/terminal-selection
    { "command": {"action": "copy", "singleLine": false }, "keys": "ctrl+c" },
    { "command": "paste", "keys": "ctrl+v" },

    // Press Ctrl+Shift+F to open the search box
    { "command": "find", "keys": "ctrl+shift+f" },

    // Press Alt+Shift+D to open a new pane.
    // - "split": "auto" makes this pane open in the direction that provides the most surface area.
    // - "splitMode": "duplicate" makes the new pane use the focused pane's profile.
    // To learn more about panes, visit https://aka.ms/terminal-panes
    { "command": { "action": "splitPane", "split": "auto", "splitMode": "duplicate" }, "keys": "alt+shift+d" }
]

Oh My Zsh

One of the first things I do when setting up a new bash shell is install zsh and Oh My Zsh.

If you're an npm user, I reccommend installing nvm as an Oh My ZSH! custom plugin by cloning zsh-nvm into your custom plugins repo as follows:

cd ~/.oh-my-zsh/custom/plugins

git clone https://github.com/lukechilds/zsh-nvm

Then load as a plugin in your ~/.zshrc profile. Note that plugins need to be added before oh-my-zsh.sh is sourced.

.zshrc

...

# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(
 git
 zsh-nvm
)

source $ZSH/oh-my-zsh.sh

Additionally, if you're using Java and Maven, you can install and run those from WSL2 to build projects even if they exist on the mounted native Windows file system.

For example, I use SDKMAN! to manage mutiple JDK versions similar to how I manage multiple node versions using nvm.

Explorer

Access your WSL files in Explorer by entering network path \\wsl$ in the address bar.

Resources

Originally posted at jimfrenette.com/2020/07/wsl2-windows-terminal

AEM File Transfers for Developers

Jim Frenette — Tue, 28 Jan 2020 02:33:17 +0000

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.

AEM repo tool

Follow the instructions at Adobe-Marketing-Cloud / tools / repo to install on your system. For Linux, I used curl to install the repo bash script since it is just a single file. e.g.,

curl -L https://raw.githubusercontent.com/Adobe-Marketing-Cloud/tools/master/repo/repo -o $HOME/bin/repo

chmod +x $HOME/bin/repo

Add the repo script to your environment PATH as needed.

Config

Defaults

Property	Value
server	http://localhost:4502
credentials	admin:admin

If your server and/or credentials differ from the defaults, in your project folder, create a .repo file with your AEM server location and credentials. e.g.,

.repo

server=http://192.168.1.10:4502
credentials=gilfoyle:secret

Checkout

Specify the AEM JCR path to transfer from. Unlike vlt, you can only perform an action on a single path. There is not an option for a batch transfer that can use a filter.

cd myproject

repo checkout /apps/weretail

This will create a jcr_root folder containing the checked out folders and files.

myproject
- jcr_root
  - apps
    - weretail
- .repo

Use the put command to transfer updated files into the AEM JCR.

cd jcr_root/apps/weretail/components/content/heroimage

repo put heroimage.html

Use the -s option with a command to specify a different server to interact with. For example, transfer to the publish instance on port 4503.

repo put -s http://localhost:4503 heroimage.html

Commands

Command	Alias	Description
checkout		Intial checkout of server content on file system
diff		Show differences, same as 'localdiff'
get		Download server content to local file system
localdiff		Show differences done locally compared to server
put		Upload local file system content to server
serverdiff		Show differences done on the server compared to local
status	st	list status of modified/added/deleted files

For help on a command, use repo <command> -h. e.g., repo -h get. For the entire help contents, repo -h.

IDE Integration

Adobe-Marketing-Cloud /
tools / repo / README contains a good bit of information on how to integrate the commands into various IDE's including Visual Studio Code and IntelliJ. These integration methods should also work for the FileVault VLT commands.

VS Code

Create a tasks.json for the curent workspace. e.g., .vscode/tasks.json

Select Terminal > Configure Tasks > Create tasks.json file from template > Others.

Folder actions will be performed on the folder of the currently opened file.

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "put file",
            "type": "shell",
            "command": "repo put -f ${file}",
            "problemMatcher": []
        },
        {
            "label": "put folder",
            "type": "shell",
            "command": "repo put -f ${fileDirname}",
            "problemMatcher": []
        },
        {
            "label": "get file",
            "type": "shell",
            "command": "repo get -f ${file}",
            "problemMatcher": []
        },
        {
            "label": "get folder",
            "type": "shell",
            "command": "repo get -f ${fileDirname}",
            "problemMatcher": []
        }
    ]
}

For more information on Visual Studio Code integration, refer to the VS Code Task documentation.

FileVault VLT

The Apache Jackrabbit FileVault VLT command line tool maps the contents of an AEM Java Content Repository (JCR) to your file system.

To get the latest FileVault, clone or download the jackrabbit-filevault repo from github.

In AEM versions 6.3 and earlier, you could install FileVault from its archive in the crx-quickstart/opt/filevault/ folder of your AEM instance. For example, AEM 6.3, includes both filevault-3.1.38.tgz and filevault-3.1.38.zip.

Next, build FileVault using Maven. e.g.,

cd jackrabbit-filevault

mvn clean install

Check the documentation for build requirements. At the time of this writing, Maven 3.3.9 (or higher) with Java 8 (or higher) required. I used openjdk version 1.8.0_232 and Maven 3.6.2 when building.

The initial build will take a few minutes, for example:

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for Apache Jackrabbit FileVault (Reactor Project) 3.4.1-SNAPSHOT:
[INFO]
[INFO] Apache Jackrabbit FileVault (Parent Project) ....... SUCCESS [  9.574 s]
[INFO] Apache Jackrabbit FileVault Core Bundle ............ SUCCESS [02:31 min]
[INFO] Apache Jackrabbit FileVault Diff (Diff utilities) .. SUCCESS [  1.549 s]
[INFO] Apache Jackrabbit FileVault JCR Remoting Service ... SUCCESS [  1.658 s]
[INFO] Apache Jackrabbit FileVault RCP Server Bundle ...... SUCCESS [  1.224 s]
[INFO] Apache Jackrabbit FileVault Documentation .......... SUCCESS [  0.066 s]
[INFO] Apache Jackrabbit FileVault Sync Service ........... SUCCESS [  1.611 s]
[INFO] Apache Jackrabbit FileVault Platform Interaction ... SUCCESS [  0.947 s]
[INFO] Apache Jackrabbit FileVault Command Line Interface . SUCCESS [  2.600 s]
[INFO] Apache Jackrabbit FileVault Package Hook Example ... SUCCESS [  2.040 s]
[INFO] Apache Jackrabbit FileVault Package Hook Sling Example SUCCESS [  0.350 s]
[INFO] Apache Jackrabbit FileVault Validation ............. SUCCESS [  3.375 s]
[INFO] Apache Jackrabbit FileVault (Reactor Project) ...... SUCCESS [ 13.789 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  03:15 min
[INFO] Finished at: 2019-12-06T18:42:47-05:00
[INFO] ------------------------------------------------------------------------

Installation

Extract the archive from the vault-cli/target directory in the build.

For example,

cd vault-cli/target

tar xfz vault-cli-3.4.1-SNAPSHOT-bin.tar.gz

If you like, rename the directory for the PATH so it does not contain -SNAPSHOT. e.g.,

mv vault-cli-3.4.1-SNAPSHOT vault-cli-3.4.1

Add the bin directory which contains vlt and vlt.bat to your environment PATH. For example, in Linux, this can be done in the users .profile.

export PATH=$PATH:$HOME/aem/jackrabbit-filevault/vault-cli/target/vault-cli-3.4.1/bin

Once you've updated your environment PATH to include the bin directory, verify using the vlt command (you may have to logout for your PATH changes to take effect).

vlt --help

Checkout

Using vlt co, you can checkout files from the AEM JCR.

Note: this example will checkout all of the files. In a default AEM 6.5 author instance, there are over 2 GB's of files.

cd jcr_root

vlt --credentials admin:admin co --force http://localhost:4502/crx

The credentials only need to be specified on the initial checkout and are added to ~/.vault/auth.xml for subsequent operations.

Checkout Filter

A META-INF manifest folder exists alongside the jcr_root. Create this folder if needed and add a vault/filter.xml file. Now you can checkout just the directories you specify in this filter instead of the entire JCR.

myproject
- jcr_root
- META-INF
  - vault
    - filter.xml

filter.xml

<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
  <filter root="/apps/weretail"/>
  <filter root="/apps/we-retail-communities"/>
  <filter root="/apps/we-retail-screens"/>
  <filter root="/content/we-retail"/>
</workspaceFilter>

Save the filter and run vlt checkout. Use --force to overwrite the previous checkout as needed. e.g.,

cd jcr_root

vlt co --force http://localhost:4502/crx

Commit

Update and commit a file back into the AEM JCR to test the operation. For example,

apps/weretail/components/content/heroimage/heroimage.html

<sly data-sly-use.heroImage="we.retail.core.model.HeroImage">
  <div class="${heroImage.classList} jumbotron"
     style="background-image: url('${(properties.fileReference || properties.fileName) ? heroImage.image.src : '' @ context='uri'}');">
    <div class="container cq-dd-image">
      <div class="we-HeroImage-wrapper">
        <p class="h3">${properties.heading}</p>
        <strong class="we-HeroImage-title h1">${properties.title || currentPage.title}</strong>

        <h3 style="font-weight:bold;text-shadow: 2px 2px 4px #000000;">
          VLT TESTING
        </h3>

        <p data-sly-test="${properties.buttonLabel && properties.buttonLinkTo}">
          <a class="btn btn-primary btn-action" href="${properties.buttonLinkTo @ extension = 'html'}" role="button">${properties.buttonLabel}</a>
        </p>
      </div>
    </div>
  </div>
</sly>

Commit the change with the -v option (verbose output) to see what is being transferred. e.g.,

vlt ci -v apps/weretail/components/content/heroimage/heroimage.html

Verify the update, e.g.,

View a page that has the heroimage component as published, http://localhost:4502/content/we-retail/us/en.html?wcmmode=disabled

VLT Commands

Command	Alias	Description
add		Puts files and directories under version control
checkout	co	Checkout a Vault file system
commit	ci	Send changes from your working copy to the repository
console		Run an interactive console
delete	del, rm	Remove files and directories from version control
diff	di	Display the differences between two paths
export		Export the Vault filesystem
format		Formats vault docview files
import		Import a Vault filesystem
info		Displays information about a local file
propget	pg	Print the value of a property on files or directories
proplist	pl	Print the properties on files or directories
propset	ps	Set the value of a property on files or directories
rcp		Remote copy of repository content
resolved	res	Remove 'conflicted' state on working copy files or directories
revert	rev	Restore pristine working copy file (undo most local edits)
status	st	Print the status of working copy files and directories
sync		Control vault sync service
update	up	Bring changes from the repository into the working copy

For help on a command, use vlt --help plus the name of the command. e.g., vlt --help commit

Originally posted at jimfrenette.com/.../aem-developer-file-transfers | AEM Developer Resources

JavaScript Document Object (DOM) Helpers

Jim Frenette — Sun, 15 Dec 2019 14:23:28 +0000

A few DOM helpers to assist with the transition from jQuery to vanilla JavaScript.

indexInParent

export function indexInParent(el) {
    let children = el.parentNode.childNodes;
    let num = 0;

    for (let i = 0; i < children.length; i++) {
        if (children[i] == el) return num;
        if (children[i].nodeType == 1) num++;
    }
    return -1;
}

indexOfParent

export function indexOfParent(el) {
    return [].indexOf.call(el.parentElement.children, el);
}

matches

export function matches(elem, selector) {
    const isMsMatch = 'msMatchesSelector' in elem && elem.msMatchesSelector(selector);
    const isMatchSelector = 'matchesSelector' in elem && elem.matchesSelector(selector)
    const isMatch = 'matches' in elem && elem.matches(selector);
    // Test the element to see if it matches the provided selector
    // use different methods for compatibility
    return isMsMatch || isMatchSelector || isMatch;
    // Return the result of the test
    // If any of the above variables is true, the return value will be true
}

closest

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Depends on matches;

export function getClosest(elem, selector) {
    // This allows for matching based on any selector, not just a single class.
    for (; elem && elem !== document; elem = elem.parentNode) {
        // Traverse up the dom until document is reached
        if (matches(elem, selector)) {
            // Test each element to see if it matches. If it does, return it.
            return elem
        }
    }
    return null;
}

export const closest = getClosest;

Usage for the above that's in a file set up for tree shaking, e.g., helpers.js

import { closest } from 'js/helpers';

offset top

export function getOffsetTop(el) {
    let offsetTop = 0;
    do {
        if (!isNaN(el.offsetTop)) {
            offsetTop += el.offsetTop;
        }
    } while (el = el.offsetParent);
    return offsetTop;
}

Get the immediately following sibling of each element in the set of matched elements.

Depends on matches, prev;

export function next(el, selector) {
    if (el.nextElementSibling) {
        if (matches(el.nextElementSibling, selector)) {
            return el.nextElementSibling;
        } else {
            return prev(el.nextElementSibling, selector);
        }
    }

    return false;
}

Get the immediately preceding sibling of each element in the set of matched elements.

Depends on matches;

export function prev(el, selector) {
    if (el.previousElementSibling) {
        if (matches(el.previousElementSibling, selector)) {
            return el.previousElementSibling;
        } else {
            return prev(el.previousElementSibling, selector);
        }
    }

    return false;
}

siblings

Get the siblings of each element in the set of matched elements.

Depends on matches;

export function siblings(el, selector) {
    return Array.prototype.filter.call(el.parentNode.children, function (child) {
        return matches(child, selector);
    }) || [];
}

Originally published at jimfrenette.com/javascript/document

WSL ubuntu zsh nvm etc.

Jim Frenette — Mon, 14 Oct 2019 15:13:36 +0000

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.

The following has been tested on Windows 10 Professional (version 1709, build 16299.309) with WSL enabled and Ubuntu installed from the Windows Store. It's also working fine on the current May 2019 Update, version 1903.

Ubuntu Update

If it has been a while, first thing I like to do with the Ubuntu app is update and upgrade the ubuntu Linux packages. First update the package database with apt-get update, then upgrade with apt-get upgrade or apt-get dist-upgrade. I prefer apt-get dist-upgrade since it will remove obsolete packages and add new ones as needed.

Windows update does not change the WSL Ubuntu installation. To upgrade to a new release, run sudo do-release-upgrade in the Ubuntu Terminal.

Oh My Zsh

Oh My Zsh will spruce up your Ubuntu bash and add some additional functionality. Here is a screenshot of my Ubuntu app to illustrate.

Install Oh My Zsh just as you would on any other ubuntu system. Note that Zsh is a pre-requisite. For installation instructions and more information, visit https://github.com/robbyrussell/oh-my-zsh.

Your going to want to change the font to fix unknown character issues. I've installed the DejaVu Sans Mono for Powerline font available here.

To set WSL Ubuntu bash with zsh as your integrated terminal in VS Code. Update your user settings file, e.g., %appdata%\Code\User\settings.json with the following.

settings.json

"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe",
"terminal.integrated.shellArgs.windows": ["-c", "zsh"]

ssh

If you want to use your existing git and/or other ssh keys, copy them from their folder in Windows into a .ssh folder under ubuntu. For example,

cd ~/
mkdir .ssh

# navigate to Windows .ssh folder, e.g.,
cd ../mnt/c/Users/Gilfoyle/.ssh

# copy the keys into ubuntu .ssh folder
cp id_rsa ~/.ssh/
cp id_rsa.pub ~/.ssh/

# set permissions on the private key for github
chmod 600 ~/.ssh/id_rsa

nvm

nvm is a utility for installing and managing multiple versions of node.js.

Install as an Oh My ZSH! custom plugin by cloning zsh-nvm into your custom plugins repo.

cd ~/.oh-my-zsh/custom/plugins

git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Then load as a plugin in your .zshrc profile. Note that plugins need to be added before oh-my-zsh.sh is sourced. For example, here is a snippet from my .zshrc profile.

.zshrc

# Which plugins would you like to load? (plugins can be found in ~/.oh-my-zsh/plugins/*)
# Custom plugins may be added to ~/.oh-my-zsh/custom/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(git)

plugins+=(zsh-nvm)

source $ZSH/oh-my-zsh.sh

If you want to install Yarn, use apt-get install --no-install-recommends yarn. By default, Yarn installs nodejs as a system-wide dependency.

After updating your .zshrc profile to load the nvm plugin, close and re-open the Ubuntu app and to install nvm when the plugin is loaded for the first time.

One the install has completed, you can verify by running nvm which should output the nvm --help contents.

Install the latest LTS version of Node.js which at the time of this writing is version 8.11.1

# install node
nvm install 8.11.1

If you want to upgrade npm, use nvm install-latest-npm.

etc.

Bash-Snippets collection of bash scripts.

apt-get install fortune

apt-get install cowsay

apt-get install htop

Mount

Mount a drive such as a USB flash drive formatted as FAT, ExFAT or NTFS. For example, a drive listed as F:\ in Windows would be mounted as follows.

mkdir /mnt/f
mount -t drvfs f: /mnt/f

Bind

Bind a custom mount for any drives you want to access. For example, the C drive. This is also required should you want to use Docker volume mount paths as described in this post by Nick Janetakis.

Windows 10 17.09

mkdir /c
mount --bind /mnt/c /c

# unmount
umount /mnt/c

Included in Windows 10 version 1803 (April 2018 Update) is support for WSL launch configuration. The /etc/wsl.conf file contains settings for drive mounting and network configuration. Read the Microsoft Developer blog post, Automatically Configuring WSL for more information on how to use wsl.conf

Windows 10 18.03 WSL Configuration File

Create the /etc/wsl.conf file and set root = / so you can access drives with /c or /e instead of /mnt/c and /mnt/e.

wsl.conf

[automount]
root = /
options = "metadata"

File System

If you want to browse the files using Windows Explorer and/or backup the root file system, the location of these files is in the hidden AppData folder. For example:

%localappdata%\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs

From Rich Turners blog post ...

More info available at WSL File System Support.

Resources

Originally published at jimfrenette.com/2018/04/wsl-ubuntu-zsh-nvm-etc

Node.js Koa Container

Jim Frenette — Thu, 10 Oct 2019 13:33:42 +0000

An example of how to create a Docker container application using Koa.js Next generation web framework for Node.js.

In the project root, initialize using Yarn or npm.

yarn init -y

Install dependencies.

yarn add koa
yarn add koa-body
yarn add koa-logger
yarn add koa-router
yarn add koa-views
yarn add swig

Create an app folder in the project root.

In the app folder, create a folder named lib. Then create this render.js module in the new lib folder.

render.js

/**
  * Module dependencies.
  */

const views = require('koa-views');
const path = require('path');

// setup views mapping .html
// to the swig template engine

module.exports = views(path.join(__dirname, '/../views'), {
  map: { html: 'swig' }
});

In the app folder, create a folder for templates named views. Then create this index.html template in the new views folder.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>{{content}}</h1>
</body>
</html>

Using Emmet, which is built into VS Code, you can create the index.html content by entering an exclamation mark on the first line then select the tab key.

In the app folder, create this app.js application entrypoint file.

app.js

const render = require('./lib/render');
const logger = require('koa-logger');
const router = require('koa-router')();
const koaBody = require('koa-body');

const Koa = require('koa');
const app = module.exports = new Koa();

// middleware

app.use(logger());

app.use(render);

app.use(koaBody());

// route definitions

router.get('/', index);

app.use(router.routes());

async function index(ctx) {
  await ctx.render('index', { content: 'Hello World' });
}

// listen

if (!module.parent) app.listen(3000);

Project structure

project
┣ app
┃ ┣ lib
┃ ┃ ┗ render.js
┃ ┣ views
┃ ┃ ┗ index.html
┃ ┗ app.js
┗ package.json

Test the application locally in a browser at http://localhost:3000. Use Ctrl+C to kill the app after verifying it works.

cd app
node app.js

Docker

To containerize the application, create a docker-compose.yml file in the project root as follows.

docker-compose.yml

version: '3'

services:
  app:
    image: node:alpine
    user: "node"
    working_dir: /home/node/app
    environment:
      - NODE_ENV=production
    ports:
      - "3000:3000"
    volumes:
      - ./app:/home/node/app
      - ./node_modules:/home/node/node_modules
    expose:
      - "3000"
    command: "node app.js"

Build, (re)create and start, the container in disconnected mode. The app folder is attached as a volume and mapped to the working directory, /home/node/app in the container. The node app.js command is executed in the containers working directory.

docker-compose up -d

Test the application locally in a browser at http://localhost:3000. Use Ctrl+C to kill the app after verifying it works.

Stop and remove the container and volumes created by docker-compose up.

docker-compose down

Build a Docker image for better performance and deployment once initial development is completed. Instead of mapping the local app and node_modules folders to the container, copy files and folders into the container, set working directories and run commands as needed.

Create this Dockerfile in the project root

Dockerfile

FROM node:alpine
WORKDIR /home/node

# using wildcard (*) to copy both package.json and package-lock.json
COPY package*.json /home/node/
RUN yarn install --production

# create and set app directory as current dir
WORKDIR /home/node/app
COPY app/ /home/node/app/
EXPOSE 3000
CMD ["node", "app.js"]

Build the image and tag it. In the project root run the following command.

docker build -t myapp-node .

Test the new myapp-node Docker image using docker run. Same URL as before, http://localhost:3000.

docker run -u node -w /home/node/app -e NODE_ENV=production -p 3000:3000 --expose 3000 myapp-node node "app.js"

Stop the container using docker stop followed by the container ID. To get a list of all running containers, use docker ps --filter status=running.

That's it!

This post originally published at jimfrenette.com/docker/node-js-koa-container

New Webpack Development Server Plugin

Jim Frenette — Tue, 08 Oct 2019 13:02:11 +0000

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.

I'm using the fairly basic split configuration from my uiCookbook/sidebars application to demonstrate how to replace webpack-dev-server with the new webpack-plugin-serve plugin

Requirements

Active LTS Node version, e.g., version 8.0.0+ or version 10.0.0+. Read the webpack-plugin-serve documentation for more info.

Demo Application

Start by cloning or downloading the uiCookbook repository containing the sidebars application. The following git clone command uses the --branch option to specify the 2018-09-sidebars tag. This tag represents the checksum version of the repo that predates the change to webpack-plugin-serve in the current version of the app.

# clone 2018-09-sidebars tag in uiCookbook repo
git clone https://github.com/jimfrenette/uiCookbook.git --branch=2018-09-sidebars

# change to sidebars directory    
cd uiCookbook/sidebars

Before making any changes, make sure the application builds for you.

# install node_modules    
npm i

# run dev build
npm run dev

The web browser should open with the app loaded in localhost as shown below.

After confirming that the app builds and the dev server is running on localhost, cancel the running process with Ctrl + C.

Replace Packages

Let's remove and replace the npm packages and modules from the application as follows.

Replace the webpack development server. Additionally, remove the write-file-webpack-plugin since it only works with webpack-dev-server.

npm uninstall webpack-dev-server
npm uninstall write-file-webpack-plugin

# install webpack-plugin-serve --save-dev
npm i webpack-plugin-serve -D

Replace the webpack-cli with webpack-nano. This new Webpack CLI is the optimal solution, it's super tiny (~90% smaller than webpack-cli and webpack-command) and allows unlimited custom flags. more info

npm uninstall webpack-cli

# install webpack-nano --save-dev
npm i webpack-nano -D

npm-run-script

In the package.json file, update the scripts.dev and scripts.build properties for webpack-nano to run the builds. All applicable options, e.g., mode and watch will instead be added to the respective configuration files.

package.json

 ...

  "scripts": {
    "dev": "wp --config config/dev.config.js",
    "build": "wp --config config/prod.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Note that the ellipsis ... in the code snippet above is not a part of the actual code and is there only to denote code that is being skipped and not applicable to the example. To view the entire file, examine the source code.

Webpack Configuration

Since the write-file-webpack-plugin was removed, be sure to remove it from the config file.

dev.config.js

// delete this line:
const writeFilePlugin = require('write-file-webpack-plugin');

The configuration is split across three files located in the config folder. The base.config.js contains code common to both the dev.config.js and prod.config.js configurations. Start by adding the const object to include the webpack-plugin-serve module near the top of the dev.config.js file where the other constants are defined. Under that, create a new instance of Serve named serve that contains our dev server options.

dev.config.js

...

const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');

const serve = new Serve({
  host: 'localhost',
  static: ['./'],
  open: true,
  liveReload: true
});

Next, update the module.exports as follows. Note that we're setting the mode and watch flags here instead of our npm script.

dev.config.js

...

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: {
    app: ['webpack-plugin-serve/client']
  },
  plugins: [
    serve
  ],
  watch: true
});

Updated dev.config.js file.

Next, in the base.config.js, change the entry.app property value into an array so webpack-merge handles it properly since we added an entry.app property to the dev.config.js in the previous step.

base.config.js

...

  entry: {
    app: ['./js/index.js']
 },

In the production build config, we're only adding mode: 'production' to the module.exports.

prod.config.js

...

module.exports = merge(baseConfig, {
  mode: 'production',

That's it. Run the dev build again, this time using the updated configuration.

npm run dev

Source Code

Additional Resources

The minimal React, Webpack, Babel Setup: using webpack-plugin-serve - Looking for a barebones React Webpack configuration that uses webpack-plugin-serve? Similar to the above, this fork of Robin Wieruch's boilerplate project on GitHub has been modified slightly to also use shellscape's new webpack-plugin-serve along with their webpack-nano CLI replacement. Source Code on GitHub

Originally published at jimfrenette.com/2018/12/new-webpack-development-server-plugin

Xdebug for Mac OS X PHP

Jim Frenette — Mon, 07 Oct 2019 12:35:46 +0000

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.

Download the latest version of Xdebug.

Verify that PHP is installed. e.g.,

php -v

# output
PHP 7.1.19 (cli) (built: Aug 17 2018 20:10:18) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

Extract the downloaded Xdebug tarball as described in the earlier instructions above. e.g.,

cd ~/Downloads

mkdir xdebug
mv xdebug-2.6.1.tgz xdebug/

cd xdebug
tar xzf xdebug-2.6.1.tgz

Run phpize from within the extracted Xdebug source directory. e.g.,

cd xdebug-2.6.1

phpize
grep: /usr/include/php/main/php.h: No such file or directory
grep: /usr/include/php/Zend/zend_modules.h: No such file or directory
grep: /usr/include/php/Zend/zend_extensions.h: No such file or directory
Configuring for:
PHP Api Version:
Zend Module Api No:
Zend Extension Api No:

If the Xcode commandline tools are not installed, phpize outputs missing include file messages. You can install the Xcode commandline tools using the CLI. e.g.,

xcode-select --install

If the Xcode commandline tools are already installed and/or you still get the missing include files message, force a reinstall of the commandline tools header files. e.g.,

sudo installer -pkg /Library/Developer/CommandLineTools/Packages/macOS_SDK_headers_for_macOS_10.14.pkg -target /

Retry running phpize from within the extracted Xdebug source directory. e.g.,

phpize
Configuring for:
PHP Api Version:         20160303
Zend Module Api No:      20160303
Zend Extension Api No:   320160303

Configure Xdebug.

./configure

Build Xdebug.

make

Starting with OS X 10.11 El Capitan, system files and processes are protected with System Integrity Protection (SIP). Since /usr/lib/php/extensions write operations are not permitted with SIP enabled, install the Xdebug extension under the /usr/local. e.g.,

sudo mkdir -p /usr/local/php/extensions

sudo cp modules/xdebug.so /usr/local/php/extensions/

Update the /private/etc/php.ini file to load the Xdebug extension. e.g.,

...

;;;;;;;;;;;;;;;;;;;;;;
; Dynamic Extensions ;
;;;;;;;;;;;;;;;;;;;;;;

...

zend_extension=/usr/lib/php/extensions/no-debug-non-zts-20160303/xdebug.so

If /private/etc/php.ini does not exist, PHP is using the default settings. Copy the /private/etc/php.ini.default sample configuration file to /private/etc/php.ini and update it to customize PHP settings.

Verify

php -i | grep xdebug

# expected output
xdebug
xdebug support => enabled
...

If you get the following error message in the output, use the Xdebug extension provided with the system in /usr/lib/php/extensions/no-debug-non-zts-20160303

Failed loading /usr/local/php/extensions/xdebug.so: dlopen(/usr/local/php/extensions/xdebug.so, 0x0009): code signature in (/usr/local/php/extensions/xdebug.so) not valid for use in process: mapped file has no cdhash, completely unsigned? Code has to be at least ad-hoc signed.

Remote Debugging

Enable remote debugging by adding the following xDebug settings at or near the bottom of the php.ini file.

...

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Originally published at jimfrenette.com/2018/12/xdebug-for-mac-os-x-php

Responsive Content Filter JavaScript

Jim Frenette — Mon, 30 Sep 2019 04:05:34 +0000

This code sample shows how to create a responsive list filter using plain JavaScript (no jQuery). JavaScript gets the breakpoint value from a hidden css pseudo element that uses a media query to set its value. Therefore, it is not necessary to maintain rendundant responsive breakpoint values in the script.

All of the code is available to edit and demo in our online sandbox.

Demo

jQuery version

Images Larger than Container CSS

Jim Frenette — Tue, 24 Sep 2019 11:51:59 +0000

This will center the image inside of a element when the elements height and/or width is smaller than the image. This works well when you have image assets of various aspect ratios that you want to display as thumbs that are the same size.

demo

HTML

<ul class="thumbnails">
  <li>
    <img src="https://via.placeholder.com/400x300/9932CC/FFFFFF">
  </li>
  <li>
    <img src="https://via.placeholder.com/500x300/7FFFD4/000000">
  </li>
  <li>
    <img src="https://via.placeholder.com/300x200/87CEFA/000000">
  </li>
  <li>
    <img src="https://via.placeholder.com/300x400/F4A460/000000">
  </li>
</ul>

CSS

ul.thumbnails {
  display: flex;
  flex-wrap: wrap;
}
ul.thumbnails li {
  height: 150px;
  border: 4px solid #FFF;
  overflow: hidden;
  position: relative;
  width: 150px;
}
ul.thumbnails li img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  width: 250px;
}

Originally published at jimfrenette.com/css/images-larger-than-container

How To Create a WordPress Shortcode for flickr Albums

Jim Frenette — Mon, 23 Sep 2019 12:01:00 +0000

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.

Requirements

flickr API key. From their API page, select the Create an App link for more information on how to request an API key.
Node.js with NPM
If you're looking for a local Wordpress development environment, may I suggest giving docker4wordpress a try which I have written about in my post titled, WordPress from Development to Production using Docker.

Shortcode

Creating a custom shortcode is done by adding PHP code to the theme functions.php file. I prefer keeping my custon WordPress functions in separate files rather than lumping them all in the existing functions.php file. To do this, create a functions folder and add a new slickflickr.php file to it.

Add the following php code to the slickflickr.php file to register the custom shortcode_handler function. Be sure to replace the example $api_key value with your flickr API key.

slickflickr.php

<?php
/**
 * Slick Flickr Album Shortcode
 *
 * @param array [photoset_id
 * example
 * [slickflickrshortcode photoset_id=72157685387149525]
 *
 * @return string Unordered list of images for lazy loading slick photo gallery
 *
 * url format reference:
 * https://www.flickr.com/services/api/misc.urls.html
 */
function slickflickr_shortcode_handler($args) {

    $xml = slickflickr_get_photoset($args['photoset_id']);

    ob_start();
  ?>
  <ul class="photogrid">
  <?php
    foreach($xml->photoset[0]->photo as $photo) {
        echo '<li><img data-src="https://farm' . $photo['farm'] . '.staticflickr.com/' . $photo['server'] . '/' . $photo['id'] . '_' . $photo['secret'] . '_b.jpg" alt="' . $photo['title'] . '" /></li>';
    }
    ?>
    </ul>
    <?php
    return ob_get_clean();
}
add_shortcode( 'slickflickrshortcode',  'slickflickr_shortcode_handler' );

function slickflickr_curl($url) {
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $data = curl_exec($ch); // response
    curl_close($ch);
    return $data;
}

function slickflickr_get_photoset($photoset_id) {
    $results = null;
    $api_key = '1234a567bc89d101ef1ghij121314klm';
    $url = 'https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=' . $api_key . '&photoset_id=' . $photoset_id . '&format=rest';
    $xml = new \SimpleXmlElement(slickflickr_curl($url));
    return $xml;
}

Reference: WordPress Shortcode API

At or near the bottom of the functions.php, add this require statement to include the custom shortcode handler in the theme.

functions.php

...

/**
* Slick flickr Shortcode Handler
*/
require get_parent_theme_file_path( '/functions/slickflickr.php' );

Note that the ellipsis ... in the code snippets throught this tutorial are not a part of the actual code and is there only to denote code that is being skipped and not applicable to the example.

Test the custom shortcode by entering the shortcode text in a post. For example, [slickflickrshortcode photoset_id=72157685387149525]. When you view-source for that post, you should see an unordered list with img elements. The flickr album image URL's are added to the img element data-src attribute for lazy-loading. The styling and image lazy-loading is handled by CSS and JavaScript code that we will add to the WordPress theme in a subsequent section.

Theme

For the front end, we need to bring the UI build process for the JavaScript and CSS into a WordPress theme. In this tutorial, I'm going to use a copy of the TwentySeventeen Theme that comes with WordPress along with my TwentySeventeen Theme Sass. If you want a completely blank slate instead, you could use the _s theme I've written about here.

Download or clone the TwentySeventeen Theme Sass into the mytwentyseventeen folder. If you have an existing theme, download the zip file from github instead, extract, and copy the src folder into your theme.

cd wp-content/themes

git clone https://github.com/jimfrenette/twentyseventeen-sass.git mytwentyseventeen

Copy all of the twentyseventeen theme folders and files into the new mytwentyseventeen theme.

cd wp-content/themes

cp -r twentyseventeen/ mytwentyseventeen/

On Windows? I have written about some Unix like command line interfaces for it including WSL ubuntu zsh nvm etc., and Cygwin Oh My ZSH Recipe.

UI Build

Since we're not using Gulp, delete gulpfile.js and package.json.

Create these files in the the new theme. We will edit them later. For example,

cd wp-content/themes/mytwentyseventeen

# create the .babelrc file
touch .babelrc

# create a new package.json file using npm
npm init

# create the postcss config
touch postcss.config.js

NPM Packages

Install NPM packages to transpile the Javascript and Sass using Webpack 4.

cd wp-content/themes/mytwentyseventeen

npm i webpack webpack-cli webpack-merge --save-dev

npm i autoprefixer --save-dev

npm i babel-loader @babel/core @babel/preset-env --save-dev

npm i css-loader style-loader --save-dev

npm i mini-css-extract-plugin --save-dev

npm i node-sass sass-loader --save-dev

npm i optimize-css-assets-webpack-plugin --save-dev

npm i postcss-loader --save-dev

npm i resolve-url-loader url-loader --save-dev

npm i uglifyjs-webpack-plugin --save-dev

Webpack 4 Configuration

Create a webpack folder with three config.js files.

cd wp-content/themes/mytwentyseventeen

mkdir webpack

cd webpack

touch base.config.js

touch dev.config.js

touch prod.config.js

The base.config.js file contains a configuration that is common to both dev and prod.

base.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  context: path.resolve(__dirname, '../src'),
  entry: {
    app: './js/index.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "../style.css",
    })
  ],
  externals: {
    // require("jquery") is external and available
    // on the global var jQuery
    "jquery": "jQuery"
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader' },
          {
            /* for ~slick-carousel/slick/slick-theme.scss */
            loader: 'resolve-url-loader' },
          {
            /* for resolve-url-loader:
                source maps must be enabled on any preceding loader */
            loader: 'sass-loader?sourceMap' }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      { /* for ~slick-carousel/slick/slick-theme.scss */
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      }
    ]
  }
}

The dev.config.js file contains only configuration settings specifically for development. The configuration settings in the base.config.js file are combined with this dev configuration by webpack-merge.

dev.config.js

const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
  devtool: 'eval-source-map',
});

The prod.config.js file contains only configuration settings specifically for the production build. The configuration settings in the base.config.js file are also combined with this configuration by webpack-merge.

prod.config.js

const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = merge(baseConfig, {
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: { output: { comments: false } }
    })
  ]
});

Add the presets property to the .babelrc congfiguration file.

.babelrc

{
  "presets": ["@babel/preset-env"]
}

Add this plugins property to require the autoprefixer postcss plugin to the postcss.config.js configuration file.

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Add a browserslist property to the package.json file to inform our transpilers which browsers to support. Here, we're targeting browsers greater than 2% according to global usage statistics and Internet Explorer versions greater than 10.

package.json

{
  "name": "mytwentyseventeen",
  "version": "1.0.0",
  "description": "WordPress Twenty Seventeen Theme",
  "main": "index.js",
  "browserslist": [
    "> 2%",
    "last 2 versions",
    "ie > 10"
  ],

  ...
}

In the src folder, create a js folder containing an index.js entrypoint that imports the Sass.

index.js

import style from '../sass/style.scss'

npm-run-script

In the package.json file, add dev and prod properties to the scripts object for running webpack.

package.json

  ...

  "scripts": {
    "dev": "webpack --mode=development --watch --progress --colors --config webpack/dev.config.js",
    "build": "webpack --mode=production --progress --hide-modules --config webpack/prod.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  ...
}

Lazy Load Album Images

This technique defers downloading of the images making the page load faster.

Inside the src/js, create a lazyimage.js module file.

lazyimage.js

export default class Lazyimage {
  constructor(options) {

      this.init();
  }

  init() {

      [].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
          img.setAttribute('src', img.getAttribute('data-src'));
          img.onload = function() {
              img.removeAttribute('data-src');
          };
      });
  }

}

To import the Lazyimage class from the module, add this code to the src/js/index.js file.

index.js

...

import Lazyimage from './lazyimage'

new Lazyimage();

Inside the src/sass folder, create a _photogrid.scss and a _lazyimage.scss file. The Sass partial filenames have leading underscore to indicate they only get processed when imported.

_photogrid.scss

ul.photogrid {
  margin: 0.5vw 0.5vw 0.5vw -0.5vw;
  font-size: 0;
  flex-flow: row wrap;
  display: flex;

  li {
    flex: auto;
    width: 200px;
    margin: 0.5vw;
  }
}

_lazyimage.scss

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

Update src/sass/style.scss to import the Sass partials.

style.scss

...

@import "photogrid";
@import "lazyimage";

Run the Build

One sec, we need to link the dist/app.js that is going to be built in the theme footer. Add a script element before the closing body tag.

footer.php

...

<script async src="/wp-content/themes/mytwentyseventeen/dist/app.js"></script>

</body>
</html>

Before moving onto the lightbox and Slick slider Sass and JavaScript code, run the build to verify that everything is styled and working properly.

npm run build

If all looks good after clearing the cache, run the development build to watch for changes and build incrementally when the remaining lightbox and slider code is added.

npm run dev

Slick Slider Lightbox

Install Slick

npm i slick-carousel --save

Inside the src/js, create a lightbox.js module file.

lightbox.js

import $ from 'jquery'
import 'slick-carousel'

export default class Lightbox {
  constructor(options) {
    this.settings = $.extend({/* defaults */}, options);
    this.init();
  }

  init() {
    let source = $(this.settings.source);

    if (source.length) {
      source.each((index, el) => {
        this.create(index, el);
      });
    }
  }

  create(index, el) {
    let lightbox = this.settings.name + '__' + index,
    opener = $(el).find(this.settings.opener);

    $('body').append('<div data-lightbox="' + lightbox + '" class="lightbox"><div></div></div>');
    if (this.settings.type === 'slider') {
      $('div[data-lightbox="' + lightbox + '"] > div')
        .append('<div class="lightbox-slider"></div>');

      var slider = $('div[data-lightbox="' + lightbox + '"] .lightbox-slider');
      slider.slick({
        dots: true
      });

      opener.each((index, el) => {
        this.popSlider(lightbox, slider, el);
      });
    }

    // close button
    $('div[data-lightbox="' + lightbox + '"] > div')
      .prepend('<a class="lightbox-close" href="javascript:void(0)">+</a>');

    $('.lightbox-close').on( 'click', function() {
      $('[data-lightbox="' + lightbox + '"]').removeClass('is-open');
    });

    //close on outside click
    window.onclick = function(evt) {
      if (evt.target.dataset.lightbox == lightbox) {
        $('[data-lightbox="' + lightbox + '"]').removeClass('is-open');
      }
    }

    // close on escape
    $(document).keyup(function(evt) {
      if (evt.which === 27) {
        $('[data-lightbox="' + lightbox + '"]').removeClass('is-open');
      }
    });
  }

  popSlider(lightbox, slider, el) {
    let img = $(el).find('img'),
        src = img.prop('src'),
        slide = document.createElement('div'),
        slideImg = document.createElement('img');

    slideImg.src = src;
    slide.appendChild(slideImg);

    if (img.attr('alt')) {
      let caption = document.createElement('p'),
      captionText = document.createTextNode(img.attr('alt'));
      caption.appendChild(captionText);
      slide.appendChild(caption);
    }

    slider.slick('slickAdd', slide);

    img.wrap('<a href="' + src + '"></a>').on( 'click', function(evt) {
      evt.preventDefault();
      $('[data-lightbox="' + lightbox + '"]').addClass('is-open');
      let index = $(this).closest(el).index();
      slider.slick('slickGoTo', index);
    });
  }
}

Update the src/js/index.js to import the Lightbox class from the module.

index.js

import style from '../sass/style.scss'
import Lazyimage from './lazyimage'
import Lightbox from './lightbox'

new Lazyimage();

new Lightbox({
  name: 'lightbox',
  source: '.photogrid',
  opener: 'li',
  type: 'slider'
});

Inside the src/sass folder, create a _lightbox.scss

_lightbox.scss

/* overlay (background) */
.lightbox {
  max-height: 0; /* instead of `display: none` so slider can init properly. */

  position: fixed; /* stay in place */
  z-index: 9;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* enable scroll if needed */
  background-color: rgb(0,0,0); /* fallback color */
  background-color: rgba(0,0,0,0.80); /* black w/ opacity */

  > div {
    position: relative;
    background-color: rgb(0,0,0);
    padding: 20px;
    color: #fff;
    //width: 100%; /* could be more or less, depending on screen size */
    width: 90vw;
    margin: 5vw auto;

    .slick-prev,
    .slick-next {
      z-index: 10;
    }
    .slick-prev {
      left: -20px;
    }
    .slick-next {
      right: -20px;
    }
    .slick-dots {
      li button:before {
        color: #fff;
      }
    }
  }

  &.is-open {
    max-height: 100%; /* unhide */
  }

  @media only screen and (max-width: 600px) {
    background-color: rgba(0,0,0,0.95); /* black w/ opacity */

    > div {
      padding: 40px 0 20px 0;
      width: 100vw;
      margin: 0 auto;

      .slick-slide p {
        padding: 0 15px;
      }

      .slick-next, .slick-prev {
        display: none;
      }
    }
  }

  @media only screen and (min-width: 1025px) {
    > div {
      max-width: 1024px;
    }
  }
}

/* close button */
.lightbox-close {
  position: absolute;
  top: 2px;
  right: 2px;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  font-weight: bold;
  color: rgba(255,255,255,0.75);
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  text-decoration: none;
  z-index: 10;

  &:hover {
    color: rgb(255,255,255);
  }

  @media only screen and (max-width: 600px) {
    top: 4px;
    right: 4px;
    line-height: 32px;
    font-size: 32px;
    width: 32px;
    height: 32px;
  }
}

Update src/sass/style.scss adding the lightbox and slick-carousel imports.

style.scss

...

@import "photogrid";
@import "lazyimage";
@import "lightbox";

/* node_modules */
@import "~slick-carousel/slick/slick.scss";
@import "~slick-carousel/slick/slick-theme.scss";

For a complete listing of the source files that have been created or updated, I advise you to examine the source code repository on GitHub.

Source Code

Originally posted at jimfrenette.com/2018/11/how-to-create-wordpress-shortcode-for-flickr-albums

CSS Responsive Hotspots

Jim Frenette — Sun, 22 Sep 2019 15:52:02 +0000

This code sample shows how to create hotspots for a responsive image entirely in CSS and HTML. When the image scales according to changes in viewport width, the hotspots and their respective tool tips will move accordingly.

Originally published at jimfrenette.com/css/responsive-hotspots

Demo and edit in our sandbox

HTML

<div class="hotspot-demo-1">
    <div class="hotspot-demo-1-left">
        <img src="/images/2015/05/kingston.jpg" />
        <div class="spots">
            <div id="spot-01">
                <a class="spot">+</a>
                <blockquote>These are my dog tags
                    <span class="notch notch-right"></span>
                </blockquote>
            </div>
            <div id="spot-02">
                <a class="spot">+</a>
                <blockquote>I am loyal and love my humans 
                    <span class="notch notch-top"></span>
                </blockquote>
            </div>
            <div id="spot-03">
                <a class="spot">+</a>
                <blockquote>My coat has brindle in it
                    <span class="notch notch-left"></span>
                </blockquote>
            </div>
        </div>
    </div>
</div>

CSS


blockquote {
    position: relative;
    display: none;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    line-height: 1.5em;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}
blockquote .notch {
    position: absolute;
    padding: 0;
    width: 0;
    height: 0;
}
blockquote .notch-top {
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-top: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(0,0,0,0.7);
    border-left: 10px solid transparent;
}
blockquote .notch-right {
    top: 50%;
    right: -10px;
    margin-top: -10px;
    border-top: 10px solid transparent;
    border-right: 0;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(0,0,0,0.7);
}
blockquote .notch-bottom {
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    border-top: 10px solid rgba(0,0,0,0.7);
    border-right: 10px solid transparent;
    border-bottom: 0;
    border-left: 10px solid transparent;
}
blockquote .notch-left {
    top: 50%;
    left: -10px;
    margin-top: -10px;
    border-top: 10px solid transparent;
    border-right: 10px solid rgba(0,0,0,0.7);
    border-bottom: 10px solid transparent;
    border-left: 0;
}
img {
    display: block;
    width: 100%;
}
.hotspot-demo-1-left {
    position: relative;
    width: 50%;
}
.spots {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.spot {
    position: absolute;
    text-align: center;
    line-height: 32px;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    width: 32px;
    height: 32px;
    border: 1px solid #5FB404;
    border-radius: 16px;
    background-color: #5FB404;
}
.spot:hover {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#spot-01, #spot-02, #spot-03 {
    display: inline-block;
    min-width: 250px;
}   
#spot-01 {
    position: absolute;
    top: 65%;
    left: 78%;
}
#spot-01:hover > blockquote {
    display: block;
    top: -16px;
    left: -91%
}
#spot-02 {
    position: absolute;
    top: 28%;
    left: 57%;
}
#spot-02:hover > blockquote {
    display: block;
    top: 36px;
    left: -43%;
}
#spot-03 {
    position: absolute;
    top: 45%;
    left: 20%;
}
#spot-03:hover > blockquote {
    display: block;
    top: -16px;
    left: 18px;
}