Google Maps API with Webpack

Google Map application that uses a draggable location marker to set address, longitude and latitude geocode inputs. This post covers some of the Webpack tools for both a local development environment and production build of the app constructed of a few JavaScript modules and css.

For application details, I encourage you to read my Google Maps API with Browserify post from a year ago. The following overview highlights building the refactored code with Webpack. This refactor brings the application more up to date with ES6 standards. Other changes inlcude the removal of jQuery as a dependency. All of the source code is available for download and browsing at GitHub.

NPM

Here is the updated package.json for installing webpack, loaders and other dependencies. This file also defines scripts to start and run commands.

package.json
{
  "name": "gmap-webpack",
  "version": "0.0.1",
  "description": "location inputs populated by google maps api, built with webpack",
  "main": "",
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --progress --inline --open",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.2.3",
    "css-loader": "^0.25.0",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

The npm start command is using the cross-env plugin to set the Node environment variable properly for the platform. The webpack-dev-server then bundles the modules and launches a static web server inline for live reloading.

The npm run build command uses cross-env to set the environment flag. Then webpack bundles the modules according to the webpack.config below optimized with a source-map for production.

webpack.config
const path = require('path')
const webpack = require('webpack')

module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        app: './js/index.js',
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    devtool: '#eval-source-map',
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: ['style-loader','css-loader']
        }]
    }
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

In the webpack.config file, the output.publicPath property is used by the webpack-dev-server to determine where the bundles should be served from.

The devtool property controls if and how source maps are generated. eval-source-map is for faster rebuild when in development. In production mode, devtool is set to use the appropriate source-map style instead.

To test drive the app and experiment with the dev server and live reloading, follow these steps assuming you have Node.js installed.

  1. Download and extract the source code or use git to clone the uiCookbook repository from https://github.com/jimfrenette/uiCookbook
  2. Navigate to the uiCookbook/geocode/gmap-webpack folder in your CLI, such as terminal or Cygwin.
  3. Run npm i or npm install
  4. Run npm start to bring up the dev server, bundle the modules and load the app in the browser.

Source Code

A Vue.js version of the Google Maps applicaton is available in the geocode/gmap-vue directory. The vue-cli webpack-simple scaffold was used to generate the Vue.js 2 project template.

Node.js

A collection of useful Node.js code snippets and resources.

HTTP Server

An easy way to get a Node.js http server up and running is by installing the http-server node module globally, npm install http-server -g. Here is an example using the -a option to specify an address to use. For more options, run http-server --help.

http-server -a localhost
  • http-server default is to use address 0.0.0.0 which is reachable by all IP addresses of the local machine’s network interface. Therefore, it may not be safe to run this address on a public network.

Shell Scripting

A collection of shell scripting resources.

Shell scripts are plain text files with an .sh extension.

If permission denied, the shell script may just need to be made executable. Example: for a script named backup.sh, using chmod u+x backup.sh will grant only the owner of the file execution permissions. For all users, replace the u with an a. You could also use chmod +x backup.sh which is the same as chmod a+x backup.sh.

chmod u+x backup.sh

Then try running the script again.

./backup.sh

rsync

This OS X example uses rsync to backup the Documents folder on the hard drive to an existing Documents folder on a Lexar USB stick. The --delete-before option deletes files from the target that do not exist in the source before rsync.

if [ -d "/Volumes/Lexar/Documents" ];
then
    rsync -avP "/Volumes/Macintosh HD/Users/Woz/Documents/" "/Volumes/Lexar/Documents/" --delete-before
fi

Use the --exclude option to prevent specific files and folders from being synced. This example excludes .DS_Store files, .git and node_modules folders from the backup.

if [ -d "/Volumes/Lexar/Code" ];
then
    rsync -avP --exclude .DS_Store --exclude .git --exclude node_modules "/Volumes/Macintosh HD/Users/Dinesh/Code/" "/Volumes/Lexar/Code/"
fi
  • These shell script examples are written for Cygwin and /cygdrive/c is how the C: drive of Windows is accessed. For Cygwin, the rsync package would need to be installed. On OS X and Linux, rsync is usually included in the system install.

This example uses rsync to backup an existing file to a server share.

