So lets get on with it

Take a look at the snippet below.

$("a[href^='http:'], a[href^='https:']").not("[href*='"+document.domain+"']").attr('target','_blank');

As you can see can see it’s one single line of code, but lets explain what it does exactly.

First you are selecting any href attribute that starts with http: or https: using the attribute starts with selector ^=. Next we make sure that the domain is not our site domain using the .not method. Inside the not method we check if the href contains our domain using the  attribute contains selector *= and document.domain property. Finally if the domain is not the sites domain then an attribute of target blank is added to the link, which looks like target=”_blank”.

This is a basic snippet that you could easily add to by checking if the link is a PDF, or adding a CSS class for displaying external link or PDF icons.

Some of you may be jumping up and down right now saying but “target=”_blank” is not valid html”. Well this is true and it isn’t. As of HTML 5, target=”_blank” is no longer deprecated since it proved to be a valuable attribute.

If you enjoyed this post, you might also be interesting in my article on Doing JavaScript pop-up windows the right way.

Probably the first thing that comes to people’s mind when they think of a device like this is the Apple TV. It’s actually cheaper than the boxee box, smaller, and of course it’s an Apple product. Those would normally be pretty compelling reasons for me to purchase one, but remember one of my criteria was a box that was not locked down, and that is a major point the Apple TV does not meet. Yes it can be jailbroken, but that’s not something I’m interested in nor do I have the time. I also wanted my significant other to use the device with ease and without worry.

Why the Boxee Box rocks

It does everything I could possibly want it to do, right out of the box. Is it as polished as an apple product? Yes and no, the actual box is top notch, the software is a bit sticky at times, but it really does do almost everything. Boxee delivers a very polished experience when it can, but remember, it lets you get content from virtually anywhere, which can mean a less than ideal experience at times. This is not a limitation of the Boxee software, but a limitation of the providers you connect too and a strength for Boxee.

If you want to watch the history channel, you can, is it as polished as the Ted Talks or Netflix apps? No it’s not, you have to navigate around a website, click a full screen button and occasionally have your video time out when paused too long, but the point is, you can watch the History Channel! or any other channel on the web and Boxee isn’t going to stop you. That’s the reason I love this device, I can do whatever I want with it and believe me, there is no shortages of super polished apps either. The Apple TV gives a flawless experience by locking you down and sacrificing where you can get content from and what you can and cannot do.

The remote

This device comes with a slim controller with a full qwerty keyboard on the back. It’s similar to the Apple TV remote with the exception of the keyboard. Typing out your searches with an on screen keyboard and arrow buttons is not fun, you can type much faster with the built in mini keyboard.

What can’t it do?

The Boxee Box also plays every format you could imagine, even MKV which many media boxes do not support. It also can stream content from a desktop computer, including your itunes library. It also takes media from USB sticks or SD Cards and plays them liquid smooth.

Did I mention channels and apps? It’s loaded with web channels that come in the form of apps, way to many to mention, and if a channel is not there you can simply load up the web browser app and navigate to the videos you want to see. You will find everything from indie channels, radio channels, popular websites to the big pay channels like Netflix and Vudu. The Boxee also comes with parental controls enabled, but like everything Boxee, it’s your choice to enable or disable it.

The Boxee Box will be the most original looking media device in your cabinet

I have to admit, the look of the Boxee Box also attracted me, it’s not everyone’s cup of tea, but I think it’s extremely original. It looks like a melting box next to my TV and the logo glows green. A five start product in my opinion and one of my most used tech gadgets. I also canceled my ridiculously priced cable services ages ago, so the Boxee Box has brought back all the channels I’ve missed.

In some of these crippled mobile sites there is no option to escape the ugly mobile version. Sometimes the “view full website” link doesn’t even work! Look at the screenshot below (sorry to pick on TUAW, it’s just one of many examples I could have chosen), it doesn’t get much uglier than this. At the time of posting the “Full TUAW” link did not work either, so if you were on an iPhone, you were are stuck with this. You might as well punch me in the face and serve me the RSS feed.

Here are some do’s and don’ts for mobile websites

Do…

• Give me an awesome mobile experience if time and budget allows.
• Allow me to view your full site if I so choose.
• Serve me your full site when time and budget does not allow for a mobile experience worth viewing.
• Make the experience better than the desktop version would be on a mobile device.

I do understand giving people a more light weight experience on an iPhone, but if you are going to give me a mobile experience, give me something to remember and give me the option to view your full site. The iPad however is a different story, if you are going to deliver a mobile experience on my iPad it better blow me away, because most full websites look and work just fine as is. Why would I want to see an ugly almost plain text feed on my iPhone or iPad or any other mobile device? Many hand held devices are powered by Webkit, arguably one of the best browser engines available. I bought an iPad for the full web experience, not a diluted boring version.

Why would someone want your full site?

