StatCounter shows that within the past few days Chrome has become the more popular browser on the web.

In the past year, Chrome has become more popular than both Firefox and IE. Chrome now ranks just under half a percent higher than Internet Explorer.  Both IE and Chrome tend to compete against each other for weekend statistics.  But usage isn’t everything–I put recent versions of the five major modern browsers through benchmark testing:

Rank	Browser	Benchmark Screenshot	Resources Screenshot
1	Chrome Version 19.0.1084.46 m
2	Opera Version 11.64
3	Safari Version 5.1.4
4	Internet Explorer Version 9.0.8112.16421
5	Firefox Version 12.0

Benchmark Info:

• Performed using Rightware’s Browsermark – Run your own browser benchmark
• 3/4 through the process, the leap in CPU usage is caused by 3D rendering (I assume through the Canvas API in JS)
• Safari and Opera both failed their first time running the benchmark–The task manager screenshots above are wider because I had to widen the window to keep the graph on-screen during the failed attempts.
• Benchmarks we’re tested with only the active browser and task manager running.
• Tested on 3.06 Ghz Core 2 Duo and 2GB DDR3 RAM with Windows 7 Pro

I have been getting familiar with responsive web design over recent weeks and have put together a list of resources I have found helpful when both developing and testing responsive layouts.

HTML5 BOILERPLATE

I recommend the HTML5 BoilerPlate  as a starting point.  Now in version 3, the H5BP sets the stage for a responsive site by providing media queries, JS resources, and utilizes optimization techniques.

Here is an excellent video presentation by Paul Irish, one of the developers behind H5BP.

 

SIZER

I have mentioned this small program in a previous blog, but found use for it worth mentioning.  Once installed and running, you can right-click the bottom-right hand corner of a window and set pre-configured window dimensions.  This has come in handy when re-sizing the browser to common device dimensions. (I use 320, 480, 768, 980)  You can configure these through the task tray icon.

 

Keynote MITE (Mobile Internet Testing Environment)

Keynote offers a free mobile testing suite armed to the teeth with different platforms and devices.  Android phones, iPhones , BlackBerry, the works! (See screenshot below.)  Account registration is required to open the application.  Keynote also offers a “Pro” version that includes:

• Advanced test automation
• Unlimited over-the-air testing from your desktop
• Remote testing from anywhere in the world
• Technical help from the Keynote Diagnostics Support team

 

Media Query Reporter

/* ======================================

    MediaQuery-Reporter Styles

========================================= */

body:after {

    content: "less than 320px";

    font-size: 300%;

    font-weight: bold;

    position: fixed;

    bottom: 60px;

    width: 100%;

    text-align: center;

    background-color: hsla(1,60%,40%,0.7);

    color: #fff;

}

@media only screenand (min-width: 320px) {

    body:after {

        content: "320 to 480px";

        background-color: hsla(90,60%,40%,0.7);

    }

}

@media only screenand (min-width: 480px) {

    body:after {

        content: "480 to 768px";

        background-color: hsla(180,60%,40%,0.7);

    }

}

@media only screenand (min-width: 768px) {

    body:after {

        content: "768 to 1024px";

        background-color: hsla(270,60%,40%,0.7);

    }

}

@media only screenand (min-width: 1024px) {

    body:after {

        content: "1024 and up";

        background-color: hsla(360,60%,40%,0.7);

    }

}

Fluid Grid and Mockup Overlays

When putting a template together or marking up a web page, I persistently save, change to my browser, refresh–and evaluate the last few edits, and then swap back to my editor.  It would be really (really!) nice if the browser just updated automatically, and I just needed to glance at a monitor as development progressed.  (Especially with a multi-monitor workstation.)

Well, I found a script that does just that written by Martin Kool.  When embedded in the head of a document, Live.js  will update a page’s HTML, CSS, and JavaScript on the fly. I’ve tested that it even recognizes when the script itself has been removed from the file and will discontinue running.  It is important to remove this script after development and testing so that you don’t end up seeing a flood of HTTP requests live in production:

