I know, I’ve raved about Sublime Text 2 before, but now that it’s fully integrated into my workflow (and I even own a license for it!), I thought I’d share my most used packages for it.

Before I delve into this, if you’re new to packages, they’re basically plugins that extend the functionality of the main program. The best way to install them is to follow the instructions in this post from Nettuts (look for point 7), which basically boils down to:

• Open the console with CTRL/CMD + ‘
• Paste this into it:
  import urllib2,os;pf=’Package Control.sublime-package’;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20′)).read())

Restart Sublime text 2 and you should now have the package manager installed. Press CTRL/CMD + SHIFT + P, type install, and hit enter.

You should be presented with a list of all the current packages available. Simply scroll through and press enter to install, it’s that easy!

You can also head here to browse through them if you don’t have Sublime text 2 installed;

The List

These are just a fraction of the packages available, but they seem to be the ones that I’m using the most at the moment.

Alignment

Lines up arrays/objects. I used to hate inheriting code that wasn’t lined up, now with two simple keyboard shortcuts I don’t have to spend time sorting it out!

Code Intel

I’m still not sure if I love this plugin, or hate it. Code Intel is Komodo’s autocompletion engine; it supports lots of languages and actually learns what you use the most and (supposedly) intelligently suggests what you mean.

I think at first you need to be patient as it learns what you use, because I find it completing the wrong word a lot. When pressing ‘-’ it assumes it’s the end of the word and auto completes with what ever is at the top of the list, which is a nightmare when writing CSS.

DocBlockr

One thing I missed when moving away from NetBeans was the autocompletion of doc blocks, including variable hinting and auto indentation once inside the block. This solves that.

Git

Simply integrates Git straight into the IDE. I use it sparingly (like if I need to change just one file and commit it), but it does come in useful. There is also an Tortoise alternative available for people that use SVN.

TODO

Extracts TODOs (and FIXME, CHANGED and another others you might want to add) so you can keep on track with what you have left to complete.

Trailing Spaces

I’m a bit of a layout perfectionist, and it annoys me when there are trailing spaces at the end of lines. This highlights them and lets you delete them all in one shortcut.

Zen Coding

I’d never come across Zen Coding until recently, and I still need to remember to use it half the time, but when I do I really like it. This makes writing HTML quick and pain free.

There are so many more…

There are so many more I could have mentioned, but those are the ones I’m using most frequently. More are added all the time, so the repository definitely active.

Whatever you need/language you program in, there is probably a package for you!

Twittoh is a mini project I created with Chris Willerton. He took the lead on the design and HTML/CSS, and I coded the twitter bits.

It’s a collection of “overhead” tweets; tweets that are prefixed with “OH:”, and generally contain a funny sentence someone has overheard.

The Tech

The site uses Fuel as its base. I’d not used Fuel before, I usually stick with CodeIgniter, so it was interesting to see how it differed. I think I prefer it, and I’ll be using it again.

I used Phirehose to connect to the Twitter streaming API, which was very easy to use and definitely made the job easier.

Once I was collecting tweets, I had to filter them. I only saved tweets that had “OH: ” at the start and didn’t contain any links. To filter out all the non english ones (although some do slip through), I check the language using Microsoft Translator API.

And off it goes, collecting tweets and displaying them. Check them out!.

“sophisticated text editor for code, html and prose. You’ll love the slick user interface and extraordinary features”

Well, I thought, it doesn’t hurt to give it a go, and I’m glad I did. Here are my pros and cons so far.

Cons

Please bear in mind that most of the cons are comparing Sublime Text 2 to NetBeans, and so may not apply to everyone.

• No code auto formatting. It’s one of the main features NetBeans has that I love. Pasting someone else’s horribly formatted code into your editor and instantly prettifying it was great. It does have a plugin for this, but not for PHP as far as I can see.
• No PHP validation. Again, I’m probably being spoiled by NetBeans, but I did like it telling me if I had any errors before I viewed the file in the browser.
• Average auto complete. NetBeans used to read all the files in the project, and enable auto complete for each php class, function and css class it could find, which was great. From what I can see, Sublime Text 2 only auto completes the variables in the current page, with no hints available. This does mean more visits to php.net, which is never good on the eyes.
• No navigator. While the mini map is cool, and fairly useful, I liked the navigator in NetBeans better. Having a list of my class methods in alphabetical order (all with private/protected/public indicators) that I can quickly jump to was a very handy feature. Sublime Text 2 does have this sort of, by pressing cmd/ctl R, then you can go through each function available, but they aren’t in alphabetical order.
• Some unintuitive UI elements. This last point is made up of two very, very picky points. When you double click in the folders view, it doesn’t open the folder; instead, you have to click the small arrow next to the folder. Also, when I highlight a word, then open the replace dialog, I want the word to be automatically placed into the find box.