When you give a stripped down version of your site you are making a lot of assumptions. Case in point, I am a daily visitor of a large news site that by default serves me a fairly bland slimmed down version of their site on both the iPad and iPhone and I’m assuming it does the same on Android devices. One of the main reasons I come to this site is to read the articles and see the comments and social interaction. In the mobile version there are no comments. Don’t assume your mobile users won’t want something that is on your full site. If you really believe it is not important, maybe it shouldn’t be on your site at all.

This is just one example, but often mobile sites are dry uninspired plain text feeds with little thought to the design or presentation of content. If users want this they can subscribe to your RSS feed.

On to the good stuff, there are many fantastic mobile sites

It’s not all bad news in the mobile space, there are some incredible mobile websites out there. Below are just two examples, but there’s plenty more.

Airbnb

Airbnb not only looks great, but it has everything that the full version has, and it’s delivered in a way that makes it easier to use than the desktop version is on a mobile device.

Tim Hortons

Tim Hortons breaks down it’s site in a compelling way, the colours are vivid and the interface is intuitive. It’s a site you draws you in and makes you want to explore.

Another thing you will notice about both of these examples is that they both provide a link back to the full site. Want to see more? Check out Mobile Awesomeness for a huge collection of great mobile designs.

What about responsive design (AKA media queries)

Don’t forget about responsive design, it’s a great way to serve many screen specific layouts using your same code base. In fact, responsive design may be the best choice as we get more and more devices with many screen sizes. With time it will become harder to make device specific websites because we will have so many to contend with. Responsive design brings an elegant solution to this dilemma that is more practical than building many device specific versions or even apps of your site.

It’s okay to show your full site

Not everyone has the time or budget to make an awesome mobile website, myself included. If you can’t deliver a worthwhile mobile experience theres nothing wrong with that, but don’t settle for mediocrity, just serve your full site and offer an RSS feed, today’s devices were designed from the start to be able to easily pinch, zoom and navigate traditional full sized sites, your visitors will get by just fine.

Here is an example: sorry to pick on Questrade, it’s only one of the many culprits out there. In particular, notice the green bullets with a white background box. Obviously the assumption here was that this email will be displayed on a solid white background, bad assumption, as you can see, that’s not the case in Gmail. The top gradient also looks a bit odd as it fades from grey to solid white.

Don’t assume your background will be white, it will turn your otherwise great looking email into a less professional looking communication. Luckily by now the fix for this should be quite obvious, although I still see emails coming through without it, as illustrated above. This tip is more about awareness, since it’s really easy to forget something you can’t see in most email clients. A lot of newsletters suffer from this and the fix is so incredibly simple and it’s a best practice anyway to set the background colour.

You can use style=”background:#fff” on your main table. Remember to add this inline style to your top level table as Gmail currently strips out embedded styles. This will instantly make your email look better, although depending on the design it might feel cramped at the edges. When designing new email newsletters or refactoring your current ones, adding a bit of padding around the most outer table will fix this. I recommend doing this with multiple table cells/rows and spacer gifs as I am paranoid about my emails rendering exactly how I want in all email clients. If time is tight, you can probably get away with CSS padding in most clients though.

Open the finder and go to:

Applications/MAMP/conf/apache/

The file you want to edit is httpd.conf, if you are not using MAMP you can search for this file and then follow the directions below.

Open the httpd.conf in the editor of your choice. Once you have it open search for “Listen 80“. Paste the example below into your config being careful to either paste over Listen 80 or do not copy the Listen 80 part from the example below. These directions are assuming a default MAMP httpd.conf. Replace username with your own username.

Listen 80

NameVirtualHost *
<VirtualHost *>
ServerName dev.localhost
DocumentRoot /Users/username/Sites/dev
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/dev>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

<VirtualHost *>
ServerName coolsite
DocumentRoot /Users/username/Sites/coolsite
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/coolsite>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

<VirtualHost *>
ServerName localhost
DocumentRoot /Users/username/Sites/
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

So what we have here is three different server names and paths. You can use subdomains like dev.localhost or you can even use a full name like coolsite. The reason we specify localhost and point it to the root of the sites folder is so localhost still works properly when you type it in the browser.

There is one step left. Open the terminal from your Applications/Utilities directory in the finder or search for it in spotlight. You will need to edit your hosts file, I use the VI editor, but if you haven’t used VI before, I recommend using Nano instead.

Type one of the following into the terminal.

$ sudo vi /private/etc/hosts

or

$ sudo nano /private/etc/hosts

The sudo will prompt you for your password, enter it and the file should open. If you don’t use sudo and enter your password you will not be able to save your changes. You should now see your host file, look for the line 127.0.0.1 localhost. Enter the info below being careful not to change anything else in your hosts file, it may be empty or it could have something other programs or people have put in there.

127.0.0.1 localhost
127.0.0.1 dev.localhost
127.0.0.1 coolsite

As you can see these correspond with the names you entered in the httpd.conf file. Now you will need to stop and start your server via MAMP or command line. Once you have stopped and started the MAMP stack, your new server names should load when typed into the browser. This is a great way for testing your sites and in some cases may be the only way to test them. You can use any names you wish and setup as many server names as you wish.

The problem