And here’s the one-liner to make use of it:

<script src="http://livejs.com/live.js" type="text/javascript" ></script>

When developing a “contact” or “about” pages, it is common to use a Google Map box or an aerial image of an area.  After researching some of the APIs and applications available for web-based map tools, I came across an excellent cartography tool: TileMill MapBox.

The site claims if you can write CSS, you will be totally at home with this software.  MapBox has a huge set of features, including mobile support (which Google Maps still has issues with), theme styling and map customization (yes, make your own maps), datasource-ready and has built-in analytics.

The application is powered by open-source libraries, however a paid account from one of 4 pricing plans is required.

View a demo here: MapBox Demo

Mozilla moved to version 4 from 3.6 almost a year ago on March 22, 2011. Not even a year has passed and just a few days ago, Mozilla has released its 2 digit browser version. This version is intended to make updates and extension management easier on the end-user. Version 3.6 will lose support in April leaving 10 as the only currently supported version. Some other major highlights in Firefox 10 include:

• CSS 3D Transforms are now supported.
• The new HTML5 <bdi> element, bi-directional isolation, allowing isolation of parts of text with a different directionality has been implemented.
• Updates to Canvas, DOM3 Events, DOM4, JavaScript, Full Screen API, Page Visibility API, SVG, and WebGL.
• You may now specify a fragment of “top” for the href attribute to create a link to the top of the page. This used to work, then went away for a while, and now it’s back, for compatibility with the HTML5 specification.
• The console object has two new methods, console.time() and console.timeEnd(), which can be used to set timers on a page.
• Handling of the position property on elements inside positioned <table> elements has been fixed.
• In the past, when element.setAttribute() parsed integers, it would report an error if the integer included any non-numeric characters (for example “42foo”). Now it correctly truncates this as the number 42, in accordance with the specification.
• Minor interface changes.

*These snippets have been pulled from the Mozilla website*

• Firefox Releases on Wiki
• MDN Overview: Firefox 10
• MDN Overview: Firefox 9
• MDN Overview: Firefox 8
• MDN Overview: Firefox 7
• MDN Overview: Firefox 6
• MDN Overview: Firefox 5
• MDN Overview: Firefox 4

Here is a timeline of support status and release dates of Firefox in the past year. Firefox has had several releases as a result of adopting a rapid release development cycle

Browser name	Gecko version	Version	Support status	Codename	Release date
Firefox 3.6	1.9.2	3.6	N	Namoroka	January 21, 2010
		3.6.26	Y		January 31, 2012
Firefox 4	2.0	4.0	N	Tumucumaque	March 22, 2011
		4.0.1	N		April 28, 2011
Firefox 5	5.0	5.0			June 21, 2011
		5.0.1	N		July 11, 2011
Firefox 6	6.0	6.0	N		August 16, 2011
		6.0.2	N		September 06, 2011
Firefox 7	7.0	7.0	N		September 27, 2011
		7.0.1	N		September 29, 2011
Firefox 8	8.0	8.0	N		November 08, 2011
		8.0.1			November 21, 2011
Firefox 9	9.0	9.0	N		December 20, 2011
		9.0.1	N		December 21, 2011
Firefox 10	10.0	10.0	Y		January 31, 2012

A while back, John Scaramuzzo came around the office asking employees to clear out any e-mails we could afford to lose in Outlook.  When disk space is low, it can be difficult and time consuming to filter through thousands of e-mails determining what to keep and what not to keep.

Using a feature of Adobe Acrobat (I have version 9 installed) I was able to backup all those e-mails into a single indexed PDF.  If you keep your Outlook mailbox organized by folder, this will turn out even more nifty after converting to a PDF.  Right click on a mail folder and notice there are 2 options regarding Adobe PDFs.  Converting will create a new PDF and appending will add the emails and the folder structure into a PDF which can be saved to the local machine.  This does NOT remove the emails from Outlook and needed to be deleted manually.

Click to Enlarge

