The Big Picture truly is a must look, in the past I’ve never checked it enough, but I’ve just rectified that by subscribing to their feed. The image above is just one of the amazing images in their 3-part best of 2008 series, which I highly recommend you check out if you haven’t already. Part 1 | Part 2 | Part 3

Original caption from “The Big Picture”:

Lightning bolts appear above and around the Chaiten volcano as seen from Chana, some 30 kms (19 miles) north of the volcano, as it began its first eruption in thousands of years, in southern Chile May 2, 2008. Cases of electrical storms breaking out directly above erupting volcanoes are well documented, although scientists differ on what causes them. Picture taken May 2, 2008. (Carlos Gutierrez)

Source: http://www.boston.com/bigpicture/2008/12/the_year_2008_in_photographs_p.html

As mentioned we’re going to use two pseudo-elements as outlined in the CSS2 specification, the two ‘elements’ in question are :first-line and :first-letter. If you’re curious and want to know more about these ‘elements’ or the concept of ‘pseudo-elements’ feel free to follow the links and have a read of the specification, its not necessary for the purposes of this brief how-to, but some people are into that sort of thing.

Ok, let’s start. First off we’ll need to set up the default paragraph style before we do anything else. Nothing very complex here, just a few basic styles to set size, style, alignment etc.

.excerpt p {
	text-align:justify;
	margin-top:2em;
	font-size:1.2em;
	font-style:italic;
	color:#666;
}

Next up is the style for the :first-letter, as you would probably be expecting this style will apply only to the first letter of the paragraph in question. You can do pretty much whatever you want to the style, in this case we’re making the font larger, bold, changing the font and adding a little margin around the drop cap.

The only important bits that need to be set are:

• float:left; - this allows the rest of the paragraph to wrap around the drop cap.
• line-height:0.75em; - I played with a few values here, but this seemed to work best for the font family I’m working with, changing this value will affect the way that your drop cap lines up with the rest of your paragraph.

Remember its all personal preference, play around with sizes, fonts, margins etc until you are happy with the look.

.excerpt p:first-letter {
	font-size:6em;
	line-height:0.75em;
	float:left;
	margin-right:0.1em;
	font-family:"Warnock Pro", "Baskerville", "Goudy Old Style","Palatino","Book Antiqua",serif;
	font-weight:bold;
	font-style:normal;
}

Now you can also setup a separate style for the :first-line, and yep, you guessed it, it only affects the first line of your paragraph. Again, like before, you can change whatever characteristics you like, I’ve made it uppercase and increased the font-size slightly.

Nothing complex about this, just style it like you would any other paragraph. As far as the style goes, you could go completely nuts and make the test italics, purple, with a lime green dotted underline… but, well, I’d probably suggest thats taking things too far.

.excerpt p:first-line {
	text-transform:uppercase;
	font-size:1.3em;
	line-height:1em;
	font-style:normal;
}

There you go, simple as that, now you’ve got awesome drop caps too. Experiment with different combinations, maybe just use the drop cap, or maybe just use the first line style. You could change the colour to white and give the drop cap a background colour for an inverted look, go nuts.

Saw this on Digg a few days ago, thought it was the perfect candidate for testing out my new “image quick post” thingo. Check our the source link below for the desktop wallpaper version and a selection of other equally epic BrikWars wallpapers. Wish there were some widescreen ones though, guess this one will do for the moment.

Source: http://www.brikwars.com/downloads.htm

Two reasons really, firstly I can’t help myself, I just always have this need to change something. Secondly, I needed to upgrade to WordPress 2.7 and I wanted to make sure I could make use of all the new features it brings, this meant I either had to update large portions of my existing theme, or build a new one. Oh, and did I mention that I only started work on this design on December 23rd, so really its the “less than one week” redesign.

What’s different?

The basics of the site haven’t changed very much at all, I’ve just rearranged things a bit, and gone crazy with some fancy CSS in areas like the post excerpts (CSS dropcaps FTW). The layouts of the reviews, archives and downloads pages remain largely untouched (because I was actually happy with how they looked). The single post view has received a bit of a revamp, with the excerpt added, a revised sidebar and updated comments display that makes use of the threaded comments functionality built in to WP2.7.

