Web Code (NaNoWriMo 2016)

Introduction: The Rule of Three

“If a guy tells you how many girls he’s hooked up with, it’s not even close to that. You take that number and divide it by three, then you get the real total. OK, so if Kevin is saying it’s been three girls it’s more like one or none.”


“The rule of three. It’s an exact science. Consistent as gravity.”

American Pie 2

I like to organize things in threes.

My tag line is simply a statement of my three favorite hobbies: “light writing, word loving, ❤️ coding” (photography, writing, and coding). These three hobbies in turn have aspects that themselves come in threes.


In photography, good visual composition begins with an understanding rule of thirds.

When one wants to emphasize symmetry or convey a sense of stability or tranquilness, the photograph centers around a subject or splits it the composition down the middle to create either balance or either-or contrast.

Nikon D70, Nikkor 18-200mm f/3.5-4.5G VR
My cat peering at me creates a frame (the circle of the top of the ladder) within a frame (the rectangle of a photo) that emphasizes symmetry as the subject and the frames all form concentric shapes down the center of the image.

Nikon D70, Nikkor 70-200mm f/2.8G VR
By centering the horizon, this photo conveys the peaceful tranquility of sunrise over the San Francisco skyline.

But often, your goal is not to present stability or symmetry. Instead, one considered the rule of three: placing the subject or other interesting features at or near the intersection of lines (known as the “power points”) placed a third of the way from the edges to make for a more interesting and dynamic visual image.

Nikon D70, Nikkor 70-200m f/2.8G VR
I like to photograph nature the most. Even though sea level cuts the center of the photograph, the interesting aspects of the waves and the tree sit on the thirds to make the image convey the dynamic struggle of survival on a rocky shore.

Nikon D70, Lensbaby 2.0 w/ macro adapter
Since this macro image needed even more impact, I rotated the photo upside down from how I actually shot it, but that reversal doesn’t change the center of the flower still sitting on an intersection of thirds.

Lecia M8, Cosina-Voightländer NOKTON 35mm F1.2 Aspherical
Street photography is the same way, the unbalancing provided by placing the subject on the thirds as she looks out into the rest of the image complements the diagonals of both the umbrella stands and the street’s perspective.

Nikon D3, Nikkor 24-70mm f/2.8G
This possibly trite travel photograph of an well-known national monument is made more interesting by the use of high-dynamic range (HDR), the golden hour6, and adherence to the rule of thirds.

Lecia M8, Cosina-Voightländer NOKTON 35mm F1.2 Aspherical
Even documentary photos can benefit, as seen in this photo I took at one of my Lunch 2.0‘s in which the subject takes about a third of the image.

Nikon D70, Nikkor 70-200m f/2.8G V
Finally, in this wildlife photo, I placed the pelicans at opposite power points (the pair next to one, the other on the other). Of course, I had to choose three pelicans to drive the rule of three home. ?

Three is the simplest way to divide a composition such that the image tells a story of where something was, where it is now, and where it is going.

Speaking of storytelling and three animals…


In writing, any good story has an “arc” which is just a story in three parts: a beginning, a middle, and an end.

But writing also has its own guideline that is equivalent to the rule of thirds but for words on paper: the rule of three. This states that things described in threes are funnier, more satisfying, and more effective because of the pattern presented by the rhythm of its placement—for instance, in the story of Goldilocks and the three bears, there are three of everything which allows the story to contrast too much, too little and just right.

This book follows that rule of three by organizing itself into the three stages of learning: Shu, Ha, and Ri.7

According to Wikipedia, Shuhari means to “first learn, then detach, and finally transcend.”

The first section of this book concentrates on shu(守) which is composed of the Chinese characters for “house” and “law”. Here we learn and build the fundamentals of coding in the multitude of languages by learning the rules by which they work. In Stephen Covey’s Seven Habits of Highly Effective People, we’ll be in the dependence stage, blindly holding on to what we learn as if they are unbreakable rules. And computers, we will find, are unyielding stickers for the rules at this stage.

In Ha(破), we learn to break the rules, much like breaking a rock.8 The fundamental tool by which learn to we do this is with the design pattern. We will learn what problems design patterns solve, when to use them, and the consequences they entail. Stephen Covey would call this the independence stage, when we detach ourselves from a blind following of tradition and get the ability to solve problems on our own.

By the time we get to Ri(離), we are a bird ready to leave its nest.9 We realize that there are no real rules, so there are no rules to be broken. We will explore Ri mainly through discussions as you will have transcended anything I could teach and are now empowered to forge your own experiences, far beyond what I know.