if [ -f /cygdrive/c/Users/Gilfoyle/Dropbox/Private/Hooli.xlsx ];
then
    rsync -avP /cygdrive/c/Users/Gilfoyle/Dropbox/Private/Hooli.xlsx //FILESERVER/share/Hooli.xlsx
fi

This example uses rsync to backup an existing Private Dropbox folder to a server share.

if [ -d /cygdrive/c/Users/Gilfoyle/Dropbox/Private ];
then
    rsync -avP /cygdrive/c/Users/Gilfoyle/Dropbox/Private/ //FILESERVER/share/
fi

tar

This example checks for the existing source directory and creates a compressed archive in the current directory with a datetime string included in the filename. The source directory and its contents will be added to the archive while exluding node_modules .git and sass.cache

if [ -d /cygdrive/c/Users/Dinesh/Code ];
then
    now=$(date +"%Y-%m-%dT%H%M%S")
    tar -zcvf code_$now.tar.gz --exclude .git --exclude node_modules --exclude sass.cache /cygdrive/c/Users/Dinesh/Code
fi

dos2unix

Find all files inside the current directory and execute dos2unix on each converting DOS format line breaks (CRLF) to Unix format (LF).

find . -type f -exec dos2unix {} \;

unix2dos

Find all files inside the current directory and execute unix2dos on each converting Unix format line breaks (LF) to DOS format (CRLF).

find . -type f -exec unix2dos {} \;

Resources

Windows PowerShell

A collection of Windows PowerShell resources

Execution Policy

This command sets the PowerShell execution policy.

If you encounter an error such as …

{script path} cannot be loaded.
The file {script path} is not digitally signed.
You cannot run this script on the current system.
For more information about running scripts and setting execution policy,
see about_Execution_Policies at
http://go.microsoft.com/fwlink/?LinkID=135170.

You can set a Bypass execution policy for the current session.

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

Menu Example

This PowerShell script contains a menu to execute various tasks using functions.

UtilityMenuExample.ps1
function ListProcess
{
    Get-Process | Group-Object Company | Sort-Object Count -Descending
}

function ListEnvVars
{
    Get-ChildItem env:
}

function ListEventLog
{
    Get-EventLog -List
}

function Cleanup
{
    Write-Host "Delete files from $env:temp older than 24 hours"
    Get-ChildItem -path $env:temp | where {$_.Lastwritetime -lt (date).addhours(-24)} | remove-item
    <# Clear-RecycleBin #>
    $Shell = New-Object -ComObject Shell.Application
    $RecBin = $Shell.Namespace(0xA)
    $RecBin.Items() | %{Remove-Item $_.Path -Recurse -Confirm:$false}
}

function ShowMenu
{
     param (
           [string]$Title = 'Menu'
     )
     Write-Host "====== $env:USERPROFILE - $Title ======="

     Write-Host "1: List Running Processes"
     Write-Host "2: List Environment Variables"
     Write-Host "3: List Event Log"
     Write-Host "4: Clean Temp and Recycle Bin"
     Write-Host "q: quit"
}

do
{
     ShowMenu
     $input = Read-Host "Please make a selection"
     switch ($input)
     {
        '1' {
            Clear-Host
            ListProcess
        }
        '2' {
            Clear-Host
            ListEnvVars
        }
        '3' {
            Clear-Host
            ListEventLog
        }
        '4' {
            Clear-Host
            Cleanup
        }
        'q' {
            return
        }
     }
     pause
}
until ($input -eq 'q')

Compress-Archive

This example creates a zip file of the Documents folder with a datetime string in the zip filename.

Compress-Archive "$env:USERPROFILE\Documents" "$env:USERPROFILE\Documents_$(get-date -f yyyyMMdd'T'HHmmss).zip"

Resources

Cygwin Oh My ZSH Recipe

This post documents my Cygwin + Oh My ZSH configuration which gives me a consistent cross platform terminal experience on Windows, OS X and Linux.

Web development workflow with git, node, npm, docker, vagrant, etc. is more comfortable when using the same familiar bash shell interface across different operating systems.

I don't always use the command line in Windows - But when I do, I prefer Cygwin

Install Cygwin

