nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

A little Google Chrome search tip

Google Chrome has quickly become my new favourite browser. For a good few years Firefox (or Firebird as it used to be called) was my primary browser, but I found with all the web development extensions installed it was becoming slow and bloated. That’s when I decided to give Chrome a try.

Based on WebKit; an open-source browser engine, it’s standards compliant and very fast. Chrome has a very simple interface that has lots of nice touches. One I find I use all the time is the “keyword search” function. Here’s how it works:

First navigate to your favourite website; one I use all the time is delicious. Quickly search for something in the search box, it doesn’t matter what you search for, this is just to let Chrome know it is possible to search the site.

Chrome Keyword Search - Step 1

Search your favourite website

After a successful search right click on the Chrome address bar.

Chrome Keyword Search - Step 2

Right click on the Chrome address bar

Find the ‘Edit search engines…” option and take a look inside. You should now see your favourite website listed.

Chrome Keyword Search - Step 3

Find your favourite website listed under 'Edit search engines...'

Edit your favourite website and you will see “Keyword:”. This is the shortcut key that allows you to quickly search the site. Edit it, make it short and something you will remember. In my case it is ‘del’ for delicious.

Chrome Keyword Search - Step 4

Change the keyword option to something short

Now the fun bit; when you want to search the website again type in your keyword then the search term you’re searching for e.g. “del photography”.

Chrome Keyword Search - Step 5

Try typing your keyword and a search term

And there you have it! A very quick way to search all of your favourite websites directly from the Chrome address bar.

It’s also worth noting that Firefox can also do this and I’m sure there are similar features in other browsers.

The tools of my trade

Like with anything else in life there’s always a time where you wish you could take the knowledge you know now and pass it onto yourself a few years ago. I think Rod Stewart put it best in the song ‘Oh La La’.

I wish what I knew now when I was younger

I’ve listed a few tools I use everyday as a web developer. It’s not a definitive list and I’m sure there are lots of other solutions out there to do the same thing. Let another few years pass and I’ll be thinking the exact same thing: “I can’t believe I used to do it THAT way, how stupid of me.”

XAMPP

XAMPP is an easy to install Apache web server that contains all you need to develop modern dynamic websites. It comes bundled with MySQL, PHP and Perl. Even if you only develop HTML / CSS it’s still a good idea to setup your own development environment.Try and mimic the live server so you fix any issues that occur before you push them to the live server.

It’s available for Windows, OS X and Linux so it covers all bases. It has a bright orange web front end with a few controls to allow you to edit various settings, but you may need to get your hands dirty at first with the initial setup. Editing your HOSTS file and the vhosts file in the XAMPP directory is a must.

Aptana

As I’ve mentioned before in previous blog posts, Aptana is my IDE of choice. It’s based on Eclipse, an IDE written in Java and can be used to develop applications in many different languages. Both Eclipse and Aptana are open source so you can even dive in a fix bugs you come across yourself (Aptana on Github).

It comes bundled with a whole host of features, code auto-complete, project explorer, file sync over (S)FTP, code validation / error checking, JSLint and SubVersion integration to name just a few. If you’re not sure where to start you could try taking a look at their video tutorials and the huge number of documents available. If you are still stuck you could always ask on the well established community forums.

One thing I will mention is at times it can seem a little bloated at times. Having been using it for a few years now I’ve noticed it getting bigger / slower. Quite a few times I’ve resorted to using a smaller text editor for quick code changes simply because Aptana takes too long to start up or it just seems to be running slowly. It’s a shame you can’t easily disable some unused features, but what with some modules depending on others to work you could end up breaking the install.

All in all though I’ve not found a better IDE with the number features available at such a low price (Free!).

Notepad++

The “smaller text editor” I noted above is Notepad++, a project hosted on Sourceforge and is free to download an use. You only have to look at the homepage to see the number of features it has available. And the best thing about it is it’s fast, really fast.It loads instantly with no delay when typing / editing and does everything you need a code editor to do.

Notepad++ GUI

Lightweight fast text editor - Notepad++

Firefox

Where would any web developer be without Firefox and it’s extensions. Firefox is my code tester / debugger of choice. With thousands of extensions to download the possibilities for expansion are endless. Once you add Firebug and the Web Developer toolbar you have the perfect browser for refining and debugging your website.

TortoiseSVN

If you aren’t using any form of version control on your projects you really don’t know what you’re missing. Version control allows multiple developers to work on the same code at the same time without fear of conflicts (this isn’t strictly true, but with version control it notifies you of them and allows you to fix them).

