These notes accompany this Google Docs presentation.

Coding for non-programmers

My name is Graham Trott. I'm a software engineer and a lover of epigrams. Among my favourites is

(click)

It’s very easy to make things complicated,
but it’s very hard to make them simple.

Excessive complexity can be found in all walks of life. For example, Rolls-Royce were once said never to use one bolt where 14 would do the job. But in software engineering, complexity has achieved new heights. A year never goes by without the introduction of yet another raft of software tools, languages and frameworks, and it's literally impossible to keep up and still get any productive work done.

I don't think of myself as clever, but I do have a degree of cunning that helps me find ways around problems. Others load up with advanced weaponry and go in with all guns blazing, but over the years I've found that approach leaves too much wreckage behind.

So the following talk reflects a desire to keep things simple so that even non-programmers stand a chance of understanding bits of it. Let's get started.

(click)

In the beginning was a void, and the void was without content or form. Then God created Tim Berners-Lee and commanded him to bring forth the World Wide Web. At the heart of this is Hypertext Markup Language (HTML).

(click)

Imagine I'm holding a glass box in my hand. It's a special glass that neither reflects nor refracts, so you can't see it. (Perhaps I'm really holding one - how would you know?)

(click)

Inside the box is some content - a piece of text or an image. You can see that even though you can't see the box. The box is magical in that it expands or contracts to just fit whatever you put into it.

(click)

So let's take 3 of these boxes, put some text into each one then put all 3 boxes into another box. Now, when you move the box around all the smaller boxes move at the same time. You could put an image into the outer box then put the outer box into yet another box, and so on.

(click)

That's basically what HTML is all about; a hierarchy of invisible boxes inside other invisible boxes. Early web pages tended to have a rather simple structure, as you can see from these examples.

(click)

(click)

(click)

Early web pages were like word processor documents, where each element carried its own style information - colour, font size, spacing and so on, but the capabilities were rather basic. The introduction of Cascading Style Sheets (CSS for short) allowed web page designers to separate style from the content, making the page source easier to read.

(click)

CSS is normally kept in separate files and the HTML document links to them. CSS is getting more and more comprehensive and there's often more CSS than HTML in a modern web page.

What we have so far is a static web page. Once it's loaded it does nothing until the user interacts with it by clicking a hyperlink. This causes a request to go to the server, which then returns a new page. Although the Internet gets faster every year there's still a noticeable delay while this happens, and the screen normally flashes as the new page appears.

So the next step is to improve interactivity, by making the page do things without the need to go to the server each time. This means programming and it means JavaScript.

(click)

JavaScript is pretty intimidating for most people who aren't programmers, and even for many who are.

(click)

However, many WordPress websites are built by designers, system integrators, database specialists, shopkeepers, sportsmen or musicians. That's the whole point of WordPress; to provide anyone with the means to build a website. And they do, in their millions - about 75 million in total. So how does a WordPress site builder add some interactivity?

(click)

The first way is with plugins. There are thousands of these and maybe there'll be one that does something close to what you want. Good luck with your hunt, as indexing in the plugin library is primitive and the documentation is often unhelpful. And be prepared to compromise.

The other way is to learn to program. And here I have some good news; you don't have to learn JavaScript. I'm going to show you a way of programming that's much simpler than JavaScript but does most of the things you need for an average web page.

(click)

Let's take an example; a set of traffic lights. Under the 3 lamps is a Step button, which when clicked takes you to the next step in the traffic light sequence.

 

(click)

And here's the HTML to display the graphic. Note that as it stands all you'll see is the Step button because none of the other elements have any content.  The lamps themselves are all controlled by CSS. (In case you are wondering, to draw a circle you need your CSS to define a rounded-corner square where the border radius is 50%).

In this example I'm not going to use a CSS file at all. Instead I'll get a script to do the job. I'm using a plugin called EasyCoder, which adds a chunk of JavaScript to your project. Every time a page loads, EasyCoder looks for a preformatted block with a special id. If it finds the id, EasyCoder compiles the script and runs it.

