Train Your Brain to Code

brainA brain is a lot like a computer. It will only take so many facts, and then it will go on overload and blow up.

– Erma Bombeck

 

 

 

One could argue that writing code can be boiled down to writing a series of AND, OR, and NOT statements.  Anyone who has seen assembly language knows the fundamental commands do not vary a whole lot.  So why is it that tutorials advertise “no coding necessary?”

There is an art to coding that is hard to pick up without doing the work.  I learned this from my own experience of coming from a humanities background and expecting it to be like picking up a language.  Learning the programming language is an important aspect, but the language has far less bearing compared to understanding the underlying technologies.  It’s like needing to know how acids and bases interact before you invent a new recipe.

1.   Play logic and math puzzles

If you’re not a puzzle type (I’m not), seek out opportunities to challenge that part of your brain.   Puzzles will teach you an intuitive grasp of the underlying math and logic so essential to the function of computers.  They will also train you to be thoughtful and persistent, qualities that will make you a successful coder in the long haul.   Check out http://www.mathplayground.com/logicgames.html for a nice selection.

2.  Break the task into higher level chunks

It’s tempting to start off a coding project by drilling down into the nitty gritty of how each and every function will work.  Learn to leave stub functions and classes for later and focus on the overall structure first.  Raise your view from the 1,000 foot level to the 10,000 foot level.  See the whole, then map out finer grained sections.

3.  Limit your use cases

Take on a specific type of coding when you’re beginning, such as website or app development.  You will become familiar with a small spectrum of tools, and that in turn will get you started on the thought process needed to build software.  By all means branch out once you’re bored, but when it’s new to you, avoid tackling Arduinos, ActionScript and APIs all at once.

How do you condition yourself to approach the ultimate coding mindset?  Or is there a way to bypass the limitations of the coder?

Teaching Mom PHP

“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.

jQuery, my love …

I have a new fetish (web development fetish, of course) and that would be jQuery.  I had been introduced to it a few weeks back thanks to that most awesome of instructors Hilary Mason (www.hilarymason.com), but now having seen the man himself John Resig present on it at BarCamp Boston 3, I am yet more eager to explore its marvelous functionality.

John Resig’s presentation (to be posted on Youtube before too long, according to kind audience member who thought to record it) was a wonderful overview, going from nuts to bolts in a half an hour.  He explained that jQuery is a Javascript library which, at a minified 15k, provides a way for HTML and Javascript to interact that usually takes server-side scripting to accomplish.  In fact it can act as its own programming language even to the extent of replacing some server-side code. 

Besides enabling cool visual effects such as the toggling of show/hide, accordion drop down menus, and custom animations, it allows manipulation of DOM elements such as your div tags and header tags.  PHP groupies will love the dollar sign syntax, and those who have mastered the CSS #id and .class tags will find learning jQuery an easy transition.

What really perked my ears were two features that I am dying to try out – the AJAX call to load an HTML page and then strip out only those elements that are needed, and the chaining method in which an element is acted upon by multiple events, in a series that looks like this:  div.show().foo().bar() , where show, foo and bar all act on the same element to accomplish their respective functions.

Three books I plan on purchasing in sequence based on Mr. John’s recommendation are Learning jQuery (Packt), jQuery Reference Guide (Packt), and jQuery in Action (Manning) with none other than John Resig writing the foreword.

Interested in learning more about jQuery?  Check it out at jquery.com .  John Resig’s blog is ejohn.org/blog