Even if you are a freelancer who works on his own 90% of the time, version control is still something you should set up and use. Using version control means you can always roll back to a previous version when you break / delete something. Another big plus point is your work is now hosted on an external server. Should your hard drive break or your computer fall into someone else’s bag, you will still have a backup of all your important work.

TortoiseSVN is simply a nice GUI for the Subversion (SVN) version control system. You can use the command prompt too if you so wish, but I’ve always preferred a GUI.

There are various types of version control available, each with there own pros and cons. Git is one I’m looking into, but as an SVN repository is bundled with my hosting provider I’ll stick with it for the moment.

Conclusion

So there you have it, my web developer toolbox laid out for everyone too see. Now if only I could email this to myself in 2005, it would have saved a lot of frustration. Wouldn’t have been as much fun learning though would it?

WordPress: Are you sure you want to do this?

While writing a plug-in for WordPress recently I came across a very strange error message:

Are you sure you want to do this?

Now my initial reaction was “Well yes, I do want to do this!”. Unfortunately that wasn’t an option. It just told me to try again… same message… ad nauseam. What I was actually trying to do was pass some form information from the plug-in dashboard panel to the plug-in tables in the database.

After searching the web for a while and not having much luck I decided to ‘view source’ on the Quickpress widget which was doing a similar function. I noticed these two hidden inputs:

1
2
<input type="hidden" id="_wpnonce" name="_wpnonce" value="[random code here]" />
<input type="hidden" name="_wp_http_referer" value="/wp-admin/" />

After a brief search in google about ‘Cryptographic nonce‘ it occurred to me that’s what was missing. A vital security feature that WordPress uses to validate that the form information came from the current site rather than an external source. Very clever, but quite frustrating if you don’t know about it.

Adding the following to the form code fixed the issue.

1
2
3
4
5
$content = '<form name="formname" method="post" action="'.$url.'">';
if (function_exists('wp_nonce_field')){
    $content .= wp_nonce_field('hidden_input_name_here');
}
$content .= '...';

Simple when you know about it! The ‘wp_nonce_field‘ function is documented in the WordPress codex.

Update: Just to make it a bit clearer I added the code to the plug-in file that was generating my form. So for example:

1
2
3
4
5
6
7
8
<form name="our_form" method="post" action="http://oururl.com/action">
    <?php
        if (function_exists('wp_nonce_field')){
            $content .= wp_nonce_field('hidden_input_name_here');
        }
    ?>
    <!-- Other relevent code for the generated form -->
</form>

The hidden inputs are inserted into the form allowing WordPress to validate where the request came from.

IE6 and the Abbreviation tag

While testing a WordPress theme in various browsers (IE) I noticed a strange issue that was occurring in IE6, but fine in IE7+. After a little head scratching I realised IE6 doesn’t recognise the abbreviation(abbr) tag. I’d never noticed before as I very rarely use the tag.

As a quick fix you could edit your theme:

1
2
3
4
5
6
7
<!-- From -->
<abbr>Abbreviation here</abbr>
               
<!-- To -->
<abbr>
    <span>Abbreviation here</span>
</abbr>

Then apply any styles to the inner span rather than the abbr. Or if hard coding a span isn’t your thing you could always use a little bit of jQuery(1.2+) goodness to add the spans for you:

1
2
3
4
5
jQuery(function($){
    $("abbr").each(function(){
        $(this).wrapInner('<span></span>');
    });
});

The effect on page render time will be minimal since we are only grabbing a single tag with no complex selectors.

Processing & Aptana make a good couple

I’ve been learning Processing on and off for three or four months now since i started reading ‘Learning Processing‘ by Daniel Shiffman. A great book that makes learning easy and fun. One thing that frustrated me from the start was Processing’s own IDE (Integrated Development Environment).

Processing GUI on Windows Vista

The default Processing GUI (Windows)

Now there’s nothing wrong with PDE, it’s just quite limited. Having come from Aptana (and before that Eclipse) it’s missing quite a few features I’m used too. The main two being code complete and line numbers (Your current line number is displayed in the bottom left, but that’s it). Lucky it is possible to use either Aptana or Eclipse (since Aptana is a modivied version of Eclipse) to program Processing.

The Processing website has a great step by step tutorial on how to do this ‘Processing in Eclipse‘.

Using Aptana to program Processing

Aptana and Processing in harmony

Once complete you have all the features of the Eclipse IDE, including auto complete and line numbers (yay!). It will be a shame to not have all the code examples from PDE, but it’s always possible to copy and paste where needed.

Currently on page 23 of 24« First2021222324