How to target="_blank" a link while keeping it XHTML compliant with jQuery

I had to make a bunch of links for a site I am working on for a client at work open in a new window.  It's not ideal but it was what was requested.

So I set up my links like such:

<a href="http://damnralph.com" target="_blank">http://damnralph.com</a>

I run my page though a HTML validator and am quickly reminded that the target attibute is not allowed in the XHTML 1.0 Strict standard.  I do a quick Google Search and the first couple of results bring back the following function to make it compliant:

function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;

This function expects there to be a rel="external" attribute inside the links you want to open in a new window.

That function to me looks scary and ugly.  jQuery to the rescue.

$(document).ready(function(){
    $("a[rel='external']").attr("target","_blank");
});


I was able to shrink all that down to one line of jQuery.  And it's a lot easier to read and more importantly it now makes the document XHTML compliant.

Note: I did notice a huge argument/discussion on if this is really truely standards compliant.  As when you take the generated html code and run that through the validator you still get the same compliance error.  While others say that you are separating the action from the presentation and that satisfies the standard.  Thirdly others say that target was depricated and as such we should never use it because the standards people think we shouldn't open new windows on people.   I don't know whose right or whose wrong but I did find the discussion interesting.  Thoughts?

Book Review: "Smart & Gets Things Done" by Joel Spolsky

I went into Borders the other night to look at books that I wanted to buy.  I wasn't actually going to buy them but just wanted to see what books looked good and would pick them up on Amazon.  Cause let's face it Borders charges full price for it's books Amazon doesn't.

Anyways, I ran across a book by Joel Spolsky called "Smart & Get Things Done".  Now I know of Joel from the Stackoverflow podcast he is doing with Jeff Atwood.  He is the founder of Fog Creek Software that makes the project management software FogBugz. Before that he worked for Microsoft and Juno Online Services.  He was even a paratrooper in the Israeli Defense Forces (an interesting fact that I learned from the book).

The book is pretty small and short. It's 182 pages and I was able to read it cover-to-cover in a few hours in one sitting.  This book is aimed at those who hire technical talent to their organization (aka Programmers).  This affects me as I have recently been tasked with hiring co-ops for 6 month positions at BrandLogic.  I have hired three people so far but I feel that I could learn quite a bit in the interview and selection process.  I actually purchased the book from Borders that day because it was less the $20 ($16.99 at Borders, $11.55 at Amazon) and because I found it to be an easy read and it would be a great help to me going forward.  I think this book would also be great to programmers who are about to head into the job market.  This is a great insight into what hiring managers are looking for.

Joel goes through the whole gamut in hiring a developer.  He starts out by outlining how one measures a great developer, defines where to find great developers, to what makes a developer happy.  He then goes through the selection process with how to sort through the resumes to weeding out candidates with a phone interview. He gets into the details of the interview once you have a candidate that has passed through the selection process before it.  Finally, Joel takes through the hiring process and talks briefly on how to fix suboptimal  teams.

I felt that the book was direct and outlined the issues with hiring developers and talked about how the great developers are not on the market.  Advertising for jobs in traditional job boards (Monster.com, Craigslist, etc.) is only going to bring out the desperate job seekers the great developers are going to seek out the exact job that they want.  Getting resumes from the traditional methods is only going to bring in a lot of noise and lot of resumes that just don't fit.

So where do you find great developers? Joel states three ways to finding great developers: 1. Go to the mountain- Go to conferences where great developers will hang out and start conversations.  WWDC for Apple Devs, PDC for Microsoft Devs, etc. Go to conferences where early adopters might hang out (Ruby on Rails, etc) and talk to them.  2. Internships - This is the method that BrandLogic employs.  Being that 100% of our office is RIT graduates we also feel our duty to help fellow RIT students with achieving their credits to graduate.  Anyways Joel's philosophy is that if you can bring in a student one, two years before they graduate and have them working in a summer internship it's like 6 months of an interview at the end of which you can thank them for their work and send them on their way or give them a offer in which you know exactly how they are going to work for you without anymore risk. And Finally the third way is to Build your own Community.  Basically if you start a blog or are known to people in the blogosphere and have a community following then when it comes down to needing to fill a position and you post a comment on your blog about that you will seem to get a higher quality selection of resumes to pick from.  Of course this is all easier said then done.  The how to build a community and being able to attract people is all hit or miss and Joel alludes to that.  It's not the easiest thing to do but if you can build a community it's a great resource to draw from.

Joel tries to define a developer in terms of how to make them happy and egger to work and thus more productive or be hired.  He stats each  developer needs his own private office.  This will make them more productive.  He goes into the reasons behind all of this.  One point is that developers seem to get into a zone when developing and a private office will help them stay in that zone longer.  Additionally he goes into the physical office, big monitors, Areon chairs, etc.   But the important part and the piece I think we've really tried hard to encompass at BrandLogic is that the personality of developers has to be inline with everyone else.  You can't hire jerks and think that people are going to be happy to work with jerks, even though he states Microsoft does just that.  Ha!