In the Covey formulation this is interdependence. Covey noted that interdependence and dependence look superficially identical. Similarly, being at the stage where you don’t know any rules, and the one where you know the rules are meaningless sound awfully close. But, just as you can’t be interdependent with others without first having the independence of self, we will have passed through the Ha stage of experience to transcend mere programming rules, practices, patterns and their consequences to use code to express ourselves in novel ways.

and Coding.

Even coding has it’s own rule of three: the three types of coding. But we’ll get into that in the next chapter.

Part I. Shu: Programming, Markup and Operations

This section is dedicated to the reader, learning to write code for the first time, while not hard, is daunting… and rewarding.

Chapter 1. The three types of coding.

We will encourage you to develop the three great virtues of a programmer: laziness, impatience, and hubris.
—Larry Wall, Programming Perl

Just as the creator of the Perl programming language states the three great virtues of a coder, there are even three types of coding: programming, markup, and operations.

Programming gets all the attention in coding. If there is anything “sexy” about coding (there isn’t), it is programming. Because of this, “coding” is often synonymous with “programming” just as a “program” is often synonymous with “code”.

Programming languages are the method by which we design programs in a manner that a computer can interpret, build, and execute. We’ll be using a number of programming languages in our journey, but the most prominent is the PHP programming language. Given that there are better languages for didactic purposes,10 a short discussion of this choice is in order.

When I looked up the most popular introductory programming books11, the top twenty places had books using languages such as Python (6), Java (5), Javascript (1), and even Lego Mindstorms RCX (1). In fact, I had to go to 44th place before I found a book that even had PHP in the title.12 And yet, PHP has been a top 10 programming language in the TIOBE index every year of its existence.13 On the web, PHP’s sole specialty, it is even more dominant—used by a plurality of all websites from the very small to ones such as Facebook, Yahoo!, and Wikipedia. A single application written in PHP, WordPress, alone accounts for 27% of all websites on the internet! The reason for this is that PHP is, quite simply, often the shortest distance between two points on the web (where you are right now and the website you want to create). It is an expressive language that defers solving all the “hard stuff” to libraries, applications, and services that exist outside of it (and almost always written in a different programming language). What better language for building a website than one that not only enables you, it actively encourages you, to simply link to a solution somewhere else!

This combination of rampant popularity in the real world followed by criminal neglect in the publishing one make it the right choice for a book on learning practical web development. The fact that I happen to be proficient in it, having worked at two of the companies mentioned in the previous paragraph,14 is simply just a coincidence. ?

So prominent is programming‘s position in the world of coding, I once saw Douglas Rushkoff give a dynamic lecture demanding people learn to program in order to face the opportunities and perils of a computerized world,. It was called “Program or Be Programmed” — a manifesto that is particularly ironic as Rushkoff, himself, is no programmer. He is, however a coder, and the code he uses when writing his books is markup. Markup is the way of annotating content to provide data on top of what is the text. Where programming is the action; markup is the content. Where programming algorithms are the verbs; the content and its markup are the nouns.

The main markup language we’ll be referring to is Hypertext Markup Language or HTML. It’s the code you see when you select “show page source” in your web browser and its markup enables every clickable link, turns bold words bold, tells the browser to drop an image in the right place with the right formatting, and provides so many other things seen and unseen on the web page.

(Even if you used a word processor such as Microsoft Word or Google Docs, you are still coding markup. The undelying markup is there but just abstracted from you in the form of a visual interface. In fact, their underlying markup language, Office Open XML, is directly inspired by HTML.)

The third form of coding is almost invisible because it is the foundation upon which everything rests: that is system administration, or, more generally, operations which are the commands typed into the computer to start up the services and maintain the infrastructure to make a website work.

Such things used to be done in a bespoke manner—much like how you would maintain the applications and organize the files on your personal computer—but now are increasingly automated through various programmable software under the rubric of DevOps, short for development operations. This form of automation makes such actions well-documented, reliable, and repeatable. That becomes very important when a site scales from a single machine to a constellation of many different server groups to form a complex infrastructure.

The main devops tool we’ll be using is Ansible. Ansible isn’t the most popular software and it isn’t necessarily the best, but it is direct and eliminates the need to learn another programming language, substituting instead a much simpler markup language, called YAML (short for “Yet Another Markup Language”). This benefits a programmer like me, since I lack the temperament to be a system administrator as well as the time to debug programs written for it. And yet, Ansible allows for direct solutions similar to the commands one would type in in a bespoke manner, providing the structure needed for programmability and repeatability without adding any unnecessary conceptualization to understand.

Exercise: Starting up a website