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, 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.

With all the recent projects needing Javascript development and those upcoming, I’ve had to do quite a bit of searching around the web for scripts I can integrate into our projects.  Here is a list of libraries, scripts, and resources we’ve put to into practice here at Beacon.

Javascript Libraries

• jQuery
  JS Library that allows CSS-styled selectors for DOM elements.
• jQuery-UI
  Extensive collection of user-interfaces and controls.
• Script.aculo.us
  Contains a visual effects engine, a drag and drop library, and other visual effects.
• MooTools
  Has built in functionality for playing sounds and an extensive collection of transitions and effects.
• YUI
  Never really used this library, but it appears to be well documented and used around the web.

Scripts

• Name: Moment.js
  Website: http://momentjs.com/
  Note: This script is fantastic for formatting dates/time.
• Name: Respond.js
  Website: https://github.com/scottjehl/Respond#readme
  Note: Light-weight library script that allows CSS3 Media Querys for responsive web design in browsers that do not support CSS3.
  
• Name: Table Sorter
  Website: http://tablesorter.com/docs/
  Note: Fantastic script that makes table headers sortable.  Works with rows or columns and can sort multiple data types including: strings, integers, and dates.
• Name: Masked Inputs
  Website: http://digitalbush.com/projects/masked-input-plugin/
  Note: This script is a nice compliment to live form validation.  We use it on our Beacon site, but had issues with it removing the input if a user leaves the textbox incomplete.  We found a fix for this on the web, incorporated it into the current release (non-minified), and then re-minified it.  The modified version can be downloaded here.
• Name: JSLitmus
  Website: http://fmarcia.info/jsmin/test.html
  Note: This online tool can be used to compact your JS code.  I recommend keeping a backup of the original coding
  if you plan on ever revisiting the code.
• Name: JSBeautifier
  Website: http://jsbeautifier.org/
  Note: This tool will format code for you with indentations and line returns.  Badly formatted code or minified code files can be undone with this for significantly better readability.
• Name: GreyBox/LightBox/ThickBox
  GreyBox Website: http://orangoo.com/labs/GreyBox/
  LightBox Website: http://lokeshdhakar.com/projects/lightbox2/
  ThickBox Website: http://jquery.com/demo/thickbox/
  Note: Different flavor scripts that handle popup windows.
  

Web Developer and Coding Resources:

• GitHub – Developer projects with online collaboration
• DZone – Developer articles and tutoirals
• NetTuts -Web Developer tutorials
• CodeCanyon – Has tutorials on a variety of web languages with video
• DynamicDrive – Heaps of scripts to add functionality to your site.

Resource Articles:

I regularly visit these sites (and others like them containing lists of scripts) to gather resources for a project.

• http://www.topdesignmag.com/100-awesome-cssjavascript-plugins-and-coding-techniques/
• http://net.tutsplus.com/articles/web-roundups/40-super-neat-javascript-plugins/
• http://www.queness.com/post/237/30-javascript-menu-plugins-and-scripts
• http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html

We recently launched the Beacon site with a new design which included a handful of jQuery animation, many of which had replaced the the previous design’s Flash-intensive content. We have recently come across an issue with the jQuery library with some builds of IE7 and IE8 that resulted in an extensive trail of debugging. We concluded that it was a browser issue (even in different OS environments) that was only fixed by re-installing IE. Here I will outline the issue and the debug trail–and hopefully maybe even think up some potential fixes that weren’t explored when testing was originally performed.

The Issue

In IE7 and IE8 we found that refreshing the homepage would crash IE and sometimes handle restoring the tab, other times not.  Microsoft has acknowledged this error in an KB article.

The Debug Trail

• Initial replication of issue in IE 8.0.6012 on one of the test machines using a Windows XP environment.
• Attempted browser-configuration changes that might’ve caused issues including:
• Privacy Settings
• Security Settings
• PrivateBrowsing
• Add-Ons disabled
• Just-In-Time Debugging (picked up from a slightly different error that was sent to me as a screenshot from Mark Dirks — last one on right shown above)
  Unfortunately not of these seemed to be the culprit.
• Disabled JavaScript in IE altogether–which of course fixes it but not what we we’re aiming for. This confirms it is a JavaScript/jQuery related issue
• Attempted using different versions from currently used (1.6.1) to most recently published version from jQuery site (1.6.4) – tried both compressed/uncompressed versions without any success.
• Checked a  changelog of jQuery since version 1.6.1 onward for IE7/8 errors.
  *Anything related to these browsers I had checked out scripts for any instances of (CSS background-image in jQuery and other function calls)
• One Google search led me to a site that reported changing the jQuery file name had corrected their similar mshtml.dll error—-not the case here)
• Double checked the in-line JavaScript as well as .JS file functions dependent on the jQuery library contained no redirects or any instance of the window.location method
  Since the IE8 error that comes up sometimes on the test machine says the browser attempted to load more than twice) – the only instance of this I found is a comparison checking if ‘#beacon-video’ is in the URL and if so, it runs a function to scroll the Beacon video into view and sets the tabs display(css) values. The window.location value is never assigned anywhere.
• Checked that there weren’t multiple instances of window.onload or jQuery(document).ready()
• Ran the jQuery library file through a beautifier to get a better look at the pin-pointed trouble spot you found and checked for any obvious issues. Justin Klingman found that in the compressed library he could comment out the last half of the code which removed the crash so before ‘beautifying’ the code I had marked this position with a comment and looked in the region after the code was cleaned up.
• Removed all other scripts from the page to see if those dependencies may have had an impact on the crash, but removing them all (including the JavaScript function calls in the body,) except for the jQuery Library. No difference, same crashing effect.
• The only change that did successfully fixed the crashing tab to load was removing jQuery from the page, however,
  when the content of another root level page (the SEM pages) into the root default document, that loads/refreshes fine without crashing.
  The only difference between interior/homepage in terms of JavaScript is the presence of the homeScripts.js file and the inline function calls on the homepage.
  After further testing this, removing only homeScripts.js still crashed the tab on the homepage (unless jQuery was also removed) —
  All internal pages use the same copy of the jQuery Library and they don’t crash, so the exact source of what’s crashing the page/tab is still not clear to me.

Bitcoins came up in a brief discussion during one of my CS courses this past week. Apparently, these have been around since 2009, but I hadn’t heard anything until now. Essentially, a bitcoin is a digital currency that can be used across the internet. The Bitcoin Client can be run from a linux box and  can “mine” for coins on a network which are then saved into a digital wallet with electronic signatures. Major perks of the new currency include:

• Transfers directly from sender to receiver (no clearing house).
• Fees are much lower.
• Useable in every country.
• Lower fees
• Accounts cannot be frozen.
• Based on open-source software
• No prerequesites or limits

 

Video

Getting Started

• Get Started Guide
• Privacy & Security
• Mining Guide

So what determines the value of a Bitcoin? According to “WeUseCoins.com”:

“The value of a commodity is determined by supply and demand. The supply side of Bitcoins is limited by design. The demand comes from people wanting Bitcoins to trade with.”

~Source

 

Exchange Rate

The exchange rate can be monitored online at MTGOX. Here is a diagram of the currency value over the last 24 hours at the time of writing this post:

More Information

• Wikipedia
• May Article in Forbes
• Bitcoin mining botnet also used for DDoS attacks