The enhancements to CSS that are found in SASS and LESS are simply brilliant and save a massive amount of time.  Variables, nested selectors and mixins are just a few of my personal favourites.  CoffeeScript puts a wonderfully expressive veneer on top of JavaScript, removing lots of the grunt work and making your code much cleaner.

Using these improvements to the everyday languages has become second-nature and I’d be reluctant to go back.  Think about how much of a difference jQuery made to JavaScript DOM manipulation and animaton – you just wouldn’t want to go back to how it used to be!

However, my time is split between the Ruby on Rails world and the ASP.NET MVC world.  .NET doesn’t have native support for these new languages yet.  What’s a dev to do?

Thankfully, the lovely people of Mindscape have released a free Visual Studio plugin to take our pain away! The plugin handles CoffeeScript, LESS and SASS files, compiling them to native code every time you save your file.

It also adds new project items types to the ‘Add Item’ dialog and provides syntax highlighting within .coffee, .less and .sass files.

Simple and brilliant.  You can still link to your CSS and JavaScript files as you always have in HTML, or, as I do, use a NuGet package like Combres to combine and minify your files to reduce page load time.

If you’ve done any WordPress building at all, you’ll know that there is an extensive plugin base which enables you to take what is already an awesome platform and awesomeise (!) it even more.

You’ll also know that the size of this plugin repository (as of today, 16,713 plugins listed!) can make it a bit of a minefield, so  we thought it’d be useful to run a regular spot here on the Storm HQ blog highlighting some of our favourites.

The first one in our series is called Advanced Custom Fields, and it’s a blinder. In fact, I’m so impressed by this one – and use it so extensively – that I’m going to be writing a series of posts about some of the ways you can use it.

So what does ACF do? Well, you’ll probably already know that WordPress has capability to add additional fields – called “custom fields” – to posts. This means you can fairly easily allow editors to input additional information beyond the standard title and content fields – and then display them on your site. ACF takes this functionality, and multiplies it in usefulness…by about 500%.

Custom fields out of the box can be slightly fiddly, and there’s one major issue which has always irritated me: if you enable them you have to do it across all pages and posts on your site. So say you want some fields for a product listing – if you enable these you’ll then find that the fields appear on both your product pages but also on blog posts, pages, etc. An implicit connection between the “type” of page (“product”) and the type of information you want to input / display (“price”, “tax”, etc) hasn’t been possible. Until ACF.

Let’s have a quick look at how.

I’m going to assume you’ve downloaded and enabled ACF – if not, do it in the usual way – either automatically via “add new plugin” in the WP interface or by downloading and chucking the ACF folder in your plugins directory. At this stage, the plugin may ask you to update your database – do this, then open up Settings > Adv Custom Fields.

Click to “Add New”. You’ll get a nice looking interface as shown below. To add a new field, just click “+Add Field”:

You’ll see you have the option to name the field, choose a type (more on that in future posts), and provide instructions for editors. You’ll see that the “Field Name” box auto-populates – but you can overwrite this if needed. Make a note of this value – we’re going to need it in a minute…

Once you’ve clicked “Save Field” have a quick look at the “Location” box underneath. This for me is the real magic of this plugin:

This is a bunch of options and rules which let you choose exactly when these fields should display – it’s an extensive list which lets you choose single pages (for example: Page – is equal to – Homepage) or post types (for example: Post Type – is equal to – Post) or even page templates (for example: Page Template – is not equal to – Default Template). You can also filter on user type – so it’s easy to give admins access to fields but not editors. You can also build these filters using the + icon, applying more than one.

This means you can create brand new product areas, galleries, connections, feature boxes…. – with incredible ease. Much of the criticism of WordPress as a “serious” CMS has been about its inability to handle content types with any power. ACF in my opinion pushes it forwards a long way in this discussion.

So how do you use the data which has been input? Well, this too is a breeze. Simply locate the template you want to display the content on, and pop this into your php:

..where I’ve got “product_name”, just replace with the snippet that is in the “Field Name” box above. Easy.

And that – very briefly – is that. There’s extensive documentation over on the plugin site if you need it.

Next time, I’ll delve into some of the more detailed aspects of this plugin, including repeating fields, post objects, and how you can use it with WP custom post types.

