ValoStartup 2016

1. Web development
automatisation
for fun and profit
Artem Daniliants / LumoSpark

2. Automatisation = secret weapon

3. Git rocks!

4. Git hooks rock!

5. Save WP database with each commit
Pre-commit hook
#!/bin/sh
mkdir -p _db_snapshot
./vendor/bin/wp db export _db_snapshot/database.sql
git add _db_snapshot/database.sql

6. Check PHP syntax errors before commit
Pre-commit hook
git diff --cached --name-only | while read FILE; do
if [[ "$FILE" =~ ^.+(php|inc|module|install|test)$ ]]; then
# Courtesy of swytsh from the comments below.
if [[ -f $FILE ]]; then
php -l "$FILE" 1> /dev/null
if [ $? -ne 0 ]; then
echo -e "e[1;31mtAborting commit due to files with syntax errors.e[0m" >&2
exit 1
fi
fi
fi
done || exit $?

7. Spellchecking commit messages
Pre-commit hook
ASPELL=$(which aspell)
if [ $? -ne 0 ]; then
echo "Aspell not installed - unable to check spelling" >&2
exit
else
WORDS=$($ASPELL list < "$1")
fi
if [ -n "$WORDS" ]; then
echo -e "e[1;33mtPossible spelling errors found in commit message.
Use git commit --amend to change the message.
ntPossible mispelled words: " $WORDS ".e[0m" >&2
fi

8. Dependancy management ftw (composer)
Video: YouTube link

9. Useful composer comands
composer init # To create a new composer.json file in a project
composer show # display all project packages
composer search some_package # search for a package
composer suggests # suggests packages based on installed ones
composer require somepackage/somepackage:someversion # install a dependancy
composer update # update required packages
composer remove package/name # remove package
composer dump-autoload --optimize # optimize autoloader for production

10. Using private repositories with composer
{
"type": "package",
"package": {
"name": "advancedcustomfields/repeater-field",
"type": "wordpress-plugin",
"version": "3.1.7",
"dist": {
"url": "http://[YOUR_USERNAME]:[YOUR_PASSWORD]@codelight.eu/private/wordpress/plugins/acf-repeater.zip",
"type": "zip"
}
}
}

11. PHP Debug bar
// Output a message
$debugbar["messages"]->addMessage("hello world!");
// Measure execution time
$debugbar['time']->measure('My long operation', function() {
sleep(2);
});

12. Automatisation with Grunt
Automatic image optimisation
var mozjpeg = require('imagemin-mozjpeg');
grunt.initConfig({
imagemin: { // Task
static: { // Target
options: { // Target options
optimizationLevel: 3,
svgoPlugins: [{ removeViewBox: false }],
use: [mozjpeg()]
},
files: { // Dictionary of files
'dist/img.png': 'src/img.png', // 'destination': 'source'
'dist/img.jpg': 'src/img.jpg',
'dist/img.gif': 'src/img.gif'
}
},
dynamic: { // Another target
files: [{
expand: true, // Enable dynamic expansion
cwd: 'src/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'dist/' // Destination path prefix
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

13. Automatisation with Grunt
Run mobile and desktop performance tests for your deployed site
pagespeed: {
options: {
nokey: true,
url: "https://developers.google.com"
},
prod: {
options: {
url: "https://developers.google.com/speed/docs/insights/v1/getting_started",
locale: "en_GB",
strategy: "desktop",
threshold: 80
}
},
paths: {
options: {
paths: ["/speed/docs/insights/v1/getting_started", "/speed/docs/about"],
locale: "en_GB",
strategy: "desktop",
threshold: 80
}
}
}

14. Automating site testing with Sellenium
Video: YouTube Link

15. Fun with Slack
Pushing commits to Slack channel

16. Fun with Slack
Notification when sites go down with UptimeRobot

17. Fun with Slack
Custom notifications with Slack API
$client = new MaknzSlackClient('http://your.slack.endpoint');
$settings = [
'username' => 'Bot',
'channel' => '#general',
'link_names' => true
];
$client = new MaknzSlackClient('http://your.slack.endpoint', $settings);
$client->send('Hello world!');

18. WP-Cli = WP command line interface
wp db export database.sql # Backup database
wp core update # update core of WP
wp plugin status # see installed plugins
wp plugin update plugin-name # update plugin
wp plugin uninstall plugin_name # uninstall plugin
wp theme update --all # update themes
wp post create --post_type=page
--post_status=publish --post_title='My test post'
--post_content='This is a test post' # create post
# change wp site url
wp option update home https://newdomain.com
wp option update siteurl https://newdomain.com

19. Custom WP theme updates
using GitHub Updater
/*
Theme Name: Test
Theme URI: http://thefragens.net/
Version: 0.1.0
Description: Child theme of TwentyTwelve.
Author: Andy Fragen
Template: twentytwelve
Template Version: 1.0.0
GitHub Theme URI: https://github.com/afragen/test-child
GitHub Branch: master
*/

20. Free developer hosting with Heroku
Video: YouTube Link

21. Free SSL with Let's encrypt

22. Speed with mod_pagespeed

23. CloudFlare magic

24. Website speed optimisation
→ AutoMinify
→ Cache header optimisation
→ JavaScript bundling
→ Browser optimisation
→ Aggressive GZIP
→ Asynchronous resource loading
→ Local storage caching
→ Email Address Obfuscation

25. Free CDN

26. Free security protection

27. IP Geolocation
if ($_SERVER["HTTP_CF_IPCOUNTRY"]=="FR"){
header("Location: /country/france",TRUE,307);
}

28. Page rules

29. Deployment automatisation with Docker
Setting up docker-compose.yml
version: '2'
services:
db:
image: mysql:5.7
volumes:
- "./.data/db:/var/lib/mysql"
restart: always
environment:
MYSQL_ROOT_PASSWORD: wordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
links:
- db
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_PASSWORD: wordpress

30. Auto deploy your Wordpress container with Docker Cloud

31. Thank you!Contact me
Email: artem@lumospark.com
Twitter: twitter.com/artemd
LinkedIn: fi.linkedin.com/in/artemdaniliants