After a quick Google and a browse at a few of the results, I didn’t get any information on how to check to see if jQuery exists on a page. So, while this may not be the best solution, it is a solution to only execute a piece of jQuery JavaScript if jQuery exists.

var jQuery = jQuery || false;

if (jQuery) {
  // jQuery only stuff here.
}

If jQuery has been included in the document, the function jQuery will exist and thus the jQuery only block will execute. If jQuery has not been included, jQuery is set to false and so the block will not execute.

Of course, if someone makes a variable called jQuery and assigns it a value then this won’t really work — but why the hell would you do that?

Update:
Thanks to Thomas R. for suggesting a non-assignment method. Despite it not working, it made me try to find a way of doing it without the assignment.

if (window.jQuery) {
  // jQuery only stuff here.
}

If you aren’t sure what a grid layout is, I would recommend checking out some good posts by Khoi Vinh and maybe this article from Smashing Magazine, which has a good few set of links to keep you busy for a while.

Why build GRIDINATOR?

I built GRIDINATOR for my own use and to just see if I could do it. When I started as a freelance web designer late last year, I was introduced to grids by John Oxton. While I was aware of them and the concept, I hadn’t really bothered to actually use them until I was made to (sincere thank you, Mr. Oxton).

After quickly falling in love with grid-based layouts, I decided to start using them pretty much everywhere for little side-projects and client work. The concept for GRIDINATOR was designed primarily to make my life easier, as I tend to be very lazy. Fortunately, that can also be considered a good thing:

..only a lazy programmer will avoid writing monotonous, repetitive code. The tools and processes that come out of this endeavor fired by laziness will speed up the production. — Philipp Lenssen

After playing with numbers, creating a bunch of different grids and feeling irritated by doing the same thing over and over again, I decided to sit down and write something to make the grids for me; thus GRIDINATOR was born!

Why use GRIDINATOR?

GRIDINATOR is different from the “competition”, as it provides you with a means to get started using a grid-based layout that you designed. While there are other grid calculators out there, none of them actually give you any CSS or HTML to get going using the grid you design. At this point, I’d like to recommend you go check out ctrl+shft+g, which was a major source of inspiration for this project.

Using GRIDINATOR

GRIDINATOR has a (hopefully) simple to use interface to build your grid quickly. To build a grid, you have to specify a few options.

The options for your grid are:

• number of columns — the number of columns you want in your grid
• column width, in pixels — the width of each column within your grid
• column margins, in pixels — the spacing between each column
• container margin, in pixels — the outer spacing between your grid and its container
• colour of your grid — available in blue, pink and green

As you are specifying your options, your custom grid will be created. This grid is an example of what you will get when you download the templates. The size of the grid (without container margins) and the total size (with container margins) are displayed above the grid. If you alter any of the options, the grid will update in real-time.

If you can’t (or don’t want to) come up with your own custom grid, you can select from a few of the popular choices. When you select one of these choices, the grid builder will update to display what that particular grid looks like. You can still change the colour of this grid, by clicking on one of the colours in the options section.

Once you’re done creating your grid, you can get the CSS, a HTML template or even an image of your grid. With your options set, press one (or all) of the buttons to be prompted with a file download.

Downloads

Firstly, let me explain the “GET GRID IMAGE” button. Clicking this will create a PNG image the width of your grid by 20px height. This image used by the CSS template as a background image, to allow you to see the grid you are working with while you are working. The image will match your specification exactly, with your columns, column width, column margins, container margins and colour all taken into account.

The “GET CSS TEMPLATE” button will generate the CSS for the grid you specify. For an example of this CSS, please check out this Pastie. The first thing you will notice is a commented header, which includes the version number of the GRIDINATOR CSS (this value is also displayed on the GRIDINATOR homepage, just to keep you updated) and the specifications of your grid (should you forget).

Following this is the CSS. I’m not going to go into depth describing how to use this as on the GRIDINATOR site there is an example you can download that shows exactly how you can use the CSS. However, I will highlight what is included. You should notice that the CSS selectors for the columns is readable English, and does not contain numbers — this is something that I feel creates a nicer HTML document.

The grid itself is made from .wrapper and .inner-wrapper, where .wrapper is the outer container that specifies the total width of the grid and .inner-wrapper specifies the working area where the columns are contained. You will also find a declaration for each possible column within your grid, from one up to however many you specified.

I also included something that I have found rather useful, prefixes and suffixes. A prefix will allow you to fake the addition of another column preceding the one you apply that class to. For example, applying prefix-three to a column will add a margin-left to that column equal to the value of a three-col width; this makes it appear as if a three-col column precedes it. This can be useful for spacing out columns within your grid.

A suffix is the same concept as a prefix, except that instead of margin-left, it applies a margin-right; this making it appear as if a column follows the one it is applied to.

Lastly, the “GET HTML TEMPLATE” button. This will create a basic HTML file includes your grid and an example of each of the column specifications from one up to however many columns you specified. Please ensure that the HTML file is in the same directory as the CSS file, otherwise it will not work by default. For a more complex HTML template (one that demonstrates prefixes, suffixes and some more layouts), please download the example from the GRIDINATOR homepage.

