Build Processes

If there’s two things every developer loves talking about, it’s tooling and build processes. I’ll start by talking about the build process I’m currently using for my web projects.

Every website and application I develop is versioned in Git, and hosted on either BitBucket or GitHub (though not always on my own personal account). I take advantage of the processing hooks that come with Git as the hub of my build process. I start by setting up a bare headless Git repo on the development server, and adding that repo as a remote on the project’s repo. That way I can quickly, easily, and safely push code up to the server. Then I set up Git’s built-in post-receive hook, where all the magic happens.

In the post-receive hook, I run a shell script to set the work tree of the development server (wherever the live directory is). Then the script does a `git checkout` to pull the actual project files into the live directory. So in short, I can use a single Git command to push code to a secure headless repo on the development server, which then runs a script to pass the project files into the live directory. This is a fairly standard setup, but usually there’s a lot more work to do with compiling and compressing. Work that can be automated on the server.

If I have my way on a project, I’m always using Sass and jQuery for styling and scripting. Those two file types both need to be compiled and minified to run and deliver quickly on the web. I use the same post-receive hook to run a `sass` command that compiles and minifies my .scss files into pure .css all in one go. Easy enough, but the javascript takes a bit more effort. For that, I use the Node module Gulp. Gulp is simply a javascript file that is meant to run on the server, similar to a shell script, rather than in a client. It’s used to do tons of really amazing work, but for my purposes it’s great for simply minifying javascript and other assets.

With Gulp, I start by writing the gulpfile.js that will hold the minifying script. I use the Gulp Uglify plugin to do this as simply as possible. Part of the reason I use Gulp is because it can handle image compression as well as javascript, so I also use the ImageMin plugin. Once the script is in place for the Uglify and ImageMin processes, I push the Gulp file up to the development server. On the server, I install Node, npm, Gulp, and the two plugins, so that I can start actually running the Gulp file. Then I can simply add the `gulp` command to that same post-receive hook, and everything will be up and running smoothly.

The advantage of this build process is that I don’t have to do any manual compiling or minifying, and more importantly, I don’t have to version or push around any compiled or minified files. It keeps my local project repos and my GitHub repos nice and clean. I do usually version the Gulp file, but I think it’s a small price to pay. It takes some initial setup time, but over the course of a project, the overall time saved is well worth it.

Personal Web Server

I’ve had a few bad experiences with web hosting. When I first registered this URL several years ago, I naively chose the cheapest hosting I could find. I chose iPage, and fortunately it turned out to be a pretty decent service with good support. But when I wanted to start versioning my site with Git and running my own backup processes, I was pretty dismayed to find out that iPage doesn’t allow SSH in any capacity.

I looked into other hosting services that provide more server access, and ended up at HostGator. The transfer process was less than smooth and their SSH access was spotty at best. Their support was unhelpful and unacceptably slow compared to any other hosting service I’ve used. After a month of enduring these things, I cancelled their service.

That was when I first considered setting up my own web hosting server. I wanted to have complete control over my domain, and I also wanted a better understanding of server-side processes. I picked up an old tower at a local computer parts store, installed Ubuntu Server, set up a simple LAMP stack, opened a few router ports, and had the server up and running within an evening.

Running my own web server at home has been a very rewarding experience. I’ve learned a lot about virtual hosts, security, memory usage, databases, bash, and improved my command line skills. Because of my server’s simplicity and my consumer-grade network connection, I’ve had to optimize this site and other projects on this server as much as possible to achieve good performance. I consider this the most valuable aspect of running my own server, and working with these constraints has definitely improved me as a developer.

Winter Scene Illustration

This is a recent illustration I did in graphite. I found that my process for this piece was different from most of the work I do because of the amount of negative space it required for the snow effects. I ended up throwing away the first two iterations I started because I hadn’t planned for the whitespace properly. But after a couple of practice sketches, I was happy with how the final piece turned out.

Winter Scene

Javascript Inline-Styles

I recently listened to a really interesting panel from ShopTalk about using javascript for styling. Inline styles have been a huge pain-point in web development, so I’m glad to hear several top-tier devs finally giving it some formal validation in the context of javascript. I’ve seen cases of talented devs having their work criticized by less experienced people for inline-styling without any understanding of javascript’s role.

This panel is the first time I’ve heard about relying completely on javascript for styling, and I’m pretty swept-off-my-feet at the idea. I’ve used dynamic styling on the server before using Sass and even PHP, but being able to calculate and run everything client-side sounds really useful.

Easy Digital Downloads

I want to express my appreciation for an open source project that recently made my life a lot easier.

A few years ago, I worked with a client to create a website allowing people to purchase sheet music she composed and download them as PDFs. At the time I wasn’t familiar enough with htaccess processes to create protected directories for the PDF files, so I relied on another online service to host the files and purchase info. That service permanently went offline recently, leaving my client’s site inoperable.

Obviously this became an urgent project, and I needed something I could quickly implement out of the box to process the file purchase downloads until I could write my own solution. I found the Easy Digital Downloads project that integrates with WordPress, and was immediately impressed with the features. I converted the site to WordPress and plugged in Easy Digital Downloads, and had things back up and running within a couple hours.

Now the download files are hosted, maintained, and protected on the client’s server, so we no longer have to worry about a third party service going dark, and I can hook into the plugin and WP Engine to do any customization I need. Plus, the code is minimally invasive to the site. The Easy Digital Download project has saved me a lot of stress and hassle on this project.