I used these settings with the Cygwin for 64-bit versions of Windows.

    Cygwin Setup
  1. Choose A Download Source: Install from Internet
  2. Select Root Install Directory: C:\Cygwin
    Install For All Users
  3. Select Local Package Directory: C:\Users\{UserName}\AppData\Local\Cygwin
    note: if your %userprofile% contains spaces, for example: C:\Users\Jared Dunn, this may cause issues.
  4. Select Your Internet Connection: Direct Connection
  5. Choose A Download Site: http://mirrors.xmission.com
    This mirror was reliable for me. They should generally all be up to date. It is recommended that you select a mirror site that is closest to you. Visit the Cygwin Mirror Sites page for more information.
  6. Select Packages:
    • curl: Muti-protocol file transfer tool
    • fzf-zsh: fzf key bindings for Z shell
    • fzf-zsh-completion: fzf completion for Z shell
    • git: Distributed version control system
    • gitk: Git repository browser
    • zsh: The Z-Shell

Configure Cygwin Home Directory

Make your Cygwin home directory the same as your Windows User profile.

Edit the Cygwin /etc/nsswitch.conf file.

Add or edit the following line: db_home: /%H

more info: Stack Overflow – How can I change my Cygwin home folder after installation?

Install Oh My ZSH

Launch Cygwin and install Oh My ZSH using curl

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

I received this output while Oh My ZSH install completed:

Looking for an existing zsh config...
Using the Oh My Zsh template file and adding it to ~/.zshrc
Copying your current PATH and adding it to the end of ~/.zshrc for you.
I can't change your shell automatically because this system does not have chsh.
Please manually change your default shell to zsh!

Edit the Cygwin /etc/nsswitch.conf file.

Add or edit the following line: db_shell: /bin/zsh

More info: Stack Overflow – Set Default Shell in Cygwin

Mintty Configuration

This section documents some additional personalization preferences. Access the options by selecting the Cygwin application icon in the Title bar. For Looks, I have medium transparency selected.

Cygwin - Options - Looks
Options – Looks

For text, I have the Fira Code fonts installed on my system so have elected to use them and since my display is UHD, I am using the retina version. I have also set the font smoothing to full which is equivalent to subpixel anti-aliasing (“ClearType”).

Cygwin - Options - Text
Options – Text

Lastly, I wanted to add some spacing between the window borders and command text. I discovered that this could be done by editing the mintty configuration file in my home directory. I added the following line to the file, Padding=16. The entire configuration file is shown below.

~/.minttyrc
BoldAsFont=-1
Columns=96
Rows=48
Transparency=medium
Padding=16
Font=Fira Code Retina
FontWeight=450
FontSmoothing=full

Test drive using this handy cal 2017 command to display a calendar.

cal 2017

Resources

Creating a Custom WordPress Page Template

I wanted a front-end page template to play around with the new REST API that is now in WordPress 4.7 core. A custom page template gives me the latitude I want at this stage of development, so here is how I did it.

Create the Template File

There are a couple of ways to do this.

Option 1

Clone and edit the existing page.php template. Open page.php in an editor and Save As… api-test.php. Remove the guts of the page containing the while loop for iterating through and displaying posts. For example, my clone of wp-content/themes/twentyseventeen/page.php saved as api-test.php looks like this:

api-test.php
<?php

get_header(); ?>

<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">


        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

The original page meta data properties in the comment at the top have been removed.

Option 2

Start from scratch with a completely blank slate. Create a new php file in the root of your active theme with a single line of code to set the Template Name meta data. Now we have a new custom template that can selected for pages when editing.

api-test.php
<?php /* Template Name: api-test */ ?>

Option 3

This is nearly the same as option 1, only with addition of the meta data property to set the Template Name property like option 2.

Clone and edit the existing page.php template. Open page.php in an editor and Save As… api-test.php. Edit api-test.php replacing the meta data at the top with the Template Name property used in the blank slate option above. Then remove the guts of the page containing the while loop for iterating through and displaying posts. For example, my clone of wp-content/themes/twentyseventeen/page.php saved as api-test.php looks like this:

api-test.php
<?php /* Template Name: api-test */

get_header(); ?>

<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">


        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

Create the Page Slug