Pros

• It’s fast, like really fast. Opening takes a few seconds at most, and adding folders/files and navigating through code is lightning quick. Makes a refreshing change from waiting 15 seconds for NetBeans to open, then another minute for it to scan the curent projects and become usable.
• Project management is very flexible. A project is simply a collection of folders, much like in TextMate, so you can add and remove them at any time. This is great if I want to easily reference some old code; I just add in the folder, do I what I need to do, and remove it once I’m done. However, it would be nice if we could add files as well as folders like TextMate does.
• It has a nice dark colour scheme. I usually code on a white background, and I’d yet to find a colour scheme that’d change my mind. After looking at the Blackboard colour scheme in Sublime Text 2, I’m now converted.
• Find and replace has an option to KEEP the current capitalisation. I don’t know if any other programmes have this, but it’s a great feature. Basically, if you do a find for “var” to be replaced with “diff_var”, you can keep the initial capitalisation, so VAR will become DIFF_VAR, or Var will become Dif_var. This is great if you have a mix of constants, variables and text, and you need all instances of a word changing.
• Distraction free mode. Much like WordPress has, Sublime Text 2 offers a distraction free editing mode. It’s a fullscreen mode, but with no menu/sidebars; all the focus is on the code. (It also has a normal fullscreen mode.) This is great if you get distracted easily.
• Easy to tell files apart. When using CodeIgniter, I often find I have various files open, all with the same name, which can be confusing when the tab for that file in my editor only has the filename on it. Sublime Text 2 gets around this by detecting when you’ve got files with the same name open, and putting the folder it’s in next to it.
• Pretty folder view. To counteract the last con above, I’d like to mention the nice effect of the folders and files sliding in as you expand each folder in the project pane. Small, but a very nice touch.

Final Thoughts

Overall, I’ve got to say I really like Sublime Text 2, and it’s now my go to editor. I’ve only been using it for a few days, but I feel comfortable using it for my main projects.

I’m willing to overlook the cons (hopefully they’ll be added in later as core updates/plugins anyway), and I’ll probably pay for the license after a little more playing around with its features.

Has anyone else used it? Do you like it, or still use something over it?

If you’re interested, I’ve also done a write up on my favourite packages!

I recently submitted a tutorial to Nettuts, and it was accepted and published!

I wrote a quick blog post on how to upload a file using AJAX (or some AJAXy techniques), and I thought it might make a decent tutorial.

I submitted it to Nettuts, and low and behold, it was published! I’m quite happy with it, but there are definitely some improvements I could make.

I, however, did learn a lot writing it, and hopefully I’ll be writing some more soon!

Trying to set up AJAX file uploading within CodeIgniter can be a serious pain. I tried multiple scripts before settling on one that actually worked, so if you’re having trouble, keep on reading.

The Failed Attempts

First, I tried Uploadify, which came highly recommended. Stupidly, I tried the new beta (the newest version is always better, right?) which comes with incomplete documentation and lots of bugs. After an hour of fiddling, and finally getting it to sort of work, I decided it didn’t really suit my needs. I couldn’t point the upload script path to a controller in CodeIgniter, I had to point it to a specific script (i.e., upload.php).

Secondly, I tried Vaulms, which looked promising; it even sort of worked on the first try! However, again, I couldn’t get it to point to a controller. CodeIgniter seemed to be stripping out the $_GET stuff. (I’m using the latest reactor release.) I could probably have forced the script to only use the IFRAME $_FILES method, but I thought it might be too much faff.

And The Winner Is…

Finally, I tried PHP Letter AjaxFileUpload. Initially, I was put off by the site, but as they say, don’t judge a book by its cover!

The script is a nice simple one; it works off of a native form field, and can be called from anywhere. It does lack some of the bells and whistles of the previous scripts, such as loading progress and multiple uploads (without tinkering), but it suited my needs perfectly.

The Code

So, here’s how to implement it. Download the script, and include it in your page. (Obviously including jQuery before it!) Create your form, making sure to place in a form input field.

Now, add in your JS:

As you can see, we’re hijacking the form submit. The params are the same as a normal $.ajax, as all we’re doing really is creating an iframe and submitting the form through that. Note that I’m sending extra data through (the other field on the form). This means you can submit the entire form at the same time.

Now for the PHP side. Create a controller called image and add a public function called upload. Within that function, place this code:

In this code we do some simple validation on the title, then initialize the upload library and try to upload the file. Note how the input name is passed into the do_upload() method, this is because by default CodeIgniter looks for a field called ‘userfile’. (For more on the CodeIgniter Upload class, see the documentation.)

