Is it Really Simpler?

It only appears simpler, the complex nature of the internet is mostly hidden - Abstracted away from the user.

In the early days of the internet there were no ISPs. If you wanted to connect to a community bulletin board you had to get your computer modem to dial the phone number of the bulletin board you wanted to connect to. The host of the bulletin board would have to provide a number of lines into their host computer to support a very limited number of users. This area of the Internet was unlikely to be connected to other areas of the internet. Just a few computers talking to each other in a small group.

In walks Sir Tim Berners-Lee, with his ideas of a World Wide Web. A set of protocols and rules to set a standard that could open this network up. Things really started to change as the infrastrucure began to grow. Instead of dialling the host directly, the ISP (mostly the guys that provided your phone line in the past) provides you a point of entry and they will route your call. Keeping the telphone analogy going, we have swapped the direct dial phone number to an Internet Protocol (IP) address like 212.58.244.20. We don't even have to remember the number because of URLs. Type "bbc.co.uk" and your browser asks for the IP address from a directory (a DNS). Your request for a page then gets sent to the host, via the shortest number of phyiscal machines as possible.

So what used to be a complex set up between to PCs has now included thousands of individual machines whose purpose is to ensure that the route from your PC to anywhere else is known, and that there is a list of URLs are ready to translate into IP addresses. There are load balancers, multiple versions of some hosts, cached versions of data and even search engines are providing even more abstraction. You dont even need to know the URL.

You just type "cutest cat video", and the full force of the internet parts in front of you giving you what you want.

The same goes for programming code or ordering coffee.

Application Programming Interfaces (APIs) are provided when someone else has taken a complex task and made it easier, and simpler. Take the Android layout inflater, you just give it an XML instruction and it will perform the hard work of rendering objects from the Android API into the places you asked for them.

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   View myFragmentView = inflater.inflate(R.layout.fragmentlayout, container, false);
   return myFragmentView;
}

A barrista knows that when you ask for a latte, that they should be making a hot drink using espresso coffee and steamed milk.

TL;DR

The world is not getting simpler, it's far more complex - but with every innovation someone abstracts the complexity and makes it easier for the next person.

People in the world today are truly:

Nanos Gigantum Humeris Insidentes (Standing on the shoulders of giants)

The problem for me is that the PHP sessions that are created can tax the server of my shared hosting, and occasionally additional requests can peak the memory allowance. This results in the occasional HTTP 503 - not good. When the server is running smoothly the amount of time to render a Wordpress page (with plugins) can already take some time. Google Analytics gives an average page load time 5.62s.

I have tried to alleviate this in the past by using a Wordpress cache tool called W3 Total Cache - which works. However during cache creation it also causes the occasional HTTP 503.

The Thinking

Maybe I don't need all of the features of Wordpress. I don't need the web server to do anything more than serve the pages that I create. So why not generate the page once and be done with it. Well there will be issues with navigation and sitemaps if those pages aren't updated evertime a new page is added. Naturally I don't want to hand author every page that has altered either, so I set about looking for a static site framework, or generation tool.

I'm a programmer at heart, so I am quite capable of putting a little bit of extra work - maybe I set up a local PHP / MySQL server and use Wordpress as a generation tool, and then upload the generated pages - that could be difficult to maintain, with some pages not required in a static environment.

So I found DocPad an OpenSource project running on Node.js. Although the project hits all of the current Buzzwords it matches what I need.

What do I need?

DocPad is very lightweight to start with. Basic setup allows for basic server setup and file watching, but it is ready for Plugins/Modules galore. There are some skeletons available to get started, but I like reinventing the wheel so I start with a blank slate - and go browsing the plugin list.

• docpad-plugin-eco - basic template engine, pretty much required to create some logic within pages, easy to use.
• docpad-plugin-partials - useful way to include snippets from additional files.
• docpad-plugin-marked - Markdown parsing, should make writing articles quickly.
• docpad-plugin-stylus - Stylus support, to make CSS authoring easier
• docpad-plugin-highlightjs - Used with Markdown support to Highlight code within my articles.
• docpad-plugin-livereload - Development tool for the local server, using WebSockets to reload the page while editing for instant preview.
• docpad-plugin-cleanurls - Creates URLs like /article/articlename/(index.html) from articlename.html.