Login into the dashboard and add a new page.

If using Option 1, update the permalink slug to match the page filename. For example, api-test

WordPress Page Permalink Slug
api-test page slug

Select the new template if using options 2 or 3.

WordPress Page Attributes - Custom Template
select api-test template

Resources

WordPress

Custom Dashboard

WordPress plugin stub to customize the dashboard for users without administrator access.

Source Code

Custom Homepage

Clone and edit the existing theme index.php template. Open index.php in an editor and Save As… home.php. This file will automatically take over the themes index.php, and it will be displayed as the homepage.


Development Environments

Docker

docker-compose.yml

Vagrant

Laravel Homestead
If you develop Laravel apps on Homestead, you can also install WordPress on the same Virtual Machine. This example Homestead.yaml file has a configuration for 4 different sites. Two Laravel sites, a WordPress site and a phpmyadmin site.

Vagrant configuration designed for development of WordPress plugins, themes, or websites.

http://vccw.cc/

What’s Included


XAMPP, MAMP, IIS


Development Resources

wp-config.php

REPLACE

define('WP_DEBUG', false);
WITH
 // Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings 
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

Log Your Debug Statements

// array or object variable
error_log(print_r($myvariable, true));

// string
error_log(print_r($mystring));

Vue.js CLI Webpack Laravel Proof of Concept

This post is a simple proof of concept for using vue-cli to scaffold a Webpack Laravel project. The production build modifies the default Laravel blade view and outputs the built assets into the public/static directory. The development workflow demonstrates hot reloading and css style extraction.

Environment

This example was created using a fresh install of Laravel 5.2 served by XAMMP on Windows 10.
Nodejs version 6.9.1
NPM version 3.10.8
vue-cli version 2.4.0
git version 2.7.0

Development

Change to the laravel directory. For example,

cd c:/xampp/htdocs/laravel

Use vue-cli to download vuejs, wepbpack and template dependencies and create the project in the laravel/resources folder.

vue init webpack resources

Change to the resources directory.

cd resources

Install node modules with npm install or npm i.

npm i

Run development server.

  • Check the dev.port in resources/config/index.js to make sure it is not the same as the port used by the XAMPP Apache server.
npm run dev

Update the /resources/src/components/Hello.vue vue commponent to see the hot reloading take place. In the script portion of the component, change the msg value. For example, ‘Welcome to Your Vue.js Laravel App’.

Hello.vue
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js Laravel App'
    }
  }
}
</script>
  • For development on Laravel sever generated pages, another solution is to update the package.json scripts property so the npm run dev command runs webpack development compilation with watch mode enabled. Watch mode recompiles after every change is saved.
package.json
"dev": "cross-env NODE_ENV=development webpack --watch --progress --colors"

Production

Edit /resources/config/index.js. Update the build paths so the welcome.blade.php view gets the index markup and the assets are built to the public/static folder.

index.js
build: {
    ...
    index: path.resolve(__dirname, '../views/welcome.blade.php'),
    assetsRoot: path.resolve(__dirname, '../../public'),
  • The ellipsis … in the snippet above is not a part of the code and is there only to denote lines that are skipped and not applicable to the example.

Run production build.

npm run build

Manually refresh the laravel.dev page served by XAMPP to verify the production build.

Resources

Laravel Install on Windows IIS

This post documents installing PHP 7, PHP Manager and Laravel 5.3 on Internet Information Services (IIS) Manager version 10 which ships with Windows 10 Pro. This Laravel Installation will also be configured to connect to a SQLite database.

Internet Information Services (IIS) Manager

IIS needs to be installed, open the Windows Features dialog to check the installation. One way to do this is by selecting the start button and type Windows Features to bring up a list where “Turn Windows features on or off” can be selected. Another way to get to this Control Panel app is Windows + R key combination and run appwiz.cpl. Turn Windows features on or off link should be in the upper left panel.

Windows Features - IIS and .NET Framework 3.5 enabled
Windows Features

Notice that under .NET Framework 3.5 that both Windows Communication Foundation features are enabled. This may be needed in order for a successful install of PHP Manager. Installation of PHP Manager for IIS requires .NET 3.5 to work properly.

PHP and PHP Manager

Install PHP 7 for Windows using the Microsoft Web Platform Installer. It’s an easy way to get both PHP and the PHP Manager installed and takes some of the guess work out of getting PHP up and running on Windows and IIS.

  • If PHP Manager Fails to install after confirming that .NET 3.5 is installed and enabled, this is likely due to the installer throwing an error when checking the IIS version. Change the W3SVC MajorVersion value to 7 (decimal) in the registry. After the install is completed, change the value back to 10. More info is available at the PHP Manager – Refuses to install for WTP10 view issue page.

Registry Editor - HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W3SVC\Parameters
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W3SVC\Parameters]

