Webspinner Tech Blog

Battling it out against the clock for the Google HTML5 Game Jam was a blast. The Google offices were, as always, totally legit. Good crowd showed up and team sizes were restricted so the teams were going in light and fast. Our team took a crack at upgrading the memblox app from the GTUG campout and decided to go with the effectgames.com game engine. Doing a full redesign I think helped us to focus on certain critical issues and stay on task with our feature set. Using the Game engine helped a lot to keep the cruft off the coders.

There was a pretty interesting bit of learning curve getting going with effect games but once we got it going things seemed to move along faster and the built in functionality helped us get features in quick. Our second day was short so we ended up leaving plenty of features on the cutting room floor but we were able to:

fix a large number of bugs from the original version
implement themes and theme changes

You can check it out at http://scubedgame.com and the team to thank for it was:

David Gregory
Estelle Weyle
Stacie Hibino
Perry Chow
Gabriel Hernandez

You ever get a question that just bugs you until you solve it every way you can think. Today I was asked to write in pseudo-code a short algorithm for determining if a string was a palindrome. I wrote ECMAScript like scrawl and short a couple of important things that I missed I basically made a working palindrome function. But then I got home and wanted t actually test my code so I did and these are what I came up with. If you know a better way of have a language implementation I would love to see it to have some fun:

// JavaScript
function pal(w){
 return w.split('').reverse().join('') == w;
}

#Python
def pal(w):
 return w == w[:-1]

I read a great joke on StackOverflow a while back and was reading again recently and thought I would share it here/store it here... whatever.

A man flying in a hot air balloon suddenly realizes he’s lost. He reduces height and spots a man down below. He lowers the balloon further and shouts to get directions, "Excuse me, can you tell me where I am?"

The man below says: "Yes. You're in a hot air balloon, hovering 30 feet above this field."

"You must work in Information Technology," says the balloonist.

"I do" replies the man. "How did you know?"

"Well," says the balloonist, "everything you have told me is technically correct, but It's of no use to anyone."

The man below replies, "You must work in management."

"I do," replies the balloonist, "But how'd you know?"

"Well", says the man, "you don’t know where you are, or where you’re going, you expect me to be able to help. You’re in the same position you were before we met, but now it’s my fault."

The key with appearance is just like programming UI. Encapsulate like elements using id and class tags within each html element. Once you have consistent content layout among the pages you can use simple css code to make things look good. It often helps to do a UI specification for your web pages.

For instance <p> tags will always contain Arial style fonts with size 10. All links will be #e33 if they are not being hovered(#3ee) or clicked(#fff). The background of the page will always be #eee. Colors, margins, fonts and borders all fall into such a specification but are not necessary. One trick you can use is find a Content Management Framework, like drupal or dotnetnuke, check out some themes for each of them and borrow and steal code from those to suit your needs.

Oh and of course at the top of each generated page put the style sheet attachment call:

  
    <link href="your_stylesheet.css" rel="stylesheet"/>
  

or place all style declarations in a generator to land inside a:

  
    <style>
      body{
        font-face: Arial;
      }
    </style>
  

if you are comfortable with a certain tools look and feel (I use Jira but you might use campfire) then look at how they do it and copy and paste the styles they are using. You will find it easier to use your own web documents when they match the other systems you use.

So I needed to use images in a simple navigation for a customer using Drupal 6.0. Custom theming in drupal is something I have not done a great deal of and my last experience with it was back in drupal 5. So here I am going to document the method I used to change the primary link stack over to images.

/themes/nameoftheme/images/page_title.png

is the method I am storing the image files in. I open up template.php and add the following code to it:

<?php
function imagemenu($linkset){
 foreach($linkset as $link){
  /*
  set image path to theme directory/images/page_title.png
  */
  $imgpath = base_path() . path_to_theme() . "/images/" . strtolower(str_replace(" ", "_", $link["title"])) . ".png";
  $hrefpath = base_path() . $link["href"];
  if (file_exists($_SERVER{'DOCUMENT_ROOT'} . $imgpath)){
   $imageout .= "";
  };
 };
 return $imageout;
};
?>