Grab a copy of the excellent Web Developer Toolbar (if you don’t have it already – reviewed here) extension for Firefox.  On the far left-hand side you will find the ‘Disable’ menu.  The top option will be ‘Disable Cache’.  Tick that option and away you go – cache turned off!

We named the Netcraft Toolbar as one of our Top Web Browsing Extensions and are delighted to be able to continue using it with the lastest version of our favourite web browser.

Thank you Netcraft :)

1. Web Developer Toolbar

“The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.”

The Web Developer Toolbar is the de-facto standard for web developers and a absolute must have. It provides an array of useful tools to help with development. Some of my favourite features include:

• Edit CSS live and see the results instantly or add an additional style sheet.
• View ‘Generated’ source to see the result of DOM manipulation with JavaScript
• Outline any element on the page to see its extent, either by tag name or by hovering with the mouse.
• View detailed cookie information and edit it on the fly.
• View details form information, enable disabled inputs, convert POST <-> GET and more. This is very useful for security testing.
• Submit the current page to the W3C HTML validator with a keyboard shortcut (Ctrl+Shift+A or Cmd+Shift+A on Mac)

There are many, many other tools to discover and I highly recommend you download it and try for yourself.

iZone Rating: 5/5

2. Firebug

“Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

Firebug is the 2nd most important tool available to web developers. With Firebug installed, you can edit a pages HTML live, get detailed DOM and JavaScript error information and view CSS inheritance and box model details.

With AJAX becoming a standard development technique, detailed JavaScript debugging is incredibly useful and being able to edit HTML live makes debugging and correcting design errors much easier.

iZone Rating: 5/5

3. YSlow

“YSlow analyzes web pages and tells you why they’re slow based on the rules for high performance web sites.”

Developed by Yahoo!, the YSlow addon works in conjunction with Firebug to analyze a web page and identify performance bottlenecks. YSlow provides a rating, A to F, for a range of issues including: HTTP requests, duplicate scripts, inline CSS/JavaScript, DNS lookups and caching. Each of these ratings are then linked to advisories with explanations and suggestions for improvements.

In addition to the performance ratings, YSlow also gives you a detailed breakdown of all the media and external files called by your page. You can use the size and download time to identify files that could potentially be optimised.

With page load time soon to be a factor in Google’s Landing Page Quality Score for AdWord’s, developers should be paying more attention to optimising pages for quicker response times. This extension will make that process much easier.

iZone Rating: 4/5

4. ColorZilla

“With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.”

Like a colour on a web page or in an image? Want to know the hex value? Colorzilla makes this incredibly easy by adding an eye-dropper to the browser window.

iZone Rating: 4/5

5. MeasureIt

“Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.”

A very useful extension during the early stages of layout development. No longer will you have to take a screenshot and paste it into Photoshop to measure how wide or high an element should be, now you can just click on the ruler and measure away.

iZone Rating: 3/5

In this series of posts I will explore my favourite Firefox add-ons and extensions. In this, the first in the series, I’ll tell you which addons I use to enhance my daily web browsing experience, including: blocking adverts, improving usability and defending myself from phishing. In later posts, I’ll cover my top Web Development extensions, the best Search Engine Optimisation plugins and Social Networking toolbars.

1. AdBlock Plus

“Ever been annoyed by all those ads and banners on the internet that often take longer to download than everything else on the page? Install Adblock Plus now and get rid of them.”

AdBlock Plus looks at all the images, flash movies and iFrames on a web page, applies a set of rules to filter out objects that look like adverts and leaves you with a clean, fast loading web page. This is a ‘must have’ extension and is the first one I install on a new Firefox installation.

AdBlock Plus provides two methods to improve and update the ruleset. You can manually add new rules yourself to filter out any adverts that slip through the net and you can subscribe to additional filtersets.

iZone Rating: 5/5

2. NewTabURL

The NewTabURL extension allows you to customise the URL that is opened when a new tab is opened, you can choose from: a blank page, your home page, duplicate the current page or enter a custom URL. This is a useful feature, but for me, the most compelling reason to install this extension is a secondary function: when you have a URL on the clipboard, clicking the new tab button will open a tab and load that URL. This is a real time saver and a great usability improvement!

