Web deployment is a small part of a big picture

I was listening to an episode of PHP Rountable (Thumbs Up, guys!) and I learned a bit about web and app deployment.

The Wikipedia entry for DevOps lists several of the latest cool tools. I’ve been hearing a lot about these:

  • Docker (containerization) : Docker uses Linux isolation tools – similar idea to virtualization, but with a less-complete illusion of independent resources – to allow applications to run independently in a consistent environment. Essentially, you install Docker and use it to run the app that you really want to run. It is a kind of application wrapper. The goal is to deploy your application along with its environment so that it runs consistently everywhere. It is written in Go and is open source.
  • Jenkins (continuous integration) : Jenkins lets you run your applications in a servlet container on a traditional Apache web/app server. A servlet container manages the lifecycle of a servlet, while the servlet itself responds to web requests and maintains state and cookies and such. Jenkins ties into this ecosystem by reconfiguring or restarting server components and running test suites as commits are made to source code repositories. It is written in Java and is open source.
  • Puppet (infrastructure as code) : Puppet allows you to declaratively assemble configuration data about your server and code dependencies in a kind of object-oriented way. Tool installations, libraries, frameworks, and server instances can all be described by rules you created, and puppet will take care of assembling these within a Linux virtual server (VSP). Puppet actually works on several platforms, is written in Ruby, and is open source.
  • Vagrant (virtualization platform) : Vagrant is a wrapper for VirtualBox, VMWare, and for isolation tools such as Linux containers. It is similar to Docker in that it manages a configured server within a server. Vagrant is written in Ruby and is open source.

There are Docker MeetUps in southern Virginia.

I recently needed to update a web site on an already-established server, so I did not have my familiar dev loop set up. SSH was unavailable, so I made use of git-ftp. It works very smoothly; I recommend it if you can’t ssh to your web server!

Objective-C for fun and (some day) profit

It’s not much to look at, but I am in the process of moving all of my Objective-C, C, C++, Java, and JavaScript toy boxes over to Github. A toy box is what I call a workspace filled with unrelated, incoherent mini-programs that demonstrate language features. The goal here is to understand syntax, semantics, and language behavior.

One of my favorite features of Objective-C is that sending a message to nil (IE calling a method on a null reference in any other language) has the following effect:

It does nothing!

This allows for some elegant code. Algorithms look bloated when they check for null values and other edge cases. Consider binary tree traversal. The basic algorithm of an inorder search is :

Search : Tree
Search : Left Subtree if not null
Print Root Node Value
Search : Right Subtree if not null

Wouldn’t it be nice if we didn’t need to check for nil/null? In Objective-C, it is! Check this out :

@interface BT: NSObject {
        @public
        int val;
        BT *left;
        BT *right;
}
- (void) inOrder;

@end

@implementation BT
- (void) inOrder {
        [left inOrder];
        printf("%d\n",val);
        [right inOrder];
}
@end

Isn’t that cool??? The full code is available on Github.

Swift is up to version 3, but I still see Objective-C everywhere. I think Objective-C still a useful language to know.

There’s social, and then there’s smart social

I’m still learning the nuances of blogging. I like the titles without capitalization.

The two social media outlets I added to my blog menu most recently, Tumblr and Research Gate, lie at opposite ends of the intellectual spectrum. I have yet to train Tumblr that my interests are software development and computer science. Tumblr seems to be a kind of less efficient Twitter. A couple of searches for my favorite programming languages and frameworks turned up nothing. Other searches turned up an account or two on HTML5 and CSS. I don’t think I’ll be spending my time there.