I recommend getting involved, download Node.js, and Install DocPad give it a try.

Result

It did not take too much time to reconstruct my website from the ground up, and DocPad and Plugins were very accomodating. Only time will determine if it was a good idea to make the change - but for now I am happy with what I have done.

UPDATE: over time the code boxes on this page gained some additional HTML tags, and lost some formatting - I have now fixed this. I have also created a demo here

The Experiment

Using data that I have collected I decided to visualise my work days on a Google Map. I travel around locally and thought it was a good dataset to start tinkering upon.

This was easier than I thought.

You simply structure a request object and pass it into to a Direction Service Object and wait for Google's servers to respond via your callback function. After checking that the directions are "OK", you can iterate through the results object or pass it to a DirectionsRenderer Object provided by the Google API.

That's it you have requested and displayed a route.

What if you want another route?

Making a new request and displaying it using the same renderer object REPLACES your existing route. I wanted to display multiple routes on the same map. Not knowing where to begin and my mind drawing a blank I approached Google for inspiration. The only related suggestion was this from StackOverflow:

http://stackoverflow.com/questions/5451770/demo-for-displaying-multiple-google-directions-google-maps-api-v3.

Which in turn links to an example:

http://joshdcompton.com/google_maps/mult_directions/test.html.

Under the hood (a quick "View Source") provides a solution. Although provided in a bad design pattern it is functional and proves a point. You need a DirectionsRenderer for each route. Multiple DirectionsRenderer objects, sounds like they should be stacked in an Array. This works well:

// cur is used later to manage the location in the renderArray[]
    var cur = 0;
// requestArray - just going to be an array of DirectionRequest Objects, 
// you need to to populate this!
// renderArray - to be used to store multiple DirectionRenderers.
// map - the Google Map object.
    var requestArray = [], renderArray = [], map;
// Kickstart the process of requesting Directions
    submitRequests();
    function submitRequests(){
    requestLength = requestArray.length
        for (var i = 0;  i < requestLength; i++){
            console.log("Submitting request");
            directionsService.route(requestArray[i], directionResults);
          }
    }
/*
 * Callback function provided to the Maps API Direction Service. It creates
 * a new DirectionsRenderer to manage the new route without overriding the
 * old route
 *
 * @param result - the route information
 * @param status - Success or Fail
*/
    function directionResults(result, status) {
        console.log("Receiving request for route");
        if (status == google.maps.DirectionsStatus.OK) {
            renderArray[cur] = new google.maps.DirectionsRenderer();
            renderArray[cur].setMap(map);
            renderArray[cur].setDirections(result);
            cur++
        }
    }

The Directions service is Asynchronous, which means you have to wait for a response before displaying it, hence a callback method. This also means that the results may not come back in the same order. If you want to associate the route with the request you have to submit each request and then wait for the response. This would allow you to create a Legend, or retrieve information about the route that is appropriate for the request.

I settled for this, after changing the request array to hold a requestID as part of the object:

function processRequests(){
  console.log("Processing requests");
  //Counter to track request submission;
  var cur = 0;
  if(renderArray.length > 0){
    for(var r=0; r < renderArray.length; r++){
      console.log(r);
      renderArray[r].setMap(null);
    }
  }
  submitRequest();
  function nextRequest(){
    cur++;
    if(cur >= requestArray.length){
      console.log("Done");
      return;
    }
    submitRequest();
  }
  function submitRequest(){
    console.log("Submitting request for: ", requestArray[cur].requestID);
    directionsService.route(requestArray[cur].request, directionResults);
  }
  /*
  *  Callback function provided to the Maps API Direction Service. It creates
  *  a new DirectionsRenderer to manage the new route without overriding the
  *  old route
  *
  *  @param result - the route information
  *  @param status - Success or Fail
  */
  function directionResults(result, status) {
    console.log("Receiving request for route: ", cur);
    if (status == google.maps.DirectionsStatus.OK) {
      renderArray[cur] = new google.maps.DirectionsRenderer();
      renderArray[cur].setMap(map);
      renderArray[cur].setDirections(result);
    }
    nextRequest();
}

I hope this helps anyone displaying multiple routes, you could also spice it up with an array of colours on each directions renderer? Please note that although this code works, it may not be the 'best' solution. It also does not initialise or create the Google map, or provide you with any request data. It is only meant to highlight my solution to a problem.

I may put up a live example soon. Live example here

If you need more information, or if something isn't clear let me know, I'm just a Contact Page away!

At first glance it all seemed commented out.

Dig a little deeper and the whole snippet takes shape.

<!--[if lt IE 7]>
    <html class="no-js ie6 ie" lang="en">
<![endif]-->
<!--[if IE 7]>
    <html class="no-js ie7 ie" lang="en">
<![endif]-->
<!--[if IE 8]>
    <html class="no-js ie8 ie" lang="en">
<![endif]-->
<!--[if gt IE 8]>
    <html class="no-js" lang="en">
<!--<![endif]-->

I'm used to seeing the condition statement to load IE specific style-sheets, but never such a clever deal as this. Rather than waste another resource download - and possible blocking - Chris can serve just one style-sheet. Using the same methods that has made Modernizer so popular you can target browsers using the HTML class:

.ie{ //IE generic Styles...}

.ie6{ //IE6 styles...}

So I Google'd it, and realised that it's included in the HTML5 boilerplate and documented on Paul Irish's website. Read more about "Conditional stylesheets vs CSS hacks? Answer: Neither!" and then send me a message telling me an idiot. Really? I don't mind!

Maybe I should spend a bit of time reading through Paul Irish's blog?

Things I really like about this 'Widget':

• It waits patiently until you have finished reading the first article, because that is why you are there right?
• It pops up over all the other junk that makes the page busy. Saving valuable real estate, until need.
• It includes more than just the title, helping us with that big 'shall I click?' decision.

Easy to Make

Using the favourite jQuery - or straight JavaScript if you are capable - you can test the current scroll position against the bottom of the article (or any target element). Once the numbers add up bring in an absolutely positioned panel with all the coolness of a pro.

This works, but not the cleanest of code - but functional! Also available as a fiddle: http://jsfiddle.net/clokey2k/rcaxA/1/

$(function(){

  //When should it be triggered in this case - when the '.next-link' is visible, 
  //but it could be the '.offset().bottom' of the article?
  limit = $('.next-link').offset().top;
  //Account for the height of the window - would have to readjust on resize;
  target = limit - $(window).height();
  //Hide the fancy fixed position box;
  $nextbox = $('.next-box')
  $nextbox.css({right: "-=150px"});
  //Make a note of it's status;
  visible = false

  //Cue Magic - every time the window scrolls;
  $(window).scroll(function(){
    //Where are we?
    current =  $(window).scrollTop();
    //Hit the target - show me the box;
    if(current >= target && visible == false){
      $nextbox.animate({right: "+=150px"}, 500);
      visible = true;
    }
    //Gone back up to re-read the article - hide it again!
    if(current < target && visible == true){
      $nextbox.animate({right: "-=150px"}, 500);
      visible = false;
    };
  });
});

Result being (rather poorly styled):

Just visit Mashable and read an article, who knows what article comes next. Since writing this article Mashable have changed their webdesign

For me this means that all of my projects can be listed on one page but edited separately. It could also be used to aid writing an article by splitting it into sections.

This does come with limitations:

• No pagination – I don’t think it will work if page 2 or more is requested.
• No REAL Child pages – as you are already displaying them, although they can be viewed as single pages themselves.
• Duplicated content – The same / similar information is available in more than one location

But without further ado – the code:

<?php  /* Start the Main Loop. */?>
<?php $post_parent=0; //Declaring it out of the loop for use later (might not be needed) ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* Display the single page. */ ?>
    <article class="">
      //code for diplaying the holding page - maybe an intro? or blank...
    </article>
    <?php $post_parent= the_ID(); //Setting it to the current post/page ID ?>
<?php endwhile; // End the main loop. Carrying the $post_parent through; ?>
<?php query_posts('post_type=page&post_parent='.$post_parent); //post_parent used to query just children ?>
<?php  /* Start the child Loop. */?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* How to display all child pages. */ ?>
    <article class="">
      //code for diplaying the small pages/sections
    </article>
<?php endwhile; // End the child loop. ?>