* YMMV, I am not responsible if you hose your system when editing the registry.

PHP Extensions

In the Internet Information Services (IIS) Manager, Open PHP Manager and select the Enable or disable an extension link. Ensure that the extensions needed for Laravel are enabled. If you want to be able to connect to a SQLite database, enable the php_sqlite3.dll PHP extension. The figure below shows the PHP extensions I have enabled for a working Laravel 5 installation.

PHP Extensions provide additional functionality to PHP runtime, such as database connectivity, caching, debugging and others. Use this feature to enable or disable PHP extensions and to configure PHP extensions settings.
PHP Manager – PHP Extensions

Composer for Windows

Download and run Composer-Setup.exe Windows Installer. The installer will download Composer and set up the PATH environment variable.

Using the Windows Command Prompt, make sure Composer for Windows is installed by running the composer –version command.

composer --version

Git for Windows

Git for Windows is needed so Composer for Windows can download packages. During the installation process, Adjusting your PATH environment, make sure the option, Use Git from the Windows Command Prompt is enabled.

Using the Windows Command Prompt, make sure Git for Windows is installed by running the git –version command.

git --version

Create Laravel Project

Bring up the Adminstrator Command Prompt. One way to do this is by selecting the start button and type command to bring up a list where “Command Prompt” can be selected. Right click on Command Prompt and select Run as administrator .

cd c:/intepub

composer create-project laravel/laravel laravel "5.3.*"

Add Website

Open Internet Information Services (IIS) Manager. Right click on the server and select Add Website. Fill out the form as follows:
Site name: Laravel
Application pool: DefaultAppPool
Physical path: C:\inetpub\laravel\public
Host name: laravel.win

Select “Test Settings” and then “OK” if successful.

Add Website
IIS – Add Website

Hosts Mapping

Since the Host name laravel.win was entered for the website, the hosts file needs to be updated. Open Notepad as an administrator. One way to do this is by selecting the start button and type Notepad to bring up a list where it can be selected. Right click on Notepad and select Run as administrator.

Select File | Open, or Ctrl + O and change the File type from Text Documents (*.txt) to All Files (*.*). Browse to C:\Windows\System32\drivers\etc and select the hosts file. Add an entry to map localhost to laravel.win as follows.

hosts
127.0.0.1   localhost
127.0.0.1   laravel.win

Laravel Storage Permissions

In File Explorer, right click on the storage folder in C:\inetpub\laravel and select Properties. Under the Security tab, grant full control of the storage folder to IUSR as shown in the figure below.

Properties Dialog - Security
Permissions for storage
Laravel web.config

Since IIS does not have an .htaccess file like Apache, create a web.config file in C:\inetpub\laravel\public as follows. *

web.config
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.php" />
                <add value="default.aspx" />
                <add value="Default.htm" />
                <add value="Default.asp" />
                <add value="index.htm" />
                <add value="index.html" />
            </files>
        </defaultDocument>
        <rewrite>
            <rules>
                <rule name="Imported Rule 1" stopProcessing="true">
                    <match url="^(.*)/$" ignoreCase="false" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Redirect" redirectType="Permanent" url="/{R:1}" />
                </rule>
                <rule name="Imported Rule 2" stopProcessing="true">
                    <match url="^" ignoreCase="false" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.php" />
                </rule>
            </rules>
        </rewrite>
        <httpErrors errorMode="Detailed" />
    </system.webServer>
</configuration>

* The rewrite rule definitions in the web.config require the URL Rewite 2.0 extension. For easy installation, use the Free Web Platform Installer.

Laravel SQLite Database

