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?

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.

Gary Vaynerchuk @ Tech Cocktail Chicago

TECH cocktail, a community building startup founded in May 2006 by Frank Gruber and Eric Olson, offers events and community-powered projects open to bloggers, technology enthusiasts, entrepreneurs & professionals interested in technology in under served technology communities.

Today, Loyola University hosted a bunch of speakers the one I was most interested in hearing was Gary Vaynerchuk of Wine Library TV.

I found a short summary of the talk from Tim Courtney:

Gary Vaynerchuk said definitively on community, “It’s irrelevant whether you’re a traditional business or a new media business, it’s all about the community. The community is the entire thing you should care about 24/7/365. What you need to become is a rat. Real, Authentic, and Transparent. Because you can’t hide anymore, everything you do is documented.” The core of his message is that people, marketers, companies, everyone — needs to be real with their audience or they will be exposed and leave open a vulnerability for smaller players who are authentic to come up and usurp your leadership position. My thoughts: Your character is who you are when no one is watching. Gary observes that the times when “no one is watching” are getting fewer and fewer as people adopt social tools. This doesn’t make character any more important, but your actions are becoming far more public so character flaws and inauthenticity is now more exposed.

But more importantly qik user bryanthatcher streamed it for us.  The sound quality is poor but you can still make out most of what he is saying.



(image from twitpic user timcourtney)

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)

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.

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.

Uninstalling Cisco VPN client kills internet access

Symptoms

On starting the computer the computers internet access will work normally for a short period of time. Then access to normal websites will be down. Access to https sites, internet application such as instant messaging and e-mail are still accessible.

Cause

Uninstalling Cisco VPN 4.0 client doesn't fully uninstall hidden Zone Alarm Firewall which causes a block in port 80 on the computer.

Resolution

Cisco VPN client version 4.0 includes firewall functionality from Zone Labs Inc. It is possible that a failed Zone Labs uninstall left an incorrect value in the systems registry and must be changed. To resolve the problem follow these steps.

Caution This procedure contains information about editing the registry. Before you edit the registry, make sure you understand how to restore it if a problem occurs.

Step 1 Restart the computer and when your computer screen displays the startup message like "Starting Windows..." and a progress bar at the bottom of the screen, press the F8 key on the keyboard. This should display an advanced options screen.

Step 2 At the advanced options screen select "Safe Mode" as a startup method.

Step 3 If prompted, login to the PC once it is booted (you must have Administrator rights to login in Safe Mode).

Step 4 Click Start > Run and type "regedit" in the Open: box (without the quotes) and click OK. This launches the Windows registry editor.

Step 5 In the registry editor, browse to the following path: HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\vsdatant and select the Start parameter in the right pane.

Step 6 Right-click Start and select Modify. In the Value data: field enter the number 3.

Step 7 Click OK and exit the registry editor.

Step 8 Restart the computer and boot normally; the problem should be resolved.

Related Links

Release Notes for VPN Client, Release 4.0.1

Author notes

I spent a considerate amount of time looking for a resolution to this problem..I post it up here in hopes that it helps someone else a little easier.  If it helps you please post a comment to let me know.

Brakes and Rotors

My brakes started grinding this week so I needed to get that fixed...I bought the parts Brake pads and rotors and went over to my cousins house and he helped my put them on....I swear to god it was so easy...I am going to do it myself next time.

I found instructions online for my type of brakes so I can do it next time.

http://www.2carpros.com/how_to/how_to_replace_brakes.htm

tools I'll need to get the job done:

14 mm socket
18 mm socket
C-Clamp
Mallet or hammer (in case the bolts are tight)
Jack
Brake pads
Rotors (if worn)