Sorting out the resumes.  Joel lays out his criteria for sorting out the good from the bad.  Don't hire someone based on a resume but eliminate people based on their resume.  Some criteria to look for Passion (look for evidence for passion to work with computers), Pickiness (look at their resume for glaring errors), English (can they communicate effectively in their resume, if not probably aren't going to communicate effectively in a team), Brains (high GPA or some other high honors [I disagree with this as it relates to our selection process at BrandLogic]), Selectivity (Has the applicant been though another selection process meaning did he make it into a school that only accepts 30% of it's applicants or something similar [again at BrandLogic we favor RIT and usually only advertise at RIT that this isn't an issue for us]), Hard-Core (ability to work in hard-core languages like Assembler etc. is seen as being better then working with Java or PHP [again I don't entirely agree with this statement, we look for someone with web programming experience so hard-core languages don't usually add to the experience desired for our needs]) and finally diversity (ability for new people to bring new ideas and ways of thinking to the table [I whole-heartily agree with this statement]).

After you've sorted through the resumes you need to weed through the resumes with a phone interview.  This will save money as you can probably get eliminate many people by just talking to them.  One example Joel gives is that after ten minutes he felt he couldn't stand listening to a candidate any longer. He was able to weed that person out and saved money on not having to bring him out.  The benefits to a phone interview is that you can listen to what someone is saying without visual prejudices getting in the way.

The Interview.  Joel works in NYC so for him he uses the city to entice his potential hires or if they don't work out in the interview at least use that experience to still leave an impression on that person. When they go home and tell their friends how awesome the place was and how awesome the interview was, their friends will apply next summer for that chance for the trip. This all goes back to how to find great developers.  By using your interview as a way to get known virally it's another way to draw them in. 

The interview needs to be a conversation and needs to have the applicant writing some kind of code.  It doesn't matter what language the code is in or if it's right or wrong the purpose is to get the person talking to find out how they think, how are they going to solve a problem.  If they make mistakes see if they catch them, ask them "Are you happy with this code?" and see if they catch their mistake.  Even if they don't make a mistake it'll be great to see if they are confident to say yes it's perfect when you ask them if they are happy with their code. Don't dwell on the technicalities you should base your decision on whether the person is 1. smart and 2. can get things done. 

Joel's company has many developers interview a person and usually has them come back with a HIRE or NO HIRE verdict within 15 minutes of the interview.  One person usually can't decide their fate but once a certain number of people come back with NO HIRE the interview is over and they won't be hired.

The rest of the book goes into how to hire someone and how to deal with a team that might be poisoning the rest of the team.  I'll leave those chapters to you to read.  I think the dealing with a team chapter is just a brief insight into management but Joel gives his recommendation into other books you can pick up to help with project/team management.

I really enjoyed this book. It was easy to read and was clear and to the point.  I have many ideas on how I can update and tweak our interview process at BrandLogic for future hires.

Help support this blog by purchasing this book from my Amazon link.

My first JSON Implementation

I wanted to share my first real use of JSON (JavaScript Object Notation) I created today at work.  The reason I find this exciting is cause I never really understood the use of JSON or how to create and use it.  I found a simple use when I wrote about pulling in twitter updated into my blog using jQuery and the Twitter API using the JSON data, but I didn't create the JSON and was just consumming it.

Well today I was tasked with creating a JavaScript array that could be easily updated by an administrator of a web site and the data would be used to populate a dropdown box.  Yes there are probably better solutions to populate a dropdown box but this was what I was tasked with. 

Now a year ago, I would have probably created an XML file to hold onto this data but a recent blog post from Jeff Atwood over at Coding Horror made me realize that XML is ugly.  From that article JSON seemed like a cleaner choice.

So basically my data needed to hold geographical regions of the US with sections or cities for each region.  Each region/city would have a url associated with it.  So in a separate js file I created this:

{ regions: [
                    {
                        text: "NorthEast",
                        value: "http://www.damnralph.com/northeast",
                        sections: [
                                         {
                                            text: "New York",
                                            value: "http://www.damnralph.com/newyork"
                                         },
                                        {
                                            text: "Boston",
                                            value: "http://www.damnralph.com/boston"
                                         }
                                     ]
                   },
                    {
                        text: "South East",
                        value: "http://www.damnralph.com/southeast",
                        sections: [
                                        {
                                            text: "Orlando",
                                            value: "http://www.damnralph.com/southeast"
                                        }
                                      ]
                    }

                ]

}

So looking at this you can see that it's very clean and easy to read.  We can see that it's two levels deep and we can see which sections are related to which regions at a quick glance.

Now I needed to take this JSON data and consume it and populate a dropdown.  I turn to jQuery to help me out (which was very slow today due to the 1.5 release of the UI plugin).  Here is the code to consume display it:

$(document).ready(function(){
    $.getJSON("sections.js",function(json){
        $.each(json.regions, function(i,ritem){
            $("#select_dropdown").append("<option value=" + ritem.value + ">" + ritem.text + "</option>");
            $.each(ritem.sections, function(i,sitem){
                $("#select_dropdown").append("<option value=" + sitem.value + ">--" + sitem.text + "</option>");
            });
        });
    });
});

This requires a select element on the page with an id of select_dropdown. 

Download the example code JSON_Example-DamnRalph.zip (1.24 KB)

Update: So an interesting problem came up at work today where we needed to validate the JSON because the data we entered had a syntax error (we figure this was the case cause it wasn't working as expected) and so we needed a validator to validate the JSON data.  Unfortunately the way we are consumming the JSON if it tries to parse it and it's not valid then the user doesn't get an error (is this the desired choice in jQuery's getJSON method?) so there is no feedback to what the sytax problem might be.  We found this online JSON Validator that worked to help us identify the syntax errors.