Create a SQLite database * in C:\inetpub\laravel\database. Edit C:\inetpub\laravel\.env database values to configure the database connection.

.env
DB_CONNECTION=sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database/laravel.sqlite
DB_USERNAME=
DB_PASSWORD=

* DB Browser for SQLite is an open source, freeware tool used to create, design and edit SQLite database files.

Restart IIS

In an Administrative Command Prompt, restart IIS so all of the changes get applied.

iisreset /restart

In IIS, make sure that the Larvel web site has been started. If the W3SVC service is not running, it can be started with the following command.

net start w3svc

Once all is said and done, load http://laravel.win in a web browser. Laravel 5.3 default page should look similar to the screen shot below.

Laravel 5.3 Default Screen
Laravel 5.3

Installing Laravel on XAMPP

This post documents how to install Laravel locally using XAMPP. When you are developing with Laravel on an older computer or one with limited resources, using XAMPP for your local PHP and MySQL development server works well on Windows.

Laravel PHP Requirements

This table shows the minimum PHP version requirements for the latest versions of Laravel.

Laravel PHP
5.3 5.6.4
5.1, 5.2 5.5.9
5.0 * 5.4

* PHP 7 not supported in this version

Head over to the Apache Freinds site to download the version of XAMPP that meets the minimum PHP requirements for the version of Laravel you are supporting. If you are developing in Laravel 5.2 currently and also want to be able to support Laravel 5.3, get the XAMPP version that includes PHP 7.

For Windows, I have xampp installed at the root directory on C:\ drive. here is the virtual hosts configuration I am using for Laravel. More information for setting up XAMPP on Windows.

httpd-vhosts.conf
<VirtualHost *:8080>
    DocumentRoot "C:/xampp/htdocs/laravel/public"
    ServerName laravel.dev
    ServerAlias www.laravel.dev
    SetEnv APPLICATION_ENV development
    <Directory "C:/xampp/htdocs/laravel">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Edit C:\Windows\System32\drivers\etc\hosts file, mapping laravel.dev hostname to 127.0.0.1 localhost IP address.

hosts
127.0.0.1   laravel.dev

Install Laravel

This example will install laravel 5.2 into C:/xampp/htdocs/laravel using Composer. Use the create-project command and the laravel/laravel package name followed by the directory to create the project in. The optional third argument is for a version number.

cd c:/xampp/htdocs

composer create-project laravel/laravel laravel "5.2.*"

Slim 3 MVC

This post documents a Slim 3 PHP micro framework application with models, views and controllers (MVC) using Twig templates to display data from a database.

Requirements

* I am using XAMPP on Windows as my web server with URL rewriting.

Setup

Clone or download the source code from GitHub.

Source Code

After Composer had been installed, using a command shell, navigate to the directory where the source code has been cloned or extracted to. In the project root is a composer.json package file. This file defines the project requirements. Run the composer require command to install the project dependencies read from the composer.json package configuration into the project.

# install slim and it's dependencies
composer require slim/slim "^3.0"

The included composer.json package file also contains an autoload property for PSR-4 autoloading support in Composer. This will map the App namespace to the relative path specified for the classes.

composer.json
{
    "require": {
        "slim/slim": "^3.0",
        "slim/twig-view": "^2.1",
        "php-di/slim-bridge": "^1.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "src\\classes"
        }
    }
}
# update and optimize the autoloader
composer dump-autoload -o

There are two versions of this starter application:

  1. tag oobdic – Out of the box dependency injection configuration, uses Slim’s built-in dependency container.
  2. tag phpdiPHP-DI/Slim-Bridge dependency injection into the controller. This is the latest version of the starter app.
  • To install PHP-DI/Slim-Bridge in an existing project, require php-di/slim-bridge using composer.
composer require php-di/slim-bridge

Changing the Database Connection String

The connection string is currently set to connect to the SQLite demo.db database which makes it easy to include a database with the project.

App.php

\App\Database\DatabaseInterface::class => function (ContainerInterface $container) {
    return new \App\Database\PDODatabase('sqlite:../data/demo.db');
}

Here is the container definition with the connection string changed for a MySQL database.