At the end of the controller, we echo out a response in JSON. Technically, we should pass it to a view and do it properly, but for the sake of the tutorial, this is fine.

And there you go, AJAX File Uploading in CodeIgniter!

TF Popup is a jQuery plugin aimed at developers. It gives you full theming control and is really flexible; it can be used for simple information modal popups, to full login/registration forms complete with validation.

It includes a small API to help when validating your form, doing a lot of the display leg work for you.

You can download it over at github!

See it in action

You can see it in action on the demos page without code, or on the examples page with code.

Overtime I may add more examples and demos if anyone can think of any that would be particularly useful.

Documentation

Like TF Assets, TF Popup is fully documented over at my scripts mini site. Additionally, you can email or post questions here.

If anyone has any suggestions, or find any bugs, please let me know! It is still in beta, so there may be a few kinks, but it should be usable on sites now.

I’ve tried to make it really easy to use and as flexible as possible. The library ships with just 2 files, config.php and tf_assets.php.

You can download the library from Github

You can find complete examples and documentation at my new mini documentation site, where I’ll be putting all the docs for any plugins/scripts I create. I’ve imaginatively named it Toddish’s Scripts, and you can find it at http://scripts.toddish.co.uk.

Please comment here or even better use the GitHub Issue Tracker if you have any suggestions or bugs to report.

I mainly work with REST APIs, so this post will focus on them; although most of the points can be transferred across to others.

I don’t claim to be an expert in REST APIs, far from it, but here are some things that really annoy me. As usual, if I’ve got anything wrong, or if there is a better way to go about it, let me know in the comments!

The Gripes

Lack of Documentation

The whole point of exposing your site to developers is to allow them to create applications using your data/services. Not telling them how to do that is a massive drawback.

We shouldn’t have to guess what a method returns, or what parameters it takes.

Consistency

All of your methods and variables should follow a convention, and should stick to that convention no matter what.

If, a few months down the line, you decide you prefer camelCase to underscores, don’t start writing new methods in camelCase, stick to underscores. There’s nothing worse than calling /example_method then calling /anotherExampleMethod.

Only change the convention for a new major version of the API, and even then keep the old version for a while.

Return Something Sensible

If I make a request in JSON, I’d probably like it back in JSON (unless specified in the request). Don’t just automatically return XML; either give me a choice or return in the same format I initially used.

If returning an error, return a machine readable error, not an an error for a human. Don’t return a nice html page with the error explained, give me a JSON packet with an error code and description. Also, please return a header code. Don’t return every request with a 200!

Use HTTP Verbs

Use the HTTP verbs to keep your URLs clean and logical, don’t prefix your methods (e.g., post_user/delete_user). This allows the url /user/44 to be used for multiple things. Sending a GET request will retrieve the user whereas sending a DELETE request will delete the user for example.

Standardise Your Returns

One API I’m currently working with does this, and it creates a lot of extra code. When returning a list of items (users for example), return the same format list even if you’re returning 0, 1 or 100. Don’t return a single object for 1, and an array of objects for 100; return an array for any amount. That way, all I have to do it count the items in the array, and I can loop through it no matter what.

I’ve probably missed some…

I’ve probably missed some obvious gripes, but they are the ones that have been bugging me lately.

If you can think of any I have missed, let me know!

Please note that this is very biased because the list is comprised of games I’d like to see remade, mainly due to the fact I used to play them and have fond memories of them, and as such isn’t a complete list by any means. It also only features PlayStation games, because that’s what I had growing up. If you have any more suggestions, please leave them in the comments!

5. Rollcage

What is it? A futuristic racing game with weapons.

Why should it get a sequel? Rollcage Stage II was a great game when it came out in 2000; I’ve never really been into racing games, but for some reason I really took to it. I loved the speed, the fact you could go on the ceiling, and the great use of the weapons. I think my favourite mode, however, was Scramble. It’s basically the puzzle mode; an infuriating puzzle mode.

Chances of a sequel being made: None. The developers, Attention To Detail, liquidated in 2003, and Midway, one of the publishers, recently became bankrupt. Only the second publisher, Psygnosis, exists, albeit now as part of Sony Computer Entertainment Liverpool.

4. Timesplitters

What is it? A comedy FPS with a strong focus on multiplayer.

Why should it get a sequel? Because it was amazing! Each one in the series was fantastic, with great characters, interesting challenges, and great multiplayer. It’d definitely benefit from todays better online tech, I just hope they don’t go all Call of Duty and start implementing classes and XP.

Chances of a sequel being made: Publishers Eidos are now part of Square Enix Europe, and Developers Free Radical have been acquired by Crytek, becoming Crytek UK. Before their acquisition, it was revealed they were working on Timesplitters 4; going as far as releasing some concept art. Crytek UK will be announcing some big news around E3 (June 7-9), let’s hope it’s Timesplitters 4 related!

