Code

My Code

Most of my code goes to my work, but there's lots of stuff I like to play with. My code is at my github page.

My main standalone projects:

Learn to Program!

Computers are eating the world! So we need more humans who know how to program them so they won't take over. Join the fight today!

Here's a great intro article about what programming is:

http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/

Next I'd read the wikipedia articles on HTML, JavaScript and CSS... the lingua franca(s) of programming across the world:

http://en.wikipedia.org/wiki/HTML

http://en.wikipedia.org/wiki/JavaScript

http://en.wikipedia.org/wiki/CSS

And then try programming some web pages on your computer.. you can use a basic text editor to create web pages that combine the three of these to do just about anything you have seen a website do.

For a thorough guide, try this site:

https://internetingishard.com

Here's a longer roadmap to follow:

Now try it out!

Create a file called test.html (or anything ending with .html) and then open that file in your web browser (File menu, then "Open..."; or whever the "Open.." menu option is in your browser). If you're baffled at how to do this, check out this tutorial.

At first it will be a blank page. But then try copy-pasting the code below into that file, saving it, and then reload the page in your browser. (Colors are there just to highlight the different languages: green is used for comments the computer ignores, red for JavaScript, blue for CSS and black (dark grey?) for the HTML).

Here's the code to put in your test file:

<html>

<head>

<script type="text/javascript">

/* Your JavaScript program goes here, inside the script tag.

Lines like this, between slash-star pairs, are used

for comments/notes and are ignored by the computer. */

function doThisWhenThePageLoads() {

/* Wait one second (a thousand milliseconds) and then call the

sayHello function */

setTimeout('sayHello()', 1000);

}

/** Access the content of the page via the Document Object Model (DOM)

to change the content after the page loads. */

function sayHello() {

var paragraph = document.getElementById('tagToHoldHello');

paragraph.innerHTML = "Hello World!";

}

</script>

<style type="text/css">

/* Let's define some fancy looking text inside the

style/CSS tag. */

h1 {

color: red;

}

p {

display: inline;

border: dotted 1px blue;

}

</style>

</head>

<body onload="doThisWhenThePageLoads()">

<!-- Here in the HTML part of the page, the comments are

between angle-brackets, exclamation and dashes.

They're called "alligator tags. Oh my! -->

<h1>Test Page</h1>

<p id="tagToHoldHello"></p>

</body>

</html>

If you put this in that file, save it, and reload it in your browser, you should see something like this, with the hello appearing after a second:

Test Page

Hello World!

Even though that looks boring, it's a simple example of combining HTML, JavaScript and CSS to make a webpage.

Why do it this way? Well, we've separated the job into 3 focused parts. HTML provides the basic scaffolding, like the framework of a house or building, onto which you hang dynamic programs in JavaScript, and decorate with CSS.

  • HTML is the place you put the plain old text and images and links to other pages. The objects of the webpage world.

  • JavaScript is how you change the page over time, or in response to events from the user or elsewhere. Notice that the "Hello World!" is inserted into the page after the page loads after a second. Well, you can go far beyond this. Think of sites like Google Maps or Gmail.. they're using just this same kind of approach to animate and perform actions based on events from you, the user, and other events coming in over the network.

  • CSS, well, it just makes it all look pretty, or ugly, depending on your skills. Check out CSS Zen Garden for how powerful it can be.

So anyways, these are just the basics. Maybe try changing the colors in the CSS. Or change how long it takes the hello message to show up in the JavaScript. Or change the order of the "Test Page" header and the hello message holder in the HTML.

Beyond simply fiddling though, it's time to read up! Learn more tags in HTML, learn more about functions and datastructures and libraries in JavaScript, and learn more selectors and styles in CSS. Then just add them all to your web page files, and you're off to the races!

Well, almost..

If you go through this exercise and get excited about making a webpage that others can see, you'll quickly hit a wall: OK, this file exists on my computer.. now what? Do I email it around? That's not how the web works!

To get this actually visible "on the web", things get a bit more complicated, but to summarize, you either have to run a "web server" on your home or work computer which other people can connect to (a complex topic, but kinda cool if you can grok it), or find someone else with such a computer, and send your web page files to them so that they may make it reachable to other peoples' web browsers.

Nowadays, all this is done with tools, and automated to a large degree, by so-called "web-hosting" sites, or "page creation" sites (like this one!), but at the core, all web pages work like the example above shows. So when you're learning to program, the goal shouldn't be to understand it all at once, or do it all at once, but rather to focus on learning the essential, basic, simple idea of how each part works and then how they fit together to make the web. Then you dive in and specialize as needed into the different parts, learning more all the time. And thus saving the world from our otherwise robot overlords in the process! :)