\App\Database\DatabaseInterface::class => function (ContainerInterface $container) {
    return new \App\Database\PDODatabase('mysql:host=localhost;dbname=demo', 'username', 'password');
}

Twenty Sixteen Sass

I recently created individual Sass modules for each of the WordPress Twenty Sixteen style.css stylesheet numbered and annotated sections. Additionally, the fonts and colors have been converted into Sass variables. All of this makes customizing this theme easier.

Source Code

There is also a gulpfile.js included with a task for compiling the .scss files into a new style.css. This task uses cssnano and the workflow described in this post, Sass Workflow Using cssnano and Autoprefixer.

  1. Install the files into the /wp-content/themes/twentysixteen folder.
  2. To recompile the Twenty Sixteen stylesheet style.css from the scss files, first run npm install to get the dependencies.
    # installs dependencies
    npm install
    
  3. Then run the gulp task that will compile them
    # compile into styleheet
    gulp css
    

Resources

Visual Studio Code

My favorite feature so far is in the form of an extension. The vscode-php-debug extension works better than any free PHP debugging solution I have tried, such as Eclipse, Netbeans or SublimeTextXdebug. In order to use the debugger, the Xdebug PHP extension will need to be installed for your version of PHP. Here are some Xdebug installation resources:

User Settings

My VS Code user preferences – I am not thrilled with the existing VS Code Git integration, I prefer the command line tools for this, so I have it disabled in my settings. Another setting I changed from the default, "workbench.editor.enablePreview": true – When this is set to true, a subsequent file open will close the previous file if it has not been double clicked or edited. I wanted to keep the files open, so I set this to false.

~\AppData\Roaming\Code\User\settings.json
// Place your settings in this file to overwrite the default settings
{
    "editor.renderWhitespace": true,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 13,
    "editor.lineHeight": 22,

    "files.trimTrailingWhitespace": true,

    // Is git enabled
    "git.enabled": false,

    "window.zoomLevel": 0,

    "workbench.editor.enablePreview": false
}

Extensions

Here is a list of my favorite VS Code extensions


Resources

Sass Workflow Using cssnano and Autoprefixer

This Sass preprocessor workflow uses cssnano for postprocessing minification and optimization that includes Autoprefixer to add vendor prefixes for only the browsers that need to be supported.

Autoprefixer

Without Autoprefixer, adding in vender prefixes is done in the Sass code, typically with a mixin to append every known prefix for a property. This more advanced mixin to prefix properties at least accepts prefix parameters for more control over which ones to use. However, you still need to include the mixin with applicable parameters throughout your Sass code which requires knowing which properties might need prefixes.

With Autoprefixer, you do not need to think at all about which properties need prefixes. Simply use only the-un prefixed property name in your Sass or CSS code and Autoprefixer will check the Can I use database to append prefixes as needed while understanding the specification differences.

cssnano

I don’t think I could write it any better than the folks at cssnano did, cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.. cssnano includes Autoprefixer in it’s list of transforms, therefore, when you install cssnano you also get Autoprefixer.

Workflow

This simple workflow uses the Gulp streaming build system to process the Sass code, add vendor prefixes with Autoprefixer via cssnano to optimize into production ready css. In this gulpfile.js, note cssnano’s autoprefixer option which accepts an array of browsers to support.

gulpfile.js
'use strict';

var gulp         = require('gulp'),
    cssnano      = require('gulp-cssnano'),
    sass         = require('gulp-sass');

var supported = [
    'last 2 versions',
    'safari >= 8',
    'ie >= 10',
    'ff >= 20',
    'ios 6',
    'android 4'
];

gulp.task('css', function(){
    return gulp.src(['src/sass/**/*.scss'])
        .pipe(sass())
        .pipe(cssnano({
            autoprefixer: {browsers: supported, add: true}
        }))
        .pipe(gulp.dest('css'));
});

Run the Workflow Example

In order to use the Node Package Manager (NPM) and Gulp task runner used in this workflow example, you will need to install Node.js.

Using a Command shell in the project root, follow these steps to get the local development environment setup.

Create package.json

The package.json file contains project metadata and lists dependencies that are available on npm. This is useful to have when you want to re-install or update the dependencies with the npm install command.

# create package.json
npm init

