NealGrosskopf.com - Geek Speak

Google vs. China: How It Will Affect Web Workers

Neal Grosskopf — Tue, 16 Mar 2010 20:32:00 -0500

First let me start with this won't be my typical "how-to-like" article which I typically write on my website. I haven't posted many of those over the past month mostly because I was in the process of moving but I'm settled in again.

I've been following the Google vs. China fiasco online, mostly through my RSS feeds, and I've begun to ponder on what a Google-less China would be like. China has 1.3 billion people, or 20% of the earth's population, and is poised to overtake the US as the #1 country in internet users. While China flat-out blocking Google.cn is a big deal (and I suspect this would include all of Google search such as Google.com), what if China blocked all of Google's online services?

Google vs. China

If China decides to block Google an all its services it could be a headache for web developers.

What Makes Google?

To start out with, go and take a look at all the services Google offers >>

Let's say China decides to block everything that is Google i.e. all of Google's online services. Think of all the services you use that are hosted on Google's servers? Here's a list of just a few things I can think of that would be troublesome to web developers:

Google Hosted Javascript Libraries such as jQuery, MooTools etc.
YouTube videos & specifically all those embedded videos around the internet.
Chinese users would no longer be tracked in Google Analytics.
You website would lose all the Chinese traffic Google was sending to it via Google search.
Feedburner would no longer work in China. You would lose any Chinese RSS feed subscribers.
Embedded Google Maps would stop working.
What about all the Gmail users in China?
Using the Google Site Search feature on your website? Not in China you aren't.

So What?

I did a quick search and if China decided to block Google and its services this won't be the first time so perhaps this would only be temporary. Another argument might be that Google isn't a big player in China like their native Baidu search engine. Statistics would help this argument, but even if Google Search isn't a big player in China, I have a feeling many of their ancillary services are even if only behind the scenes.

Aftermath

If China decides to go through with this, I'm predicting that a schism will occur in the internet. There will be the People's Internet of China and the rest of the world's. If China gets away with this, it will be a lot easier to for them to block other, smaller, websites.

Other Takeaways

One takeaway I got from this brainstorming exercise was how reliant many of our websites are on third party providers. Its difficult to build a website nowadays without linking to a resource from another site. Will that site/service be there 5-10 years from now? What happens when it's discontinued? Maybe its web developer job security and I should stop complaining?

What do you think about it? Speak your mind below -

View Comments [0]

Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

Neal Grosskopf — Mon, 08 Feb 2010 22:45:00 -0600

New Facebook Home Page

Above is a screenshot of the new Facebook home page. One change on the new page is showing all types of updates rather than just status updates.

Facebook has once again decided to redesign their home page. These types of changes usually result in millions of users joining groups titled "I hate the new design" or something similar. Being a web designer I sympathize with Facebook.

One thing they changed with the recent redesign was removing the "status updates only" option on their home page. I'm now forced to sift through every group, fan page, image and application post my friends have made. Facebook does give me the option to hide specific applications but with 1000's of apps out there, it isn't practical to hide each and every one. Enter Stylish.

Hacking Facebook's CSS

Using a Firefox addon called Stylish I was able to sift through Facebook's HTML & CSS and determine if they did a good job giving their home page elements proper class names and IDs. For whatever reason Facebook uses custom HTML attributes. One of these was called data-ft. The first value in that attribute is a number that represents various home page types. The example below uses "46" which is plan ol' vanilla status updates:


<div class="GenericStory UIStory clearfix aid_718391393" data-ft="{"sty":"46","actrs":"718391393","fbid":"328181226116","s_obj":"11","s_edge":"1","s_prnt":"11"}" id="div_story_1630882208_328181226116"></div>

Show Status Updates Only

By adding the code below into Stylish it will hide ALL types of updates on the Facebook home except for regular status updates:


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("facebook.com") {
.GenericStory { display: none !important; }
#pagelet_intentional_stream  div[data-ft*='sty":"46'] { display: block !important; }
}

Below is an example of this would be entered into Stylish:

Other Update Types

You could also substitute the number 46 above with one of the below to show only these types of updates by default:

Attribute Value Table
Update Type	Number Value
Fan Page Added	161
Application	237
Friend Added	8
Group Added	21
Photo Added	65
Photo Album Added	247
Video Added	128

To Each His Own

Some people may love seeing everything their friends do on Facebook. I'm more interested in what they have to say and the rest just feels like noise. Feel free to take this code and make it your own.

View Comments [3]

Find Unused CSS Selectors With CSS Usage, A Firebug Extension

Neal Grosskopf — Wed, 27 Jan 2010 22:05:00 -0600

As a website grows so does its stylesheet. The problem is, the opposite is not true. As a pages get removed, seldom do the selectors in the external stylesheet. This becomes even worse with multiple employees, especially if people come and go. Enter CSS Usage.

CSS Usage

Above is an example screenshot showing selectors in green that were found and selectors in red that were not. As a website is browsed, the tool will continue to re-analyze the stylesheet.

I found this Firebug extension a couple weeks ago and thought it was worth talking about. CSS Usage shows up as a tab within Firebug so if you don't have that extension yet, head over to Mozilla's addon site and download it - https://addons.mozilla.org/en-US/firefox/addon/1843

The jist of CSS Usage is to scan your stylesheet selectors and HTML to determine if each selector is used. Used selectors are colored in green while unused selectors are colored in red. Selectors previously found on other pages are colored in dark green

By default it will only analyze a page if you hit 'scan' but I like to turn on the auto-scan feature and just browse around my site for about 20 pages to give it a good mix of selectors. After that I had only a handful of selectors that were left unused. I took those selectors and did a site wide search to try to identify if they were used.

Cons

There are a few drawbacks with the addon. Currently it will only scan pages you visit. It does not have the ability to scan your entire site. Sites with 100's of pages may be difficult to scan with this tool. I also found the line numbering to be a bit flaky (as seen in my screenshot above).

Pros

Some great pros of this addon include cleaning up your stylesheets and reducing filesize. You can also save a little bandwidth by making them smaller in size.

Download

Head over to the CSS Usage page on Mozilla's addon site and give it a try.

View Comments [10]

A List of New CSS Features In Firefox 3.6, Set to be Released Tomorrow

Neal Grosskopf — Wed, 20 Jan 2010 18:15:00 -0600

Firefox 3.6

Firefox 3.6 looks to have plenty of new features for web developers to play with.

Firefox 3.6 is set to be released January 21st and is packing several new and exciting properties in it. Perhaps we can rename Firefox 3.6 to Firefox: Background Edition since the majority of those properties are background related.

CSS Background Gradients

Backgrounds gradients are something I've been requesting for a long time now. It looks like the browser vendors finally listened! To use CSS gradients you'll need to use them within the context of a background-image.

This example will create a horizontal white to black gradient.


html
{
background-image: -moz-linear-gradient(left, #fff, #000);  
}

Advanced Gradients

Firefox also supports more advanced gradients such as radial (circle) gradients and linear gradients at an angle (i.e. diagonal gradients) much like one would create in Photoshop or Fireworks. It will also support color stops which are midpoints in your gradient.

Each of these topics are worthy of their own full length tutorial so I'm not going to dig too deep into them right now. Just be aware that they are now supported by Gecko (Firefox) and Webkit (Safari, and later Google Chrome) based browsers.

To learn more about CSS gradients check out the Mozilla Developer Center page on CSS Gradients.

Multiple Backgrounds in CSS

Multiple backgrounds are what we've all been waiting for. Gone are the days of nesting DIVs like this:


<div id="top-bg">
	<div id="bottom-bg">
		<div id="inner-bg">
		Content
		</div>
	</div>
</div>

We can now use a single element if our page requires multiple backgrounds using the code below:


html
{ 
background-image: url(image1.png), url(image2.png), url(image3.png);
background-repeat: no-repeat, no-repeat, repeat;  
background-position: right top, left bottom, top;  
}

To learn more about multiple backgrounds check out the CSS Spec on Multiple Backgrounds.

CSS Background Scaling

Another background related addition to Firefox 3.6 is the -moz-background-size property. This allows us to resize background images, that are perhaps too big or too small for the element they are in.

If the our image image.png default size is 150px x 75px this would scale the image up larger:


div
{
background: url(image.png) no-repeat left top;
-moz-background-size: 300px;
}

Try It Yourself

Head over to http://www.mozilla.com/firefox/ and grab a copy for yourself.

View Comments [10]

Create An Icon Bouncing Effect With jQuery & CSS

Neal Grosskopf — Tue, 19 Jan 2010 21:45:00 -0600

Adding animations to a webpage can give it a polished appearance to visitors. One effect that can be added, is a bouncing effect on icons or graphics. In many ways this is much like the 'dock' in Mac OSX. Here's a few examples of the effect that I've done in the past.

Icon Bouncing

Above is a visual of what happens when an icon is hovered over. Notice how the Opera logo is slightly higher than the other icons? Click to see a live demo of this effect >>

HTML Structure

Here's the barebones HTML structure:


<ul id="icons">
	<li><img src="image.jpg"></li>
	....
</ul>

CSS Code

The UL gets collapsed by floating the LI's left. One thing I'd recommend is giving the LI's a fixed height. Otherwise the list will be growing taller and shorter as users hover over it causing content on the rest of the page to shift around. Also the padding-top should equal the same amount of pixels as the margin-top in the jQuery code.


#icons
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
}