(click)

This is the special preformatted block, with no script code in it yet.

(click)

Here are the first few lines of the script, showing some variable declarations. I'm assuming everyone knows what a variable is...

(click)

For reference, here's the HTML. Each of the ids is handled by a script variable of an appropriate type. The 3 lamps are all handled by a single variable called Lamp. There's also a numeric variable State that remembers where we are in the traffic light sequence.

(click)

The first thing to do is define the characteristics of the box. To work with a DOM element you attach a variable to it. The name of the element is in curly braces (most other languages use quotes). The rest of the lines each define a CSS style to be applied to the box. If you're familiar with CSS this should be pretty easy to follow. The colours are all standard CSS names.

(click)

The next bit of the code sets up the 3 lamps. It does this by calling a subroutine that does all the things that are the same for all the lamps, then it does the one thing that makes each lamp different; it sets the background colour.

(click)

Here's the subroutine. Here you can see the magic trick for creating a circle. At the top is a label that defines the subroutine. Language purists will throw up their hands in horror at the idea of having gotos and gosubs in a language, but EasyCoder isn't aimed at them; it's for non-programmers, for whom structured programming is about as easy to learn as Chinese.

(click)

The last bit of preparation is to style the button to get the text aligned centrally, then we initialise the state counter and wait for the user to click the Step button. The stop command prevents the program from running any further; nothing will now happen until the user clicks the button.

(click)

When the user clicks the button we advance to the next step in the sequence. There are only 4 steps so when we run off the end we reset the counter to 0. Then we check to see where we are. If you were paying attention earlier you may have noticed we set up the lamps so only the Red was lit up; the other 2 were set to Black. State zero is red but previous to that was amber, so we turn off amber and light red. The exclamation mark signifies that the remainder of that line is a comment; the compiler ignores it.

(click)

The first click takes us from state 0 to state 1, which is red and amber, so all we have to do is light the amber lamp.

(click)

The next click takes us to state 2, which is green, so we turn off red and amber and light the green lamp.

(click)

Finally we arrive at state 3, where we turn off green and light the amber lamp.

(click)

And that's all there is for the traffic lights. You can try it out for yourself; simply install the EasyCoder plugin, create a new page or post then follow the instructions in this presentation. I'll post the URL in our Slack channel and on MeetUp.

Now here's another example, that demonstrates an efficient way of handling data inside a web page. Here we have our page structure in its 3 parts. The HTML part is actually 2 things; it's the content text but it's also the structure, the glass boxes I described earlier. If we separate the two we can do some cool things with them.

(click)

Here the content is now separated from the markup. One is raw HTML; the other is plain text, including URLs of images.

(click)

In the model I use, the area inside the dotted line is all part of the content managed in the WordPress page editor. Only CSS is kept outside, and as you've already seen there are times when some or all of that can be in the page too. It's all down to the preference of the person building the website.

(click)

My client Matthew Moss is an Irish-born artist living in Monaco. He’s a world expert on the life of Rembrandt van Rijn, the Flemish Old Master. Artists have notoriously chaotic lifestyles and Matthew has created a series of amusing paintings; cartoons depicting fictitious events in the life of Rembrandt, some of them set in a modern context. His website is an online gallery that offers copies of the paintings for sale.

The main page shows 3 paintings. There are over 50 paintings in the series and the page has buttons to display the next or previous 3 paintings. When the page initially loads the order of the paintings is randomised so users get a different experience each time they visit.

Because of the location of Monaco, all the text of the website is in 3 languages; English, French and Italian, and a row of national flags is shown so the user can switch between them.

{click)

We'll take a look more closely at the central section of the page.

The intention is to have all the major functions of the site operate without any page reloads. This means all the text has to be present in all 3 languages, along with the URLs of the images themselves. To hold all this information we use a Javascript Object Notation (JSON) structure that we include in the page when it loads. This causes a small increase in the page load time but removes delays that would otherwise be encountered later.

