Using Side Tabs on Chrome and Firefox

When it comes to website development I find myself constantly multi-tasking. It does not take long for the top of my browser to fill up with 15+ tabs, showing only the website’s favicon with no description. This makes it difficult to find the tabs I’m looking for.

Some may argue it makes sense to open up multiple instances of the browser, but this will quickly fill up the task bar on your computer as well. Plus, how do you know which instance of your browser has the site you are looking for?

A very high percentage of people now have widescreen monitors. These monitors are often much larger than the size that websites are designed for (99%+ of websites are designed for 1024 pixels wide monitors). If you haven’t already, you will begin to notice how much wasted horizontal space there is when browsing the internet.

That’s why it makes much more sense to send the tabs to the side of the browser stacked vertically than it is to have them on the top. Compare the tabs in the image above with the image below to see an illustration of what I’m talking about (click the image to view a larger version)

Placing the tabs on the side gives you much more room to add more tabs without losing any information on what each tab contains. It takes some getting used to, but it is well worth it in the end.

If I’ve convinced you to make the switch, here is how you do it:

Enabling Side Tabs on Chrome

If you are using the latest version of Chrome, the following “Side Tabs” option might not be available to you. If not, please view my “Re-enable Vertical Tabs on Google Chrome 16” post.

1. Type in the URL:  about:flags
2. Find “Side Tabs”, then click “enable”
3. Right click a tab on the top of the browser, then click “Use Side Tabs”

Enabling Side Tabs on Firefox

Download an install an extension such as Tree Style Tab.

Email Integration with a Project Management System

While many people feel it is important to have your email hook directly into your project management system, I strongly disagree. I feel it is much more effective to have them separate, even if that means adding an extra step when creating new tasks.

I’ve found that by creating tasks manually I take and manipulate information from the email messages into a format I can quickly go through. Emails are composed far differently than a task is, usually with much more filler text and conversation. I’ve also found that most people do not write their emails in chronological order, but instead write ideas as they come to them.

Adding to the confusion is that emails from different dates can relate to one task. As an idea evolves some of the original tasks from the first email may become obsolete. Sorting through the emails to find what information is the latest and most relevant becomes extremely difficult.

Copy and pasting information from emails into a project management system might seem like an extra step, but it isn’t. It is necessary time spent organizing tasks.

Gmail Preview Pane Extend (v0.7.0)

Gmail’s latest feature, the Preview Pane, allows you to simultaneously preview emails while reading or replying to others. After several hours of use I’ve found this to be one of the best improvements to Gmail in years.

The only issue I found with Preview Pane was how the “People” widget and advertisements on the right of the page now waste a lot of valuable space (202 pixels on the vertical split, and 225 pixels on horizontal split).

This user script (for Chrome, or Greasemonkey for Firefox) removes that sidebar, allowing the preview pane to extend to the full width of the screen. Enjoy the extra space!

Download at UserScripts.org

5/22/2013 Version 0.7.0
-Fixed: Now works for Chrome 27
-Fixed: Images automatically resize to fit preview pane on Chrome

1/16/2013
Gmail appears to have a bug with the Preview Pane lab, unrelated to this plugin. If you have Preview Pane turned on and Snippets turned off, the message list will appear distorted. I have submitted a bug report to Gmail about this. A temporary workaround is to enable Snippets (under the General tab of Gmail settings)

2/23/2012 Version 0.6.1
-Added: Set max-width on images, to avoid a long horizontal scrollbar when composing a reply or reading an email. Change the max-width on line 39 to suit your needs (600px wide by default)

12/15/2011 Version 0.5.0
-Fixed: Remove horizontal scrollbars for the preview panes on Firefox 8

11/4/2011 Version 0.4.2
-Fixed: Remove sidebar on “undo send”

8/14/2011 Version 0.4.1
-Fixed: Removed extra style

8/9/2011 Version 0.4
-Fixed: Chrome autocomplete now working

8/8/2011 Version 0.3
-Added: Now supports horizontal and vertical split views

8/7/2011 Version 0.2
-Fixed: Optimized code, now using GM_addStyle

8/5/2011 Version 0.1b
-Fixed: Attribute selector for Firefox

8/5/2011 Version 0.1
-Initial Release