Google I/O 2008 - Day 1

Google IO is a two day developer conference in San Francisco which is held in the Moscone Center.  This year the conference is focusing on technologies like Android (mobile phone OS), Gears (ability to extend the browser to make your site work offline and sync when your online again), Gdata (API to work with Google Services like Calendar, Gmail, etc.) and finally a look into OpenID, OAuth and OpenSocial.

Since this was in San Fran it was fairly heavily covered and TechCrunch has a good write up with live blogging, video demo's (embedded below) and many pics. James Hamilton provides some rough notes from various talks from throughout the day. Update: Andy O posted his blog in the comments which has a well written detailed thoughts of the conference.

Some interesting announcements from the keynote.  MySpace is going to work with Gears.  Gears officially changed it name to Gears dropping Google from the previous name of Google Gears.  The reasoning is that Google wants to strongly urge that Gears is Open Source and is for the community.AOL officially joins OpenSocial.

Here is a video demo of Android:

Finally, Scoble gives an idea of what the hot topics are at the Google Party:

(Photo from flickr user Nancy-. Used undeer the Creative Commons License)

Kings of Code 2008

Last month I first heard of ROFLCon from a coworker who asked for a couple of days off to go to Boston to attend this convention.  Well when he went I was doing some searching on Flickr and watched blogs to see if I could see any pictures of him from the uploaded pics.  Needless to say we didn't see any pictures of him.  I did however see 10 or more pics of John Resig and 100+ images of Jay Maynard (the Tron Guy).  So needless to say we are on the verge of firing our employee for lying to us about attending a convention he obviously didn't attend (I am only joking about firing him...or am I?).

Anyways, the point I am trying to make is that I felt that I in some way experienced the convention through the eyes of everyone that attended.  There were countless photos, video's, blog posts and twitter was huge as well.

So today I heard about the Kings of Code conference that is happening in the Netherlands today.  I only heard about it because John Resig is a speaker.  So I try the normal routine of doing flickr searches and blog searches on Kings of Code.  Sure enough I got enough info from people that posted on it that I felt like I truly experienced a part of it.

First I started out with the conferences web site (which is translated via Google Translate) and I got a sense of who the speakers are and what the schedule is like.

I then went to Flickr to see if there are people there that are posting pics.  This usually tells me if there are people there who are willing to post info on the conference.  Sure enough there are people posting pics.  And there is a picture of John speaking.  So that's cool I get the feel of how big the conference is and what the stage and stuff look like.

Now let's see if I can dig up what the speakers are actually talking about.  I go to Google Blogs (or Technorati) and do a search for Kings of Code and sort by date added.  Jackpot, I stumble on to Gijs van Zon's blog who live blogged the whole thing. He broke it up by per break.  We need to use Google Translate again and the translation isn't 100% perfect but you still get a lot of the information that was presented. Here are his live blogs:

• Javascript Events and NetLog
• W3C and CakePHP
• Yahoo! and Open Source Pitches 
• eBuddy and jQuery - Mozilla 

I found some of the info in these talks useful and I wanted to share.  Thanks to those who posted pics and took the time to live blog the conference for those of us on the other side of the world to enjoy.

Update: With a little more digging I found some live streams of John Resig's talk.





(Photo from flickr user Inferis. Used under Creative Commons license.)

Pulling twitter updates with JSON and jQuery

I wrote a little script tonight to pull in my latest 3 tweets from twitter and display them on my blog.  You can see it in action on the right.

Here is how I did it.  I used the Twitter's API and called my timeline with a JSON call and comsummed it with jQuery and outputted it to a blank div.

       var url = "http://twitter.com/status/user_timeline/RedWolves.json?count=3&callback=?";        $.getJSON(url,         function(data){             $.each(data, function(i, item) {                 $("img#profile").attr("src", item.user["profile_image_url"]);                 $("#tweets ul").append("<li>"                       + item.text.linkify()                       + " <span class='created_at'>"                       + relative_time(item.created_at)                       + " via "                       + item.source                       + "</span></li>");             });         });

Basically what this does is pulls in the data from twitter and makes them available as objects.  I then loop through each item and pull out the data I want and write it out to a unordered list. Update: make sure to look at the complete working example below as it has the two functions this code block is using (linkify and relative_time) to transform the JSON data into how I'd like it to look.

Here is the HTML stub it's going to:

   <div id="tweets">         <img id="profile">         <ul></ul>     </div>

You can download a working example here: twitter-json-jquery.html (1.79 KB)

Update on my jQuery bug

Last month I posted about my problems with the jQuery UI shadow plugin where it wasn't working with absolute positioned divs.

I was looking at the Development jQuery UI group on Google groups this morning and came across this post by Brandon Aaron detailing how he cleaned up the shadow plugin.

I politely mentioned my bug I submitted and he politely told me that the latest version in SVN will now solve my problem.

And it does:

Yay, open source!

Interesting fact, when they release the next version there will now be a UI branch and a FX branch. Shadow was moved and will be in the FX branch.

VS.NET IDE Issue - ASPX gets separated from codebehind

Sometimes in VS.NET 2005 the codebehind for the aspx file show up in the solution explorer not connected.