Install node modules

# install dependencies and save to package.json
npm install gulp --save-dev
npm install gulp-cssnano --save-dev
npm install gulp-sass --save-dev

Workflow Example Folders and Files

    • src
      • sass
        • modules
          • _js.scss
          • _loader.scss
        • main.scss
    • gulpfile.js
    • index.html
    • package.json
source code

Language Files

When naming Joomla language files, it is important to remember that the extension group name is used. The language filename uses the extension group name after the extension prefix. For example,

somebutton.xml
<extension version="3.4" type="plugin" group="editors-xtd">
    ...
    <languages folder="language">
        <language tag="en-GB">en-GB/en-GB.plg_editors-xtd_somebutton.ini</language>
        <language tag="en-GB">en-GB/en-GB.plg_editors-xtd_somebutton.sys.ini</language>
    </languages>
</extension>

Customizing Media Manager

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.

Here is the secret sauce to override com_media views and templates. A system plugin with an onAfterInitialise() event handler to capture request data and evaluate parameters using JInput. For example,

/plugins/system/mcm/mcm.php
// no direct access
defined ( '_JEXEC' ) or die ( 'Restricted access' );

jimport('joomla.plugin.plugin');

class plgSystemMcm extends JPlugin { 

    public function onAfterInitialise() {

        $input = JFactory::getApplication()->input;

        if('com_media' == $input->getCMD('option')) {

            $this->loadView($input->getCMD('view'));

        }

        return true;
    }

    protected function loadView($view)
    {
        if (('images' == $view) || ('imagesList' == $view)) {

            $overridePath = FOFPlatform::getInstance()->getTemplateOverridePath('com_media', true) . '/' . $view;

            require_once $overridePath . '/view.html.php';
        }
    }
}

Application Specific onAfterInitialise()

This version of the onAfterInitialise() function shows how to apply the override for just the frontend (site) views and templates.

public function onAfterInitialise() {

    $app = JFactory::getApplication();

    if ($app->isSite()) {

        if('com_media' == $app->input->getCMD('option')) {

            $this->loadView($app->input->getCMD('view'));

        }

        return true;
    }

    return false
}

Create the new custom templates and views by copying the folders from the com_media component into your template folders. For example, if you want to customize media manager for your protostar template, copy the com_media folders into the protostar template as follows:

  1. copy
    /administrator/components/com_media/views/images
    to
    /templates/protostar/html/com_media/images
  2. copy
    /administrator/components/com_media/views/imageslist
    to
    /templates/protostar/html/com_media/imageslist

Directory structure of com_media protostar template overrides.

  • templates
    • protostar
      • html
        • com_media
          • images
            • tmpl
              • default.php
          • view.html.php
          • imageslist
            • tmpl
              • default_folder.php
              • default_image.php
              • default.php
          • view.html.php

Then modify both copies of view.html.php to include their respective default.php template copies.

At the end of the display function, comment out or replace,
parent::display($tpl);

with an include directive to the template copy,
include( dirname(__FILE__) . '/tmpl/default.php');

for example, in both the images and imageslist folders:

/templates/protostar/html/com_media/images/view.html.php
/templates/protostar/html/com_media/imageslist/view.html.php
//parent::display($tpl);
include( dirname(__FILE__) . '/tmpl/default.php');

Also comment or replace both loadTemplate('folder') and loadTemplate('image') function calls in the imageslist default.php template and include their file and folder default.php template copies.

for example,

/templates/protostar/html/com_media/imageslist/tmpl/default.php
<?php for ($i = 0, $n = count($this->folders); $i < $n; $i++) :
	$this->setFolder($i);
	//echo $this->loadTemplate('folder');
	include( dirname(__FILE__) . '/default_folder.php');
endfor; ?>

<?php for ($i = 0, $n = count($this->images); $i < $n; $i++) :
	$this->setImage($i);
	//echo $this->loadTemplate('image');
	include( dirname(__FILE__) . '/default_image.php');
endfor; ?>

The com_media views and templates will now be loaded instead of their core counterparts and can be customized without hacking any core Joomla files. The plugin code above can be found here on GitHub. The next page covers extending the com_media controller to handle base64 image uploads.

source code