This is what we’re going to be creating:

To start with, lets create an HTML div element that will be the original pixel that we will work off:

<div id="pixel"></div>

And give it this CSS:

#pixel {
background: black;
width: 1em;
height: 1em;
}

That gives us:

The entire shape is going to be achieved using the CSS3 box-shadow attribute. To explain how this is done, I’ll just give a quick run through of how multiple box shadows can achieve this in relation to the code we have above.

If you take a look at the CSS code we have above, all we have is a black square – think of it as a big pixel – that’s 1em by 1em. Pretty simple, but that’s all we need to start with. A space invaders character (or any old-school 8-bit character, for that matter) is just a collection of pixels, and in this space invaders example the pixels aren’t even different colors making this particular exercise even easier.

What we can do with this ‘pixel’ is add a large number of box shadows to it. Each shadow will be the same height and width as our original square and by not giving the shadow any blur or spread, we can create more sudo-pixels which are replicas of the original (as a side note, each time I reference the word ‘pixel’ I’m referring to the black square as a single sudo-pixel, not actual screen pixels. When talking about 8-bit characters and the such, talking in pixels just makes sense). Combine that with the horizontal and vertical offset (equal to the width and height of the element), we can move these replica pixels around in relation to original to create a picture. Confused? Maybe this picture can explain it better:

There we have the original black ‘pixel’. By adding box-shadow, we have created another ‘pixel’. The cool thing is, we can create as many shadows as we like. That means we can create as many extra ‘pixels’ as we like.

The first line of our space invader’s boxshadow CSS would look like this:

box-shadow: -1em 0 0 0 black,
-3em 0 0 0 black,
-4em 0 0 0 black,
1em 0 0 0 black,
3em 0 0 0 black,
4em 0 0 0 black;

That CSS is just for the first line of the space invader (the line with the eyes). You’ll get something like this:

Hmmm. That looks a little off. The problem here is that as we create those shadows on the negative (both horizontal and vertical negative), the shadows are going to appear outside the browser window. To combat this we need to put a margin on the div so that this margin offsets the distance the shadows are going to appear in. If you look at an image of a space invader, from the middle pixel to the top left we need a margin of 3em up and 5 em left. So put in a margin into the CSS like this:

margin: 3em 0 0 5em;

Now your screen will look something like this:

Now all you have to do is put in the rest of the box-shadow

box-shadow:
-1em 0 0 0 black,
-3em 0 0 0 black,
-4em 0 0 0 black,
1em 0 0 0 black,
3em 0 0 0 black,
4em 0 0 0 black,
-3em -1em 0 0 black,
-2em -1em 0 0 black,
-1em -1em 0 0 black,
0 -1em 0 0 black,
1em -1em 0 0 black,
2em -1em 0 0 black,
3em -1em 0 0 black,
-2em -2em 0 0 black,
-3em -3em 0 0 black,
2em -2em 0 0 black,
3em -3em 0 0 black,
-5em 1em 0 0 black,
-4em 1em 0 0 black,
-3em 1em 0 0 black,
-2em 1em 0 0 black,
-1em 1em 0 0 black,
0 1em 0 0 black,
1em 1em 0 0 black,
2em 1em 0 0 black,
3em 1em 0 0 black,
4em 1em 0 0 black,
5em 1em 0 0 black,
-5em 2em 0 0 black,
-5em 3em 0 0 black,
5em 2em 0 0 black,
5em 3em 0 0 black,
-3em 2em 0 0 black,
-2em 2em 0 0 black,
-1em 2em 0 0 black,
0 2em 0 0 black,
1em 2em 0 0 black,
2em 2em 0 0 black,
3em 2em 0 0 black,
-3em 3em 0 0 black,
3em 3em 0 0 black,
-2em 4em 0 0 black,
-1em 4em 0 0 black,
2em 4em 0 0 black,
1em 4em 0 0 black;

And that’ll give you this:

So hopefully you can see how this technique can be used to create any pixelated 8-bit character using only the CSS box-shadow attribute.

As I mentioned, probably not the most practical way of creating a space invader, but still rather cool.

In WordPress, if you create a post and set the publish date to anything in the future it will automagically schedule the post for that date and time. Most of the time I’m sure that’s nice and convenient but in my case I didn’t want that. I wanted the post to be viewable immediately but show the ‘published date’ as the future date I selected.

Luckily there’s a simple fix for this. There’s an option called ‘post_status’ that you can modify when specifying the details of the loop you are using to grab your posts. You can read more about that on the WP_Query page, but if you’re just looking for some code to cop and paste then this will do the trick:

$loop = new WP_Query('post_status' => array('future', 'publish'));

if (have_posts()) : while ( $loop->have_posts() ) : $loop->the_post();
//Do something here
>endwhile;

endif;

What that’s doing is grabbing all your posts that are either published or are set to be published at some point in the future.

In my case I also added the custom post type details into the arguments and my problem was solved!

Until such time as iOS gets an update with some nice dev tools, we can rely on Firebug Lite to provide some dev functionality. Unfortunately it doesn’t go as far as being able to debug the page’s JavaScript, but it’s HTML and CSS inspector is fantastic. iPads and iPhones don’t play nice with bookmarklets so there’s a few steps you have to take to get it going:

• Bookmark this page (or any other page for that matter. We’re going to be modifying it anyway)
• Name the bookmark something useful like ‘Firebug Lite’
• Copy this text here:

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

• Edit the bookmark you created before and paste in the code you copied over the current URL.
• Done!

Now when you’re viewing a page you want to inspect, click on the bookmark that you just created.You’ll see Firebug Lite at the bottom of the browser window.

Another scenario where I’ve found this useful is trying to inspect dynamic content in Internet Explorer. The IE9 (or IE8) dev tools currently only allow you to inspect the content that hasn’t been altered by JavaScript – Firebug Lite helps get around this.

The problem I ran into was when I had a parent container (with CSS position set to relative) which contained four elements. Three of these were absolutely positoned and one was floated to the left (with a set % width). Without getting into specifics, all this achieved was a nice row of information that expanded nicely when the page was resized.

All was well on every browser I tested on… except IE7. The issue seems to be that IE likes to hide absolutely positioned elements when it’s coded alongside a sibling floated element. I’m talking about disappearing from the entire page here. And, according to some quick Googling, it seems as if this bug isn’t consistant. Sometimes the elements are hidden, sometimes they aren’t. Sometimes the elements are hidden on one PC, while being fine on another. * sigh *

But there is a solution. A quick, dirty hack of a HTML solution. By chucking in an empty div element straight after the disappearing element the element always stays visible. So in my issue that I brielfy explained above I had to put three empty div elements onto the page – one after every missing element.

Maybe there’s a better option – it doesn’t look like there is a CSS only fix (which would be nice).

Goodbye semantic HTML…