Research Gate is where academic types go to publish everything from technical papers to peer reviewed journal submissions. I’ve had an on-again, off-again affair with academic publishing going back to my Masters thesis in 2000. One of the things I liked about working for Sun Microsystems was the emphasis they placed on data-based research and relationships with university scientists. I recently dusted off (figuratively) an old paper, Scaling Mathlib on Sun Fire Servers, that I cowrote with another engineer at Sun Microsystems, and published it on Research Gate. Even though performance characteristics of 900MHz CPUs is an outdated topic, I am still quite proud of this work. I had to do some work to translate it from StarOffice (Yikes! Old!) to Word. There was quite a bit of temptation to tighten up the wording in places, but I resisted.

One thing that annoys me about Research Gate is the link to my profile. You seem to need a registered account to see another researcher. Even worse, if you try to go to my link and you don’t have an account, you are taken to an unhelpful index site. That’s weird, and I don’t understand it.

Anyway, click the link above if you want to see the paper. ?

Git for WordPress Deployment

There are a few good tutorials out there on deploying web sites using git. Many professional web developers use git to deploy updates to their test sites and customer sites. There are a few reasons why git is a fit for these tasks:

  1. Git tracks file changes and transfers only the necessary objects
  2. Git supports a number of protocols to talk to your web server, including ssh for security
  3. Git has hooks for automatically running scripts at various points to check file permissions, etc.
  4. Git can easily be configured to ignore files that do not need to be moved back and forth
  5. You’re already using git to revision and manage your code changes, so why not deploy with it?

But there are issues :

  1. Git repos do not belong on your public server, since you only want your customer to have access to the latest versions
  2. Git has a steep learning curve

My web server gives me SSH access, which is key to my deployment technique. Logging into an interactive terminal on the server, I set up a folder to hold git repos, outside of the public-facing html folder, which serves to ensure that my git is hidden from users. To put the web source files in one place and the repo in another, I need to initialize what is called a bare repository in git. This is the command :

git init –bare

And this is the resulting directory structure:

Screen Shot 2016-06-10 at 10.59.34 AM

Next, I want to create a way to push changes to my public server. Git provides hooks for automating common software development tasks. These hooks can be executed before or after several stages of git operations. The post-receive hook will be run every time code changes get pushed to the server git repo. The following two-line script will update the files under html every time I push updates to the git repo:

#!/bin/sh
GIT_WORK_TREE=/path/to/html checkout -f

To make this run on the server automatically at every code check-in, I name it post-receive (no file extension), make it executable, and place it in the hooks folder in my git repo. The GIT_WORK_TREE variable assignment is needed to tell git where the live code lives, since a bare repo keeps code and history separate from each other.

On the client side, I create a git repo and assign the web server as a remote.

git init
git remote add public ssh://user@server.com/path/to/git/repo
git push –set-upstream public master
git push public +master:refs/head/master
git config –global push.default simple

Did the double-dash (dubdash, heh) come through up there? “–set-upstream” and “–global”. Anyway, these git settings set up the remote repo and ensure that I can push and pull code without any extra commands. I choose to name my web server public within git to reflect the fact that a push will publish the site.

From here, I can create my site code. A single push command will publish my site!

If a web site is maintained by multiple web developers on their client machines, this model works very well. Everybody pushes updates to the central git remote repo, and every user can pull recent changes using

git fetch
git merge

But, what if someone is making changes on the server directly? This is exactly what happens with WordPress. Uploaded images and plugin installations cause changes in the html folder that we want to track in our git repo. I could not find a git hook to automatically capture these changes, so I created a script on the client to automatically checkin new changes at the same time I pull them over to my client:

#!/bin/bash

HOST=user@server.com
GIT_REPO=/path/to/git/repo/
GIT_WORK_TREE=/path/to/html/

set -e

ssh $HOST "
cd $GIT_REPO; 
GIT_WORK_TREE=$GIT_WORK_TREE git add -A;
GIT_WORK_TREE=$GIT_WORK_TREE git commit -m 'Commit by pullall';
"

I run this script before running

git fetch
git merge

This all makes for a nice backup/tracking system. The WordPress posts are stored in a SQL Database, of course, so that system must be backed up separately.