I’ve also made a bunch of changes, big and small, to the code behind some of the custom pages in an effort to further speed things up because I’ve noticed the site has been a bit sluggish of late. One of the biggest changes was to my archives page which was using a massive 140+ queries each time it was rebuilt (omgwtfbbq). The cause? I was using the WordPress comments_popup_link() function to display the number of comments on each post, this was using (and I don’t know exactly why, an extra query for every post listed. The solution? I replaced it with my own bit of code that uses the comment number that has already been returned. Same result, 140 less queries.

The Best Bits

So far, my favourite thing is the threaded comments, its allowed me to ditch a couple of plugins that I was using, and although I now need to go through and cleanup some of the comments, I think its going to be great once people start using it. My other favourite feature is actually one regular users won’t see (I’ll post a screenshot later to show you what I’m talking about), and its a “quick post” interface that I’ve built right into the front end of my theme. I can use it to quickly and easily post articles (like I’m doing now), sidenotes, images, links, reviews etc all without having to go into the WordPres admin area (think tumblr etc.). The hope is that it will encourage me to post more often, only time will tell if it works or not.

Let me know what you think of the refresh, and please let me know if you see anything that looks broken and busted, because there is a good chance I missed something. Some posts might look a bit weird for a few days, but I’ll work through and sort that out over the next week or so.

One last thing

Make sure you drop by between 8pm December 31st, and 3am January 1st for the fireworks….

There is no doubt that the brand spanking new admin interface in WordPress 2.7 is a huge leap forward, and so long as you don’t switch to the ‘blue’ version (seriously, worst, blue, ever) its actually pretty nice to look at and use. The navigation is now down the left-hand side, just as I preferred (which is why that’s where it was in Fluency 1.x), and because of this, styling and customising the menu in-particular has been a lot simpler that it was in previous versions of WP.

So whats new.

Well, technically, everything is. Fluency 2 was a ground up rewrite due to the fact that just about every part of both the design and underlying structure of the default admin has changed. This was definitely a good thing, as it allowed me to make sure I’m only including what really needs to be included. However I did make this a little hard for myself when I started work using the early trunk builds, which meant that every time I updated my build I had to update Fluency…again. I actually ended up building the Fluency 2 CSS from scratch twice, and what it looks like now isn’t at all what it looked like when I first began playing around.

Keep reading for further details, screenshots, and most importantly the download link.

Ok, so whats “really” new.

Thanks to the addition of some extra hooks customising the style of the login screen is now possible, so that’s new.

I’ve customised the main navigation too, couldn’t help myself. You may have seen me mention that I’m not an enormous fan of the way the navigation functions. WordPress claim it take less clicks to get to different screens, but I don’t really agree. You still have to click a submenu to expand it, and then click the link, that’s two clicks which by my count is the same as before. Sure it require one less page load, but…

Also not a fan of the expanding/contracting width of the menu. I had played with, implemented and then removed pretty much the same thing in an early version of Fluency 2 before I figured it wasn’t worth the effort, and well before it appeared in the WP trunk. In the end I dropped it like a sack of potatoes because I didn’t see the point in adding it for the sake of adding it. After all it was only giving me about 80px of extra page width to play with. When it appear in the trunk I really didn’t like the way that menu behaved completely different whether expanded or contracted, and thought that it would surely be confusing for new users.

Solution. Custom flyout menus. Now virtually everything is just one click away (or a nifty key-combo…). Personally I love my new menus (as you would expect) they take up less room than the default one, and the behaviour has actually reduced the number of clicks. Plus I think they look awesome.

To go with the new menus I’ve added “hot keys” for quick access. Its the first time I’ve attempted such a thing and its turned out alright. As you would expect the hotkeys won’t function if you’re inside an input or textarea so your data entry should be unimpeded. I did however add these prior to the comment moderation hotkeys being added to the trunk so there may be some conflict there. If you find anything please let me know.

Unlike Fluency 1.x I haven’t had to modify the post screens too much beyond some cosmetic touchups. Besides, now that you can drag-and-drop all the panels on these screen so you can put whatever you want where ever you want it. Under the “screen options” menu at the top right of the screen you can also choose to hide some sections completely. This can be done on the dashboard as well as the post and edit screens, its one of the really handy features they’ve included in 2.7.

It should go without saying that the primary purpose of Fluency is to change the styles of your admin, all the other bit are just extra fun. While the overall theme of the design is similar to 1.x it much more refined, smoother and hopefully more consistent. The familiar grey colour-scheme is back, with colour added as needed. Little things like the inline post/comment edit/delete/approve/etc links are styled with appropriate colours, eg. delete = red, approve = green etc. For browsers that support them, ie. everything but IE, I’ve used rgba colours for menu backgrounds to give them a slightly transparent appearance.

Enough words, I should let you gaze across the screenshots below, and most importantly direct you to the download link (top right of this page for those that missed it).

Screenshots

I haven’t covered everything, but those are the main points. If you’ve got any questions just leave a comment.

Quick word about plugins.

Fluency has not been tested with ever plugin under the sun, I’ve test the ones I use, plus a couple of the more popular ones, but in general if a plugin has decent admin screens that follow the rest of the layout then it should be fine to use in conjunction with Fluency. If you come across a plugin that doesn’t, please let me know and I’ll do my best to add support for it in the future.

Note: Since I (once again) rushed this out the door, I’ll try and revisit the content above in the coming days to include some more details.

Nominations for the 2nd Annual Open Web Awards presented by Mashable have opened. Here’s where I insert the shameless self promotion, by nominating myself/my work in couple of categories. If you use either Fluency or Hahlo please consider nominating (links below open a new window) and voting (when the time comes) all thats required is an email address and 30 seconds of your time. Thank you.

Nominate deanjrobinson.com in the “Blog Plugins” category for Fluency Admin (and/or any of my other plugins that you may be using).

Nominate Hahlo.com in the “Social Networking Applications” category. or…

Nominate Hahlo.com in the “Mobile Applications” category. or both.

Also if you feel that Fluency, Hahlo or any of my other ‘things’ should be nominated in a different category please feel free to do so.

Hooray for Tony! Tony Arnold has just released a public preview of his latest Cocoa adventure, Hyperspaces. What is Hyperspaces I hear you ask. Without going into all the details (you can find them at Tony’s site, linked below), it builds on top of Apple’s Spaces and allows you to add custom wallpapers to each space, name your spaces, colour tint your spaces, hotkeys for your spaces, and it’ll even make waffles¹.

Want to know more? You can read more about Hyperspaces over on Tony’s blog. Right, don’t just sit there go get it, and try it out.

¹ Ok, so it doesn’t really make waffles, what use would they be anyway, you’d just end up with maple syrup all over your screen…

As some of you noticed, I neglected to pay appropriate attention to the “press this” styles when I released v1.2, the page was still usable but things clearly weren’t how they should have been. This update fixes that, I’ve added the necessary styles to Fluency to give “press this” the same feel as the rest of the admin.

I’ve also fixed up a couple of other things that were pointed out to me such as how the sidebar was overlapping the ‘activate theme’ lightbox when using Fluency together with Ozh’s Admin Drop Downs plugin, thanks to Ozh for posting a solution in the comments before I’d even had a chance to look at it. You might also notice that I’ve reinstated the border radius on some of the buttons. I originally removed these in v1.0 because of how bad the border radius looked in Firefox 2, but that has now been fixed in Firefox 3 so the border radius love can return.

The next big step for Fluency will be to get it working with the current WordPress trunk for 2.7, which includes yet another redesign/reorganisation of the admin. It will most likely mean start almost from scratch for the next version, but since the new admin for 2.7 is set out a LOT like Fluency by default (coincidence ???) it should be a fairly simple process. I’ll keep you all posted.

Enough talk, go and grab the update!

Although this theme may have been re-written from the ground up leaving few remnants of the “zipper” theme that I’ve been running for the last 7 months (its had a few touch-ups during that time), I’m not thinking of this as a complete redesign, its more of a refinement or evolution with some tricks thrown in. And hopefully its going to be a bit quicker too, since I’ve spent a fair amount of time cleaning things up to try and reduce load times.

Keep reading to find out how and why I made some of the bigger changes, as well as a few things that I still haven’t completely finished. I might even let you know about some other things I’m working on

The Sidebar

While my previous design was reasonably clean, it was beginning to look a bit cluttered, in particular the sidebar. I wasn’t so worried about it on the homepage, but on the individual posts it wasn’t great, and on pages the majority of the info was completely irrelevant and useless.

So I looked at each thing in the sidebar, and immediately dropped the calendar. All it was doing was showing that I hadn’t posted anything for 3 weeks, basically it was just taking up space. With that done I decide I’d move the archives, categories and blogroll back down to the bottom of the page where they had been on pipeDream.

I knew what I wanted the archives section to look like, I’ve liked Shaun Inman’s approach since I first saw it, but at that point I only had about 6 months of posts so it wouldn’t have really worked. I then had to work out how to do it. Not knowing how Shaun achieved it, but since I couldn’t really get the default WordPress functions to do it, I’m guessing he probably did the same thing I did and wrote a custom function to handle it.

When it came to the individual posts view, I was a bit over the icons that I’d been using since the Redoable days, so I switched them out for text labels. I also dropped all the crap that was in the sidebar that didn’t need to be there on single posts. Pages by default still have a sidebar, but many (archives, downloads, reviews, projects) now use the full width the present their content. More about those pages later.

The Posts

Considering a blog is mostly about its content this the part that probably changed the least. Min change is the switch back to Helvetica Neue/Helvetica for all text, and I played with the colours a bit. I also made the comments link a little ‘bubble’ showing the number of comments. The only other noticeable change is that links within posts are highlighted to make them standout a little better.

The Comments

Although I liked my previous comments layout, I want to make better use of the available space and try something a little different. I made the comments list stretch full width, and moved the commenter’s details to the right hand side, so that the main focus was their comment. The new layout also uses less vertical space, which is good one some of the pages that I’ve got with hundred of comments. For something different, and so users don’t have to scroll past 50 comments to make their own, I also moved the new comment box so that it sits above the comment list. I’ve also reversed the order of the comments so the most recent is at the top.

The Archives

I was running a “custom” archive previously, but it was slapped together quickly and I knew it wasn’t particular efficient. I didn’t know that because of its inefficiency that it was actually missing posts from the list. So I rewrote it from scratch it now only uses a couple of queries instead of … umm … lots, lists all my posts and looks better too.

The Downloads

I like what I’ve done with the downloads page, theres a few neat tricks which add some ‘interest’ to it. Firstly, it shows off just how many times you nice people have downloaded things like Fluency and Redoable, and with a little php “magic” it even graphs for each download to compare the popularity of versions etc. Its also set up so that although all downloads are listed and available, on the most recent version of each ‘product’ is highlighted.

The Reviews

As it always has been the reviews page is powered by Paul Gosicki’s Movie Ratings plugin. But I’ve made numerous changes to it for my own needs, including new star images to match the new design, and added a new function that handles what is actually displayed on the reviews page. I was on an optimisation march and it got in the way, so I cleaned up the number of sql queries it was making, and removed the need for it to load any javascript libraries (which I wasn’t using). I also changed to show movies based on when I watched/rated them by default, instead of alphabetically.

The Projects

Again I haven’t quite finished this page, still have to find some time to do some pretty images for the rest of my plugins and themes that are listed. And for some reason there is an odd white gap above the header, and it only appears on this page, I’m not sure whats causing it either.

The Header

This is definitely my favourite bit. This was actually the fourth or fifth completely different header style I tried while working on this refresh, and I’m glad I tried it and that it worked. Its made up of a bunch of layers, sky, sun, moon, stars and clouds, and depending on what time of day you visit its going to look different. It changes every 30 minutes to be precise. The times are based on MY timezone, so the whole day/night thing is probably going to be a bit backwards for most people, if I find a nice way to fix that I will. You should also keep an eye on the sky… you never know what might appear, or when…

The Lifestream

The return of Captain Planet, bigger and better. Ok so the super rushed dev of the first iteration didn’t go so well. This one should be better with a bit of luck. In the backend its more flexible, allowing you to add whatever feeds you want, its working wonderfully with any feed from Feedburner, but I’m yet to give it a real workout with raw feeds directly from flickr/delicious/twitter etc, but I see no reason why it shouldn’t continue to work.

I’ve also cleaned up the admin (which none of you had seen anyway), and added a few ‘helper’ functions (with more to come). For example, the latest tweet show at the top of each page, and the recent flickr images on the homepage are both generated out of Captain Planet, no more waiting for external javascript on each load.

I’ve already had a couple of request from people who’d like to test it, which is great, and once I’ve gotten to a point what I’m happy for that to happen I let them in on the fun.

And that’s about it, if you’re still reading congrats I know you’re probably bored by now. That’ll do me, I’m going to see if I can see someone other than Michael Phelps win gold at the Olympics.

Ok, before you go and get all excited I should say that this is a pretty basic update, mainly just compatibility. As most of you probably know WordPress released version 2.6 a few days ago, and those who follow me on Twitter (and you better be using Hahlo …or there shall be trouble :p) would be aware that I have been working on making sure Fluency remains compatible.

The latest version of Ozh’s Admin Drop Downs works with this release (if you use Ozh’s plugin with Fluency 1.1 you probably noticed it went all crazypants after you updated…yeah you did didn’t you). I’ve also taken a little bit of time to fix a few little things that had been bugging me for a while, most are so minute you won’t even notice them.

And that’s about it, nothing much else except to tell you that the download link can be found at the top right of the page after the jump, and you can find out more details here.

UPDATE: I’ve just received an email tletting me know that the Press This bookmarklet doesn’t work so well with 1.2, I’ll take the blame for that, for reasons unknown I’d crossed it off my to-do list, but its definitely a bit wonky. I will try and get it fixed ASAP. Apologies.

Its been an exciting month since the release of Hahlo 3, my analytics show that usage has increased approximately 300% since launch (wow), Twitter has been up and down and now looks like it getting back in order after the troubles of a week or so ago, and Summize have added some fancy new features to their service and api…

More powerful search

The addition of the Summize.com powered search function in Hahlo 3 has been a huge hit. For those of you who also visited the Summize site, you probably had a play around with their “Advanced Search”. Now in Hahlo 3.1 you can also do these same “advanced” searches with ease, to try it out just tap the “Advanced” button, in the menu just below the standard search box.

“Near Me” and location based searches

In the time since Hahlo 3 was launched, Summize have also bee adding to their own API, one of the big updates was the inclusion location data for each tweet, and the ability to search based on those locations.

As part of the search related upgrades in Hahlo 3.1 you can now do the same sort of “near me” search that was popularised by the iPhone-jailbreak Twitter app ‘Twinkle’. I’ll admit I wasn’t a fan of the feature in Twinkle, mainly because it thought I was in Cyprus. I am not in Cyprus. Not even close.

You might be wondering how Hahlo knows where you are, well its all based on what you have your “location” set to in Twitter. Hahlo uses this value in combination with the Google Maps API to determine the coordinates for your location to be used for searching. The more specific you make your location the better the search results will be. For example, I’m in Newcastle Australia, but if I just put Newcastle, Google doesn’t recognise the correct one.

Twitter also added an API function to allow you to update your ‘location’ field from API apps such as Hahlo, and now on the “settings” screen you can easily update your locastion whenever you like, and your coordinates etc will also be recalculated. You can also check on the settings screen to see what the Google Maps API interpreted your location as, just to make sure its accurate.

Once you’ve followed the onscreen prompts to set your location info up, then you’re ready to start using “Near Me”, just tap the “Near Me” button in menu, just below the search box. Its also accessible from the tabs that have been added to the search and advanced search pages.

Behind the scenes

In the last month I’ve also refined a lot of Hahlo’s code to make it easier for me to maintain. I’ve also tried to catch specific errors when they occur and return you a simple explanation. If you ever have any trouble or see a weird error then please let me know, I can’t fix things I don’t know about. You can do so here: http://help.hahlo.com

Style and Layout

No big changes in this respect, just tidied some screens up that weren’t quite polished for the 3.0 release, and maked sure basic behaviours are consistent across most screens. One tiny change you might notice is the “results for: search item” boxes on the search pages have been updated, nothing to drastic but they now have colours based on the colourful Summize logo.

Bugs Bugs Bugs. And some feature requests

Version 3.1 also includes fixes for several bugs that have been reported over the past month (there were numerous requests that I couldn’t fit in due the final rush to get 3.1 out, sorry in advance). The most significant is that the character counter should now be correct whether you are using Hahlo on your desktop computer or on an iPhone. If you still have trouble with it, let me know. http://help.hahlo.com

Other things of notice that have been fixed (hopefully) include: the behaviour of the ‘favourite’ star when fav-ing and then unfav-ing a tweet, the addition of refresh buttons to search result pages, the addition of a ‘refresh’ button to the bottom of the public timeline, a search box has been added to the top of the search results so that you can search again without having to open the menu.

You’ll also notice a number appear just below the “tweet” button in the top right. This will (once the Twitter api method is fixed up - thanks @al3x) display how many authenticated API requests you have remaining in the hour. Twitter usually limits users to 70 requests per hour, but recently due to their load and stability issues they’ve dropped this back to 30 to help load. This counter will update when you make a request so that you always have a rough idea of how many requests you’ve got left. I can’t guarantee its accuracy, so don’t take it as gospel, its just their to hopefully reduce the “shock” when that first “Bad request - limit exceeded” error pops up…

One more thing

You might have seen a tweet recently where I mentioned the new “Help Center” that I’ve set up. You can access it at http://help.hahlo.com and its your one-stop-shop for all your questions, comments, bug reports, feature requests etc. Help.hahlo is powered by the great new “Help Center” from Get Satisfaction. If you prefer you can also go to http://getsatisfaction.com/hahlo to get all the same info, plus a little bit more that the “Help Center” doesn’t yet cater for.

There are probably other small changes I could talk about, but I think that’s enough. Now, go and play with Hahlo 3.1 and let me know what you think.