iZone Rating: 4/5

3. Netcraft Toolbar

“The Netcraft Toolbar uses Netcraft’s enormous databases of Web site information to show you all the attributes of each site you visit on the Web, including the sites’ hosting location, country, longevity and popularity. It also mobilizes the Netcraft community into a giant neighborhood watch scheme to empower the most alert and experienced members to protect the vulnerable against fraud and attacks.”

With phishing defenses built into Firefox 2.0 and Internet Explorer 7 some people have questioned the usefulness of the Netcraft Toolbar and consider it superfluous. I disagree. Netcraft’s phishing detection has been rated the best there is and with protection being time critical, I prefer my information coming from the horse’s mouth. The toolbar also allows you to report undetected phishing sites easily, so you can be proactive in protecting others. You could even win an iPod!

Besides protecting you from phishing sites, the toolbar can identify XSS (Cross Site Scripting) attacks and the other information displayed on the toolbar can help you judge the legitimacy of other potential scams.

On the downside, the toolbar does consume rather a large amount of browser real-estate and a status bar version would be happily received!

iZone Rating: 4/5

4. Download Statusbar

“View and manage downloads from a tidy status bar – without the download window getting in the way of your web browsing.”

The Download Statusbar extension replaces the download popup window with a subtle status bar that appears at the bottom of the browser window. The extension is fully customisable and can be tailored to suit your exact requirements. You can also specify an anti-virus application to auto-scan files as you download them.

Despite not adding much additional functionality, Download Statusbar greatly improves the usability of downloads in Firefox and is a very useful extension.

iZone Rating: 4/5

With the blog a little over a week old, I thought it was about time we shared with you what we believe are the top WordPress plugins. We’ll tell you about the tools that make our lives that little bit easier including: the ‘All In One SEO Pack’, ‘Feedburner’, ‘Related Posts’ and ‘Spam Karma’.

We’d love to hear your top plugins, so leave us a comment.

Akismet

Akismet comes pre-loaded with WordPress (or at least in 2.3.3+) and is probably the best spam filter plugin you’ll ever use. From the Akismet website:

Akismet checks your comments against the Akismet web service to see if they look like spam or not.

You will need an API key from WordPress to use it which you can obtain here. We’ve read great things about this plugin – and as yet- no spam!

Our Rating: 5/5

All In One SEO Pack

This plugin allows customisation of the <title> tag and allows you to add a meta description and keywords to each blog post. The plugin also has the handy feature of optionally adding ‘noindex’ to duplicate content pages in archive or tag categories.

It’s a great set of features to have to hand and we fully recommend it.

Our Rating: 4.5/5

Amazon Media Management

When it comes to monetization of blogs, you can go with the traditional Google AdSense or Yahoo! Publisher Network ads, or some increasingly ineffective banners, or you could provide your reader with something useful, something targeted, something recommended by you – a book, a film or a piece of software for example!

AMM allows you to pull products from Amazon onto your blog and provides a referral with your Amazon Associates ID allowing you to make commission on any products your readers buy.

We had to customise the templates a little to get them how we wanted, so some HTML coding is involved if you want the perfect marriage of WordPress and Amazon but there is good support available and an easy-to-read guide.

Our Rating: 4/5

FeedBurner

An essential WordPress tool which interfaces your websites RSS feeds with FeedBurner. Quick and easy to install.

FeedBurner provides you with statistics on subscribers, click-throughs and bookmarks from your feed. It also has the added benefit of taking the content off of your server, saving you bandwidth and helping you survive a Digg!

Our Rating: 5/5

Related Posts

A great little sidebar widget and replacement for the next / previous article links that come as standard with WordPress. Installation is an easy upload to the plugins folder. Activate it and drag the widget onto your sidebar and away you go. The creators website descibes how it works:

The posts are sorted by the number of matching tags and then by the post date. It is also possible to insert the list of related post in a post via a placeholder.

Our Rating: 3.5/5

Spam Karma 2

If you hate spam as much as we do – you may want to add a second line of defense without having to ask your readers to pass an annoying (and often accessibility unfriendly) ‘Captcha’ test. We’ve found it picks up on anything that has slipped past Akismet and has an easy moderation area so you can check the spam should you wish.

Our Rating: 4/5