Ch-ch-ch-changes

As GRIDINATOR is a work in progress, it will hopefully continue to grow and have more features. To keep track of the development, you can check out the changelog. This will list each update made to GRIDINATOR, including details about what has changed.

Contact

If you find a bug, need some help, have any suggestions for improvements or just want to comment, please feel free to leave a comment in this post or contact me at gridinator@steff.me.

I hope you’ll find GRIDINATOR useful or at least slightly entertaining for a couple of minutes.

I can’t draw worth a crap, but I’m thankful for the inspiration to get off the computer and do something else. Oh, and for those of you who are completely confused by this inside joke: my girlfriend is very short and I like puns.

Drawn on the very first page of my Carsonified Journal.

The concept came from something I used to do while bored in lectures. You start by writing down a sentence, then pass this on to another person. This person changes one word in the sentence and passes it on… and so on, and so forth! This continues until everyone gets bored, or the sentence really just stops making any sense.

Wordmix is a social sentence. Each word in the sentence is built up from Twitter replies sent to @wordmix. Due to these phrases being created randomly, there’s a high chance of them not making any sense whatsoever! Just sit back, relax (maybe get a beer?) and watch the randomness.

So that’s it! Go check out Wordmix and start sending it some Tweets!

PS: It needs work.

There are two “tracks”, Business and Development, that divide the conference. These tracks have talks going on simultaneously, so you have to pick your role and go with it (yeah, of course you can jump over to the other side whenever you want). Being more into the development side of things, the majority of the talks that I went to were in that track. The problem with the Development track is that the talks aren’t “techy” enough. A lot of them are vague overviews of how a particular company operates, with their spin on things. For example, Kevin Rose did a talk on the future of news. Instead of providing a concept for the future of news and how things could be, he gave a very digg-centric speech (who’d have thunk it?) on the digg recommendation engine mixed in with other digg stuff. I’m fine with him saying “use digg” or “digg rocks”, but I’d like it even more if he gave more of an in-depth analysis of the proposed features. Another example the guy from 280 North, who gave a lovely presentation, had some nice ideas but all-in-all was just one big sales pitch for “use Cappuccino and 280 Slides!!!”.

I think that that is the main problem with FOWA. The sales pitch. Maybe this is the wrong conference for me, but what I want is somewhere for tech or business minded people gathering to discuss and debate the future of web, with specifics in web applications. In FOWA, all of the talks are basically a sales pitch for that company. There are exceptions, don’t get me wrong, but in a lot of the talks its just one big advertisement.

Before anyone cries, “Yeah, but if person X wasn’t working for company Y then they wouldn’t be giving a speech and no one would know of them and no one would care what they have to say, plus I want to know about their company and so on and so forth and I really need to take a breath now…”, I’d like to say that this is what I mean by not “techy” enough. I’m fine with a company talking about their company, I just want to be given code and examples and general theory and not a “use our website, because we are great”.

I understand that people can’t give out their exact code because they are afraid of people stealing it, but a more in-depth look at things would be better than a sales pitch.

Some summarized points that I found interesting:

• When giving a demo, show the app and don’t just talk about it. No one gives a crap about your thoughts on anything other than the app, so don’t offer your opinion.
• Let people steal your content.
• Designer vs. Developer; don’t be just one.

Carsonified, the hosts of FOWA, were great enough film all of the presentations and put them online. The presentations below were my favourite from the entire event. They each offered insight, weren’t overly sales-pitchy and were just incredibly interesting to listen to.

Ben Huh
How to take your community to the next level

Jason Calacanis, Tom Nixon
Work/Life Balance and Blood Sweat and Tears

Jeremy Baines
How to build a desktop app from your web app.

Hypocrite note: This talk was a big sales pitch, but I still enjoyed it as I want to build a desktop app for one of my web apps and this inspired me to get working.

Blaine Cook & Joe Stump
Languages Don’t Scale (full version not released yet)

Kathy Sierra
How to grow and nurture your community.

You can check out the other presentations over at http://events.carsonified.com/, which is well worth doing, if you haven’t already.

And now some obligatory photos from the event:

Microsoft Surface

Myself with Ron Richards

Live Diggnation

Myself with Marcus from iusethis.com (This guy rocks)

I think what makes FOWA is the people and not the presentations. It is a social event, and you can get out of it what you put in. Carsonified tried to nurture this by giving out badges so people could write what they are looking for, what they are in to or pretty much anything to get a conversation going. It’s a mix of people — designers, developers, business-types — coming together over one thing, that make this a great event to attend.

1. Justine Powell
2. John Oxton
3. Aaron Ponsford

Congratulations to you guys. You should be contacted shortly by the e-mail you provided to get your game!

This new theme is based on Steff dot Me, which is the beginning of my new home/portfolio.

Much like Steff dot Me, this theme only took a few hours to make — so I apologise if there are any bugs or issues that haven’t quite been worked out.

