“Strings?? Words are called strings in computer lingo? That’s too jargony for me …” My mom is a newbie, classic right brainer and kinesthetic learner. She fidgets when she’s in the chair for too long. She jumps up and down when something works. And I’m teaching her to code.
She has listened to me talk about all these technologies for the last two years. Mom attended the NewBCamp I organized in February, playing a vital role in the event by manning the registration desk. She knew about these terms like PHP, HTML, CSS, and Javascript, but she referred to them without knowing what they meant. That is, until a few days ago when she decided she would be thrilled to learn how to do some of what I do.
First I introduced her to the tools she would be using and some of the basic terms she would have to know. “Browser” she knew already, as well as the fact that there are more browsers than the one Internet Explorer that most people seem to use. I showed her the text editor Notepad++ and showed her how the regular Windows Notepad doesn’t have all the features that this text editor does (although there are better ones out there, it’s good enough for my purposes and light weight and free). I then explained how the server (we were using Apache) finds the pages written in text and stored in the “document root” and then sends (serves) them to be interpreted by the browser. We opened up the browser and typed in http://localhost/ and it showed the index page stored in the file folder.
Mom started her first HTML document with a strict DTD from W3C and titled it “Opus4Jerri”. I directed her to close all the html tags she started – an html tag goes first, then head next, then within that the title and the link to the css file. Writing out the css link was a good place to pause and talk about file locations and directories. The server can’t find a file unless it’s given the correct “path”, which is like opening one of those Russian nested dolls until you find the last file you were looking for. The path starts with the drive you are in – in our case the C drive, and then each folder from then on is separated by slashes until you get to the file itself, which has a dot and a “file extension” indicating the type of file. This is the sort of nuts and bolts information that I take for granted now, but it’s a major barrier to someone who is totally new to how web development works.
None of this was intuitive for Mom. She worked hard to construct that first html document and was thrilled to see it when it first appeared interpreted by the browser. We moved on to styling from there, and she played around with the background colors in the css file until she was satisfied she knew how it worked. Then it was time to add in some dynamic parts with PHP. The first thing we did was even simpler than a Hello World – she opened with a <?php tag and wrote echo 3-1; closing with a ?> tag . This was to illustrate the difference between php and HTML. When she saw that it rendered as 2, she was surprised but then understood that HTML would have just printed 3-1, while PHP can do the math and to some degree “think” about what we type in.
I explained that PHP does not show up in the View Source tab in the browser, which disappointed her a little because she had been thinking she could put secret messages in the PHP that only coders would be able to see when they looked at the source. Only HTML, CSS, and Javascript show up in the browser because they are “client-side”, while PHP (and Python) are “server-side” so they never make it to the browser, whether in the text or in the interpreted (rendered) page.
Mom finally had her Eureka moment when I showed her variables. In PHP a dollar sign before a word means a variable, which is like a name for a box that you can put a value into and then use the name whenever you need that value. She said, so that means you can change a value once in that first equals (assignment) statement and it changes all the places where you used that variable. I agreed that it is a good coding practice to avoid “hard coding”, where instead of using the value itself, you use the variable and then you only have to change what the variable means instead of all the places where the value was used. Where variables shine, I continued, is in the if – else logic statements that test a variable for how they compare to a value and then do an action based on the outcome of that test.
We did a simple example that took the current hour using the “date” function in PHP and tested the variable with that hour value against whether it was between 6am and 6pm (or between 6 and 18, as we made it easy and used military time). According to whether the variable was between the values, it changed an inline style statement to make the background yellow during the day and black at night. The code looked like this:
<style text=”text/css”>
body {background-color: <?php
$date = date(“H”); // this is the date function that formats the current time by hour in military time
if ($date>=6 && $date<=18) {
echo “yellow;”;
}
else {
echo “black;”;
}
?>
}
</style>
Since it was a little before 8pm when we did this, the background showed up black. I told her to go back tomorrow and check it and it should be yellow.
My mom’s response to all this was to decide that she needs to work on it on her own in order to really learn it, which is a great approach. However she benefited from having someone to help her – for instance at one point she told me she had taken an hour to try to figure out why she couldn’t open a file in Notepad++, and it was because the default text editor was still regular Notepad. I’ve been through all this, so I can save her time in learning the hard way. It’s my pleasure, because it helps me rediscover all the nifty little things that make web development so much fun.