Are there better tools than git for this job? Leave a comment and give me your opinion!

WordPress: Why Learn Anything Else?

I am feeling very comfortable with WordPress these days. I just finished putting some touches on a theme for a community site (links to come later) without doing any actual theme development or PHP coding. The key is finding the right plugins, using the browser inspector, and mastering CSS. My wife & I were able to implement a multi-page site (with content at the ready – important! ) in just a day or two.

We started with the Poseidon theme for a clean layout, then added Better Font Awesome for Facebook icons, Easy Google Fonts for a great selection of fonts, Image Widget to put images in the sidebar, and Jetpack for custom CSS. Jetpack requires a WordPress account for full functionality. After creating pages, menus, and the sidebar, all that’s left is to improve some of the visual artifacts.

Here, the web inspector in your favorite browser is your friend. Once you identify element ids and classes, you can easily craft CSS to move and modify visual items. I made the following tweaks to the theme:

@import  """""""""""""""""""""""""""""""""""""""""""""'http://fonts.googleapis.com/css?family=Ubuntu'""""""""""""""""""""""""""""""""""""""""""""";
@import  """""""""""""""""""""""""""""""""""""""""""""'http://fonts.googleapis.com/css?family=Raleway'""""""""""""""""""""""""""""""""""""""""""""";

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
	
}

nav ul li a {
	font-family: 'Ubuntu', Tahoma, Arial !important;
}

.site-title a {
	font-family: 'Ubuntu', Tahoma, Arial !important;
}

This bit simply sets up the fonts to taste. The theme has built-in font configuration, but the theme configuration menu only supports font selection for paragraphs and headers. This leaves list items displayed in an arbitrary font! I tried to pry open the theme customization api elements in the PHP code for the theme, but I gave up. It’s just too easy to fix this in CSS.

@media (max-width: 624px) {
	.main-navigation-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	h1.site-title {
		width: 80vw;
	}
}

This bit fixes an issue with small displays. On an iPhone, the title was wrapping around to two lines and pushing the hamburger menu down even further. The result was ugly. This CSS reduces the site title to 80% of the screen width, leaving room for the hamburger menu icon (.main-navigation-toggle). Setting the icon position to absolute and pinning it to the top right corner of the page puts it exactly where we want it.

.color1 {
	background-color: #ddd;
}

.color1 > * {
	margin-left: 10px;
}

.color1 > .button {
	margin-left: 0;
}

Several pages have embedded forms, and we wanted those to pop out a bit. This CSS, together with some help from the Text mode of the page editor, gives those embedded elements a gray background, distinguishing them from the plain white background of the rest of the page.

#menu-social li {
	list-style: none;
}

Menus display in the sidebar as a list of links. This code removes bullets from the list items.

.myfacebook a::before {
	font-family: "FontAwesome";
	font-size: 20px;
	content: "\f082";
	padding-right: 10px;
}

This is one of my favorite tricks with FontAwesome! It places the Facebook icon to the left of Facebook links, provided that they have the right class property value. To specify the link class, go to Screen Options on the Menu WordPress page, and check CSS Classes. You can give each menu item a custom class. You’ll need the FontAwesome short codes.

News Media and Technical Topics (Facebook Encryption)

A news story has been rehashed many times today, usually summed up as “Facebook is going to support ENCRYPTION”.
 
Ugh. That’s not even close to correct.
 
Facebook already supports end-to-end encryption. If you see “https” or a padlock on your browser, you are already using Transport Layer Security, which means this : Everything is encrypted.
 
The original Guardian article says that the rumor is ___tougher___ encryption, which could mean a lot of things. Maybe a harder-to-crack algorithm, or a promise from Facebook that the messages will be stored encrypted on their own servers, which they currently are not (probably).
 
That last possibility is significant, since storing encrypted data would mean that Facebook would not be able to hand over messages to anyone due to hacking or court orders.