For this exercise I’m going to take a part of the 2006 NZ census data (specifically the ‘Highest Qualification and Sex by Age Group’ info) and slowly improve on it. Disclaimer: this was never actually a web table. I’m not taking this table from the web and making it any better – I’m taking a table from an excel spreadsheet and using it as a base to improve from.  On a related note, if you ever want to tab a table from excel and publish it with HTML, use the tool Tablizer (http://tableizer.journalistopia.com/). It makes it all pretty simple (but I do recommend checking the code to get it to a state that you want to work with).

Here’s the table without any styling [table1]. Looks a bit rubbish, really. On a lot of financial and government sites, these types of tables (maybe a wee bit prettier than ours) are surprisingly common. So how about for the first part of this exercise we add a little bit of colour to aid the user’s scanning of the table. We’ll add a color to the header to make that obvious, and maybe we’ll also make the totals at the right of the table  stand out more.

Check out our sample table [table 2] with a little bit of color. Looks better, doesn’t it? You’re probably going to want to investigate a better colour choice than what I’ve done.

Now that’s certainly better than the plain version we first implemented. We should also go one step further with the colour styling and throw in some zebra or alternate row styling. If you’ve got jQuery running on the page then one line of Javascript and one CSS class will do the trick.

.even { Background-color:  #000; }

$('tr:even').addClass('even');

With that running on the table [table 3], we can now scan our eyes over the data and can easily refer back to the information contained in the row by following that coloured row over to the left. In our table this also has the bonus of highlighting not only every second row but, coincidentally, also differentiates the sub-headers of the table (the types of qualifications) and helps distinguish between the three values underneath it.

Speaking of subheadings, there’s a better way that we  could deal with them too. How about we allow the users to open and close these  groups (groups defined by the sub-heading). This cleans up the table – if you were only wanting to look at one section, for example, then closing all the other ones would help you to focus only on what you want. Note in the code below that I’ve included the jquery plugin livequery.

//Click event for making an open group closed
$('.activeGroup').livequery('click', function(event) {
$(this).addClass('inactiveGroup').removeClass('activeGroup');
$(this).parent().nextAll(':lt(3)').hide();
});
//Click event for making a closed group open
$('.inactiveGroup').livequery('click', function(event) {
$(this).addClass('activeGroup').removeClass('inactiveGroup');
$(this).parent().nextAll(':lt(3)').show();
});

Check out the grouping action [table 4]

A further improvement on this would be to make the empty rows by the qualification names the totals until that group is expanded. With a little bit more jQuery magic we can achieve that.

//Click event for making an open group closed
$('.activeGroup').livequery('click', function(event) {
$(this).addClass('inactiveGroup').removeClass('activeGroup');
$(this).parent().nextAll(':lt(3)').hide();
//Replace blank cells with totals
>var toBeReplaced = $(this).siblings().slice(0, 16);

var toReplaceWith = $(this).parent().nextAll().eq(2).children().slice(1, 17).clone();
toBeReplaced.replaceWith(toReplaceWith.clone());
});
//Click event for making a closed group open
$('.inactiveGroup').livequery('click', function(event) {
$(this).addClass('activeGroup').removeClass('inactiveGroup');
$(this).parent().nextAll(':lt(3)').show();
//Blank the cells
$(this).siblings().slice(0, 16).empty();
});

Now that’s looking pretty swanky [table 5]. But what happens if the user scrolls down the page? If the headers disappear above the top of the screen then the user isn’t going to know what column they are looking at. There’s a helpful jQuery plugin called <fixed table header> that keeps the header of your table at the top of the screen if you scroll to a point where it normally wouldn’t be visible. The JavaScript code to do this is:

$('table').fixedtableheader({headerrowsize:2});

Check out that stationary header! [table 6]

How about we also add some hover events to the row. What this will do is when the user has their mouse over a row, the roll will get that little bit darker. This simply helps them to scan across the row more quickly as this slight colour difference will show off the current bit of data a little more easily.

td.hoverCell, th.hoverCell {
background-color: #e0e6f6;
}
td.hoverTotal {
background-color: #fa9090!important;
}

$('tr').hover(function() {
$(this).children('td, th').addClass('hoverCell');
$(this).children('.totalCol').addClass('hoverTotal');
}, function () {
$(this).children('td, th').removeClass('hoverCell');
$(this).children('.totalCol').removeClass('hoverTotal');
});

Now that’s a fancy looking (and usable) table [table 7].

That’s all the table enhancements I’m  going to do. There are a couple more things you may want to consider for your table. The first could be the abbreviation of large numbers.  You could make $1,400,000 into $1.4m, for example (or even just 1.4 if all your info is in the millions).  Sometimes it’s just not necessary to display all this information. This also helps if you have lots of columns – the shorter the info in the cells, the more columns you will be able to display on the screen (not saying you should cram as much as you can on there – you don’t want to overwhelm users).

Something to combine with these abbreviations could be to put tool-tips on your cells that have abbreviated content in them.  These tool-tips would provide the exact values to your abbreviated content.

And finally, consider making your table accessible to those that use screen readers. Tables are difficult to read as it is. Imagine how difficult it is for people­­ with disabilities to get through all the data you are displaying. There’s a few things that you can (and, indeed, should) do to make sure disabled users can get the information from your table.

Firstly, start off your table with the ‘summary’ attribute.  This might not be needed for really simple tables, but it can increase the comprehension of more complex tables for those that use screen readers. The ‘summary’ attribute should be a description that highlights the most important elements of a table.]

The <caption> tag should also be used on your table to not give a description like the ‘summary’ attribute but to give the title of the table.

The ‘summary’ attribute and <caption> tag should be used in conjunction with the ‘scope’ attribute and <th> tag. While the first two elements mentioned explain the table as a whole, the next two are used to explain the data within the table. The <th> tag is used to define whether the header is a column or a row. Combining this with the ‘scope’ attribute changes the order in which the cells are read out by a screen reader. Here’s an actual example of all of this in practice.

<table summary="”Internet"><caption>CSS Selectors in IE6 to IE9</caption>
<tbody>
<tr>
<th scope="”col”">Selector</th>
<th scope="”col”">>IE6</th>
<th scope="”col”">>IE7</th>
<th scope="”col”">>IE8</th>
<th scope="”col”">>IE9</th>
</tr>
<tr>
<th scope="”row”">* selector</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th scope="”row”">* >> selector</th>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th scope="”row”">* >+ selector</th>
<td>No</td>
<td>Static</td>
<td>Almost</td>
<td>Yes</td>
</tr>
<tr>
<th scope="”row”">* >:before and :after</th>
<td>No</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>

Think I’ve missed anything (or am totally wrong about something else)? Let me know in the comments.

var colHeight = Math.max($('#main').height(), $('#sidebar').height());
$('#main, #sidebar').height(colHeight);

Damn. That was easy.

I had a case today where any super long words in a container would not wrap when the word reached the end of the containing element. The text does this automatically if you have dashes or spaces in the text, but in the instance of one long word, the browser doesn’t automatically break the text in parts.
Then I discovered the little gem of word-wrap. This CSS property has two possible values: normal which is the default behaviour (breaks only allowed at designated breakpoints -i.e. dashes and spaces) and break-word which breaks the long word at the right edge of the parent container. Take the code below. The first example has no word-wrap. The second has the property word-wrap with a value of break-word.
CSS:

div {
background: #F1EFE0;
border: solid 1px #AAA;
padding: 5px;
width: 160px;
}
div.wrap {
word-wrap: break-word;
}

Code for non-wrapping element:

<div><p>HereIsAnExampleOfASuperDuperLongWord</p></div>

Code for wrapping element:

<div class="wrap"><p>HereIsAnExampleOfASuperDuperLongWord</p></div>

Too cool.

If you’ve never seen this rule, what it accomplishes is adding ‘…’ to the end of a text field (p or span)if the length of said field is longer than that of it’s container. For example, if you use the code below:

p.example {
width: 100px;
border: 1px solid #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

<p class="example"><span>Hello - here's some text that's obviously longer that 100px</span></p>

You’ll end up with a final result that looks like this:

I think that’s pretty neat. Now I don’t have to rely on some javascript or server side hack that truncates text based on the number of characters in a string (obviously not as nice as, for example, the string “WWWWWWWWWW” is longer than “llllllllll” even though they have the same number of characters). This CSS rule doesn’t rely on the number of characters in a string, but rather the width of the parent container! Gold, absolute gold.

But firefox doesn’t support this. I was quite surprised to learn firstly that it was IE6 that introduced this feature, and secondly that there was actually a feature that I wanted to use that IE had and firefox didn’t. Go figure. The way I ended up remedying this is in firefox was by using a jQuery script written by Decon Govett that dynamically figures out the width of the parent container and systematically reduces the text string of the child container until its width fits inside the parent. Then the ‘…’ is added to the end.

Developers can vote for this feature to be added to firefox via the link below:
https://bugzilla.mozilla.org/show_bug.cgi?id=312156

First we have a function declaration:

function myFunction() { return "result"; }

And here we have a function expression:

var myFunction = function() { return "result"; }

Both of these functions, if referenced further on in your code, are for all intents and purposes the same. Both are going to return a string with a value of “result”. The difference lies in how (and when) the browser loads them into the execution context. With a function declaration, these functions are loaded before the interpreter has run through any code at all. With a function expression, the function will only be loaded once the interpreter has run it’s way down and past the particular line of code that it sits in.

Function declarations will always run – the browser will always be able to find myFunction() because it has been loaded before any code has run. Even if you refer to myFunction() on your first line of code, you’re going to be ok. Take the example below – the function has been read and added to the execution context already so when it’s called, the function will return out the desired result.

alert(myFunction());		//result
function myFunction() { return "result"; }

But any function written as a function expression will only run if the function is called after the function expression has been initialised. In the example below, myFunction() will never run because it is called before the code has had a chance to initialise it and hence will cause an “unexpected identifier” error.

alert(myFunction());		//Oh no - error!
var myFunction = function() { return "result"; }

That’s probably all you need to know on the subject. But if, like me, you need to know more about stuff like this then check out this article by Juriy Zaytsev.

Because a URL should always be considered permanent, having a good structure in place will aid you when the time comes to update your site. Having a incomprehensible URL that only a computer can understand is not going to be shifted across to a newly designed site easily. Also, if you change the structure after any amount of time, then if anyone on the web has already linked to your old URL then no one is going to be able to navigate from there to your site as the URL won’t exist anymore. Having 301 redirects will fix this, but it’s more work for a developer; work that shouldn’t have to be done in the first place.

Having a URL that is user-friendly (or at least human readable) has one huge benefit – it makes your page more SEO friendly. If you have keywords in your URL (not stuffed with keywords, of course. It still has to be user friendly), then these will be picked up by Google etc as being an important part of your page.

A good designer or developer will consider this when making a site. It’s a small job to make a consistant, readable structure from the start – don’t make the mistake of having to tackle this later on.