The biggest issue for this redesign was my stupid idea to have (some of) my categories colour coded. This meant that I had to go back through all of my past entries to ensure that they all had a category and that the category was actually correct. Not fun.

If you have any complaints, comments, thoughts, ideas about this new theme or just want to post something spammy, please use the comment form below.

• Echochrome
• Secret Agent Clank
• B-Boy

All you have to do is answer a rather simple question about the Go!View service:

There will be three winners who will each get a PSP game of their choosing. The first winner will get his first pick of the games, the second winner will get the second pick and the third winner will have the last game.

If you wish to participate in this give away, please leave your answer in the comments along with an e-mail address and a list of preference for the games. All comments will be moderated. Please note that this give away is for UK citizens only.

This give away will end on 22/09/08; after that I will be selecting the three winners randomly from everyone who commented with the correct answer.

Good luck!

Hint: Check out the “How to use GO!VIEW” video on their homepage.

Update: This contest has now finished.

Getting Started

Getting up and running with Go!View is fairly simple. Being new to using a PSP (I hadn’t even played with one before last week), I watched the introductory video on their homepage and just tried to follow the steps. To start off, you’ll need to sign up for an account. Once you’ve gone through the rigmarole you’ve been through a thousand times (another new username and password for you to remember), you’ll have yourself a shiny, new Go!View account. This will allow you to watch all of your favourite TV shows and movies right in the palm of your hands ¹.

Using Go!View

The Go!View software is basically a glorified web browser, which just loads the Go!View website in a standalone application ². The first piece of advice I can offer is to make sure you have javascript and flash enabled on your actual, default web browser; I had mine disabled for some web testing and couldn’t for the life of me work out why the Go!View software wasn’t working. As it was a stand-alone application, separate from my browser, it didn’t occur to me that this would be an issue.

Once you have the Go!View app open, simply log in and browse around their media library. When you’ve found something you like, say Top Gear, simply hit the Download button and the video will begin downloading to your library in the background. The videos range in price, based on whether they are in the subscription model or the pay-as-you-go model and how new the video is:

Subscription packs are priced at £5 (€7) for 1 pack, £8 (€11) for 2 packs and £10 (€14) for all three packs and users can trial all three packs free for a month. Rental TV is available from £1.50 (€2.00) per episode and a range of movies is available from £2.50 (€3.20) each.

If you subscribe to one of the packs, Entertainment, Comedy or Sport, the videos that you download within that category are completely free; obviously you’ll still have to pay for movies and rental TV. It doesn’t take much time to complete a file download as they use the Kontiki peer-to-peer, file-sharing client.

The “My Library” tab shows you a list of your media, this includes information on a selected video, such as when it will expire and the file size. It is also from here that you can select videos for transfer to your PSP. The video files expire after 29 days sitting on your computer, or 14 days on your PSP — of course, if you’re signed up to one of the monthly subscriptions, you can just download that video again. Although it’s not the purpose of Go!View, the inability to play these videos on your computer is irritating.

Transferring a video to your PSP requires you to use a USB cable. Firstly, put your PSP in USB mode and connect it to your PC.

Poor quality iPhone picture.

You then have to use the Go!View software to select which files you wish to transfer over.

Last but not least (because it’s the entire point): watching the videos. The resolution of the videos are 480 x 272, which is fine for the PSP but if you wanted to plug your PSP into a TV for output, you’re going to end up with a rather blocky picture. I’ve been watching a lot of Top Gear on the PSP and the resolution really is just fine for the portable device.

Poor quality iPhone picture.

Final Verdict

Overall, the Go!View service is worth checking out if you’re a PSP owner. Remember that once you’ve signed up, you can sign up for a free month of Comedy, Sport and Entertainment shows; it’s worth a look just to get something for nothing. Just remember to cancel before the month is up, otherwise you’ll be charged for how many subscription packs you signed up for.

I have a slight issue with the transfer process, in that it won’t allow you access to your library while a transferring media.

Also, like I mentioned in my previous post, Go!View requires you to use Windows — something that I very rarely do!

All in all, if you’re looking for a way to get portable media this seems like a really good option. The library is quite small at the moment (in my opinion), however they claim to be increasing it all the time.

Thank you to the people at Immediate Future for the loan of the PlayStation Portable.

Footnotes
1. on a PSP. Not actually in your palm.
2. much like the site specific applications that Fluid creates.

With an eclectic taste such as this, there’s a reason I don’t consider myself a designer.

Create/Reject have created a wonderful, little book entitled “Fifty Designers’ Current Favourite Typefaces“. Even though I purchased it a couple of months ago, I hadn’t gotten around to looking at it until now. It’s very interesting to see what style of fonts is in right now!

The book only cost £3 and all of the proceeds went to UNICEF. Unfortunately the book is sold out online, however it is still possible to pick it up from a bookshop in London or you can just donate straight to UNICEF — either is good.

Geek points will be awarded to anyone who can name any of these fonts in the comments!

Geek points cannot be redeemed for anything whatsoever. Geek points hold no credit value and are not valid within the United Kingdom when there is a full moon during any odd numbered months in an even numbered year.