nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: Ramblings

A random ramble from the large squidgy organ inside my skull.

Google broke my Gmail Labels

This morning I had a very annoying problem with my Gmail account; it looks like Google have been tweaking since the release of Buzz. All my inbox folders and labels had disappeared. Viewing from Firefox everything was fine, but in Google Chrome nothing…. arghh!

After a bit if thinking, the only difference between the two setups (apart from the browser of course) was the fact that in Chrome I’m using Offline mode (Google Gears). After quickly disabling this and re-enabling, everything worked perfectly again. I will keep that in mind for future issues.

Note: When re-enabling Offline mode Gears will have to sync with the mail server again which could take a while.

Firefox Extensions for Web Developers

Firefox is my development browser of choice, and has been for a long time (since Firebird 0.6 from what I remember). The browser on its own has a basic set of tools for debugging but with extensions you can turn it into the perfect tool for developing websites.

Note: This is in no way a comprehensive list; there are hundreds out there to choose from, these are the few that I use every day. You only need to take a quick search of delicious to find “X number of Firefox extensions you must use!!” lists; I’m not a big of those types or posts as they all seem to post the same info.

Firebug

I think every Web Developer has heard of Firebug; I honestly can’t remember how I managed to get anything done before I started using it, it’s such a time saver. It comes packed with useful tools like a HTML inspector, CSS inspector, JavaScript debugger and website performance analysis (Net tab). You can even extend it’s functionality using plug-ins e.g Firecookie and ySlow.

One of Firebugs useful tabs.

The Firebug net tab gives you a breakdown of page load time.

One word of warning when using Firebug; make sure you disable / close it when you aren’t using it as it will increase page render time massively.

Web Developer Toolbar

Yet another tool that most Web Dev’s must have heard of as it is such a brilliant extension. There are way to many features to list here but my personal favourites are: quickly disable/enable JavaScript, view alternative media stylesheets, view page document size, display line guides and resize the browser window to a specific resolution. Most of it’s functions I’ve never used but you never know when they may come in useful; download the Web Developer Toolbar.

Colorzilla

Colorzilla is one of those extensions that you don’t realise how much you use it until it isn’t available to you. This little tool allows you to hover over any colour (color) on a page and it will give you the corresponding Hex / RGB value. Great for when you don’t want to go hunting through a stylesheet for the colour.

It has a few options I very rarely use such as the colourpicker and the ability to save favourite colours, I prefer Photoshop and a notepad to be honest but each to their own I guess.

FireFTP

For a long time I was a FlashFXP user; that was until I stumbled upon FireFTP. The extension embeds an FTP client directly into a Firefox tab! My favorite feature (which is in most FTP clients) is the ability to keep local and server folders in sync. It’s also possible to drag files directly from a folder on you computer straight to the server (not vice versa though unfortunately).

FireFTP interface, great little Firefox extension

FireFTP has a simple clean interface, no need to jump out of Firefox to upload a file.

One feature I wish it had was the ability to ignore certain file types when uploading e.g. .svn folders. It’s possible to get round this issue by hiding hidden files / folders; then of course you fail to upload the hidden .htaccess file and break your URLs…. oh well not a bad compromise when it’s free to use (the author does accept donations which go to a generous charity for children).

Fireshot

Fireshot is one of many screenshot tools available for Firefox; it comes in both free and pro versions, but I’ve never needed any of the pro features. Gone of the days of pressing the “Prnt Scrn” button and stitching long pages together, Fireshot does it all for you. Another great feature is the ability to screenshot Flash on a page which doesn’t usually show up using print screen.

HTML Validator

My final extension is HTML Validator, this places a small icon in the bottom right of your status bar and tells you when it runs into invalid HTML. Now I don’t always use this but its good when you are editing large pages and your layout is breaking due to a missing closing tag; it may not solve the issue but it will give you a line number of where to start looking.

I would recommend disabling the plug-in by default then creating a ‘whitelist’ of sites you wish it to be enabled, as it can seriously slow down your browser.

