Category Archives: Web Development

Using Pinterest with FancyBox

Share Button

Pinterest FancyBox 2 IntegrationWhat is the most obvious use of social for a photo browser? Well, pinterest of course. With it’s emerging social applications pinterest, the online scrapbooking tool has great implications when integrated with photo browsing tools. The “pin it” button has the ability to pin any photos to any of your boards and it has great applications for online marketers of products. It was only natural that I added this ability immediately on one of the sites that I consult on.
FancyBox2 can be a little quirky to extend though, so I’m writing a quick how-to on the install.

Check out the demo here.

How this is done:

The key to accomplishing this is to recognize that fancybox has an event called “beforeShow”. This is shown below. All I did to make this work is add the Pinterest markup to the title object in the beforeShow function. Read the comments below in the code to see what each component is doing.

Here is the code:

//NOTE: this uses fancybox 2
$(document).ready(function() {
  $('.fancybox').fancybox({
    //set the next and previous effects so that they make sense
    //the elastic method is confusing to the user
    nextEffect: 'fade',
    prevEffect: 'fade',

    //set the position of the title
    helpers : {
      title: {
        // title position options:
        // 'float', 'inside', 'outside' or 'over'
        type: 'inside'
      }
    },

    beforeShow: function () {

      //if you already have titles
      //on your fancybox you can append
      if(this.title) {
        //set description to current title
        //this will set what posts
        var description = this.title;

        //add pinterest button for title
        this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
            encodeURIComponent(document.location.href)+
            '&media='+
            //put the path to the image you want to share here
            encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
            '&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'
            //add title information
            +'<span>'+this.title+'</span>';

      //if you don't already have titles
      //you can just make the title the pinterest button
      } else {
        //add pinterest button for title
        this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
            encodeURIComponent(document.location.href)+
            '&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
            encodeURIComponent(this.href)+
            '&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';

      }
    }
  });
});
Share Button

Five Tennis Tips for Your Own Career

Share Button

Business Career Tennis TipsRecently watching some great tennis players, who were also board members of Dealer.com, I was reminded of some great corollaries of tennis to web development and to a career.  Here are five tips that are born from tennis but apply to a great many fields.  These tips that I elaborate on were originally published in Tennis magazine as advice from Azarenka’s (top women’s tennis player) coach. These help to give me motivation and clarity.  I hope they can do the same for you.

1.  Practice with the intensity of a match.
Yes you need to be confident, but confidence alone is overrated.  It doesn’t matter how confident you are if you don’t put in the work and are not disciplined enough.  When I get the chance to go speak in front of an audience I’ll admit I’m confident.  I even have to be careful not to get over confident.  But, here is the thing, I spend a lot of time preparing.  I research the company, I look at their social feeds and projects they are involved in.  I take a lot of time to learn the most about my audience that I can.  It helps give me the confidence when I go to present.  Yes I can change on the fly, but put the work in so that when it’s game time, you’re ready.

2.  Stay calm, but not too calm.
Whether you are a speaker, coder, or manager you want to make sure you can be counted on in a crisis.  This means keeping your cool so that you can reason your way through the situation.  That said, it’s important to recognize when something is big, it’s what gets you going, it’s what pumps you up to perform.  You can’t sluff off everything and deaden your reaction too much.  Recently, I had to save an account, and I realized I could come at it from two perspectives:

Option 1:  We’ll do some fixes for them, and hope they stay.

Option 2:  We’re going to do what it takes to save the account and make them happy.  This is an opportunity for success.

I took option 2 and saved the account.  I got myself fired up about the account, did my research, and worked with my staff to get them pumped up about saving the account.  I made sure they respected the client, and the changes we put in place improved usability for many of our other clients.

3.  Find a teaching pro who lets you develop your way.
Mentors in business are important and I’ll admit, I’ve never really had one.  I think back to certain points in my career where I would have loved some advice.  Most of my bosses were either too busy to offer advice, or didn’t know themselves.  I did, however, have an amazing tennis mentor, who actually managed to extend me multiple career opportunities including teaching tennis and my first real website development gig besides consulting.  Find someone who can help you grow and develop your way.  Find someone that shares mutual respect with you in your organization and utilize them to help you grow.