$jQuery('#toggle-test').toggle(function() {
  $jQuery(this).stop(true, true).animate({width : 500});
}, function() {
  $jQuery(this).stop(true, true).animate({width : 300});
});

As you can see in the example above, when clicking the link the toggle animation is triggered instead of the link destination.

The solution

$jQuery('#toggle-test2').toggle(function() {
  $jQuery("a").click(function(e) {
    e.stopPropagation();
  });
  $jQuery(this).stop(true, true).animate({width : 500});
}, function() {
  $jQuery(this).stop(true, true).animate({width : 300});
});

The difference with the second example is that we have added a click event within the toggle and added the stopPropagation() method. This “Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event” thus allowing the link to take it’s normal course of action.

A more practical use of this would be clickable slide out boxes with links embedded or even a close button on a toggleable element. These are just some of the uses for stopPropagation(), so keep it handy in your arsenal of jQuery tools.

Fancybox

Like most web challenges, the fix is quite simple, but almost every example I found always seemed to be missing one important piece of the puzzle.

$("#lightbox").fancybox({
  'hideOnContentClick' : true,
  'width' : 500,
  'type' : 'iframe',
  'padding' : 35,
  'onComplete' : function() {
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
      $('#fancybox-content').height($(this).contents().find('body').height()+30);
    });
  }
});

In the above example we have given our lightbox an id of #lightbox. We initialize the plugin with some options and give it a type option of iframe. Now you can create your separate HTML file for the lightbox and link to it form your main page and give the link href an id of #fancy-box. If you would like to use multiple lightboxes on one page you could use a class instead of an id.

The iframe height magic happens when the onComplete event is triggered. Here you can set up a call call jQuery’s load function which will then be used to call the height function after the iframe has loaded—you cannot get the height until the frame source has fully loaded. The id of #fancybox-content is the name of the div that Fancybox wraps the iframe in. We then set the height of that div by checking the contents of the iframe and using jQuery’s find method to locate the body tag and then get the height. I found that the height was always off by about 30 pixels, thus the +30. This may be due to paddings and margins within the loaded HTML file, but you can fiddle around with it until you get the right offset. You should now have an iframed lightbox that auto sizes its height.

This quick tutorial will not go into the details of how to use the Google maps API, for that I refer you to the starter tutorial which is missing the fix needed to make the maps display properly in the iPad. This issue also affects the iPhone and should fix any problems there too. After thinking it was a CSS issue and fiddling with the CSS for over an hour I stumbled across more metadata options. In the Google example linked above, it shows a metadata name attribute of  “viewport” with content attribute values of “initial-scale=1.0, user-scalable=no”. You need a bit more than this for the iPad and iPhone. See below.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

The most important value is maximum-scale=1.0, width=device-width is just in there for good measure.  Basically this stops Safari from scaling or zooming your viewport when the orientation is changed. One note, sometimes the Safari browser won’t forget the way it was displaying before you made your changes, a quick stop in options -> Safari and you will find a clear cache option.

ThemePassion is all about premium themes of course, but more precisely, themes for content management systems, most of which are Open Source CMS projects. Right now there are well over 100 theme reviews on WordPress, Drupal, Joomla!, Magento, ExpressionEngine, OpenCart, phpBB, standalones and Photoshop. It’s taken about 3 months to compile all these, and the list keeps growing daily. So far the site has been a success and I’ve grown my readership faster than with any site in the past. Theme builders love to have more exposure, and the great thing about ThemePassion is that I only write positive reviews — I don’t believe there would be any value in people wasting time on themes that look ugly. These are all themes that I personally think look fantastic and in some cases really raise the bar.

ThemePassion itself is based on a template from Elegant Themes, a fantastic theme provider and probably the best value on the market at the time of writing. This was a hard decision for me as I have always built the themes myself for every iteration of this blog and I am quite capable of building and designing my own WordPress template. The issue was time, I wanted to get started, and really what better place for a premium theme than on a site about premium themes. The site is a grid layout so you can easily glance over all the thumbnailed screenshots for each review. The reviews themselves are short, but every one is written by yours truly.

The review process has really exposed me to a variety of designs in a very short time. In the future I plan on releasing some of my own themes through ThemePassion. Viewing beautiful themes every day really lights a fire in you. I would also like to provide more tutorials here on this site with whatever valuable lessons I learn along the way.  So if you are into themes or great design, I invite you to peruse ThemePassion, and if you have any ideas or advice, feel free to get in contact with me.

It’s called the IE upgrade warning and it’s pretty slick and super easy to set up. All you need to do is download the zip file from Google’s IE upgrade warning page. Extract and upload the included goodies to your server and add this snippet into the page.

<!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]-->

You will also need to upgrade the paths to point to your JavaScript directory. Once you do so, you should get a pretty little box like the one shown below when ancient IE browsers arrive at your site.

I know a lot of us could probably think of more colourful things to say in this message, but it’s probably just best to leave it alone. You can also get loads of translation files too! So the next time you think about dumbing down the user experience or spending 25% more time trying to make a site work in IE6, maybe this handy little script is the answer.