To Solve this problem:

1. Close Visual Studio
2. Open up the proj file with a text/XML editor.
3. Scroll down till you find the <EmbeddedResource> section.
4. Find around where you need to enter in a new resource in relation to the file you're having issues with.
5. add this for each file except the aspx file:

    <EmbeddedResource Include="Admin\Author\MassUpload\upload.aspx.cs">
        <DependentUpon>upload.aspx</DependentUpon>
    </EmbeddedResource>
    <EmbeddedResource Include="Admin\Author\MassUpload\upload.aspx.resx">
        <DependentUpon>upload.aspx.cs</DependentUpon>
    </EmbeddedResource>

Related Links

Form & Designer File Becoming Separated

Installing Rails on Ubuntu using VMWare Server

I installed Ruby on Rails,I think ;), on a VMWare Server installation of Ubuntu 7.10 using the following tutorials.

To install VMWare Server and Ubuntu: http://cmsproducer.com/Ubuntu-Linux-Windows-VMware-Server

To install Ruby on Rails on Ubuntu: http://paulgoscicki.com/archives/2005/09/ruby-on-rails-on-ubuntu/

Total installation time took me about two hours from the start of downloading Ubuntu to finishing the last step.

Now let's see if I can figure out how to program Ruby on Rails.

My first jQuery bug

Update: Bug has been fixed/closed.

I submitted my first jQuery bug today,  I am pretty sure that it's a bug and not something I am doing wrong, but hey it wouldn't be the first time.

I was trying to use the new jQuery UI to add a drop shadow to a floating DIV. Unfortunately, I was not getting the results I was expecting.

Here is the test HTML I was using to recreate the bug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Shadow Page Test</title>
    <script src="jquery.js" type="text/javascript" language="javascript"></script>
    <script src="jquery.dimensions.js" type="text/javascript" language="javascript"></script>
    <script src="ui.shadow.js" type="text/javascript" language="javascript"></script>
    <style type="text/css">
        #Alert
        {
        	position: absolute;
        	top: 200px;
        	left: 200px;
        	background-color: #ffffff;
        	width: 200px;
        	height: 200px;
        	padding: 10px;
        	font-weight: bold;
        	border: 2px solid #ff0000;
        }
    </style>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#Alert").shadow({ offset: 5, color: "#000000" });
            
        });
    </script>
</head>
<body>

    <div id="Alert">
        This is some Alert text!
    </div>

</body>
</html>

Again I was using the Shadow pluggin from http://ui.jQuery.com but this is what I was getting:

Notice how the three different colored shadow layers line up under the div instead of stacked so it looks like a shadow?

Anyway I sent it into the bug tracker in jQuery, I am ticket number 1853.

Here are the files to recreate this bug. ui.shadow_bug.zip (17.71 KB)

A Visual Explaination of SQL Joins

Jeff Atwood over at Coding Horror explains with visual Venn diagrams how joins work.  Even if you know how joins work it is still nice to see it in visual form.

Click here to see the joins.

Click on your own Google Adsense links without breaking policy

Laurent Kempé writes:

If you are developing a site containing Google Adsense you might know that clicking on your own ad is not allowed.

To be able to test and click on your own ad and still follow Google AdSense Program Policies, just add following to your pages:

<script type="text/javascript">google_adtest = 'on';</script>

Don't forget to remove it on your production server! ;)

That's cool! The biggest worry of any Google Adsense participant is getting dropped from the program for clicking on your own links.

Case sensitivity, SVN and Windows is a recipe for disaster

We are working on a project at work that has four developers working against the SVN repository in Visual Studio.NET 2005.  The other day I had to create a new project in the solution.  I got it all set up and committed the project into the repository using Ankh, great.  I started to close down for the day and in explorer I noticed that there were still files that were flagged that they needed to be committed.  Looking at it, it was the project file that needed to be committed. So I right clicked and committed it with Tortoise.

Yesterday another developer was trying to checkout the repository to his computer and they ran into an error trying to load the project I had committed.  I was roughly told that it was my project file was missing.  They were able to work around it because the project I committed wasn't needed to work on what they needed.  So I took note of it and would look into it when I had a chance.

Fast forward to this morning.  Based on the feedback I had been given I went into explorer to see if the project file was indeed the one that needed to be added to the repository.  But it showed that it was already committed.  Hmm...so I went to the developer and asked him to forward me the error messages he was getting when updating.

Here was ankh's message:

NSvn.Core.SvnClientException:
Failed to add file '[Path to file]\Web.config': object of the same name already exists
at NSvn.Core.Client.Update(String[] paths, Revision revision, Recurse recurse, Boolean ignoreExternals) in d:\tmp\build-2\src\nsvn.core\client.cpp:line 356
at Ankh.Commands.UpdateItem.UpdateRunner.Work(IContext context) in D:\tmp\build-2\src\Ankh\Commands\UpdateItemCommand.cs:line 131
at Ankh.ProgressRunner.Run() in D:\tmp\build-2\src\Ankh\ProgressRunner.cs:line 95


Same file conflict?  That didn't make any sense.  We started speculating.  I run different a different version of Tortoise on my machine then everyone else and thus my client version of Subversion is newer then the server and everyone else.  But I've been running like this for weeks with no problems up to this point.