Then in the page.tpl.php file where the primary link navigation was going to appear I used the following code:

<?php if (isset($primary_links)) { ?><?php print imagemenu($primary_links)?><?php } ?>

it is crude but it working for the time being and has the added benefit of hiding pages that I do not currently have images for.

the Pragmatic Programmer by Andrew Hunt and David Thomas has often been referred to as an essential book to read for any programmer. I see it spoken of often on StackOverflow, and the methods and tips it covers are often considered among the most valuable gems of wisdom currently circulating the developer community.

I finally got a chance to pick this book up and give it a read, and it does not disappoint. With remarkable wit and plenty of entertaining anecdotes, I literally have not been able to put it down. My lovely wife Melanie and I picked it up during an outing to Walnut Creek.

I will try to come back and edit this post with information from the book as it strikes me.

Update 8/3/2010:

I cranked through the book in no time. Great fun reading it and all useful things to consider as a developer. I was happy to find a log of the advice was practices I had already figured out and started implementing on my own, though the insight on certain implementation methods was great. I have started seeing bookshelves of computer books in two different sets, those books that are Pragmatic Books and those that are not. I am now diving into Language Implementation Patterns by Terence Parr, not the same kind of read as the other book but definitely well written.

So this last week I have been Designing a Blogger theme as part of a larger project for my friend and ally Paul Kooiman and the process was actually really enjoyable. I was able to overcome some interesting technical hurdles, implement some fun doodads to enhance the nature of his blog and just generally outline what I think is a good approach to taking a Blogger Theme project on.

I first outlined the things we needed to accomplish:

• Had to look simple and elegant, Client provided some Blogs he liked
• Showcasing Photographic content, use jQuery and Lightbox to get a polished look
• Branding is all lowercase letters; orange, white, grey; match existing collateral

Next it was time to get a baseline and listen to some music. I grabbed the simple Blog theme, expanded the widgets in Edit HTML mode and copied the contents out to SciTE for editing. Ended up saving this file as an xml file which worked out for handing the work over to the client (Darjeeling Limited Soundtrack for most of this part).

Getting your head around the CSS in the blogger themes is a bit tricky because each blogger theme kind of makes it up as they go along. I needed to a way to easily see the changes I intended to make to the css, without the save/view process getting in the way. To solve this problem I first decided to get jQuery loaded up in the theme, and view it in the Google Chrome browser, which gives me handy developers toolset for testing CSS and JavaScript from a console.(Jamaroquai, Canned Heat)

To implement jQuery quickly in blogger put this in your blogger theme xml file and upload it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

With this setup it was a straight forward trial and error process of utilizing jquery console selectors, for instance: Let us imagine I want to see what on the output page is affected by changing the date-header class, in the console I type $(".date-header").css("color","#f00") which will turn any text directly beneath that class bright red. This was awesome for finding all the css I wanted to include to just clean things up. For example try the following in your console:

$("#navbar").css("display","none")

So now you know the css to remove the navbar at the top.

Implementing the lightbox and custom images was a little less straight forward but was still pretty easy to achieve. First you need to determine where you will store your remote files, we needed to load a custom favicon, graphical header, javascript file, css file and all the images that go along the with the Lightbox Plugin. Once you know where everything is going to be, ftp it, set the locations on all href, src and other attributes you need. Use the same method from importing jQuery to import any other scripts and plugins you want. Make sure you do not add script tags before the </b:skin> tag.

note: You can change the header link (image) to point at your website by replacing expr:href='data.blog.homepageURL' with href='http://YOURADDRESS' in the header widget area.

I put all my document ready script at the bottom of the file, you don't have to but it made it easier to find. Anyway that is all for this post. Happy hacking.