The JSON includes every piece of text seen by the user, including button labels and rollover text. The HTML itself doesn't include a single piece of user text; instead, every place that needs text has a CSS id that corresponds to an item in the JSON data. The current display language is not identified inside the HTML; it’s up to the controlling script to append a suitable suffix to find the right piece of text.

(click)

Here's the outline structure of the page. It's very simple; at the top is the HTML markup, under that the data and finally the controlling script.

(click)

The HTML looks like this. It's a single table of 2 rows and 3 columns. The top row holds the pictures with their titles and the bottom row holds the caption and explanatory text. None of these fields have any content; instead they have ids that allow us to fetch content and inject it where needed. Every id has what we call a namespace prefix, in this case ec-, which avoids any risk of our ids clashing with those used by the WordPress theme.

(click)

The JSON data looks like this. JSON has fast become the most popular way of representing structured data and passing it around the Internet. If you're not already familiar with it don't worry too much, but it's worth getting to know a little about it. Here there is an array with 3 elements, one for each painting, but this is only a demo; remember that in the final website there are over 50 elements. Each element has 4 items; the URL of the image, a title, a caption and some explanatory text. Note that these have -en suffixes; in the real website there are also translations with -fr and -it suffixes.

(click)

And now we come to the script, which as before is found inside its special preformatted block. This part is dealing with just the setup of the items in the table. I won't go through it in detail, only to say that much of it is concerned with extracting bits of information from the JSON and setting it into the right item in the HTML. The 'set' command is very versatile; it can set a style, an attribute or the content of an element.

(click)

Here we have a loop that counts through the 3 images to be displayed, extracts some text and injects it into the HTML

There's quite a lot of JavaScript going on behind some of these commands, so the code tends to be somewhat more compact than the JavaScript it replaces. The primary aim, though, is to make the whole thing as readable as possible to people with no training.

(click)

And that brings me to the end of this presentation. I hope you found it interesting and useful; if you have any questions I'll be pleased to answer them.

  div Box
  div Lamp
  button StepButton
  variable Step

  attach Box to {box}
  set style {width} of Box to {70px}
  set style {border} of Box to {1px solid Black}
  set style {background} of Box to {DarkGrey}
  set style {text-align} of Box to {center}

  attach Lamp to {red}
  gosub to SetLamp
  set style {background} of Lamp to {Red}

  attach Lamp to {amber}
  gosub to SetLamp
  set style {background} of Lamp to {Black}

  attach Lamp to {green}
  gosub to SetLamp
  set style {background} of Lamp to {Black}

  attach StepButton to {step}
  set style {text-align} of StepButton to {center}

  put 0 into Step
  on click StepButton go to NextStep
  stop

SetLamp:
  set style {width} of Lamp to {50px}
  set style {height} of Lamp to {50px}
  set style {border-radius} of Lamp to {50%}
  set style {margin} of Lamp to {10px 0 10px 10px}
  return

NextStep:
  add 1 to Step
  if Step is 4 put 0 into Step
  if Step is 0
  begin
    attach Lamp to {amber}
    set style {background} of Lamp to {Black}
    attach Lamp to {red}
    set style {background} of Lamp to {Red}
  end
  else if Step is 1
  begin
    attach Lamp to {amber}
    set style {background} of Lamp to {Gold}
  end
  else if Step is 2
  begin
    attach Lamp to {red}
    set style {background} of Lamp to {Black}
    attach Lamp to {amber}
    set style {background} of Lamp to {Black}
    attach Lamp to {green}
    set style {background} of Lamp to {Green}
  end
  else if Step is 3
  begin
    attach Lamp to {green}
    set style {background} of Lamp to {Black}
    attach Lamp to {amber}
    set style {background} of Lamp to {Gold}
  end
  stop