3. Bloody Roar

What is it? A fighting game where your character could turn into an Zoanthrope.

Why should it get a sequel? This year is the year for fighters. With MvC3 finally out, MK9 and SFIV:AE round the corner and newcomer Skull Girls out in the summer, fighting games are bigger than ever. Bloody roar and it’s sequels were great fun when they originally came out, and I’m sure with some gameplay tweaks and an updated engine, it’d fit right in with today’s modern fighters.

Chances of a sequel being made: None. Bloody Roar 5 was confirmed as being in production, but when Konami closed Hudson Entertainment in February it was cancelled.

2. Legacy of Kain: Soul Reaver

What is it? A third-person action adventure with a dark twist.

Why should it get a sequel? Soul Reaver and its sequel were amazing games; combining decent puzzles with combat that didn’t get boring. After seeing what God of War III can do, I think a Soul Reaver 3 is work making, especially as there was no conclusive ending to the story in Soul Reaver 2!

Chances of a sequel being made: I’m not sure really. Developers Crystal Dynamic were acquired by publishers Eidos, who in turn have been acquired by Square Enix Europe. However, Kain and Raziel were both playable characters (via DLC) for 2010s Tomb Raider and the Guardian of Light. Maybe they were trying to gauge how much interest people had in the characters?

1. Zone of the Enders

What is it? A third person action adventure where you pilot a giant mech.

Why should it get a sequel? Because the first two were amazing. Great graphics, amazing story and fluid combat. Z.O.E. 3 would look amazing on the PS3, and it may even be able to incorporate the move without it being too gimicky.

Chances of a sequel being made: Pretty good actually. Hideo Kojima promised in 2009 a sequel would be made, and while it has been a fair while, we can still hope!

Honourable Mentions

• Spyro
• Urban Chaos
• Bushido Blade
• Crash Team Racing

If I’ve missed any, or if you want to add your own, please leave the game in the comments below and I’ll probably add it to the honourable mentions.

The first thing I did was inspect element to see how it was done (like pretty much every web developer I know did), and it turns out the effect is incredibly simple. It’s mainly CSS3 with a sprinkling of jQuery. Here’s how to replicate it, and why (I think) they used jQuery when it isn’t actually needed.

The Code

Quite simply, each block is a div; the colour changes instantly when you rollover, and fades out when you rollout. To get this effect, you need to use the CSS3 property transition and it’s vendor implementations.

Rollover the blocks above to see the effect in action.

First, you set up your divs:

These are simply 40×40 divs that float next to each other. I’ve given them another class to denote what default colour they should have.

Now, to add in the fade when we change the background colour, we need to add the following CSS3 properties to our .fader class:

The syntax for the transition property is:

property: property to animate (use “all” for any property that changes)

time: length of time the animation lasts

delay: delay before the animation begins

easing: easing type, defaults to linear

The actual command is just transition, but due to the different vendor implementations we need to add the -webkit (Chrome), -moz (Firefox) and -o (Opera) versions for it to work consistently in other browsers. Our divs should now fade when we roll over them!

However, they don’t change instantly when we initially rollover, instead we have to wait for the delay and watch them fade in. This isn’t what we want!

Luckily, all we have to do is remove the transition property in our :hover statement, like so:

Our divs should now change instantly to our new colour, and fade out slowly when we rollout.

You should note that we are only animating the background-color property here. The transition property can animate most CSS properties, including width, height and opacity.

Using these techniques, you can make some quite interesting things. I used it to create this bob. Rollover him to see the effect.

Known Issues

This won’t work properly in Opera, which doesn’t seem to honour the change in the transition property, so the div will fade on rollover and rollout. And you may have already guessed, but it doesn’t work in IE (even in 9).

The use of jQuery

Seeing as you can do all of this in CSS3, why did Dabble use jQuery?

I’m only guessing here, but whilst I was playing around with this it seemed fairly obvious. Unless you like creating hundreds of divs, the only sane way to create them is via a loop in whatever language you prefer, and unless you want to make hundreds of CSS statements with each colour in as a class, it’d be easier to simple add the colour in a style property per div.

However, as soon as you do this, the transition no longer works. The only way to get it to work again is to add the transition properties in the style property as well. Switching them out when rolling over/out via jQuery is the easiest way to duplicate the effect, storing the original colour in an attribute.

Well, this ended up a lot longer than I expected, and I still left out a lot of things. If there is anything you don’t get or I’ve got wrong, please let me know. Likewise, if you found this useful, please leave a comment!

If you want to read more about the transition property, see CSS3 Files.