SCRIPT438: Object doesn’t support property or method ‘getElementsByTagName’

It was recently brought to my attention that one of my websites was not functioning correctly in Internet Explorer 9. Parts of the page and javascript would load, however the AJAX portions of the site failed to load.

Using the F12 Developer tools package with IE9 I was able to find the error:

SCRIPT438: Object doesn't support property or method 'getElementsByTagName'
jquery.js, line 16 character 59007

The solution is simple, update your jQuery to the latest version (at the time of this writing, 1.6.2). The version I had installed on the website (1.5) is not compatible with IE9.

Generate Random 10 Digit Number in PHP

The application I’m developing requires a random 10 digit number as a bar code on season pass. A simple way to create a unique number is to use the following code:

$random = substr(number_format(time() * rand(),0,'',''),0,10);

Here’s whats happening with the code:

The outer portion “substr” is used to chop down the random number we create to 10 characters. You will notice the number 10 at the end of the snippet, which can be changed to any number you want.

The “number_format” function helps get rid of the scientific notation that will arise from generating the random number. In the middle, “time()” and “rand()” are multiplied. Time() is the number of seconds from January 1 1970, and rand() is a uniquely generated number through PHP.

Always remember that generating unique numbers is not fool proof.  If your application requires each number to be unique, perform a collision check in the database before saving.

Legend HTML Tag Word Wrapping Problem

There is an issue with the way Firefox 3 and 4 handles a long string of text in the HTML form tag “Legend”. With a long string of text in the legend, the element will completely ignore any width property associated with it. The only way to break a line in the legend element is to introduce a break tag.

Whether or not you agree with it, this is how the Firefox team decided to handle this element. To fix this, simply adjust the white-space CSS property for the legend. This will cause the legend to behave as expected.

legend {
   white-space:normal;
}

jQuery Validation Word Count Custom Method

The jQuery Validation plugin is one of the best ways to validate your forms client side. It has built in functions to check the maximum amount of characters allowed in each form field, which works great in many situations.

However for a project I am currently working on the client requires text areas to have a word limit instead of a character limit. There are some solutions out there to do this separately from the jQuery Validation plugin, however I decided to write and release a custom method that can be implemented directly into any form.

The Code

The following “addMethod” needs to be placed after jQuery and jQuery Validation is loaded, but before the actual validation call:

$.validator.addMethod("wordCount",
   function(value, element, params) {
      var typedWords = jQuery.trim(value).split(' ').length;

      if(typedWords <= params[0]) {
         return true;
      }
   },
   jQuery.format("Only {0} words allowed.")
);

The method first creates the “typedWords” variable, which simply counts the amount of spaces on the text area. Then using “typedWords” the method checks against the predefined max length (params[0]).

The next code snippet is a sample of how you can call the custom method with your form. For example, I have a textarea named “comments” that I want to apply this method to:

$("#contactform").validate({
   rules: {
      comments: {
         required: true,
         wordCount: ['10']
      }
   },
});

When we call the wordCount method, we can also define the max amount of words allowed. Simply change ['10'] to any number you wish.

Chinese Characters Showing as Blocks on Windows 7

I recently ran into the issue with my development machine where all Chinese characters displayed as blocks. I tried restarting the computer to fix the issue, however it only fixed several Chinese characters. The solution to fixing this issue is to delete your system’s font cache file.

Deleting your Font Cache File

1. Delete the file C:\Windows\System32\FNTCACHE.DAT
2. Restart your computer

Windows will rebuild the file once you restart the computer then everything should be back to normal! This also appears to work for other languages as well, please post your results if it works for you. I have no idea what caused this font cache file to be corrupted in the first place, but will post more if it happens again.

Grand Haven Social Media Workshop: Friday 2E

Chad Huntley will be presenting at the next Friday 2E session in Grand Haven, MI. Using his experience in the advertising field, he will discuss basic psychological principles that can be used in your social media, website, and physical advertising.

Understanding how your customers process information is a very important step to increasing leads. This session will cover a variety of psychology concepts used by leading advertisers and marketers that will help you formulate new strategies. Real-world examples will help explain concepts such as: reciprocation, commitment, authority, and others. You will also find how other companies have used these concepts to turn you into a customer, most of the time without you even knowing it!