4.  Go back to basics when you are losing.
Sometimes no matter how much you love something, you can lose site of the basics.  Especially if you get too comfortable in an existing position.  It’s easy to build the foundational skills, then build up on top of that, then forget the foundation.  I recently experienced this in my own career.  Early on my management career I had spent a ton of time working on performance management.  Then as I had accumulated more and more direct reports, I got in a bad habit of not putting enough time and energy into each person.  When a reorganization put me with my most recent boss, he didn’t see any of the historic effort I had put into it, just some of the bad habits I had developed over time.  I had to remind myself to get back to basics.  Here is a good list of some of the basics that I liked to fall back to:  http://www.inc.com/geoffrey-james/keep-the-boss-happy-8-rules.html .  Remember, you’re not going to be 110% every single day, make sure you have the foundation in place to fall back to when needed.

5. Enjoy the game.
If you aren’t having fun at your job, it’s time for a change.  Yes frustration occurs, you struggle, claw, muddle, work your way through tough situations.  Last year, Azarenka considered retiring from professional tennis.  Azarenka’s grandmother told her the story of her life to contrast from her own emphasizing the hardships through work that she had experienced.  She convinced her to continue.  Azarenka went on to win the Australian and Wimbledon this year.  The point is, it’s possible to love something, and have your moments of frustration and doubt, so don’t confuse the two.  I have a lot of things that I love to do, and I have had a lot of different roles that I enjoyed.  Find the things that you love, because, life is short, don’t make it about the money.  If you find that thing you love, you will be successful at it, the money will follow.  Work, even though it is work, is done best when fun.

Share Button

Coverflow using CSS 3D Transforms

Share Button

As HTML5 and CSS3 technology grows, WebKit CSS 3D transforms are emerging and allowing web developers to do some great things within the browser. To exemplify this, I’ve put together a CSS coverflow demo that functions inside the browser using CSS 3D transformations, reflections, multiple background attachments, and touch events.

View the Demo (best in Chrome or Safari)CSS Coverflow 3D Transforms for WebKit

This works on the iPad and iPhone as well using gestures, swipe left to right or right to left to change the item. This example uses Paul Bakus’ code as a base and building it out with lots of new tech.

Here is the step by step on how I built it.

Step 1: Create Perspective

To build the CSS 3D transform you have to first find your wrapping div and add -webkit-perspective: 500px; to it. For this I used the “bd2” class wrapper.

.coverflow .bd2 {
-webkit-perspective: 500px;
margin: 0;
height: 60%;
border: none;
overflow: hidden;
width: 100%;
position: relative;
}

The perspective gives the illusion of depth on the z axis.

Step 2: Apply the CSS 3D Transform
Then apply the CSS 3D transform rotation depending on the location of the image:
var webTransform = "rotateY("+(side === "right"? 55 : -55 )+"deg)";

When the transform is applied it uses the perspective to calculate how much movement is required. You can play with this by expanding and contracting the window to see how the browser deals with it. The perspective code is very important, your rotation won’t work without you defining it.

Step 3: Enhance the view with the reflection
To do the reflect was pretty simple. I used the -webkit-box-reflect with a transparent gradient so that it would fade the reflect out. Here is the code:

.coverflow .hproduct img {
-webkit-box-reflect:
below 0px
-webkit-gradient(linear, left top, left bottom,
from( transparent ), color-stop(0.5, transparent),
to( rgba(50,50,50,0.7) )
}

You also have to make sure that your containing div is tall enough to pick up the reflect. I placed some webkit specific code in there because for other browser’s it doesn’t need to be as tall.

@media screen and (-webkit-min-device-pixel-ratio:0) {
.hproducts .hproduct {
height:225px;
}
}

Note: All subsequent steps are extra enhancements to make the coverflow that much better.

Step 4: Allow for scaling
There are a few cool tricks I used to make this allow for scaling. By using multiple background attachments I was able to allow for the slider to scale as the window size changes. Here is the example:

.coverflow .slider {
position: absolute;
bottom: 5px;
left:0;
margin:0 10%;
width: 80%;
height: 19px;
background: url(files/scrollbar-left.png) no-repeat top left,
url(files/scrollbar-right.png) no-repeat top right,
url(files/scrollbar-center.png) repeat-x;
}

I also put a width of 100% on the containing div to allow for it to scale.

Step 5: Capturing the touch gestures
I attempted to use jswipe for this to no avail. So, my solution was to attach a couple events and code this without the help of a plugin. The key to this is 3 events: touchstart, touchmove, touchend. Here is how I utilized these:

document.ontouchend = function() {
//swipe left
if( self.swipeLeft && self.swipe ) {
self.moveTo(self.current-1);
$("div.slider").slider("moveTo", self.current, null, true);
//swipe right
} else if(self.swipe) {
self.moveTo(self.current+1);
$("div.slider").slider("moveTo", self.current, null, true);
}
}

document.ontouchmove = function(e){
//move only if you swipe across
if( Math.abs(e.touches[0].pageX – self.startX) > 150 ) {
if( (e.touches[0].pageX – self.startX) > 5 ) {
self.swipeLeft = true
} else {
self.swipeLeft = false;
}
self.swipe = true;
}
}

document.ontouchstart = function(e) {
self.startX = e.touches[0].pageX;
self.swipe = false;
}

Basically this detects the range of your swipe and if it is from left to right large than 150 pixels it moves the images accordingly. The ontouchend can be replaced with any function to perform the needed action. The W3C has recently posted a link for touch events here: http://www.w3.org/TR/touch-events/

Step 6: Deal with all the other browsers
Believe it or not, not every browser is equal, so to build out this I used the philosophy of progressive enhancement.

So here are some samples based on what features you have:

If you have no JavaScript, you get something similar to this:
CSS Coverflow No JavaScript Fallback

Running IE7, you get something like this:
IE7 CSS Coverflow

Running FF, you get something like this:
FireFox CSS Coverflow Image

Step 7: Rejoice! You made it.
There are a number of great techniques used for this all rolled into one. CSS -webkit-box-reflect, CSS RotateY, multiple background attachments, touchstart, touchmove, touchend, and browser compatibility handling. These are exciting new additions to browser technology. Browsers are evolving to make our tasks as designers and developers easier. It’s an exciting time to be a web developer.

Share Button

How to build a WordPress HTML5 theme

Share Button

iPhone, iPad, video HTML5 deployment, Webkit, Chrome, Safari, web standards, canvas elements, and disappearing flash support.  These are just a few of the many reasons to explore HTML5 and its capability.  Add WordPress, a very customizable system that allows skinning of the underpinning code in order to achieve the desired result and you get a great basic test case for HTML5.

What follows is quick synopsis of how to setup an HTML5 WordPress skin and some of the benefits this brings:

To start, I setup basic HTML5 markup.  Utilizing new tags.  Here is what the structure looks like:

Using this basic system as a framework, I added microformats to the header and footer for human and machine readable information.  You can view the source and search for “vcard” to see my microformat header.

Next, I started utilizing some of the great things that HTML5 and CSS3 have to offer.  HTML5 has new form field types that work well for the iPad, iPhone, and Webkit.  In other browsers they fall back to be standard text input fields so it’s not a problem to use them in general markup, even for IE6 (everyones favorite).  Here is a breakdown of some of the new HTML5 form fields:
<input type=”search” placeholder=”SEARCH” value=””/>
The new search input type has a really cool attribute called “placeholder”.  Placeholder is a value that disappears when the form field focuses, a function that we no longer have to emulate with JavaScript on browsers that support this.  The type search also tells the iPhone, iPad, and future dynamic keypads to use a different “enter” key.  Note how the iPad shows “Search” on the keyboard:

<input type=”email”/>
This field type also tells mobile devices to change their keyboard accordingly.  Here is an example of the iPad keyboard with this field type:

<input type=”url”/>
This field type also tells mobile devices to change their keyboard accordingly.  Here is an example of the iPad keyboard with this field type:

Now its time to add the CSS.  Using CSS3 for rounded corners, drop shadows, and gradients, quickly eliminates the need for extra divs, classes, and most importantly, images. I used these styles to do the buttons, the input fields, header and footer styling, and even the background. Here are some of the basic CSS3 styles used:

/* create the body gradient */
body {
	background: -moz-linear-gradient(top, #fff, #ccc);
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
}
/* do the rounded corners and drop shadow on the header */
header {
	-moz-border-radius-topleft:8px;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topright:8px;
	-webkit-border-top-right-radius:8px;
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}
/* create the button for form submission and search submission */
form .submit {
	background: -moz-linear-gradient(top, #073842, #000);
	background: -webkit-gradient(linear, center top, center bottom, from(#073842), to(#000));
}

With these styles it’s quick, easy, and image free to do what use to be a much more arduous process for many of us.

Now you’re all done except for IE

Now that the markup is in place and the styles are in place.  We have to make it work for lesser browsers that can’t handle new standards (aka IE).  There seems to be a misconception out there that this is difficult, but it is actually a few simple steps.  For my blog I conceded that there would be some degradation of the look for browsers that don’t support CSS3 so that makes life easier, and of course it may be a luxury not everyone can afford.

IE Step 1: Add support for styling of the HTML5 tags
To do this, all we have to do is include a JS file called html5shiv hosted on googlecode.com.  This in essence does a document.createElement and a few other things to get IE to recognize the HTML5 elements.  We can wrap this in conditional comments because it is only required for IE.

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE Step 2: IE specific CSS
For any IE specific CSS that you want to do (I added a few different border treatments and color tones to make the site still look ok) add the IE specific CSS file.

So the sum of your checking for IE should look something like this:

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <link rel="stylesheet" href="/blog/wp-content/themes/scottgale/style-ie.css" type="text/css" media="screen" />
<![endif]-->

Make sure after you add this to validate your markup with the w3c validator.  It handles HTML5 quite well from my experience.

And now your are done!

I hope this helps everyone to explore this new web standard.  The blogosphere is an easy place to try this out and help perpetuate these ideas.  Please let me know if I need to explore any of these concepts in more detail for people.

Share Button

Microformats and SEO

Share Button

For a long time search engines have been making sense of a web development approach that doesn’t incorporate consistent markup for consistent items. Search engines have managed to do a great job with this, however, now we have the advantage of microformats and other Rich Snippets. With microformats we can make both machine readable and human readable code. This concept will encourage SEO professionals to engage web developers as well as become more code savvy themselves.

Microformats are simple standardized ways of organizing website information. Microformats have implications for web development standards, SEO, and application development around parsing website information.

Lately, there has been a lot of discussion around these snippets for SEO, geo tagging, etc. I find this a bit ironic because they have been around for so long.  (The microformat search term on Google hit its peak in 2007.)  However, what hasn’t been around for very long is the Google adoption of all of these “Rich Text Snippets”.  The term Rich Text Snippets includes microformats, microdata, and RDFa’s.  I’ve seen some examples on the microformats blog and Google has been blogging about all the support they have been adding.  Google actually made some mistakes in their examples, but it looks like they corrected them. So I thought I would outline my favorite examples of microformats to get that information out there.  Hopefully we can perpetuate the wide-spread use of these.

These are my favorite markup uses for each format:

Review:

<div class="hreview">
  <span class="item">
    <span class="fn">Scott Gale's Blog</span>
  </span>
  Reviewed by <span class="reviewer">John Smith</span> on
  <span class="dtreviewed">
    Jan 6<span title="2009-01-06" />
  </span>.
  <span class="summary">Love the website</span>
  <span class="description">
    I like your blog because it offers me, an SEM evangelist and
    sales guy, an insight into the world of technology from
    someone who understands the very essence of its infrastructure.
  </span>
  Rating:
  <span class="rating">4.5</span>
</div>

Person

<div class="vcard">
  My name is
  <span class="fn">Scott Gale</span>,
  My blog url is:
  <a href="http://scottgale.com/blog" class="url">scottgale.com/blog</a>.
  I live in
  <span class="adr">
    <span class="locality">South Burlington</span>,
    <span class="region">VT</span>
  </span>
  and work as a
  <span>Web Developer</span> at
  <span>Dealer.com</span>.
</div>

Business:

<div class="vcard">
   <span class="fn org">Scott Gale's Web Shop</span>
   Located at
     <div class="adr">
        <span class="street-address">16 Any Dr.</span>, <span class="locality">South Burlington</span>, <span class="region">VT</span>.
     </div>
     <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929" />
        </span>
        <span class="longitude">
           <span class="value-title" title="-122.419416" />
        </span>
     </span>
     Phone: <span class="tel">206-555-1234</span>
     <a href="http://scottgale.com/blog">scottgale.com/blog</a>
</div>

Product:

<div class="hproduct">
   Make: <span class="brand">Maserati</span>
   <span class="category">Automotive</span>
   <h1 class="fn">Granturismo</h1>
   Nicely equiped for:
   <span class="price">$134,000</span>.
   <span class="description">The Maserati GranTurismo design exudes elegance
   and has room for 4.  Reinvented from the ground up.</span>
   <a href="http://www.scottgale.com/Maserati-GranTurismo" class="url">View Details</a>
</div>

Video: (RDFa from Google’s site)

    <object width="512" height="296" rel="media:video"
      resource="http://example.com/video_object.swf?id=12345"
      xmlns:media="http://search.yahoo.com/searchmonkey/media/"
      xmlns:dc="http://purl.org/dc/terms/">
     <param name="movie" value="http://example.com/video_object.swf?id=12345" />
     <embed src="http://example.com/video_object.swf?id=12345"
       type="application/x-shockwave-flash" width="512" height="296">

     <a rel="media:thumbnail" href="http://example.com/thumbnail_preview.jpg" />
     <a rel="dc:license" href="http://example.com/terms_of_service.html" />
     <span property="dc:description" content="Cute Overload defines Baroo? as: Dogspeak for
      'Whut the...?'Frequently accompanied by the Canine Tilt and/or wrinkled brow for enhanced effect." />
     <span property="media:title" content="Baroo? - cute puppies" />
     <span property="media:width" content="512" />
     <span property="media:height" content="296" />
     <span property="media:type" content="application/x-shockwave-flash" />
     <span property="media:region" content="us" />
     <span property="media:region" content="uk" />
     <span property="media:duration" content="63" />
    </object>

(Would be nice to see a video microformat, they audio spec is in review currently.)

With Google’s adoption of these standards it puts microformats in the running for some serious SEO discussion. Google has a lot of documentation about this. They also have a rich snippet testing tool to confirm that your html is properly formed and able to be parsed.

Also, I stumbled upon a great post by Jay Myers about the potential of these formats and how it relates to SEO.

With Google’s adoption of this it puts microformats as a new and important SEO component. Utilizing the examples above coupled with the tools that Google has for testing will help create a more human and machine readable web. Microformats.org can help get you started if you are interested in becoming a contributor.

Share Button

My new blog mock in HTML5

Share Button

So this week I discovered http://conceptfeedback.com/ (http://bit.ly/bJk6CO). I know lots of people say, don’t trust the opinions of random people out there but at the same time, that is the internet constituency hitting my site. It is good to have some opinions from a diverse set of people. I loved the opinions that I have received thus far, some good ideas have come out of it. I encourage people to try this service, as long as you review other people’s work it is free to try.

So here is the mockup I posted there, which I have built in HTML5:

New Blog Mockup

You can check out and comment on the new concept in conceptfeedback.com or on this site.  Once I have this fully solidified I will send around my general markup philosophy for setting up a wordpress skin in HTML5.

Share Button

Pure CSS3 Rounded Corners Slideshow

Share Button


Be sure to view this example in SAFARI or CHROME.

CSS3 and HTML5 are presenting some exciting opportunities for the future.  So I set out to test some of the features that are emerging.  The ability to do rounded corners and shadows has been around for awhile. With CSS3 it’s such a pleasure to be able to quickly add these.  Webkit specifically is now supporting animation capability. There are now options for styling that include quite a few animations. Hopefully this will get picked up in FireFox and standardized (it’s in the proposed spec for the w3c). Although I think we still need some work in terms of a dynamic set of N items, this is a good start. To be able to do this without any JavaScript or Flash at all is a pretty great step in the right direction for the web, oh and yes, this works on your iPhone.

View Larger Example

First I setup some basic markup:

<div class="slideshow-example-frame">
	<img class="img1" src="2010-quattroporte-sport-gt-s-sedan_01-thumb.jpg" alt="2010 Quattroporte Sport GT-S" />
	<img class="img2" src="2010-grandcabrio-convertible_01-thumb.jpg" alt="2010 GrandCabrio" />
	<img class="img3" src="2010-grandturismo-s-automatic-coupe_01-thumb.jpg" alt="2010 GrandTurismo S" />
	<img class="img4" src="2010-grandturismo-s-coupe_01-thumb.jpg" alt="GrandTurismo S Coupe" />
</div>

Then I setup some basic CSS3 to do the rounded corners and shadows:

<style type="text/css">
	.slideshow-example-frame {
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
		-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
		width:420px;
		height:131px;
		margin:30px 30px 30px 22px;
		background-image:url(2010-grandturismo-s-coupe_01-thumb.jpg);
	}

	.slideshow-example-frame img {
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration:15s;
	}

	.slideshow-example-frame img {
		position:absolute;
		top:0;
		left:0;
		margin:30px;

	}
<style>

Next add the animation pieces:

<style type="text/css">
	.slideshow-example-frame .img1 {
		-webkit-animation-name: fadein1;
	}

	.slideshow-example-frame .img2 {
		-webkit-animation-name: fadein2;
	}

	.slideshow-example-frame .img3 {
		-webkit-animation-name: fadein3;
	}

	.slideshow-example-frame .img4 {
		-webkit-animation-name: fadein4;
	}

	@-webkit-keyframes fadein1 {
		0% {opacity:0;}
		5% {opacity:1;}
		25% {opacity:1;}
		100% {opacity:1;}
	}

	@-webkit-keyframes fadein2 {
		0% {opacity:0;}
		25% {opacity:0.0;}
		30% {opacity:1;}
		50% {opacity:1;}
		100% {opacity:1;}
	}

	@-webkit-keyframes fadein3 {
		0% {opacity:0;}
		50% {opacity:0;}
		55% {opacity:1;}
		75% {opacity:1;}
		100% {opacity:1;}
	}

	@-webkit-keyframes fadein4 {
		0% {opacity:0;}
		75% {opacity:0;}
		80% {opacity:1;}
		100% {opacity:1;}
	}
<style>
Share Button

Will IE8 finally rid us of IE6?

Share Button

IE8 was officially released on March 19th, 2009. Marking a great day for people begging for the deprecation of IE6. As of the 5th of April, IE8 was up to 3+% and based on IE8’s speed, standard support, and security, I’m hoping this trend continues upward, displacing IE6 which is showing ~22%. (Source: gs.statcounter.com)

IE8 has added numerous new security features. Some of which are more functional than others. IE8 has instituted two new filters; the cross-site scripting filter, and the smart screen filter (successor to the anti-phishing filter). The cross-site scripting (XSS) filter, sure to cause developer pains, blocks XSS requests from executing and pops up a notification that an attack has been blocked. I’m still waiting to see how this plays out for people using CDN’s like Akamai to host their static content. I haven’t noticed any problems on my sites as of yet. The Smart Screen filter warns you if there is one website impersonating another. This has become a popular attack method of sites for capturing private data or getting on to your machine so its nice to see Microsoft addressing this. Included in this is domain name highlighting, a feature sure to be missed by the average consumer. In terms of Security, IE8 also offers the InPrivate browsing feature (Porn Mode), that doesn’t log your history or cache anything.
In terms of Speed from personal experience the IE8 rendering has been quite good. Microsoft posted some speed comparisons (http://arstechnica.com/microsoft/news/2009/03/microsofts-own-speed-tests-show-ie-beating-chrome-firefox.ars) that show some excellent times. If anyone has seen speed comparisons to IE6 I would love to see them.

IE8 now passes the Acid 2 test completely. The Acid 2 test is a test page written to help browser manufacturers ensure support for proper web standards in their products. This makes me and many other web developers very happy, especially if they can get a better than 3.4% market penetration with IE8. Sadly IE8 doesn’t pass the next level of standards; the Acid 3 test, which tests for numerous items including DOM Traversal, DOM Events, CSS 3 Selectors, SVG, and ECMA Script. To Microsoft’s credit though, FF3 is only scoring a 71/100. Opera 10 and Safari 4 are the only ones showing promise of passing that currently.

So what we are left with is a highly secure, fast browser, which is out of Beta (unlike Gmail). So here is where I plead: Please, Please, Please if you are an IT person reading this, get your people off of IE6, the browser is now 8 years old, susceptible to all types of attacks and incredibly slow at rendering pages. Any costs associated with making an upgrade to the newest version of IE are trumped by the costs of trying to deal with and support the nightmarish flood of junk that IE6 brings with it. And if you are still concerned, don’t forget, IE8 has a compatibility mode. There are no excuses anymore to keep your people on IE6. I have a dream that IE6 will be below 3% by the end of the year.

Share Button

Dynamic Fading Menu Post Redux

Share Button

Looks like the post that I wrote back in January is becoming more popular lately:

Saw some examples here: http://snook.ca/technical/jquery-bg/

and here: http://www.alistapart.com/articles/sprites2

I hope that as ui programmers move forward with these new effects, there is an effort to keep these effects clean. I always like to avoid the carnival look whenever possible.

Share Button

Dynamic Fading Mouse Overs

Share Button

Mouse overs are fun and help indicate available actions but, is there any way to spruce them up? Transitions really help add polish to an application or site. One idea is a fading mouse over, so that the button gradually reaches a pressed state. I set this menu up accordingly to create this.

The menu uses a standard <li> setup and builds the rest from JS and CSS. Here is the markup:

<ul class=”topnav”>
<li class=”navLeft” hoveritem=”#sngLiHover0″></li>
<li hoveritem=”#sngLiHover1″> <a href=”#”>Home</a></li>
<li hoveritem=”#sngLiHover2″> <a href=”#”>Account</a></li>
<li hoveritem=”#sngLiHover3″> <a href=”#”>Cart</a></li>
<li hoveritem=”#sngLiHover4″> <a href=”#”>Help & Info</a></li>
<li hoveritem=”#sngLiHover5″> <a href=”#”>Contact Us</a></li>
<li class=”navRight”></li>
</ul>

The script then attaches the needed information:

//SNG popup and nav
//navigation fader
/* Written by Scott Gale (c) */
/* Requires jquery1.2.1 */

(function($) {

window.SNG = window.SNG || {};

$(function(){
    $("#cwdusacontainer .topnav li").not(".search").not(".navRight").each(function(count){
        var width = (parseInt($(this).width(),10)+24)+"px";
        var height = $(this).height();
        $(this).attr("hoverItem","#sngLiHover"+count);
        var div = document.createElement("div");
        div.className = "liHover";
        div.id = "sngLiHover"+count;
        $(div).width(width);
        $(div).css("opacity","0");
        $(this).prepend(div);
    });

    $("#cwdusacontainer .topnav li").not(".navRight").not(".search").not(".navLeft").hover(
        function() {
            $(this.getAttribute("hoverItem")).animate({opacity:'1'});
        },

        function() {
            $(this.getAttribute("hoverItem")).animate({opacity:'0'});
        }
    ).click(function(){
        document.location = $(this).find("a").attr("href");
    });

    $(".search input").click(function() {
        if(this.value == "Quick Search") {
            this.value = "";
        }
    }).blur(function() {
        if(this.value == "") {
            this.value = "Quick Search";
        }
    });
});

})(jQuery);
Share Button