I have the developer try checking out a project that only I worked on for another client in the past couple of days.  He said he had no problems getting those files.

He then went back and tried to update the original problem project from Tortoise and pasted the errors he got:

Error: In directory '[Directory Path Specified]'
Error: Can't copy '[Path Specified]\.svn\tmp\text-base\web.config.svn-base' to '[Path specified]\web.config.tmp': The system cannot find the file specified.


I went and googled for "Can't copy '': The system cannot find the file specified." the results led me to this explaination.


There are actually 2 different files in the repository whose names differ only in case. This cannot work on a Windows checkout, because the Windows file system is not case-sensitive. It is likely that one of the files got added by mistake, so you need to find out which one, make sure there are no changes committed to the wrong file, then delete it.

I went to our Trac site and looked at the source files and sure enough there was web.config and Web.config files listed.  Going back to Visual Studio.Net and Explorer I noticed that Visual Studio.NET had the Web.config and Explorer had the web.config. 

Here is the solution I came up with, there's probably a better way of doing this and I'd love to hear about them in the comments but this solution did work.  I made a backup of the Web.config file and then I deleted the Web.config in VS.NET and committed my changes. Looking in Trac again I see that I am down to just web.config in the repository.  I figure at this point I can just update and use that single version of web.config but I got the same error as above.

I close Visual Studio and open up Tortoises Repository Browser and I delete web.config. I then delete the whole project folder out of explorer (you have to do this because the svn folders have the web.config still listed in it's cache and you'll get the same errors). 

After the folder had been deleted I reopened Visual Studio.NET and opened the solution.  After I updated the solution from the repository I added my backed up copy of web.config (with the proper case that I am looking for) into the project and committed it.  Everything now had the right case, Visual Studio, Explorer and trac (which is the SVN Repository version). 

I went to the other developers and after they committed all the work they were doing they closed out of Visual Studio. Deleted the problem project folder in Explorer.  Reopened the solution in VS and updated and refreshed the project with a now working copy.

So make sure if you're working with a SVN client in Windows against a Linux based SVN repository that you have the same case throughout or you'll need to fix it.  And so far the only way to fix it is a manual process.

Redesigned BrandLogic.com Launches

We've spent quite sometime recently getting BrandLogic.com ported over to our BrandEnsemble product.  It's pretty exciting to actually have our website using our product.  Before we did it in JSP because it was a great selling feature for some companies that we were multi talented (which we are by the way). 

I think though that we were never really proud of our site before.  But now, I think this is the best version of our website, and we are really proud of going live with it.

It runs on ASP.NET 1.1 and SQL Server 2000.  It runs on our BrandLogic BrandEnsemble Content Management System. 

Here are some screen shots of the site (click to enlarge).

  

And some of our admin tools which our CEO states are "the best admin tools I have ever seen."

     

These shots show how our pages can be edited inline so you get a feel for what the page will look like before you're ready to publish, version control history of a page with the ability to revert a page back to a previous version and how a typical view of a group (our terminology of a directory) looks within the system.

BrandEnsemble has been used in many of our clients sites as well:

• St. John's University (Case study)
• Red Storm Sports (St. John's Athletics Web site)
• Image Manager (Case study)
  
• CareerSpace (Case study)
• Rockwell Collins (Intranet Brand Identity site)
• Bausch & Lomb (Intranet Brand Identity site)
• Texaco (Intranet Brand Identity site)
• Wyeth (Intranet Brand Identity site)

Of course BrandEnsemble is only a piece of the overall branding puzzle that BrandLogic services offer to clients.  BrandEnsemble is what I am close to as I have contributed to it's development over these past eight years.

Here are some of BrandLogics other services we offer:

• Brand Strategy/Research
• Brand Design
• Brand Implementation
• Brand Management

And who we did it for.

Feel free to contact BrandLogic for your branding needs (tell them that Damn Ralph sent you).

What does the future hold?

Where is the future heading with web programming/technologies?  I have considered myself Microsoft programmer since I graduated college.  I learned Classic ASP on the job, eventually I learned ASP.NET with VB.NET first then realized the power of C#.  I love C# I really do.  It makes programming a complex web site simple and straight forward.

We at BrandLogic would of never been able to program a complete CMS system for St. John's University in 3 weeks if it had not been for the robust framework that .NET offers.  Hell I am still to this day maintaining that code.

We've taken that code base and improved upon it and created the BrandEnsemble suite out of it.  Many clients are enjoying the benefits of the ease of programming C# provided us to be able to make a robust versioned CMS system.

So why do I feel uneasy?  Why do I feel like I am going down the wrong path?

It might be because ASP.NET 2.0 and Visual Studio.NET 2005 doesn't excite me like VS.NET 2003 did.  It doesn't excite me like the promise of what Ruby on Rails can provide.

But I think the most important part is it doesn't wow me in the wallet.  As a freelance web developer paying $1000 for a copy of Visual Studio.NET is a huge chunk of my annual freelance salary.  So upgrading to the next release isn't on the top of my lists of things to do right away.  Plus there is the cost of SQL Server, Windows, etc. etc. Basically I need a MSDN subscription.  What are they up to now?  $3000?  I stopped caring, I guess, the last time I looked at the new MSDN offerings and I thought I needed a lawyer to explain it to me.

So that brings me back to my original question: Where is the future?  Lately, I have been seriously thinking that the future, as is the present, is in open source software and the technologies that support it, programming languages like PHP and Ruby on Rails (there is a reason why they are so popular now).  If you own a PC (and if you don't save a paycheck and go out and get a barebones computer) everything else is free, free as in beer. 

So you got an idea for a cool web site? Get a computer, download a linux distro for your operating system, install the packages you need, get programming IDE's for PHP or Ruby free off of sites like SourceForge.  Get a Enterprise level database like MySql or Postgres free again by downloading it off the internet.  Download TheGimp for image processing.  Bam! You're up and running on the simple cost of the hardware.  And best of all your legal too!  Plus there is a community of starving programmer that are on the web willing to help you out.

But PHP is Old

Yeah, PHP has been around a long long time, but it's robust and again it's free.  And as I've highlighted before, Chris Prillio nailed it on the head once when he was stating the reasons why he was using PHP on his CMS Publishing project: PHP is prevailant on most if not all hosts that are out there right now.  So make a PHP site and chances are the majority of webmasters can install your software on their site.   Try to do that with an ASP.NET site with a SQL Server 2000 backend.

If you look around Silicon Valley now most Web 2.0 companies are using LAMP  (Linux + Apache + MySQL + PHP) partly due to the low cost in a market where the revenue stream is still up in the air for most.  But they need the appeal of the masses to get the word out.

Scoble said something tonight that got me to write this post tonight, even though I been thinking it for the past couple of weeks.  He said, "LAMP is sure getting traction — I’ve stopped asking entrepreneurs what infrastructure they are using since the answer was so consistently LAMP."

A couple of days ago I saw a sponsor on TechCrunch post job listings for web developers/designers and it got me thinking if I all of a sudden found myself out in the mix again fighting for a job, I think my resume would fall to the bottom of the pile for most places that I think I would find fun to work at (although I have a family, which means the fun places are too risky for me).  My resume is very impressive I think.  My strengths are meeting the needs of our clients in a productive and efficient manner, providing the best customer service and experience with our clients, maintaining a long lasting and trusting relationship with our clients (in the 8 years I've worked at BrandLogic I can probably count the number of clients I've worked with on my one hand, not because we don't get clients but because I help maintain the longest lasting clients.  Which I think is a testiment of the quality of service I as well as the rest of the team provide.)  And last but not least are my Microsoft skills.  Which in my opinion is a technology that is becoming more and more obsolete.

I guess I'll add a new resolution to the New Year.  Learn Web 2.0 technologies!

Sending HTML E-Mails

I spent most of this week figuring out how to send out a HTML e-mail for our company.  I started thinking I could just craft a HTML page and then send it out.  Well that's not the case at all.  GMail was a huge pain in the butt.  It was striping tags left and right.

I found this page from One NorthWest with the do's and don'ts of HTML E-mail and CSS.

The Don'ts

1. Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.
2. Don't use javascript in an email newsletter. Ever. There's no better way to have your newsletter marked as spam.
3. Don't use the <body> or <html> tag. Most email services will ignore them. You can try putting your whole newsletter inside a <div> and apply inline styles to it. Results may vary.

The Do's

1. Use tables. Lots of them. You're welcome to try <div> tags for positioning and layout, but my research shows that tables are more consistently supported. C'mon now. Get over your table-phobia.

2. Use inline styles liberally in tables. In fact, you'll find you can get the best millage out of inline styles in <td> tags. That way you are setting up little style regions within each table. Think of these inline styles as miniture style sheets. This allows non-technical users to swap content in and out of pre-formatted cells in a modular fashion.
   

3. Define the background color in a td cell or table tag with bgcolor=, not the CSS style. This works in all email services I tested.

4. Test your newsletter by sending to yourself or colleagues. This will give you the chance to catch any problems before your whole subscriber list does!

Images

1. Define background images using background= instead of the inline background-image call. Gmail, among others, will ignore any url() attribute in an inline style. Keep in mind, though that if the background image is ignored, the default color is going to be white. Sooooo your white on black text will disappear! Don't do it! Stick with text colors that are visible against a white background.
   

2. Don’t use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire newsletter is graphical, all your recipients are going to see is a lot of broken images.

3. Use alt text for all images.
   

4. Declare BOTH height AND width parameters for images. Poor old Outlook Web Access especially needs this for your table layout to display properly.

Today's Big News: Sun to release Java under the GPLv2

The internet is abuzz today about Sun's announcement to release Java to the open source community.  So what does this mean?  Is it an admission from Sun that Java is a dying technology and this is a ploy to get developers re-enthused about working with Java again?

"Sun is hoping that this step will attract more developers, as well as extend the lifespan of Java." -Slashdot.

It'll be interesting to see how this works out for them as this may force other companies like Microsoft to open up more of their source in an attempt to drive participation from the developer community.  Isn't that why Ruby on Rails is the hot language?  Will we see Java on Rails in the near future? 

Related Links:

Sun Open Sources Java Under GPL (Slashdot)
Sun to Opensource Java and GPL it (Scoble)
Sun to Open-Source Java Under GPL v2 (digg)

A Slick CSS Solution to Image Rollovers

Here is a simple and elegant solution to doing image rollovers using one image and css to position the image to the rollover state.

New Dialog box in VS.NET 2003

When I load up a web project in VS.NET now that I have Subversion installed I get this dialog box that says:

Refreshing the project failed. Unable to retrieve folder information from the server.

Thankfully this isn't a real problem just a nuisance as after you click ok (the only choice given) the project loads just fine.

So what's going on?

Well a bug is happening.  VS.NET refuses to read/load directory names that start with a "." and guess what new directory in my web project now starts with a "."?  .svn

I do not have VS.NET SP1 installed yet...I'll install that tomorrow and let you know if it contains a fix for this particular issue.  But digging around the net Microsoft has known about this issue back in 2003 when people first started to complain about it.

Update (1/30/2007): I see alot of people finding this post via google having the same error above.  I found a better way around this.  So instead of starting a new post I'll just add it here.

You can set up Subversion to use _svn instrad of .svn here's how, if you set an environment path variable SVN_ASP_DOT_NET_HACK to true and then restart your computer (you must restart to have tools like Tortoise and Ankh recognize the _svn folder).  You will need to recheck out your repository and then VS.NET 2003 will work as expected with no error messages.   The problem lies in VS.NET 2003 only 2005 will read .svn folders fine.  But the good thing is 2005 will also run _svn folders with no problems. 

So rule of thumb if your on windows and using Subversion with any version of VS.NET just add the path variable.  Also very important...make sure you commit everything before you do the variable cause you won't be able to after it's added, you'll have to undo the variable and commit and then add the variable back.

SVN Source Control in Windows

At work we started exploring using SVN for source control with Visual Studio as Visual Source Safe is still living in 1999 and Visual Studio 2005 doesn't seem to be anymore promising (Jeff Atwood recommends "Anything but SourceSafe").  AnkhSVN was made to integrate with Visual Studio but wasn't the easiest to set-up...Scott Hanselman says there is a new version out but it's still in Release Candidate and requires you to upgrade to a release candidate version of subversion too.

Anyway with SVN being open source I was looking at setting up a version control solution for my personal projects.

Lifehacker recently ran a two part series (part 1, part 2) in it's weekly Hack Attack column about setting up Subversion and TortoiseSVN for Windows.  It also includes an optional Apache install to access files from other computers.

I followed the Lifehacker articles and installed Subversion and TortoiseSVN and created a couple of repositories for projects I am working on. I elected to skip the Apache install on my machine as I only develop from my laptop.

I'll tell you that it already saved my butt once this weekend...in a rare act of stupidity (OK it really wasn't that rare) I copied files into the wrong directory...it only overwrote one file.  But with version control I just right clicked on the file and hit revert and pulled up the original file I overwrote...without source control I would of had to recreate that file.

I still need to figure out a backup solution that is easy and unobtrusive.  I am thinking about one of those one-click backup external hard-drives.  Maybe for my birthday ;)

Suckerfish Menu with jQuery

Me on jQuery's blog

I think we all have heard of or used Suckerfish CSS Menu's before, written by Pattrick Griffiths and Dan Webb for A List Apart. If not, it's a cool way to make drop down menu's using standards based semantic HTML and CSS. Unfortunately, with IE still dominating the browser marketplace we still need a way to handle the hover state in IE. To do that we need a little bit of JavaScript to attach mouseover and mouseout events to HTML elements.

Myles Angell decided to rewrite Suckerfish's JavaScript with jQuery. Myles uses jQuery's Basic Effects to show and hide the submenus and jQuery's BaseStyle Base module methods to highlight the current moused over menu item. Pretty slick.

Check out some of Myles other experiments with jQuery. For the jQuery beginner these are good examples to start out with. The treeview is another experiment that caught my eye.

I am now blogging for jQuery

Check out my first blog on jquery.com about Aptana IDE now including jQuery as a imported JavaScript Library.

How to run Ubuntu and Kbuntu in VMware Player

I had an itch today to run Ubuntu.  I actually wanted to see how Konqueror compared to Safari in rendering as I needed a way to test since I don't own a Mac. Since Safari is a descendent of Konqueror it makes sense that they render the same for the most part.

I started by downloading and installing the free VMware Player.

I then downloaded the Ubuntu iso (disk image) from Ubuntu's site.  I had the best luck with the torrent files.  I was able to download the 696mb iso in 20 minutes.  Since I'll be touching on it later you can also get the Kbuntu iso from the Kbuntu site.

Now that I have VMware and the iso's I need to make a Virtual Hard Disk.  I found directions online here. 

First I needed to download and install QEMU because you need the qemu-image.exe to emulate/create the virtual hard disk.

After you installed QEMU open a command window and change directories to c:\program files\QEMU or whatever the directory name you put the files.  Once you are in the directory run the following command which will allowcate 3GB for a Ubuntu virtual hard drive.

qemu-img.exe create -f vmdk Ubuntu.vmdk 3G Formating 'Ubuntu.vmdk', fmt=vmdk, size=3097152 kB



For Kbuntu:

qemu-img.exe create -f vmdk Kbuntu.vmdk 3G Formating 'Kbuntu.vmdk', fmt=vmdk, size=3097152 kB



This will create a file Ubuntu.vmdk or Kbuntu.vmdk in the QEMU folder.

Create a folder called Ubuntu or Kbuntu in My Documents > My Virtual Machines and move the vmdk file you just created in there. Also copy the iso file to this folder. Finally, create a blank text file and name it either Ubuntu.vmx or Kbuntu.vmx which are VMware Configuration files.

In the Ubunti.vmx files paste this:

config.version = "8"
virtualHW.version = "3"
ide0:0.present = "TRUE"
ide0:0.filename = "Ubuntu.vmdk"
memsize = "256"
MemAllowAutoScaleDown = "FALSE"
ide1:0.present = "TRUE"

#ide1:0.fileName = "auto detect"
#ide1:0.deviceType = "cdrom-raw"

ide1:0.fileName = "ubuntu-6.06-desktop-i386.iso"
ide1:0.deviceType = "cdrom-image"

ide1:0.autodetect = "TRUE"
floppy0.present = "FALSE"
ethernet0.present = "TRUE"
usb.present = "TRUE"
sound.present = "TRUE"
sound.virtualDev = "es1371"
displayName = "Ubuntu"
guestOS = "Ubuntu"
nvram = "Ubuntu.nvram"
MemTrimRate = "-1"

ide0:0.redo = ""
ethernet0.addressType = "generated"
uuid.location = "56 4d 5c cc 3d 4a 43 29-55 89 5c 28 1e 7e 06 58"
uuid.bios = "56 4d 5c cc 3d 4a 43 29-55 89 5c 28 1e 7e 06 58"
ethernet0.generatedAddress = "00:0c:29:7e:06:58"
ethernet0.generatedAddressOffset = "0"

tools.syncTime = "TRUE"
ide1:0.startConnected = "TRUE"

uuid.action = "create"

checkpoint.vmState = ""

For Kbuntu.vmx paste this:

config.version = "8"
virtualHW.version = "3"
ide0:0.present = "TRUE"
ide0:0.filename = "Kbuntu.vmdk"
memsize = "256"
MemAllowAutoScaleDown = "FALSE"
ide1:0.present = "TRUE"

#ide1:0.fileName = "auto detect"
#ide1:0.deviceType = "cdrom-raw"

ide1:0.fileName = "kubuntu-6.06-desktop-i386.iso"
ide1:0.deviceType = "cdrom-image"

ide1:0.autodetect = "TRUE"
floppy0.present = "FALSE"
ethernet0.present = "TRUE"
usb.present = "TRUE"
sound.present = "TRUE"
sound.virtualDev = "es1371"
displayName = "Kbuntu"
guestOS = "ubuntu"
nvram = "Kbuntu.nvram"
MemTrimRate = "-1"

ide0:0.redo = ""
ethernet0.addressType = "generated"
uuid.location = "56 4d cf a0 97 ef 95 ad-c2 6a 6e 62 5b f2 78 ff"
uuid.bios = "56 4d cf a0 97 ef 95 ad-c2 6a 6e 62 5b f2 78 ff"
ethernet0.generatedAddress = "00:0c:29:f2:78:ff"
ethernet0.generatedAddressOffset = "0"

tools.syncTime = "TRUE"
ide1:0.startConnected = "TRUE"

uuid.action = "create"

checkpoint.vmState = ""

Save the file and close it.  All you have to do now is double-click the vmx file and it will launch VMware Player and boot with the iso image as the Boot CD (you don't need to even burn a CD).

If you decide to install Ubuntu, at the end of the installation you will be prompted to reboot, before the system starts up go in and modify the vmx configuration file so that it boots off the virtual drive instead of the iso by modifying these four lines

Find:

#ide1:0.fileName = "auto detect"
#ide1:0.deviceType = "cdrom-raw"

ide1:0.fileName = "ubuntu-6.06-desktop-i386.iso"
ide1:0.deviceType = "cdrom-image"

Replace with:

ide1:0.fileName = "auto detect"
ide1:0.deviceType = "cdrom-raw"

#ide1:0.fileName = "ubuntu-6.06-desktop-i386.iso"
#ide1:0.deviceType = "cdrom-image"

The great thing about Ubuntu is that it runs live right off the CD you don't even need to install it if you don't want to.  The differences between Ubuntu and Kbuntu is Ubuntu uses Gnome as it's Desktop and Kbuntu uses KDE.  Like I said at the beginning I wanted to test sites against Konqueror and with Konqueror being a KDE application it was installed by default in Kbuntu and ran perfectly right off the live CD without installation.  It can run off Ubuntu but you'll need to install Ubuntu then install Konqueror from the Synaptics Package Manager.

Ruby on Rails Tutorials

After I asked about tutorials on Ruby on Rails I went searching for a few. Here are about 30 tutorials on Ruby on Rails.

What's hot now?

Obviously Web 2.0 apps are hot and all the rage.  I posted some examples of popular and up and coming apps.

But what I think is surprising to me is that Ruby and Ruby on Rails is the hottest programming language out there right now.

myBillq.com was done in Ruby on Rails.  It was done for two reasons. One, it gave the developers and the company something to program to show off their talents plus gave them experience with writing an application in Ruby on Rails.

OK it seems like it might make web 2.0 easier to program? Is that a fair statement?  What's a good resource to start understanding Ruby?

jQuery

I used to work with John Resig and Julia West before they moved on to become big wigs on their own.  They are on their way too, making waves in the JavaScript community with a new way to work with Javascript.  They are in the mist of developing a javascript API called jQuery that makes a developers life easier once you understand how it works.