Right now I’m going to talk about CSS specificity. First, a CSS selector is simply the element or grouping of elements that you’re specifying a style for. For example, #nav > ul is a selector: an unordered list within the element with the ID nav. They can also be more complex; for instance, the first line in a paragraph could be represented by this CSS selector: p:first-line. Each of those is what I’m talking about when I say selector.

Each selector in a stylesheet has a certain rank, or specificity, that is used to determine which have higher priority. I was always under the impression that the last selector written had the highest priority; but it appears to not be case (as I kind of always suspected, since the last selector didn’t always seem to have higher priority).

Selector rankings are represented by a 4-digit number — or rather, 4 1-digit numbers separated by commas: a, b, c, d.

a is used to show an inline style. If there is no inline style for this particular selector, the number is always 0.
b is the number of IDs being used in the selector. An ID is represented by the # symbol followed by the ID attribute of the HTML element.
c is the number of pseudo-classes and attribute selectors. A class is selected using a period, then the class name (.content). An example of an attribute selector is div[id="content"].
d is the number of elements and pseudo-elements in the selector. Elements are any HTML element, including div, a, p, ul, etc. A pseudo-element could be p:first-line or li:last-child.

Here are a few examples of how to calculate these ranks:

div.content — 0, 0, 1, 1
.nav > ul — 0, 0, 1, 1
#sidebar > p.about:first-line — 0, 1, 1, 2

The ranking of elements is easy:

• 0, 0, 1, 1 is higher than 0, 0, 0, 1.
• 0, 2, 1, 1 is higher than 0, 2, 0, 1.

If two selectors with the same target have the same ranking, the last one in the stylesheet will have higher priority. Also, any universal selector (*) will have a specificity of 0.

So pay attention to your selectors and their specificity. It may save you hours of debugging your stylesheets, and the headache of wondering why the style you’re applying to an element isn’t working.

A good navigation is one that the user doesn’t take much notice to. What the user wants to focus on is the content, not the navigation menu. When a navigation is being noticed, that means it’s not doing its job. It’s not intuitive. It’s not quickly leading the user to the content that he wants. Certain elements in a navigation’s design make it stand out enough not to be noticed. If that makes any sense. Let me explain by talking about some current trends in navigation.

Descriptive Navigation. You may have noticed that some navigation is beginning to include descriptions. A good example of this is here. This site uses a 2-3 word description of what is included in that particular section. This is especially helpful for sites that may not have especially intuitive words to use for navigation.

Use of Icons. Another popular trend is using icons next to the keyword. This adds a nice design touch if the icons are sharp and sleek looking, and can create a bit more intuition as to what is being clicked on, especially if that icon is used throughout the site to indicate particular sections.

3D Designs. A great way to make your navigation menu stand out from the rest of the page is by adding a 3D effect to it. You can find examples here and here. I’ve personally never tried anything like this, but it’s a great way to make your design focus around that ever-so-important navigation. It’s easy to find and is visually very appealing.

Speech Bubbles. Like 3D navigation, speech bubbles are becoming a popular way to really make the navigation “speak” to the user. It can be used in the design itself, or as a hover effect like at SproutBox.com. Looks very clean, and it makes it seem like the site is socially connected (just by using that simple graphic).

Hover Animations. The hover is effect is one of the more important things you can do for your navigation to make the user really feel like he is interacting with your website. One of the best ways to achieve this is by using short, simple animations. You can create very cool effects that add a beautiful design element to your page, yet come across as professional. Bert Timmermans’ website has an excellent sliding-upward effect on his navigation elements. Utah.travel uses a really cool left-sliding technique that also has the sub-navigation slide out with it. Very slick indeed. One thing about these: Don’t use Flash! There is no need. JavaScript and CSS is all you need. There are many animations you can do with Flash that can easily be done with jQuery — and with navigation, any animation needing Flash may just be a bit too complex.

I certainly didn’t cover all the ideas people are coming up with every day in the world of navigation. However, it is clear that navigation is arguably the most important design element of a website. And as web developers, it is our job to keep up with the rest of the web design world.

I will never do an entire website in flash.