For more details on the event, please visit the post on WZZM’s website, or at Mlive.com.

From MLive:

GRAND HAVEN – February’s 2E Network – A Social Media Workshop, will focus on measuring the success of websites by their rankings on search engine results and increasing the ranking through Search Engine Optimization.

Chad Huntley, owner of Element Design of Grand Haven, will be the featured guest speaker for the Friday, February 4th 2E Network held from 7:30-9:00 a.m. Huntley, a graduate of Michigan State University’s Advertising program, where he recently taught a web design class, has experience on website projects that included Steelcase, Herman Miller, and DOW Chemical. Huntley expressed that, “the internet has quickly become the most powerful advertising medium for any business,” going on to explain that it is the central hub for advertising, communication, and gathering information from customers.

“The success of your website can be directly measured by how high it ranks in search engine results,” continued Huntley.

The Chamber of Commerce Grand Haven, Spring Lake, Ferrysburg is excited to have Huntley present on the importance of Search Engine Optimization at 2E Network. In this workshop, attendees will work with a website that is poorly optimized for search engines. Expanding from this website, attendees will learn more about the evolution of search engines, what no longer works, and how to build a search engine strategy.

If interested in attending The Chamber’s 2E Network – A Social Media Workshop, register by calling 616-842-4910 or email Courtney at colson@grandhavenchamber.org. Held at JSJ Corporation’s Lower Level Training Room, the cost to attend is $15 for Chamber Members, $20 for community members. A continental breakfast is provided and attendees are encouraged to bring a laptop or smart phone if desired.

2E Network – A Social Media Workshop is a program of The Chamber of Commerce Grand Haven, Spring Lake, Ferrysburg. The Chamber understands the importance of social media for local businesses and the community, bringing in qualified guest presenters to educate attendees on various topics. Held the first Friday of the month from 7:30am-9:00am, those interested in more information, attending, or presenting should call 616-842-4910 or email colson@grandhavenchamber.org.

Ajax Page Loading & Google Analytics Tracking

I recently completed a website that handled all page loading through Ajax. Even when using an Ajax Bookmarking script (jQuery BBQ) the entire site was still only considered one page. This became an issue in Google Analytics, since as people browsed the site, it only counted the first time they hit the site and not any of the subsequent link clicks.

So with a site that consisted of the following links: Home, About, Services, Contact, it only showed hits for Home, and did not count any hits for About, Services, or Contact.

To fix this we need to manually add JavaScript events to each link we want to capture.

Copy the latest Analytics code to your website

After logging into Google Analytics, click on the website you need Ajax link tracking for, then click “Edit”.

On the top right of the new screen, there should be a link called “Check Status”, click that.

The new page should show you the code you need to copy/paste onto your website right before the </head> tag. For your reference, the code should look something like:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12345678-9']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Add Javascript Events to your Links

Now on your website, locate the code for each of your links. For example it could look something like:

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#services">Services</a></li>
	<li><a href="#contact">Contact</a></li>
</ul>

This is where we start insert our link tracking code. Since a new page loads everytime we click on one of these links, we will want to add a onClick event to each link along with the necessary code.

The completed code should look like:

<ul>
	<li><a onclick="_gaq.push(['_trackPageview', '/home']);" href="#">Home</a></li>
	<li><a onclick="_gaq.push(['_trackPageview', '/about']);" href="#about">About</a></li>
	<li><a onclick="_gaq.push(['_trackPageview', '/services']);" href="#services">Services</a></li>
	<li><a onclick="_gaq.push(['_trackPageview', '/contact']);" href="#contact">Contact</a></li>
</ul>

The only part of the code you need to change is the last part of it ‘/services’, where you define what you want the page to be called in Analytics. Make sure you use slashes just as you would with a URL, where deep links could be something like: ‘/services/cleaning’

Now the analytics page will start tracking these page hits, and look something like:

Note that there are two different “pages” tracking the home page, “/” and “/home”. The “/” page is when people initially hit the website, where the “/home” page is if they click the “Home” link while they are within the website. This helps track the user’s behavior.

You can also do this in a more elegant way by assigning each link an unique ID then referencing them through an external JavaScript file, but for small sites this is quick and effective. You can also track these clicks as “events” which I will cover in a different article.