#icons li
{
float: left;
height: 100px;
padding: 10px 0px 0px 0px;
}

#icons li img
{
display: block;
border: 0px;
}

jQuery Code

This is actually quite simple. I used a custom animation since jQuery's built in effects cannot accomplish this. In my example below, I changed the marginTop & opacity properties on hover. Also, I added .stop() so that if a user hovers over the elements quickly it won't be lagging behind on the animations.


$(document).ready(function(){
	$("#icons img").hover(function(){
		$(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
	},function(){
		$(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
	});
});

CSS Transitions

This same effect can be accomplished using CSS Transitions in browsers that support it:


#icons li img
{
-webkit-transition-property: margin-top, opacity;
-webkit-transition-duration: .4s, .4s;
}

#icons li img:hover
{
margin-top: -10px;
opacity: .75;
}

Demo

Click to see a live demo of this effect >>

View Comments [0]

A jQuery Tool That Generates External Stylesheets From Your HTML Structure

Neal Grosskopf — Sun, 17 Jan 2010 17:30:00 -0600

HTML to CSS Tool

My HTML to CSS tool will parse through your HTML structure, pull out IDs, classes and any inline CSS and create a basic stylesheet for you. To see this article in action, feel free to skip right to the live demo >>

I find myself converting Photoshop files to HTML & CSS quite frequently. Whenever I find myself repeating a task I look for ways to make that task more efficient and therefore waste less of my time. One way my time is wasted during this process is when I rip out all of my inline CSS into an external stylesheet (or most likely an embedded stylesheet in the HTML document temporarily). Usually this involves identifying the IDs and class names of all my HTML elements as well as any inline styles I may have applied in the short-term.

Because of this, I set out to write some javascript that would parse my HTML, look for any elements with and ID or class name. The code also pulls out the inline styles and sorts them by property name. Finally, it also builds unordered list's CSS because whenever I have a unordered list within my template, it almost always needs further styling (think, navbar, footer etc.)

Import jQuery

As with any project, I import Google's hosted jQuery library. This will hopefully be cached in a users browser already:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

jQuery Pseudo Code

Below is a quick overview of the jQuery:


//Dim variables
//Check in DOM is ready to be used
//Select elements with an ID or CLASS

	//Select unique CLASSES

	//Create UL-LI placeholder CSS

	//Extract inline style CSS

//Push results to TEXTAREA

Variables

Below are globally scoped variables which are outside the $(document).ready function. output is used for the final CSS. selector is really just a helper variable which can used to narrow the search for IDs and classes. This means you could look for elements only within another element i.e #content [id], #content [class]. Finally tclasses is used to store the names of classes so there are not duplicate class names in the stylesheet.


var output = "";
var selector = "";
var tclasses = new Array();

The rest of the code is wrapped within the $(document).ready function below. This basically checks to see if the DOM is loaded. Next it loops through elements that have an ID or class and finally sends the output to a textarea.


$(document).ready(function(){
	$(selector + " [id]," + selector + "[class]").each(function(i){
	});
	
	//Code here
		
	$("body").append("<textarea id='output'>"+output+"<\/textarea>");
	$("#output").css({height: 400, width: 800});
});

Weed Out Duplicate Classes

Next up, the ID/class names are pulled from the element list being looped through. Class names are then added to a global array. Finally since I find myself styling UL and LI elements frequently, I added some code in to create placeholder CSS for these i.e:


#parent ul
{
}

#parent li
{
}

Here's the code that creates that:


	var tmp = "", childOutput = "";
	var tid = $(this).attr("id");
	var tclass = $(this).attr("class");
	var tstyle = $(this).attr("style");

	//Avoids adding duplicate CLASSES to stylesheet
	if(jQuery.inArray(tclass, tclasses) == -1)
	{
		//Adds current CLASS to array
		if(tclass) tclasses.push(tclass);

		//Adds UL and LI placeholder styles if they are children of a CLASS or ID
		$(this).children("ul").each(function() {
			if(tid)
			{
				childOutput = "#" + tid;
			} else {
				childOutput = "." + tclass;
			}
			childOutput = childOutput + " ul\n{\n}\n\n" + childOutput + " li\n{\n}\n\n";
		});

Extracting Inline CSS

Next, the inline CSS is extracted from the elements. I'll explain later why this is tricky between different browsers:


if(typeof(tstyle) != "undefined")
{
	properties = new Array();
	properties = tstyle.toLowerCase().split(";");

	//Raw input for testing
	//$("#test").html($("textarea").html() + "\n\n" + properties)

	//Loops through style attribute properties and trims them
	for ( var i=0, len=properties.length; i

Sending the Results to a Textarea

Finally the results of the above code is dropped in a textarea:


//Creates output depending on if current element is a CLASS or an ID
if(tid)
{
	output = output + "#" + tid + "\n{" + tstyle + "\n}\n\n" + childOutput;
} else {
	output = output + "." + tclass + "\n{" + tstyle + "\n}\n\n" + childOutput;
}


Browser Variances

I found the inline CSS returned from Javascript could vary by browser, especially when working with CSS shorthand notation. Internet Explorer 
prefers to seperate out border: 1px solid #000; to the following:


border-bottom: black 1px #000;
border-left: black 1px #000;
border-right: black 1px #000;
border-top: black 1px #000;


While Firefox does the following:


border: 1px solid rgb(0, 0, 0);


Webkit based browsers such as Safari & Google Chrome seem to be more web developer friendly by leaving the original CSS intact:


border: 1px solid #000;


Other Browser Variances

This gets further complicated when using the background property especially in Firefox:


-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: rgb(221, 221, 221) none repeat scroll 0% 0%;


Fortunately, Safari and Google Chrome again, keep the original CSS intact:


background-color: #f1f1f1;


Because of this, you may consider using my tool in Google Chrome or Safari as they seem to keep the original code the same.

Check out the final results >>

A Bookmarklet

Finally, I created a Bookmarklet 
that can be used on any webpage or website on the internet. This means you can add this as a bookmark/favorite and run it on any website.

Thoughts?

So what do you think? Does this look like something that could help you speed up your development time? Leave your thoughts below >
View Comments [7]



Creating Facebook Styled Photo Tagging With CSS & jQuery
Neal Grosskopf — Sun, 03 Jan 2010 17:05:00 -0600

	
	Example vs. Facebook
	In this article I'll show you how to create a Facebook-like photo tagging feature. If you're like me you're probably more interested in a live example than digging through this 
	entire article so here is a live demo of the above example.


Importing the jQuery Library

As with all my examples using jQuery, I link to Google's hosted version. If a user already has the file in their browser cache, it cuts down on another HTTP request thus 
saving your users time.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



HTML Setup

Below is all the HTML needed for my image tagging example. I dynamically insert much of the other needed HTML via jQuery. Originally I planned to make this a jQuery plugin. This could still easily be accomplished by taking the code within 
$(document).ready & adding it into a standard plugin code block.


<img src="image.jpg" style="width: 604px; height: 423px;">



CSS Setup

Unlike many of my other articles, there is a lot more code needed to achieve the desired effect. Because of this I probably won't walk you through line-by-line. Instead 
I'll give a brief description for some of the main elements in the DOM.

#tag-wrapper - This is wrapped around the IMG element and is given a relative position. This allows us to position other elements absolute.
#tag-target - This is a DIV which boxes in the target which a user has clicked on within the photo.
#tag-input - This is a DIV which contains a label, input box & submit/reset buttons. It is attached to the #tag-target DIV.
.hotspot - Finally after a tag has been assigned, a .hotspot DIV is created and positioned over the desired location on the image.


html, body { margin: 0px; padding: 0px; }
body
{
color: #666;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

#tag-wrapper
{
border: 1px solid #ccc;
box-shadow: 0px 0px 10px #bbb;
-webkit-box-shadow: 0px 0px 10px #bbb;
-moz-box-shadow: 0px 0px 10px #bbb;
display: block;
padding: 10px;
position: relative;
}

	#tag-target, #tag-wrapper img { cursor: crosshair; }
	
	#tag-wrapper img { position: absolute; }
	
	#tag-target
	{
	display: none;
	border: 4px solid #fff;
	box-shadow: 0px 0px 20px #000;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	height: 100px;
	width: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	}
	
	#tag-input
	{
	background: #fff;
	display: none;
	padding: 5px;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 137px;
	z-index: 2;
	}
	
		#tag-input label
		{
		display: block;
		font-weight: bold;
		}
		
		#tag-input input
		{
		border: 1px solid #ccc;
		color: #888;
		display: block;
		margin: 5px 0px;
		outline: 0px;
		padding: 3px;
		width: 124px;
		}
	
	.hotspot
	{
	border-width: 0px;
	box-shadow: 0px 0px 0px #000;
	-webkit-box-shadow: 0px 0px 0px #000;
	-moz-box-shadow: 0px 0px 0px #000;
	height: 100px;
	width: 100px;
	position: absolute;
	}
	
		.hotspot:hover, .hotspothover
		{
		border: 4px solid #fff;
		box-shadow: 0px 0px 20px #000;
		-webkit-box-shadow: 0px 0px 20px #000;
		-moz-box-shadow: 0px 0px 20px #000;
		z-index: 1;
		}
		
		.hotspot span { display: none; }
		.hotspot:hover span, .hotspothover span
		{
		background: #fff;
		display: block;
		font-weight: bold;
		padding: 3px 0px;
		text-align: center;
		}

.remove { color: #748950; cursor: pointer; text-decoration: underline; }



Global Javascript Variables

Below are the global Javascript variables used. targetX & targetY plot coordinates for where the user clicks on the image. tagCounter is used 
to give each of the tags a unique ID


//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;



$(document).ready Javascript

In the main code block I've liberally added comments to explain each line of code:


$(document).ready(function(){
	//Dynamically wrap image
	$("img").wrap('<div id="tag-wrapper"></div>');
	
	//Dynamically size wrapper div based on image dimensions
	$("#tag-wrapper").css({width: $("img").outerWidth(), height: $("img").outerHeight()});
	
	//Append #tag-target content and #tag-input content
	$("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"><label for="tag-name">Person\'s Name:</label><input type="text" id="tag-name"><button type="submit">Submit</button><button type="reset">Cancel</button></div>');
	
	//$("#tag-wrapper").click(function(e){
	$("img").click(function(e){		
		//Determine area within element that mouse was clicked
		mouseX = e.pageX - $("#tag-wrapper").offset().left;
		mouseY = e.pageY - $("#tag-wrapper").offset().top;
		
		//Get height and width of #tag-target
		targetWidth = $("#tag-target").outerWidth();
		targetHeight = $("#tag-target").outerHeight();
		
		//Determine position for #tag-target
		targetX = mouseX-targetWidth/2;
		targetY = mouseY-targetHeight/2;
		
		//Determine position for #tag-input
		inputX = mouseX+targetWidth/2;
		inputY = mouseY-targetHeight/2;
		
		//Animate if second click, else position and fade in for first click
		if($("#tag-target").css("display")=="block")
		{
			$("#tag-target").animate({left: targetX, top: targetY}, 500);
			$("#tag-input").animate({left: inputX, top: inputY}, 500);
		} else {
			$("#tag-target").css({left: targetX, top: targetY}).fadeIn();
			$("#tag-input").css({left: inputX, top: inputY}).fadeIn();
		}
		
		//Give input focus
		$("#tag-name").focus();	
	});
	
	//If cancel button is clicked
	$('button[type="reset"]').click(function(){
		closeTagInput();
	});
	
	//If enter button is clicked within #tag-input
	$("#tag-name").keyup(function(e) {
		if(e.keyCode == 13) submitTag();
	});	
	
	//If submit button is clicked
	$('button[type="submit"]').click(function(){
		submitTag();
	});

}); //$(document).ready


Functions

Finally, here is a few functions I use for adding/removing tags:


function submitTag()
{
	tagValue = $("#tag-name").val();	
	
	//Adds a new list item below image. Also adds events inline since they are dynamically created after page load
	$("#tag-wrapper").after('<p id="hotspot-item-' + tagCounter + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + tagCounter + ')" onmouseover="showTag(' + tagCounter + ')" onmouseout="hideTag(' + tagCounter + ')">(Remove)</span></p>');
	
	//Adds a new hotspot to image
	$("#tag-wrapper").append('<div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');
	
	tagCounter++;
	closeTagInput();
}

function closeTagInput()
{
	$("#tag-target").fadeOut();
	$("#tag-input").fadeOut();
	$("#tag-name").val("");
}

function removeTag(i)
{
	$("#hotspot-item-"+i).fadeOut();
	$("#hotspot-"+i).fadeOut();
}

function showTag(i)
{
	$("#hotspot-"+i).addClass("hotspothover");
}

function hideTag(i)
{
	$("#hotspot-"+i).removeClass("hotspothover");
}


Above & Beyond

I did add a few effects that Facebook does not have. For instance I added fading effects on pretty much everything I could. I often find that adding a fade or slide effect 
gives applications a more "polished look". I also added an animation if you click a new location for the target tag. Once again, here's a link to the 
finished product >>
View Comments [6]


A jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer
Neal Grosskopf — Mon, 07 Dec 2009 20:10:00 -0600
I was on the jQuery website the other day reading the documentation and as I neared end of the page I noticed one of the footer links appeared to have a text-shadow. 
For whatever reason I decided to inspect the element with Firebug, only to discover it wasn't using CSS3's text-shadow property. 
What I found was the text was actually duplicated and layered on top of the exact same text, but slightly offset.



This isn't exactly a new technique, I mean check out You're the Man Now Dog for probably one of the earliest examples. In any case, IE6, IE7 & 
IE8 do not support the CSS3 text-shadow property, and the only form of shadowing they support is the proprietary shadow filter.
So I figured, why not make a jQuery plugin where you can just apply this to an element and have it automatically do all the work for you while still working in IE6, IE7 & IE8.

HTML Setup

Below is the HTML I'll apply the text shadow to:


<p><span class="shadow-me">Text Shadow</span></p>


Javascript Setup

Here is the basic plugin call. The first parameter is the color of the shadow, the second the x-offset and the third the y-offset.


$(document).ready(function(){
	$(".shadow-me").textShadow("#000",1,1);
});


jQuery Plugin

Finally, below is the jQuery plugin I wrote. The parent variable basically creates a random ID that I use to target the jQuery created element. I then wrap the target element in a DIV which is 
used as a position: relative; container. Next I set the height of that container so that it overflows correctly.

After that, I create the additional HTML element to act as a faux shadow and position it according to the parameters.


(function ($) {
$.fn.textShadow = function(shadowcolor,x,y) {
	return this.each(function(i){	
		var parent = "tsw-" + Math.floor(Math.random()*100000);
		
		//Create container		
		$(this).wrap('<div class="text-shadow-wrapper" id="' + parent + '"></div>');

		//Set height of container so that it properly overflows
		$("#" + parent).css("height", $(this).css("font-size")); //Math.abs()??
		
		//Add text-shadow class to initial element
		$(this).addClass("text-shadow");
		
		//Adds shadow HTML element
		$(this).before('<span class="shadow">' + $(this).text() + '</span>');

		//Positions shadow HTML element
		$("#" + parent + " .shadow").css({left: x, top: y, color: shadowcolor});
	});
};
})(jQuery);



Examples

Below are a few examples I created with this technique. You can also view these on my demo page to see what's going on behind the scenes.



Todos

There's a few things I'd need to improve on the plugin before it gets used in any production environment. First the shadow loses any specific font-styling applied directly to the original text. One could craft their selectors in a way that wouldn't make 
this a problem. Also the plugin could be improved to check against the original text's font properties and apply those to the shadow. Finally this doesn't appear to work very well if placed in between a large amount of a text. It works best 
as a page heading or in a nav.
View Comments [2]


Fix The Internet: Write You Own Custom Website CSS Rules With Stylish
Neal Grosskopf — Thu, 08 Oct 2009 22:17:00 -0500
For those familiar with Greasemonkey, a Firefox addon for writing custom Javascript on websites, Stylish alows you to write custom CSS for websites. Stylish makes it extremely easy to fix annoying 
websites (such as MySpace), hide advertisements and diagnose web design issues.

Fix The Internet(s)

One of best uses of Stylish is to override website's poor design choices. MySpace, a website that gives uneducated users control of the design is a great example of this. I spent roughly 2 minutes on the site 
looking for an example and had no trouble finding a couple.



Creating Custom CSS Rules

Stylish makes it really easy to fix a broken design. With a little CSS know-how you can fix MySpace and other offending sites by first clicking on the Stylish icon, then going to "write new style" and finally choosing whether you want to create a new rule 
for a single URL, domain or your own rule. I almost always pick domain to make the changes site-wide.



After making your choice, you're presented with an input box. For those familiar with CSS, simply add in whatever CSS you want, give it a name and click "save". Within the two curly brackets you can insert any CSS rules you want.



Pro Tips

This is a great chance to brush up on your CSS Selector Specificity skills since you'll need to give your selectors more weight than the current ones on the website. The easiest way to achieve this is to 
use the !important keyword like so:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("myspace.com") {
html, body { background-image: none !important; }
}


Another great tool to add to your arsenal is Firebug. With Firebug you can determine how to circumvent horrible designs by sifting through the design's stylesheet. Once you've 
determined what selector's properties are creating the ugliness it's easy to copy and paste that into to Stylish and add !important to the end.

Other Uses?

Another great use for Stylish is to re-enable functionality on websites. I've noticed some websites using pop-up DIVs to force users into registering. With Stylish, you can hide these annoyances and continue using the site without giving away your 
information:



In the screenshot above, the website imeem.com forces uses to register in order to listen to music for free. The CSS below hides the annoying DIV:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.imeem.com") {
.mask, .bd { display: none !important; }
}



HTML & CSS Diagnostics

Another excellent use of Stylish is CSS Diagnostics. If you're not familiar with CSS Diagnostics, they're basically CSS Selectors that highlight ugly parts of your HTML such as FONT 

element or the use of TABLE attributes 
such as BORDER, CELLSPACING etc.


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("example.com") {
font, table[cellspacing], table[border] { border: 1px solid red !important; }
}


Hide Advertisements

Another great use of Stylish is to hide ads on webpages. While I realize that the Firefox addon Adblock Plus already does this, occasionally it will 
miss an ad on website.



Notice how I hid the default Google search results ads above with a single selector below:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.google.com") {
#mbEnd { display: none !important; }
}


Conclusion

Stylish is a great tool for web designers and developers. Below are links to addons I mentioned in this article to get you started:


	Stylish
	Firebug
	Adblock Plus
View Comments [5]


Everything You Need To Know About CSS Selector Specificity
Neal Grosskopf — Thu, 17 Sep 2009 20:54:00 -0500
There's an obscure topic of CSS that I think many people aren't aware of. It's called 'specificity'. I suppose it's not as glamorous as rounded corners, drop shadows or animations but it's still just 
as important in your day to day work as any other part of CSS.

So what is CSS specificity? It's a weighted value system for all of your selectors. Essentially, each piece of your selector has a value applied to it. This can be explained easiest in 
three separate groups: IDs, classes & elements. Perhaps one way to look at it is like a card games where face cards have a greater value than say, a 2,3, or 4.



IDs

IDs are the most powerful type of selector you can use. Each ID in your selector will contribute 100 points to the selector's total value. Another thing to remember is IDs should be unique so there's really no 
reason you should be using more than one ID in your selector, unless you're trying to give your selector a higher point value than another one.

The first example below has a point value of 100, while the second example has a point value of 300.


#content { }
#content #aside #caption { }


Classes

Your second most important type is the class selector. Unlike IDs classes can, and should be used multiple times in a single HTML document. Classes occupy the 10's place in our point value system. 
This means that every instance of a class in your selector is worth 10 points. This means that a single ID will trump a 9 class selector.

The two selectors below are of equal value. Notice how many classes were used compared to just a single ID, both which have a 100 point value.


#caption { }
.content-highlight .aside-type .float .bold .uppercase .quote .featured .etc .etc .etc { }


Elements

Last but least are elements. An element selector is more generic than IDs and classes. They have the widest range of focus of all selectors. Because of this, element selectors occupy the ones position. Element 
selectors have a value of 1 point each.

Again, both selectors below have the same point value. Notice how many elements were needed to equal a single class. Selectors inside the negation pseudo-class, :not(), are counted like any other, but the negation itself does not count as a pseudo-class.


.uppercase { }
html body div div blockquote span span span b i { }


Odds & Ends

As we all know the 3 groups of selectors above does not encompass everything. Attributes selectors, and pseudo-classes both have the same value as classes which is 10 points each. The universal selector "*" has no point value.

Real World Usage

Okay, so far I've shown you some absolutely terrible examples of this in use. Almost none of the selectors above should be seen in a production environment. Lets take a look at some real world examples. How the system works 
is each type is tallied up, and then concatenated together. So 1 ID + 1 Classes + 1 Element would equal 111 points. See below for some more examples from my own stylesheet.




CSS Selector Specificity Examples

	Selector
	IDs
	Classes
	Elements
	Weight


	#header h2
	1
	0
	1
	101


	#content a[href$=".css"]
	1
	1
	1
	111


	#content input[type="text"]:focus 
	1
	2
	1
	121


	.code li:before 
	0
	2
	1
	21


	#helper ul li a
	1
	0
	3
	103


	.actions li:hover b 
	0
	2
	2
	22


	#content .comment:target 
	1
	2
	0
	120


	#content img.loading 
	1
	1
	1
	111


	table tr:nth-child(odd)
	0
	1
	2
	12



Why Is This !important

So now we know how to give our selectors a point value, so what? Why does this even matter? Specificity is extremely valuable if you're working on a website with multiple stylesheets. Perhaps it's a content management system that has a default stylesheet 
and your job is to overwrite its default values. The old MySpace layout is a great example where people would use specificity to modify their pages to their liking. Perhaps you're a beginner adding some new CSS to a 1000 line CSS file only to find your changes 
didn't change anything.

Finally I couldn't talk about specificity without mentioning "!important". !important can be applied to individual properties to give them a super-value, thus trumping any prior property references.


#content { color: black; }
html .content { color: #333 !important; }


Resources


	CSS Specification: Calculating a selector's specificity
View Comments [6]


Identify The Age Of Your Word & PDF Files Using CSS & jQuery
Neal Grosskopf — Tue, 08 Sep 2009 21:49:00 -0500
	
		
	Word & Acrobat	
	Learn how to display a "new" icon next to your Word and PDF files.  Skip To Demo >>


A request that often pops up at my workplace is the ability to tag files as "new" when we add them to our websites. The sites that I develop are usually littered with PDFs and Word documents so 
this can be a daunting task to manage whether a file is "new" or not since there are hundreds of files on the site.

Ultimately what happened, is our .NET programmer added a field to the database for date which we enter in the last updated date and he does the logic server-side. That worked great for PDF and DOC files in the 
database but in reality, that only cover 50% of the files on our site.

CSS Only Solution?

My original idea was to solve this problem using only CSS. After all, CSS is my specialty. I was thinking around the lines of adding some metadata to my anchors like so:


<a href="august_2009_updates.pdf rel="2009-08-01">August Updates</a>


As you can see the above example is clearly time-sensitive. Normally what would happen is a month or two later, this file would be sitting on our site with the "new" icon still intact. My CSS only 
solution was to do something like this:


a[href^="2009-08"] { background: url(new.png) no-repeat left center; }


The problem with this is I don't have the ability to use variables or date-based logic in CSS so once it passes August, I'll need to update my CSS selector. PS I'm aware that I could use some sort of server-side 
solution serving CSS up via ASP or PHP and then use variables. I hate mixing server-side code with static files like CSS or Javascript so I avoided this.

Enter jQuery and CSS

Next, I created a jQuery plugin that tags files by date with a new icon. It can be called with a selector that will narrow the focus of the search. Some parameters to this plugin 
are what attribute to search (I used the rel attribute. The next parameter is the name of the class name that will be assigned. After that it takes a parameter for the number of days that have passed 
to determine if the link is "new" or not. Finally the last parameter is for debugging purposes.


$(document).ready(function(){
	$("#content a").newClass("rel","new",90,true);
});


JQuery Plugin

Below is the corresponding jQuery plugin I wrote:


(function($){
	$.fn.newClass = function(attr,classname,offset,debug){
		var now = new Date();
		var day = 1000*60*60*24;
				
		return this.each(function(i){		
			var old = new Date($(this).attr(attr));	
			var diff = Math.floor((now.getTime() - old.getTime()) / day);			
			if(diff < offset) $(this).addClass(classname);			
			if(debug) $(this).append(" - " + diff + " day(s)"); //testing
		});
	}
})(jQuery);


To see this in action view the demo >>
View Comments [0]


Easy Way To Get Your Twitter Followers Count/Custom Twitter Badge Using PHP
Neal Grosskopf — Mon, 24 Aug 2009 21:09:00 -0500
	
		
	Custom Twitter Badge	
	An example of what can be accomplished by creating your own Twitter Badge.


So you're on Twitter now? Like back in high school, we all want to be popular on Twitter as well. Prove it by displaying your followers count with this simple PHP script.

One thing that annoys me with all third party web services is they feel the need to brand their widgets. I don't blame them for doing this but it deters me from ever using them. 
What usually results from this is I tinker around and figure out a way to get the data I need without all their ugly branding.

The Setup

First we'll need to use PHP's built-in curl function. This will grab the output of other web pages, files, etc. Note I lifted the script below from another website so feel free to 
correct me on it.


function curl($url)
{
	$ch = curl_init($url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch,CURLOPT_HEADER, 0);	
	curl_setopt($ch,CURLOPT_USERAGENT,"www.YOURDOMAIN.com");
	curl_setopt($ch,CURLOPT_TIMEOUT,10);	
	$data = curl_exec($ch);
	curl_close($ch);
	return $data;
}


Custom Twitter Badge Function

Next, we create the function that parses the curl output. This uses the Twitter API. Simply call the function with your own Twitter username and it will return the number of followers you have:


function GetTwitterFollowerCount($username)
{
	$twitter_followers = curl("http://twitter.com/statuses/user_timeline/".$username.".xml?count=1");
	$xml = new SimpleXmlElement($twitter_followers, LIBXML_NOCDATA);
	return $xml->status->user->followers_count;
}

echo GetTwitterFollowerCount("YourTwitterName");


Notes

Please take into consideration that you can only ping Twitter 150 times per hour. Because of this, it would be wise to create a text file and use it to cache your followers count. Also the function will 
only return a plain ol' number. Its up to your to think of a creative way to display this to your site's visitors. The more attractive you make it, the more likely your users will click it.

Related Posts:


	How To Get Total Feedburner Subscribers With JQuery and ASP
	How To Get Total Diggs Using JQuery And ASP
	How To Get Delicious Bookmark Total Using JQuery And JSON
View Comments [10]


Converting A Site From Classic ASP To PHP: Some Things To Consider
Neal Grosskopf — Wed, 19 Aug 2009 12:37:37 -0500
Well, after a month of spending my evenings coding till the wee hours of the night, I've finished converting my website NealGrosskopf.com from Classic ASP to PHP. After going through this grueling ordeal I thought 
I'd write up a quick article detailing my experience and perhaps save a fellow web developer some time should they ever endeavor this process.



Learn The Basics

If you're not familiar with PHP like I was, I'd suggest you learn the basic syntax differences between ASP and PHP. I pretty much self taught myself PHP using the tutorial website 
Tizag. I feel like I'm a pretty competent ASP coder so learning the basics of PHP wasn't too hard for me. Here's a few observations I found.


	
Built In Functions
PHP seems to like ordering parameters in built in functions slightly different than ASP. For instance in ASP you have:


replace("Input String","Find","Replace With")


In PHP the order is slightly different as well as having a slightly different function name:


str_replace("Find","Replace With","Input String")


Some other examples of this in PHP are str_len (len in ASP), strpos (instr in ASP) and explode (split in ASP)



Parse Errors

Forgetting to add a semi-colon ';' at the end of your PHP line = 'white screen of death'

At least with my host's configuration (or possibly my own stupidity) parsing errors such as forgetting the semi-colon results in a very not-useful white, blank, empty PHP error page. This 
can make troubleshooting the error very, very hard.	

Fortunately I found a solution to this. Portable XAMPP. 
I essentially ran web server locally which allowed me to test out my PHP pages (minus the My_SQL database). For whatever reason, my local copy did not give me the white screen of death and let me see the exact error message. 
This helped me find the error 10x faster. I suggest if you're starting out with PHP, download Portable XAMMP and tinker with it locally, for free!



Code Order

One problem that I ran into was the placement of my functions within my code. In ASP I could include files at the end of my page, and even have functions within these includes be called even before the code 
has reached that area of the script. I suspect ASP pre-compiles the functions ahead of time while PHP does not. My solution to this was to re-organize my code so that all the functions appeared first 
within my include structure.



Variable Scope, and isset()	

Scope Another problem I ran into was variable scope. In Classic ASP I'd often something like this:


FirstName = "Neal"	
...	
somefunction("Grosskopf")	
function somefunction(LastName)
	response.write FirstName & " " & LastName
end function


In PHP this will not work unless you use the $GLOBALS[] array to your variable in the function like so:


$FirstName = "Neal";
...	
somefunction("Grosskopf");
function somefunction($LastName)
{
	$GLOBALS["FirstName"];
	echo $FirstName . " " . $LastName;
}


I'd also change global variables inside functions in Classic ASP. To fix this in PHP simply add the global keyword to the variable:


function somefunction()
{
	global $FirstName";
	$FirstName = "Some Other Name";
}


I'm sure these aren't good programming practices, but hey it works!

isset() In ASP you could do the following even if the variable has yet to be set:


if variable <> "" then
'do something
end if


In PHP this is not acceptable. Instead you'll need to use a built in function called isset(). This basically checks to see if the variable has been set yet:


if(isset($variable))
{
//do something
}


This isn't a huge difference, but since I was using the ASP method quite a bit, I needed to re-learn the new way to accomplish this in PHP.




Redirects

Another common problem you'll run into when converting from ASP to PHP is redirects. In Classic ASP you could do a redirect using the following:	


response.redirect("thank-you-page.asp")


In PHP if you need to use the header function


header("Location: thank-you-page.php");


Another thing to consider is if you place your header function further down your page, possibly after you've already output content to your page. If this happens then you'll need to 
use the output buffer, at the top of your page:


ob_start();


I'd also recommend saving your session data before you do a redirect in PHP like so:


session_write_close();


Here's all the code at once:


ob_start();

//Some other code here

session_write_close();
header("Location: thank-you-page.php");





Redirect Those Old ASP Pages To PHP

The great thing about switching to PHP is you now have the ability to use the much hailed .htaccess file. My very limited perception of this file is it acts as a gatekeeper between every file on your website 
and the end-user requesting the files. It allows you to intercept any request made to the server. One sweet rule I found for .htaccess is the ability to redirect my old ASP pages to their PHP equivalent:


RedirectMatch 301 /(.+)asp$ /$1php


Its sad but that one line takes care of it all for me. Google will now crawl my new PHP pages, and users with bookmarks to the old pages will still find them. It's almost too easy!


Final Thoughts

Those are just a few of the differences I've experienced between PHP and ASP. I'm sure there's thousands more. Overall I'm very happy with my new PHP website and I'm happy I've finally taken the 
time to switch.

Anyone else convert an ASP site to PHP before? How was your experience?
View Comments [9]


A New Method To Target Internet Explorer In Javascript
Neal Grosskopf — Tue, 14 Jul 2009 19:49:42 -0500
Preface: It's quite possible that I'm not the first to discover this. But I did come up with this idea without finding a prior example of it before.

I was working with JQuery at work last week and Internet Explorer was giving me some trouble, mainly due to it's sucky Javascript performance and some of it's flaky text+opacity issues. 
My solution to this was to remove animations from IE and change the element's CSS properties without an animation. I was now tasked with finding a way within Javascript to target IE.



An aside, I'm fully aware that IE's JScript engine contains a method at targeting IE using JScripts conditional comments, but I've never been too impressed with these 
because they only allow me to target JScript versions, and not individual IE builds.

Enter: CSS Conditional Comments

Being a seasoned CSS veteran of the web standards wars (ok kidding) I turned to what I know best...CSS Conditional Comments.

I've seen most people use Conditional Comments (CC) to target IE in CSS hacks, but I seldom see people serve IE anything other than stylesheets with this method. I think a few people forget that you can actually wrap CCs
around any valid HTML elements (see PositionIsEverything for a sweet method of doing this).

CCs are pretty simple to use. They're pretty much HTML comment blocks that only IE recognizes. The example below will only show up to IE6 users.


<!--[if IE 6]>
Hello IE6!
<![endif]-->


We can also target previous browser releases with the following:


<!--[if lte IE 6]>
Hello IE6!
<![endif]-->


Enough Already! What About Javascript!

Using these same principles, we can wrap conditional comment blocks around our Javascript blocks. Then flag variables within these blocks to identify the browser as IE6, IE7 or plan ol' IE.


<script type="text/javascript">
//By default, flag browser as not IE to non IE browsers
var ie6 = false;
var ie = false;
</script>

<!--[if lte IE 6]>
<script type="text/javascript">
//Flag browser as IE in our conditional comment block
ie6 = true;
ie = true;
</script>
<![endif]-->

<script type="text/javascript">
if(ie6 == false)
{
	alert("You're cool, you're not using IE6");
} else {
	alert("Ahh! Why are you using IE6!?!?");
}
</script>


View Demo >>

Target All Versions of IE In Javascript

We could also target all versions of IE with the following code:


<script type="text/javascript">
var ie = false;
</script>

<!--[if IE]>
<script type="text/javascript">
ie = true;
</script>
<![endif]-->

<script type="text/javascript">
if(ie == false)
{
	alert("You're cool, you're not using IE");
} else {
	alert("Ahh! Why are you using IE!?!?");
}
</script>


Drawbacks

There are a few drawbacks to this method. First, the conditional comment code will all have to appear inline on each page its used. I suppose one could create an external .js file and wrap 
it with the conditional comments. Second, we'll have to account for all the versions of IE we want to target or at least use LTE/GTE to target IE6/IE7 and its previous versions.
View Comments [7]


Emulate C#'s AppendFormat Method In Javascript Or Classic ASP
Neal Grosskopf — Thu, 09 Jul 2009 07:03:53 -0500
Let me preface this article with the statement that I am by no means a 'good' C# programmer. I've used it a bit at work (we're currently transitioning to it) so I've seen it here and there. 
I know a fair amount about Classic ASP however, so when I noticed a neat little feature in C#/ASP.NET I wanted to see if I could mimic it in other languages.

AppendFormat Method

The method in C# is called AppendFormat. It belongs to the System.text namespace which contains the StringBuilder class and AppendFormat is a method of this. Here's the 
MSDN article if you'd like to find out more about it.

Old School Method

The neat thing about this method is it's an alternative to concatenation. Concatenation is basically the process of combining text and variables together like so:


var a = "lorem ipsum dolor"
var b = "adipiscing elit"
document.write(a + " sit amet consectetur " + b)


I think we're all pretty familiar with the code above. We're also probably familiar with some of the annoyances of the code above such as the fact that every time we combine text with a string variable, we need to start a quotation mark. 
Quotation marks are bothersome because sometimes (or rather often times in my case) we forget to properly close the ending quotation mark resulting in an error. More trouble can ensue when we have to start re-arranging variables and text 
within the concatenated string.

Another problem is I often forget to include the concatenation symbol in between my text and variables. This, if anything, is probably the number one mistake I make.

Emulation Using Javascript

As I reviewed my co-workers C# code, I felt that perhaps C# had a good point so I set out to emulate this in other languages.

First of all, below is the syntax we use for this alternative method. We use keyword itentifiers i.e. {NUMBER} to indicate an item should be placed in its spot. That number corresponds with the index of the array items on the right i.e NEAL, GROSSKOPF.
 The neat thing with this is we can easily move {0} arround without having to worry about closing the quotation marks and there is no need to use the concatenation symbol...ever!


AppendFormat("Lorem ipsum dolor sit {0} {1} amet, consectetur {0} adipiscing {0} elit.", ["NEAL", "GROSSKOPF"])


Below is the function I wrote to emulate this in Javascript. I pass the function an array, loop through it, and replace the placeholders with the array item in the same index.


<script type="text/javascript">
function AppendFormat(input,arr)
{
    for (i = 0; i < arr.length; i++)
    {
		while (input.indexOf("{"+i+"}") != -1)
		{
			input = input.replace("{"+i+"}", arr[i]);
		}
    }
    return input;
}

document.write(AppendFormat("Lorem ipsum dolor sit {0} {1} amet, consectetur {0} adipiscing {0} elit.", ["NEAL", "GROSSKOPF"]));
</script>


Easily Re-Arrange Items

The great thing about this, is we can easily re-arrange items simply by moving the placeholder around in the text block like so:


AppendFormat("Lorem ipsum dolor sit {1} {0} amet, consectetur {1} adipiscing {0} elit.", ["NEAL", "GROSSKOPF"]);


Classic ASP Variant

I also wanted to create the same function but in Classic ASP, my language of choice:


function AppendFormat(input,arr)   
    for i = 0 to ubound(arr)
        input = replace(input,"{" & i & "}",arr(i))
    next   
    AppendFormat = input
end function

response.Write AppendFormat("Lorem ipsum dolor sit {0} {1} amet, consectetur {1} adipiscing {1} elit.", array("NEAL","GROSSKOPF"))


As you can see, this is pretty much the basic princple that we used for the Javascript version.

Conclusion

I'm sure this article isn't as exciting as some of my others, and for all I know, most my readers are much better programmers than myself but I thought it was a cool idea so I wrote about it.
View Comments [4]


How To Create CSS Text/Font Gradients With CSS
Neal Grosskopf — Wed, 01 Jul 2009 20:04:44 -0500
Something that CSS is currently lacking is the ability to add gradients to our text blocks. Currently we can add drop shadows to text or change the color of it but not add gradients. I suspect 
that in the coming years this will be a new property but until then here is a method to do it.

HTML Setup

The HTML Setup is pretty simple. Just place an empty SPAN element inside your heading element:


<h3><span></span>Text Here</h3>


Using JQuery to Automatically Insert SPAN Elements

I think a few people might find the above code unsightly, so here's a method to leave the empty SPAN element out of your HTML and inject it via JQuery:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("h3").prepend("<span></span>")
});
</script>


CSS Setup

The most important part of this code is setting the H3 element's position to relative. I'd also recommend setting the line-height to the same height as the font-size used and also reseting the margins back to zero.


h3
{
font-size: 25px;
line-height: 25px;
margin: 0px;
position: relative; 
}


Next, we position the empty SPAN element absolute and give it a height and width. Using this SPAN we can overlay various background-images over the H3 element.


h3 span
{
display: block;
height: 26px;
position: absolute;
width: 100%;
}


Gradient Effect

The first effect I'll demonstrate is a simple gradient. To do this we use a simple white to transparent gradient image and set it as the SPAN element's background-image. We can then 
position the background-image higher or lower depending on how strong we want the effect to be.


h3 span { background: url(gradient-white.png) repeat-x left 0px; }



	
	In the example above, the black transparent area represents the SPAN while the black border represents the bounds of the H3 element.
	Demo
	When viewing the demo, take your cursor and select the gradient text. This will give you a good understanding of how the gradient works - 
	View Demo >>


Gradient Effect With Hover

We can also apply a color change on hover with our gradient. Since the color change happens on the layer behind the gradient there is no additional CSS we must do other than change the H3's color when hovered.


h3 span { background: url(gradient-white.png) repeat-x left 0px; }
h3:hover { color: #990000; }


View Demo >>

Two Tone Effect

Another effect we can do is apply a two toned text color to our text. To do this we use a white rectangle with it's opacity lowered and then position it over our H3.


h3 span { background: url(dual-white.png) repeat-x left 0px; }


View Demo >>

Sliding Door Effect

Finally, my last effect uses JQuery to create an animation when the text is hovered. Using a little JQuery we can slide the SPAN's background-image up and down when hovered on
giving it sort of a 'garage door' effect.


<script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/backgroundPosition/jquery.backgroundPosition.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("h3 span").hover(
		function () {
			$(this).stop().animate({backgroundPosition: "(0px -27px)"}, 400); 
		}, 
		function () {
			$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 400);
		}
	);
});
</script>


View Demo >>

Got any other effects that could be accomplished using a background-image? Share them below!
View Comments [1]


Firefox 3.5 Set To Be Released Tuesday. Here Are Some Exciting New CSS Features In 3.5
Neal Grosskopf — Sun, 28 Jun 2009 21:22:58 -0500
	
		
	Firefox 3.5	
	Firefox 3.5 looks to have plenty of new features for web developers to play with. I'll go over some of new CSS features that are new to 3.5.


For much of my web career I've been an Internet Explorer stooge but when Firefox 3 came out last summer, I made the switch and never looked back. Firefox is just so heavily oriented to 
web developers and designers that it's hard to rationalize using any other browser. Sure, Opera and Safari have slightly better support but their lack of developer tools make me opt for Firefox.

Firefox 3.5, the latest version of the browser is set to be released this Tuesday. This intermediary release is probably aimed more at developers than end users and that's what excites me the most. After 
reviewing the 3.5 release notes I thought I'd point out a few of the new features that I'm most excited about.

@font-face Support

Since the inception of the web, we've been limited to about a dozen font types. With @font-face we're now able to choose from 1000's if not more. By embedding fonts our sites will be more accessible 
to people with screen readers, and it will also improve our search engine optimization by using pure text rather than images. This will also make our lives easier because we'll be able to change 
font properties via CSS rather than having to open up Photoshop or Fireworks to edit an image file.

Currently browsers using Webkit also support @font-face and Opera 10 will support it. Internet Explorer has it's own proprietary method.


@font-face
{
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

body { font-family: "Bitstream Vera Serif Bold", serif }


Box Shadow & Text Shadow

A personal favorite of mine is the box-shadow property. Creating drop shadows on the web can be pretty painful, especially when the size of the box may vary from page to page. With the 
new box shadow property we won't need to worry about that anymore. Safari also supports box-shadow while Opera and IE do not. Firefox 3.5 will also support text-shadow (with no -mox prefix). This means that Opera, Safari and Firefox 
all support this while IE, again has it's own proprietary method.


div {  -moz-box-shadow: #000 10px 5px 5px; }
h2 { text-shadow: #000 1px 1px 2px; }


CSS Transformations

Originally introduced by Safari/Webkit we now have the ability to use CSS Transformations. I haven't delved into this much but I have used CSS Transitions a few times on various projects which I wish 
they would have implemented instead.

New CSS Selectors

Probably the most important aspect of CSS is the ability to select elements. Firefox 3.5 gives us a few more tools to achieve this. Having used JQuery extensively for the past several months, I've 
found myself using almost all of these to circumvent browser's lack of support. With Firefox 3.5 we'll be able to natively use these selectors (and more):


/* Zebra Stripes */
tr:nth-child(odd) { background: #fff; }
tr:nth-child(even) { background: #eee }

/* Alternate Method for Zebra Stripes */
tr:nth-of-type(odd) { background: #fff; }
tr:nth-of-type(even) { background: #eee }

/* Last 5 LIs of a List */
li:nth-last-child(-n+5) { color: #ccc; }

/* Alternate Method */
li:nth-last-of-type(5) { color: #ccc; }


CSS Media Queries

Media queries allows web developers to target certain scenarios that end users may have. For instance in the example below I'm adjusting the width of my #content DIV if 
the end user is on a PDA and has a screen size smaller than 300px.


@media handheld and (max-width: 300px)
{
#content { width: 300px; }
}


You could also take this a step further and mine for information about your end users by testing the size of elements on your page:


<style type="text/css">
@media handheld and (max-width: 300px)
{
#content { width: 300px; }
}
</style>

<script type="text/javascript">
if ($(#content).width() = "300px")
{
//do something, i.e. email, write to text file etc.
}
</script>


Other New CSS Features

Here's a list of a few other CSS features I didn't mention above.


	opacity (no longer -moz-opacity)
	word-wrap
	-moz-border-image
	-moz-column-rule
	-moz-column-rule-width
	-moz-column-rule-style
	-moz-column-rule-color


Further Reading:


	Firefox 3.5 for Developers
	Comparison of Layout Engines (CSS) - Wikipedia
	CSS 3 Selectors
View Comments [0]


YouTube Hacking: How To Retrieve Video Screenshots From YouTube Videos
Neal Grosskopf — Wed, 10 Jun 2009 21:43:51 -0500
It is often useful to display a preview of an embedded YouTube video on your website rather than the long winded HTML object/embed code. Fortunately YouTube provides us with an undocumented way to retrieve video stills.

Each video has three separate stills that you can choose from after you upload the video. YouTube, now also support high definition videos and because of that, provides higher quality stills as well. Below I will run through all the various 
YouTube images that are available for each video.

The Setup

Below is a break down of the YouTube URL. For all of my examples I have chosen my new favorite YouTube video Leprechaun in Mobile, Alabama.


Breakdown Of URL

	Domain
	Folder
	Video
	Image


	http://i.ytimg.com
	/vi/
	nda_OSWeyn8
	default.jpg



The Default YouTube Image

YouTube's default video image, i.e. the image that the uploader has chosen, can be retrieved by using the default.jpg image. Its dimensions are 120px x 90px and its file size is 3.07KB. You may want to use this image when you want the exact image the 
original uploader intended.





Series Images 0 - 4 

Next YouTube provides us with images 0.jpg, 1.jpg, 2.jpg & 3.jpg. These 4 images are basically the 4 images the uploader can chose from after uploading a video.

Image 0.jpg is larger, sized at 320px x 240px and its file size is 11.77KB.



Images 1, 2, 3 are smaller images sized at 130px x 97px.







High Quality Images

Next, YouTube provides us with what they label 'high quality' images. These are named hq1.jpg, hq2.jpg, hq3.jpg & finally hqdefault.jpg.

Images 1, & 3 are smaller images sized at 130px x 97px. Even those these are prefixed with 'hq' the images appear to be of the same quality that images 1, 2, & 3 were.




Image 2 is larger and sized at 480px x 360px. Its file size is 14.63KB. I'm not sure why this image is larger because it seems to break the pattern of the other images. It does appear to be the default image so perhaps that has something to do with it.



Finally, the hqdefault.jpg is the largest and highest quality of all the images. It is sized at 480px x 360px. Its file size is 14.63KB. I would recommend using this image as your primary image due to its quality.



Conclusion

You now probably know more than you ever wanted to know about the available images YouTube provides us for each video. Feel free to bookmark this article as you'll probably need to refer back to it someday while working on a project.
View Comments [8]


Quick & Easy Ways To Spice Up Your Web Site's Font Styling
Neal Grosskopf — Wed, 03 Jun 2009 21:41:27 -0500
One of the key elements of a good website design is the styling of the site's font. I think this is an area where many of the more 'mathematically inclined' web developers struggle. To help those out that 
are willing to take it, I'll show you how to take the default Times New Roman 16px font and make your design shine.

By default browsers will apply the following settings to your font out of the box:


body
{
color: #000000;
font-family: "Times New Roman";
font-size: 16px;
letter-spacing: 0px;
line-height: 18px;
text-align: left;
}


We're all familiar with the appearance of this font, and often times, are turned off by this font styling because of how common and boring it looks.

Gray is the New Black

First lets get rid of that default and obnoxious font color #000000. I recommend you choose a value between #888888 and #333333 for your website's font color. If you need help picking a color I recommend 
using Eric Meyer's Color Blend Tool. I would also like to point out that using a color lighter than #888888 will not have enough contrast on a 
white background and will be difficult for your users to read. On the flip side, a color darker than #333333 is starting to get into that loud and obnoxious range again. I personally like to 
choose #555555.


body
{
color: #555555;
}


Times New What?

Next lets 'can' Times New Roman for a different, less 'plain' font. A side note, Times New Roman is a great font, and there's a time and place for it, but being the browser default font, I tend to shy away from using 
it too often.

Font types can also be broke into two different groups. Serif and Sans Serif. Sans serifs fonts do not have the small tails after letters. An example of a sans serif font is Arial. An example of a serif font is 
Times New Roman. Below is a list of some of the more content-useful fonts to chose from when designing a website. Notice how some of the fonts take up more space than others: 

Sans Serif


	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Arial
	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Verdana
	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Tahoma	
	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Trebuchet MS


Serif

	
	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Times New Roman
	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Georgia
	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Palatino Linotype
	ABCDEFGHIJKLMNOPQRSTUVWXYZ - Lucida Sans	


Of the choices above, I find Arial to be the easiest on the eyes. If you want to be a bit edgier you can chose fonts 2-4 which are used a bit less than the others.

Need help? Check out my extremely useful Font Comparison Page to see which font you like best.
 
Size Matters

By default browsers will assign your font a font-size of 16px. While 16px is big enough that most users will find it comfortable to read, 12px is really the internet's de facto font-size. Visit some of your favorite websites and you'll discover that almost all of them
use 12px as the main content's font-size. It's perfectly ok to use other font sizes, but for your main content I'd stick with 12px - 14px.


body
{
font-size: 12px;
}


Give Your Font Some Breathing Room With Line-Height

Probably the single most easy CSS change you can make to your font, with the biggest impact, is to adjust your line-height. Line-Height is the spacing between the lines of text on your web pages. By default browsers set this to 18px. At 18px you will have about
9px of space between your top and bottom line.


		
	Line Height Comparison	
	The first block of text has the default line-height of 18px while the second block has a line-height of 27px. Notice how the second block of text is easier to read.	


Straighten Out With Text-Align: Justify

My final recommendation is to experiment with the CSS property text-align, specifically with the justify value. By default, browsers will assign the value of text-align: left; to your text. Using the value of 'justify' we can make all of our blocks of text 
have straight edges on the left and right.


		
	Text Align Comparison	
	The first block has text-align: left; while the second block has text-align: justify; I find that the justified text helps reinforce the grid layout in your web design.	


Putting It All Together

Below is a summary of everything I've just went through. Also check out my step by step results page.


body
{
color: #555555;
font-family: Arial;
font-size: 12px;
line-height: 27px;
text-align: justify;
}


View the metamorphoses from Times New Roman to my example above. >>
View Comments [3]


Browser Comparison of Available Print Area Width
Neal Grosskopf — Tue, 26 May 2009 18:35:04 -0500
This article is a companion article to my "Browser Comparision of Available Screen Width When Using 1024x768" which I think many people found useful. The other day at work a co-worker complained to me that
a webpage was getting cropped off when printing it. I then had to tinker with the width of a few different elements on the page to get it to fit. After finishing that I began to wonder, what the max-width is that can be used various browsers when printing.

I ran a quick test of all the browsers I had installed to see at what width, would the browser's print preview window crop off my fixed width DIV. Here are the results I found:


Browser Comparision of Available Print Area Width

	Browser
	Max-Width
	Default Settings


	Firefox 3 @ 100%
	686px
	Shrink To Fit


	Safari 4
	718px
	> 718px Triggers Shrink To Fit


	Opera 9.5 @ 100%
	730px
	80% & Shrink To Fit


	IE8 @ 100%
	670px
	Shrink To Fit


	IE7 @ 100%
	670px
	Shrink To Fit


	IE6 @ 100%
	670px
	75%



Notes On My Results

You'll notice that many browser's default settings are set to 'shrink to fit'. This may solve the problem of extra-wide content when printing most of the time. I also decided, that when given the option, I would set the resize option to 100% to make all my 
browsers equal.

Also when I ran the test, I did not modify the page's margins which I'm sure would have an affect on the results.  Safari also had an interesting feature that triggered shrink to fit when the content grew beyong it's max-width. 
I thought this was a pretty useful feature compared to most the other browsers.

Other results we can see, is Internet Explorer has stayed tried and true throughout it's past three versions sticking with 670px each time as it's max-width. Opera provides the most real-estate at 730px.

Conclusion

When writing print stylesheets knowing that the lowest common deneminator is Internet Explorer at 670px will help you when creating print stylesheets.

Related Articles


	Browser Comparision of Available Screen Width When Using 1024x768
	Go Green With CSS Print Stylesheets
	Using Media Targeting With CSS With @Media
View Comments [1]

Selector	IDs	Classes	Elements	Weight
#header h2	1	0	1	101
#content a[href$=".css"]	1	1	1	111
#content input[type="text"]:focus	1	2	1	121
.code li:before	0	2	1	21
#helper ul li a	1	0	3	103
.actions li:hover b	0	2	2	22
#content .comment:target	1	2	0	120
#content img.loading	1	1	1	111
table tr:nth-child(odd)	0	1	2	12

Browser	Max-Width	Default Settings
Firefox 3 @ 100%	686px	Shrink To Fit
Safari 4	718px	> 718px Triggers Shrink To Fit
Opera 9.5 @ 100%	730px	80% & Shrink To Fit
IE8 @ 100%	670px	Shrink To Fit
IE7 @ 100%	670px	Shrink To Fit
IE6 @ 100%	670px	75%

NealGrosskopf.com - Geek Speak

Google vs. China: How It Will Affect Web Workers

Google vs. China

What Makes Google?

Other Problems

So What?

Aftermath

Other Takeaways

Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

New Facebook Home Page

Hacking Facebook's CSS

Show Status Updates Only

Other Update Types

To Each His Own

Find Unused CSS Selectors With CSS Usage, A Firebug Extension

CSS Usage

Cons

Pros

Download

A List of New CSS Features In Firefox 3.6, Set to be Released Tomorrow

Firefox 3.6

CSS Background Gradients

Advanced Gradients

Multiple Backgrounds in CSS

CSS Background Scaling

Try It Yourself

Create An Icon Bouncing Effect With jQuery & CSS

Icon Bouncing

HTML Structure

CSS Code

jQuery Code

CSS Transitions

Demo

A jQuery Tool That Generates External Stylesheets From Your HTML Structure

HTML to CSS Tool

Import jQuery

jQuery Pseudo Code

Variables

Weed Out Duplicate Classes

Extracting Inline CSS

Sending the Results to a Textarea

Browser Variances

Other Browser Variances

A Bookmarklet

Thoughts?

Creating Facebook Styled Photo Tagging With CSS & jQuery

Example vs. Facebook

Importing the jQuery Library

HTML Setup

CSS Setup

Global Javascript Variables

$(document).ready Javascript

Functions

Above & Beyond

A jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer

HTML Setup

Javascript Setup

jQuery Plugin

Examples

Todos

Fix The Internet: Write You Own Custom Website CSS Rules With Stylish

Fix The Internet(s)

Creating Custom CSS Rules

Pro Tips

Other Uses?

HTML & CSS Diagnostics

Hide Advertisements

Conclusion

Everything You Need To Know About CSS Selector Specificity

IDs

Classes

Elements

Odds & Ends

Real World Usage

Why Is This !important

Resources

Identify The Age Of Your Word & PDF Files Using CSS & jQuery

Word & Acrobat

CSS Only Solution?

Enter jQuery and CSS