PayPal has a wider variety of options and tools that you can sign up for. Plus, I would guess that it’s a bit more well known for payments, so people may be more inclined to use and trust it. PayPal’s Payment Gateway seems like a very easy way for an online merchant to incorporate it into its online store. Payflow Link takes the user to the PayPal website to complete the transaction. Payflow Pro allows the user to stay entirely on the merchant’s website while checking out, but at a greater cost. There is a one-time setup fee for both in addition to a monthly cost. Also, it costs $0.10 per transaction after the first 500.

Google Checkout has fewer options, but seems to be very straightforward in how it works. You can easily add it to your own custom shopping cart. Depending on the amount of monthly sales your website has, you’ll pay no more than 2.9% of each transaction + $0.30. This might end up being more costly than PayPal.

Not quite sure what the best solution is; I’ll have to do some more research. At this point I’m leaning towards Google Checkout, because I’ve easily found their API documents for custom shopping carts. Have a hard time finding that kind of information for PayPal. Plus, there is no setup fee or monthly fee for Google Checkout.

This post is about finding the best table solution — which, in turn, makes me dislike tables a whole lot less.  We all want to do cool things with our tables, right?  We want the user to be able to click on a header and have it sort the table by that column.  For most tables, this should be a given.  However, nobody wants to see the whole page reload to do that.  I mean, that’s a bit ridiculous.  All that’s happening is that some rows are being moved around.

Paginating is another feature that is definitely needed for large sets of data in a table.  But again, there’s really no point in refreshing the whole web page to move from page-to-page.  This is especially true when rows in a table are often being compared quickly by the user, usually meaning that they are moving from one page to another.

Filtering is the final important feature that should be used in all large sets of data.  I’m not talking about selecting a category from a drop-down and having the page reload, only to display the same table with a few less rows.  The table should automatically eliminate rows that don’t meet the criteria of the filter.

If you’re like me, you’ve found it quite difficult to find a table plug-in that features all three (sorting, paginating and filtering) working simultaneously. You’ve had to find different scripts and make them work together and initiate them at different times. Or hack a script some way to get it to work how you want. Not fun.

The simplest, best and fastest solution I’ve found is DataTables, created by Allan Jardine.  It is a jQuery plug-in (if you start following my blog, you’ll find that I’m a HUGE jQuery advocate), and it supports automatic column sorting, variable length pagination and on-the-fly filtering.  Best of all, it’s free, and degrades quite gracefully with JavaScript disabled.  There is so much customization you can do, I don’t even know where to begin. I would strongly recommend taking a look at that page and learning how to use it. It’s very easy to install, and the package conveniently comes with StyleSheets and a copy of the jQuery library (though I’d recommend getting the latest version from jQuery’s website or Google’s JS API).

One thing that I wanted to do with this that I could not find an example for was have a list of links the user could simply click on to narrow the table down to whatever was clicked on.  For example, let’s say you have a list of code categories you want your table to be narrowed down by, and the user can click on a link to display only those rows in the table with that category.  Your markup would simply look something like this:

<a href=”javascript:void(0);” onclick=”tableName.fnFilter( ‘PHP’, 0 );”>PHP</a> |
<a href=”javascript:void(0);” onclick=”tableName.fnFilter( ‘JS’, 0 );>JavaScript</a> |
<a href=”javascript:void(0);” onclick=”tableName.fnFilter( ‘CSS’, 0 );>CSS</a> |
<a href=”javascript:void(0);” onclick=”tableName.fnFilter( ‘ASP.NET’, 0 );>ASP.NET</a> |

The onclick function is tableName.fnFilter( SEARCH_TERM , COLUMN_INDEX ). That’s all.

It would end up looking something like this above the table:
PHP | JavaScript | CSS | ASP.NET

Of course, this is a very simple example, and I could probably go into more detail in a later post. As for now, this is officially post #1 — that is, if you count the introduction as post #0. And we programmers tend to start counting at 0. Dang arrays!

Oh yeah.  An introduction.  That’s what my very first post is about.  As you will find in the “About This Blog” section, you will see that my name is David Becker, and that I am a web developer living near Chicago, IL.  Yes, I made it a new year’s resolution to attempt posting a web related thought, code-snippet or design every single day.  That’s what this blog is about.

Anyway, that’s all I got for now.  Throughout the course of this process, I would love as much feedback as possible.  Thanks and happy reading!