If you have any recommendations for extensions let me know, maybe I’m missing a treat in that “must use!” extension.

More Frog CMS Magic

Over the weekend I was working working on a small website build that required a simple CMS so I decided to put Frog CMS to use again; it continues to impress me. What at first looks like a very simple CMS actually has a powerful API behind it.

First thing I had to do (for my own sanity) was move the layout template outside of the CMS and into an external file. This gives you 2 advantages, you get to use whatever code editor you usually use to edit the template, and the file is then exposed so it can be committed to version control like any other file. It is simple to do with some very basic PHP:

1
2
3
<?php
    include($_SERVER['DOCUMENT_ROOT'] . "/public/themes/yout-theme-directory/layout-template.inc.php");
?>

Paste that code in to your layout with a content type of “text/html” and you are done.

The second code snippet allows you to generate a specific ID and class for every page; great if you need some CSS style / JavaScript hooks on different pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
    if(url_match('/')):
        $bodyID = "home";
    else:
        $bodyID = "page-". $this->slug();
    endif;
   
    if($this->parent() && $this->parent->slug()=="services"):
        $bodyClass = "event";
    else:
        $bodyClass = "";
    endif;
?>

The first if else statement simply sets the home ID to “home” then every other page to “page-slug-name-here” (slug is set in the ‘Meta’ tab). The second one I use on ‘article’ pages; it simply says if the current page has a parent and its parent is the services page add a class of “event”. So now I can style every article page in the same way, and it’s safe for a client to add event pages themselves.

You may ask why the “$this->parent()”; this is to stop the site breaking when you hit the home page since the homepage has no parent, it is the parent of all other pages.

Frog CMS – Nice and simple CMS

You often find that most small websites that require a CMS don’t require all the features that some of larger solutions offer. While the likes of MODx, Expression Engine and even WordPress are amazing platforms to work from, they can be a little overkill for very small sites. (WordPress isn’t strictly a CMS, but it can be hacked to perform similar actions).

I decided to look for a simple solution; that’s when FrogCMS popped up. It’s free, open-source and very simple to setup. Upload to your server, create your MySQL database with relevant privileges, run the install script and there you go. A big plus point with Frog is the administration page is very straight forward to use, so even the most technophobic client shouldn’t have a problem editing their pages.

Admin shot of Frog CMS

Clean and simple administration area.

The templating system is a breeze to use if you know a bit of basic PHP. For example say you want to add a main navigation that automatically updates as you add pages:

1
2
3
4
5
6
<ul id="mainNav">
    <li id="first"><a<?php echo url_match('/') ? ' class="active"': ''; ?> href="<?php echo URL_PUBLIC; ?>">Home</a></li>
    <?php foreach($this->find('/')->children() as $menu): ?>
            <li><?php echo $menu->link($menu->title, (in_array($menu->slug, explode('/', $this->url)) ? ' class="active"': null)); ?></li>
    <?php endforeach; ?>
</ul>

The ‘foreach’ just loops through the children off the main site route and generates the navigation as an unordered list. Defining editable areas in a layout is just as simple:

1
2
3
4
5
6
7
8
9
10
11
//Add a snippet
<?php $this->includeSnippet('top-navigation'); ?>

//Add your main page content
<?php echo $this->content(); ?>

//Add another area of content called 'sidebar'; Controlled via a tab on the page admin.
<?php echo $this->content('sidebar'); ?>

//Test to see if we have content, then show
<?php if ($this->hasContent('sidebar')) echo $this->content('sidebar'); ?>

Even with just those simple lines of code it is possible to create a dynamic user managed website. If it doesn’t do exactly what you want you could always write a plugin to fill the gap.

The only negative point I have to say is that it doesn’t seem to get updated very often, but for most projects that shouldn’t be a problem as it’s already has a solid code base with lots of support and docs available.

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.

Currently on page 10 of 11« First7891011