It’s always good when you learn something that you already knew isn’t it?

I know that probably doesn’t quite make sense but what I mean is that quite often you know how things work but it’s how they are applied that can make all the difference. This is the beauty with CSS where you can always be surprised at the different ways the same layout can be achieved. This happened to me the other week when I noticed a different way that a site had been centered using simple techniques already known to us all. Indeed, many of you may already have used this method but it seems to have escaped my attention until now.

The Od Way

One of the first things I learned to do in CSS was how to horizontally and vertically center a fixed width and height element. This could be an image for a splash page (god forbid) or a small centered site that some designers love to do. Originally this was accomplished with absolutely positioning an element 50% from the top and 50% from the left of the viewport. This of course only places the top left corner of the element at the center of the viewport and you then need to drag the element back into a central position with a negative margin equal to half the height and half the width of the element.

Let’s take a look at the old way of doing this and note what the problems are.

Click to continue reading »

Introducing the Comment Info Tip Plugin

You asked for it - now you got it!

This WordPress plugin provides you and your commenter’s a bit of information on their posting stats.

How It Works
When you mouseover a commenter’s name you will see a tip appear displaying some information about that given commenter. The tip will display 1 of 4 results:

1. If the commenter has only posted once then it will say so in the tip (see number 1 in the legend below).
2. If the commenter has posted more than once we will look up the last three posts they have commented in and display links to those posts. This allows you to see which type of posts this user is interested in and easily navigate to those posts (see number 2 in the legend below).
3. If the commenter has posted more than once we will attempt to search their RSS feed and show an excerpt from their last post (see number 3 in the legend below).
4. If it’s a pingback or trackback the tip will indicate so (see number 4 in the legend below).

DOWNLOAD THE PLUGIN HERE

* Please give it a shot and return here and tell us where you installed it. Let me know how it’s working for you and of course if you have suggestions or advice please let me know.

• Great Nike Commercial - I love it!
• Web Design Company in Colorado - Nice work…
• Advanced Gaming Graphics Into The Next iPhones - The next generation of iPhone appears set to claim exclusive access to advanced graphics core and video decoding technology.
• 10 Things IT Needs to Know About Ajax - Nice article.
• (Really) Stunning Pictures and Photos - REALLY stunning!
• An Absolute Beginner’s Tutorial On Flex 3 - Good Primer…

The Open Screen Project is working to enable a consistent runtime environment – taking advantage of Adobe® Flash® Player and, in the future, Adobe AIR™ — that will remove barriers for developers and designers as they publish content and applications across desktops and consumer devices, including phones, mobile internet devices (MIDs), and set top boxes. The Open Screen Project will address potential technology fragmentation by allowing the runtime technology to be updated seamlessly over the air on mobile devices. The consistent runtime environment will provide optimal performance across a variety of operating systems and devices, and ultimately provide the best experience to consumers.

Specifically, this work will include:

• Removing restrictions on use of the SWF and FLV/F4V specifications
• Publishing the device porting layer APIs for Adobe Flash Player
• Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
• Removing licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free

WOW!!! That may be the best news I have heard about Flash in a long time! An open platform will not only help developers but should certainly bring more people to the Flash table.

* source

• Better Ways to Writing JavaScript - Good advice by Dustin Diaz…
• Funny Student at Exam Hall - Nice move…
• All 120 Crayon Names, Color Codes and Fun Facts - good write up…
• Jeff Han’s Perceptive Pixel, Inc. - Is there an SDK? Who wouldn’t want to develop for that?
• 20 (Rare) Questions for Google Search Guru Udi Manber - worth a read…
• GTA IV - teaser on the XBox 360…

This is an old question but worthy of a mention once again especially as I seem to have spent the last few days repeatedly pointing out to posters why their page isn’t displaying properly. No matter how good a coder you are no one is perfect and the odd typo or spare character will often creep into your code when you aren’t looking.

Why Should I Validate?

I don’t know the answer “why you should validate” but I certainly know why I validate.

In a recent article on Search-This a poster commented that it was unnecessary to validate HTML and CSS and served little benefit so I thought it would be wise to explain why I always validate and why it is good for me. You can then make up your own minds whether you should validate or not.

Click to continue reading »

Greasemonkey is a wonderful thing. I enjoy the little (or sometimes not so little) challenges posed by websites that I want to modify. One of the most difficult scripts to write for is Gmail, because of its dynamic nature and its reliance on very large helpings of obfuscated JavaScript and HTML. In addition, you can't use Firebug to debug scripts, which is a major annoyance, so alert and GM_log become one's best debugging friends. To make writing Greasemonkey scripts a bit easier, the chaps on the Gmail team supplied an API, which one commenter describes as "truly incredible, forward thinking". It really is quite nice.

Yesterday I decided to add a little bit of functionality to Gmail. I wanted to be able to isolate messages from a mailing list I subscribe to that nobody had replied to. This would require marking as read "conversations" or messages containing "Re:" at the start of the subject line. The obvious place to put links to do this is along with the other "selectors" above the thread list (Figure 1).

Figure 1

I call them "selectors" simply because Gmail has given each "link" (actually a span) a custom selector attribute. The original markup before adding the links after "Unstarred" looks like this (it isn't nicely indented in Gmail's code though):

So, it looks pretty simple to add a couple of commas and two more spans. And it is, but how to access the containing div is what the Gmail API makes easier. This is the complete script, and we'll start off with the main loading business and the function that handles the adding of these two new links, addlinks:

Click to continue reading »