After a certain point, the PDF document will start to respond slowly after a certain size is reached.  The best solution I’ve come up with is to organize the PDFs by year.  Remembering the relative year to a project or development period isn’t too difficult and Adobe contains a search feature to find information quickly.  A ticket number or relative project phrase usually works removing any need for digging around.   Anytime my outlook folders start to look full, I can append all the contents to the current year’s PDF and free up the space in Outlook. Below is a screenshot of what my Sent Items folder looks like in 2011′s PDF.

Click to Enlarge

If your mailbox does not already have a folder structure, it might be a good idea to set some up.  Organization never hurts!

I dug around the web today for tutorials on making personalized jQuery plug-ins.  A plug-in is much more easily deployed onto a site than customized code, which may require editing or customization between sites.  Using a plugin, we have a much simpler means of calling a script using common syntax:  $(‘something’).doThis();

In the past, I’ve developed scripts to work within the $(document).ready() jQuery function.  Events and methods that were nested within usually had a variable targeting a class or ID on the DOM that manipulated that element accordingly.

Document Ready Scripting Examples:

$(document).ready(function(){
   var button= '.myButton';
   $(button).click(function(){
      alert('You clicked a button.');
    });
 });

This simple example will result in any page element with class myButton result in a message box once clicked.  While this is a simple example, more complicated scripts might be developed as a plug-in instead for increased portability without affecting functionality.  This practice also makes your code re-useable and easy to integrate between projects and other plugins. In terms of syntax, it is also much simpler for front-end developers to use a line of code such as the one below.

Plug-in Scripting Example:

$(‘.myButton’).makeButtonAlert(‘You clicked a button.’);

Documentation on Plugin Development

Having never developed a plugin, I had to look over a few tutorials to get a grasp on the needed syntax.  Here is a list of some of the better tutorials and documentation I came across:

• jQuery – Plug-in Authoring  (More technical approach)
• CodeProject – Creating A Simple jQuery Plugin
• SitePoint – How to Develop a jQuery Plugin
• My First jQuery Plugin
• A Really Simple jQuery Plugin
• Signs of a Poorly Written Plugin

Plugin Breakdown

Here is the same script re-written as a plug-in to jQuery and can be either appended to the end of the jQuery Library or included as a separate JS file.

 //Opening and closing the script is only slightly different in syntax:
 (function($){

     //Create your jQuery method name here (makeButton).
     //Notice we take in a variable "input" which is passed by the makeButtonAlert() 
     //call so that different messages can easily be used in the message box.
     $.fn.makeButtonAlert = function(input) {
       //Using the each function, we iterate all instances of the selector on the DOM.
        return this.each(function(){
        //At this point of the script, 'this' refers to the elements on the DOM you are iterating. 

             //Plugins can make use of a method for storing information -- this is properly named .data().
             $(this).data('message',input);
            //Just like the .css() or .html() functions, you use a second parameter to set the value.             

             //Plugins also have their own method of attaching events, using the .bind() method. The first parameter in quotations is the JS event, the second is the function you tie that event to.
             $(this).bind("click", events.click);
             //You may 'chain' the bind command on one selector to attach multiple events. The methods triggered by these events are coded below in the events object.

        }); //Closing for .each() method
      }; //Closing for $.fn.makeButton
      var events = {
         //Set up the events object with a method that gets fired when the 'bound' selector gets clicked.
         click: function(){
            alert($(this).data('message'));
         }
      }; //Closing for events object

 })(jQuery); //Closing for plugin

The Easy Part…

Now, you’re free to use your customized plugin in other projects using:

$(‘.button’).makeButtonAlert(‘You clicked a button’). $(‘input[type="button"]).makeButtonAlert(‘You clicked a button with a different selector.’); $(‘#message-button’).makeButtonAlert(‘You clicked another button’);

The jQuery library has a collection of methods built for animating and manipulating the DOM.  These effects implement styling changes to produce transitions like fading or element movement.  The full list of methods are available on the jQuery website.

jQuery also contains a nifty method, animate.  Animate allows you to make a timed transition from one style to another.  This comes is handy when other effects methods don’t quite behave or lack needed functionality.

Consider the two snippets:

1: $(‘h1′).fadeOut(1000); 2: $(‘h1′).animate({opacity:’-=1′},1000);

Both perform the same transition, and in one second, the selected element transitions to being transparent.  However, the fadeOut method has a feature that sets the element’s display attribute to none when opacity reaches zero.  This especially becomes an issue if you need the element that fades out to maintain its structure in a template.

The animate method is also capable of manipulating multiple styles in one method.  If we needed to make an element slide on the page while coming into view from being transparent, this can also be done with a single line, separating multiple style changes by a comma.

$(‘h1′).animate({opacity:’+=1′,marginLeft:’+=15px’  },1000);

Relatively and absolutely positioned elements can make use of the left/top CSS styles, but should be used to what works within your template and layout.

Animate and jQuery effect method’s all support callback functions which makes movement order easy.  The snippet below will result in the same animation, but the left margins are not animated until the transparency becomes fully visible.  These can be nested within one another to avoid using setTimeout and setInterval coding.

$(‘h1′).animate({opacity:’+=1′},1000,function(){ $(this).animate({marginLeft:’+=15px’},1000); });

During recent projects, integrating fonts for the right look and feel has shown to be troublesome for Internet Explorer. After implementing a font file into a CSS file, Internet Explorer 9 would provide the following error and not show the embedded font:

CSS3114 @font-face failed OpenType embedding permission check. Permission must be Installable.

This error is listed on MSDN and states that:

 The font-face does not have permissions to install with the current webpage.

And to fix:

Obtain the correct permission or licenses for embedding the font.

The only help this really provided was narrowing my search results.  Luckily, I found a nifty program that can be run from the command prompt to correct this error in IE9.  Be aware however, as stated on the publishers download page:

Changing the embedding value does not give you license to distribute the fonts. You should only change this setting if you are the font creator, or something like that. Use at your own risk.

Download embed.exe

Program Useage:

1. Download the executable and move to the desktop with a copy of the font file. (Alternatively, you can drop this in your Windows/system32 directory)
2. Pull up a command prompt window.
3. Navigate to the desktop within the prompt
4. Execute by typing: embed.exe fontfilename.ttf
5. Viola, your font should be ready to use in IE9.

More on Font Embedding from MSDN »

One of our recent enhancements to the Beacon website included integrating components of our blog into the content of the site. This is visible on the homepage under the “Blog” tab and shows the three most recent postings on our WordPress blog. Additionally, we decided to include links to recent blog links by categories or topic on the page. For example, the SEO Management page would produce blog links that fell in the SEO category. This is applied throughout the site on interior pages, which is effective for SEO as each page will be updated with every blog posting we create (given the post falls in the category of the page displayed).

The blog feed on the homepage was much easier in comparison worked like this:

XSLT Format used in Cascade:

This is a simple ASP literal that will be the populated by the blog feed.

<xsl:comment>#START-CODE<asp:Literal id=”litFeedReaderBlog” runat=”server”/>#END-CODE</xsl:comment>

VB for CodeBehind File:

VB CodeBehind File (.pdf)

This small set of code basically links to page with RSS feed, in this case, the general RSS feed for entire blog. The part shown in red needs to match the URL of the RSS feed to your particular WordPress site. The part shown in green is a relative path to the XSL file you will use to format the output. Lastly, the part in blue needs to match the ID of your ASP literal so the codebehind knows where to place the output.

Most WordPress sites use the following schema to the feed: http://sitename.com/rss

Example: http://blog.beacontechnologies.com/feed

The above linked RSS page acts as the data source for the VB CodeBehind file and uses an XSL file (shown below) to format the output to the page. Because this RSS page is updated and managed by WordPress, the output is always up to date with the blog.

XSLT used by CodeBehind File for Output:

XSLT File (.pdf)

This XSL will limit the number of posts displayed to the most recent 3 posts (First 3 listed on RSS page–Code shown in green) and will output it in a way to provide a linked title, the author and date, as well as a snipped from the article itself and ‘Read More’ link. We used JavaScript to clean up some of the output that the RSS feed delivers, such as the [...] text and cleaned up the way links were displayed in the snippet.  You can visit the blog feed page and view source to get the XML data that will be processed by the XSLT.

So, if you followed all that and put it into practice, you get something like this (after styling):

Now, to implement category control, we needed to add an additional Data Definition within Cascade on every page that would set the category. We used a simple drop-down that had an entry for every category we have on our blog. Notice below that the data-definition values need to be URL-friendly. The reason for this is that the modified blog feed with category control will integrate this category to the blog’s general RSS feed. We are going to pass this category information to the codebehind file for processing by sticking the data definition value into the ASP literal’s text attribute. All interior pages would use the same codebehind file as to avoid the need for a new configuration type that would need published with each page.  The only maintenance that goes along with the blog feed is adding new ones to the data definitions as they are created in WordPress.

The code and logic above was primarily followed for the related links, but had to be modified to fit the following specs:

• Have Cascade output a text attribute on the ASP literal containing the category to be used (grabbed from data definitions) which would be passed as a parameter to the functions used in the original VB Codebehind.
• List out 3 of the most recent blogs (just linked titles, somewhat simplified from homepage output) from the blog category set in the data definition. If NO data definition is set for the ‘blog category’, use the ‘Section’ data definition value (which shown above is required on all of our pages.) The section value is a fall-back to one of the three parent categories on the blog: Web Development, Web Marketing, and Web Hosting.  Notice we can’t just use the values of the ‘Section’ data because it does not match the URL structure on WordPress.
• If there aren’t 3 posts for the blog category that has been set in the data definition, retrieve what posts are available and then use one or two posts the parent category (depending on how many needed to make 3 posts).

At first, the solution Justin and I had come up with, was to make the VB smart enough to recognize when less than 3 posts were output and go out and grab the remaining from the parent category. The issue with this was that the parent category of any category might list already output postings by the sub-category (since they are listed in order of most recent). Therefore, we had to heavily modify the codebehind file in a way that it would ALSO recognize not to output duplicate posts from the parent category.

XSLT Format and Template Changes in Cascade:

Every page needs to get the codebehind file.  In Cascade, this is accomplished by adding the following to the template:

<!–#START-ROOT-CODE<%@ Page Language=”VB” aspcompat=”true” AutoEventWireup=”false”  CodeFile=”/rightColumnBlogFeed.aspx.vb” Inherits=”_Default” %>#END-ROOT-CODE–>

We saw that http://blog.beacontechnologies.com/feed shows a listing from all categories (10 of the most recent being shown).  We can change the URL to include one of our categories, say… Web Marketing — just by changing the URL to http://blog.beacontechnologies.com/category/web-marketing/feed.  Notice the RSS feed is then modified to fit the category and still listed (as defaulted in WordPress) by most recent posts.  The XSLT file below was used to select either the post category or section for outputting the text attribute of the ASP literal.

Modified XSLT File (.pdf)

Changes in VB Codebehind & CodeBehind’s XSLT

While I’d prefer not to share our exact source code, here are the modification necessary to the templated file above to prevent duplicate stories from being output.

• The ‘BuildFeed’ function had the first parameter changed to the ASP literal’s text value.
• The XSLT file got dutplicated, one to output 3 posts and one to grab the full page of posts generated by the RSS (10).  Both had ‘~’ characters appended after each list item.
• The BuildFeed function would fetch what posts it could from the blog category, if there are less than 3, it would record the titles of the categories found and load them into an array (This was the reason for ‘~’ character being added–Parsing values was a bit easier this way using the split function.)
• The BuildFeed function would then visit the parent categories RSS page and compare post title with those in the subcategory recorded in the array.  If they matched, it skipped the post, otherwise appended it in with list to be included.  Because we didn’t have any categories with less than 3 posts, I was able to just switch my XSL file used by the codebehind to output only 2 posts–and the VB would take care of the rest and use the 10 post page parent.  Controlling the output this way made it much easier to debug and test that the proper number of posts being output from the parent category and subcategory feeds.