Webspinner Tech Blog

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.

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.

Object hyperlinking - Wikipedia, the free encyclopedia

I got my invite today for Google Wave. Really neat! I have only gotten a couple of invites out that have resulted in people coming on. Anyway I already have a pretty good concept of the first couple of test uses for the product. First I know I need to plan next years vacation with my wife, so I was happy to find trippy available for the first post.