@aphlogist this one

Finish him! >> The Diaper Ninja

Smooth ;) RT @CliveCoffee: Video guide to pulling shots on the Presso:

Exciting study. RT @TIMEHealthland: Nearly 20% of patients in a vegetative state show normal brain response to commands

RT @coffeereview: New Article: Don't Give Up Your Grinder: Pre-Ground Supermarket Coffees
by Kenneth Davids.

Eleven-fest! RT @yogitect: 11:11 11/11/11

is handy. Online code editor with FTP.

I'd like to go to this Nick Drake tribute show.

Yes! >> RT @pitchforkmedia: Mark Lanegan Announces New Album, Features Josh Homme and Greg Dulli

When it comes to designing customized layouts and complex content-rich pages, few Drupal modules can match the flexibility of Panels. It shatters Drupal's traditional "Region/Content/Blocks" divide, giving site managers the ability to build custom layouts and enforce consistency across different types of pages.

Unfortunately, the "variations" system that Panels and its companion module Page Manager use can be cumbersome; developers and advanced site builders can master it, but managing huge numbers of different layouts can be a pain. This is particularly noticeable when each individual node on a site, or even of a particular content type, needs to have its own special layout or mix of page content. Wouldn't it be great if there were some way to give some editors and content creators control over the Panel layouts for just the nodes they create? That's exactly what the Panelizer module does.

Genius Parents Are Organizing 'Pox Parties' on Facebook -

No more sharing from Google Reader. I dig the new UI but this is a show-stopper for me.

Russian Genius Found To Be Living With 26 Dressed-Up Skeletons In His Apartment

"Espresso philosophy" /via Barismo

Tell me you don't want to try this > Santa Clara Bourboncillo from Market Lane.

RT @EFHobbs: My shipment of mixed nipples finally arrived!

@coffee_prince pics from my last visit to the shop

SugarCRM sweetened things up a bit with today’s release of version 6.3. The latest iteration of the customer relationship management platform demonstrates deeper integration with third party apps, faster feedback for real-time collaboration and tighter admin control.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

Australians the world's wealthiest -

Advertise here with BSA

Firebug — an open source web development tool extension for the Mozilla Firefox web browser — is incredibly powerful, with a wide range of super useful and practical features that would benefit any web designer or developer.

In fact, this browser extension (also available in other web browsers with limited functionality) is so useful and popular that it has browser extensions of its own.

This real-time coding tool reduces the guesswork out of debugging web pages, among many other things such web page layout inspection/testing and web performance profiling, to speed up your workflow.

Whether you’re building a web page, adding new CSS for a responsive web design, troubleshooting web layout issues, or inspecting how other websites are built, Firebug is going to be a valuable tool in your arsenal.

Let’s take a closer look at how this indispensable browser extension can help web designers. We’ll only focus on certain Firebug functionalities that are especially helpful for web designers.

Getting Started with Firebug
First, you’ll need to download and install Mozilla Firefox if you don’t already have it.

Then you also need to download and install Firebug.

Once you’ve got the extension installed, you’re ready to start dissecting any website.

You can experiment with how it works just by playing around with it or you can take some time to read the official Firebug documentation (which is a wiki).

Opening the Firebug Panel
There are several ways to open the Firebug panel. When it’s open, it should look like the image below.

Opening Firebug Using a Keyboard Shortcut

Press F12, which is the keyboard shortcut to toggle Firebug on and off (see other Firebug keyboard shortcuts).

Opening Firebug in the Browser’s Context Menu

On any web page, right-click on the page or a particular HTML element (such as a hyperlink, a text heading, an image, a form button, etc.) and then choose Inspect Element from the context menu that appears.

Firebug Icon

You can also click on the Firebug icon to open the Firebug panel. Depending on your version of Firefox, it will be in the bottom status bar, or in the upper chrome to the right of the search bar.

Tip: Have Firebug in Its Own Window
Once you have Firebug open, feel free to break it out of the browser and into its own window by pressing the Open Firebug in New Window icon. This is perfect for big monitors or for multi-monitor computer set-ups.

Now you’re ready to do some damage. Next, we will talk about some useful Firebug features and techniques.

Inspecting a Web Page’s Layout and Markup
It’s the most common question you’ll ask about a web page you’re developing: "Where’s the flaw?" (or "WTF" for short). The most common use of Firebug is inspection.

Once Firebug is open, you’ll be in the HTML panel by default. This is the panel that will help you inspect and understand the web page’s HTML elements.

There are two panes in the HTML panel. Let’s briefly discuss these panes.

Node View Pane
Firstly, on the left, is the Node View pane displaying the generated source of the page you are currently on.

Node View allows you to edit HTML elements/code on the web page and then see the result on the fly.

When you mouse over the HTML markup in Node View, the browser actually highlights the element on the web page being inspected. This is incredibly helpful functionality – it shows you exactly how the browser is handling your HTML elements and where that particular element is on the actual web page. This can help you visualize margin/padding issues and float problems, for example.

When you click on an HTML element in Node View, it will show the element stacking order just above the pane. This is helpful for any CSS you have to write that needs to be more specific to prevent styling similar elements elsewhere on your site. More often than not, I’m inspecting to see what CSS rules are being inherited.

To help you quickly find HTML elements, try the search feature towards the right of the HTML panel, which will, in Node View, highlight the matched text in gray.

HTML Side Panels
The second pane, on the right, is the Side Panels. These panels give you more information on the highlighted element.

There are four side panels in the HTML panel.

Style
Computed
Layout
DOM (which stands for document object model)

The Style side panel shows you what CSS style declarations affects a particular element. It also displays which style sheet (and what line number) the style rule is in, in case you have more than one stylesheet.

The Computed side panel displays CSS properties of the HTML element such as font-size, color, text-align etc. This gives you information on how the web browser renders the element.

The Layout side panel visually shows you the box model of the element you’ve clicked on. If you’re a visual learner like me, it’s really nice to see the padding, border and margin illustrated like this. Double-clicking on the displayed values allows you to make changes and experiment in real-time.

The DOM side panel displays the document object model information of the selected element. It’s especially useful for front-end web developers working with JavaScript/client-side scripting.

Edit HTML on the Fly
There are a hundred different ways to manage your HTML workflow when you have access to files on the server or when you’re working in a local server environment using a web server stack like XAMPP or WampServer. I think most people prefer to work right in their own code editor, so code can be saved as you go whenever they can.

However, for quick in-browser tests and situations where you don’t have access to the HTML files (such as a website you don’t own or when you’re away from your dev computer), Firebug is perfect.

In Node View of the HTML panel, you can click on any HTML element and edit it. Add or remove whatever you like and then see what results your changes make to the web page.

A few common tasks I perform in this way include:

Adding/removing entire HTML elements (e.g. "What happens to the floats if I remove this div?")
Adding/removing a class or ID to elements (e.g. "Will the rendering issue get fixed if I remove this CSS class?")
Substituting longer text on titles and buttons to test line breaks
Adding temporary inline styles for quick testing using the style HTML property (e.g. "Will this hyperlink look better with style="color:#00aeef" or style="color:# 067fad"?")

Firebug doesn’t save any code you write in it; when you click a link or refresh the page, your changes are gone. (And you wouldn’t want it any other way!) So, it’s a good idea to keep a text editor handy for pasting in code you’ve tried or may want to keep.

Editing CSS on the Fly
Editing CSS within Firebug is where the real action is, at least for web designers. As has been mentioned, inspecting an HTML element on the page will reveal its inherited styles in the Node View of the HTML panel. These styles are listed alphabetically, and grouped by selector on Style side panel.

The selectors are presented in the rendered CSS order: the most recent declaration at the top (for example, something at the beginning of the style sheet will be at the bottom of the CSS pane, and inline styles would be shown at the top as element.style).

If you use multiple style sheets, it does the same thing. For example, I’ll often use Eric Meyer’s CSS reset as the first style sheet on a site, so I’ll often see a very long selector at the bottom of my Style side panel.

Firebug makes it clear which styles are actively affecting your HTML element by crossing out the CSS properties that have been superseded by another CSS property declaration. If there’s a line through it, then it means that another CSS rule has overwritten it by being declared after the former rule, or by being !important.

The great thing about the CSS in the Style side panel is that it’s editable. Want to see how the web page would look if you changed the element’s padding-top property to 22px? Click on the property value and change it. You can also change the property itself (e.g. change padding-top to padding-bottom).

You can also disable/hide a CSS property/value pair to see what the page would look like if it didn’t have that rule. This is useful for seeing unneeded CSS lines in the web page, determining if the property declaration is what’s causing rendering issues, etc.

When you’re editing CSS in the Style side panel, the Enter key will jump to the next editable cell – from property to value, and down to the next property.

When you’re at the last property of the selector, hitting Enter will give you a new line, where you can add a new CSS property/value pair.

Now if you want to add CSS to an element that doesn’t have a class or ID (and therefore won’t appear in the Style side panel), you can either add inline styles in Node View, or venture into the CSS panel.

The CSS panel shows you a page-view of the various style sheets you’ll have attached to the site.

In Source Edit mode, you are able to edit values (Similar to the HTML panel’s Style side panel we discussed earlier). In Source Edit mode, you can actually type freely as if you were working on your site’s style sheet in a code editor.

Editing via the CSS panel.

Firebug Quirks and Limitations
Even Firebug has its quirks, but with the insane release schedule Firefox is under lately, who can blame it?

Here are a few issues that cause occasional hiccups when using Firebug for debugging, as well as some limitations you will have when working with it. Let’s just talk about a few of them.

HTML Elements with Hover Properties
It can be hard to troubleshoot elements that have CSS :hover rules or JavaScript hover events, like fly-out drop-down menus because the Node View updates the markup when you mouse out of the element. So one issue is that i[…]

Nowadays, content must be developed to be viewed and interacted with across a range of screen sizes, from smartphones to the widest flat-screens. With devices becoming increasingly abundant in our daily lives, people are shifting from device to device, and they expect their products and services to shift with them. Regardless of what size screen your content is on, people expect a delightful experience across devices.

Here is a list of popular resolutions on various devices:
...read more
By Sachendra Yadav

Nowadays most developers already know how to quickly code a menu or a layout structure, but there’re always a great difficulty when coding a form, either contact, login, newsletter, comment etc.
Formee is nothing but a framework to help you develop and customize web based forms. works with the technique provided by Fluid 960 Grid System to compose the form’s layout, allowing total flexibility to put it in any website or web system.
The form has a structure built around percentage widths, thus allowing its inclusion in any project, adapting to the space available. Formee has its structural code independent of the style codes, facilitating the complete customization and manteinance of the form.
The form was built with care to preserve web standards and their semantic values, working with the smallest possible amount of tags and according to the W3C rules.

Requirements: - Demo: http://www.formee.org/demo/ License: GPL, MIT License
Related PostsjQuery Mobile – A Web Framework for Smartphones & Tablets
dhtmlxGantt Allows You To Create Dynamic Gantt Chart
Quickly Review Code Quality with YAML Debug Bookmarklet
jQuery Mobile Alpha 1 Released
5 Special Invitations from Dreamhost
SponsorsProfessional Web Icons for Your Websites and Applications

RT @spam: If you think your account has been compromised, change your password and check your connections. More info here: ...

Social media is a powerhouse of change for several areas of customer experience. In regards to marketing,  the social web has provided a less expensive, more communicative alternative that’s poised to replace traditional methods — billboards, TV spots, etc. — altogether. The following infographic from Voltier Digital highlights how things currently stand.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

So, you’ve been testing landing pages like a good little PPC Account Manager should. Good job! But, now what? How do you tell which is doing the best? How do you present this to your boss/client? Prepare a landing page report in Excel–duh! Don’t worry, Jessica Cates is going to show you exactly how to do it. You’ll be on your way to showing the results of all your hard work with landing page testing in no time!

(psst! Don’t forget to put us in 1080 for the best view!)

Check out the rest of our video blogs for more awesome videos!

Check out The Adventures of PPC Hero: Heroic Feats of Pay Per Click Management at http://www.ppchero.com/. Copyright © 2007-2010 Hanapin Marketing, LLC.

Web development is an industry that’s in a state of constant flux with technologies and jargon changing and mutating in an endless cycle. Not to mention the sheer deluge of information one has to process everyday.

In this series, published monthly, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package. Join me after the jump!

News and Releases
All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.

The World Loses a Few Luminaries
October, overall, was quite a sad month for techies everywhere. In case, you missed it, here are a few of the fine people we lost over the month.

Dennis Ritchie
Dennis MacAlistair Ritchie was an American computer scientist who “helped shape the digital era”. He created the C programming language and, with long-time colleague Ken Thompson, the UNIX operating system. Everything digital probably runs on was created using the language this splendid mind created.

John McCarthy
John McCarthy was the inventor of the LISP programming language, an American computer scientist and cognitive scientist who received the Turing Award in 1971 for his major contributions to the field of Artificial Intelligence (AI). He was responsible for the coining of the term “Artificial Intelligence”.

Steve Jobs
Last, but not least, Steve Jobs passed away earlier this month. For those that have been living under a rock, Jobs was the co-founder of Apple and one of the creative minds behind a lot of the popular gadgets we use today. If you’re even the tiniest bit interested about him, I highly recommend picking up his biography — it’s an excellent read.

A moment in honor of these great men, if you will.

Google Introduces the Dart Programming Language
Google, in their quest to make development easier, released a new programming language targeted at web developers. Called Dart, this language should feel familiar to most Java/C# programmers. I’m sure you have lots more questions so feel free to hit the link below for the official announcement post.

Read more

Heroku Adopts for Python and Django
Heroku, one of the most well known platform-as-a-service providers, recently announced that they’re adding Python to their list of supported languages. The list now includes Ruby, Java, PHP, Scala and Clojure along with Python. Hit the link below to glean more on how to use Python on Heroku.

Read more

Mozilla Shows off Aurora 9
Mozilla released Aurora 9, slated to be the upcoming Firefox 9. The build includes a lot of niceties for developers including new mouse events, improved JavaScript performance as well as user oriented features such as support for ‘Do Not Track’.

Read more

Sinatra 1.3 Released
Quite probably the most fun framework ever just got updated to version 1.3. This version ships with a lot of nice new features about which you can read about in the link below.

Read more

Apache Releases Version 1.7 of Subversion
Amongst all the talk about Git, it’s easy to forget that there are plenty of similarly abled version control solutions out there. One such fine alternative is Subversion and Apache just released a bit update to the software with plenty of bug fixes, performance improvements and new features.

Read more

Google Releases the Google JS Test
Google JS Test is a JavaScript unit testing framework that runs on the V8 JavaScript Engine, the same open source project that is responsible for Google Chrome’s super-fast JS execution speed.

Read more

Google Unleashes ScriptCover
ScriptCover is a Chrome extension that provides line-by-line Javascript code coverage statistics for web pages in real time without user modification of the site. Results are collected when the page loads and continue to be updated as users interact with the page. These results can be viewed in real time through a reporting tool which highlights the executed lines of code for detailed analysis. ScriptCover is useful when performing manual and automated testing and in understanding and debugging complex code.

Read more

New Kids on the Block
As web developers, the sheer amount of resources we can tap into increases exponentially with time. Here is just a quick look at some recently created resources that deserve your attention — everything from new books to scripts and frameworks.

money.js
JavaScript currency conversion library, done right – with no dependencies, in just over 1 kb.

Read more

AliceJS
AliceJS is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.

Read more

validate.js
Lightweight JavaScript form validation library inspired by CodeIgniter.
No dependencies, just over 1kb gzipped, and customizable!

Read more

List.js
List.JS is a 7 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? You can also add, edit and remove items by dead simple templating?

Read more

Tangle
Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.

Read more

JSZip
The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you.

Read more

Zynga Scroller
A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.

Read more

Raptor
Raptor is a unique framework that’s Ruby powered, Rack compatible, controller-free amongst lot others. If you’re a Ruby-ist, I strongly recommend taking a look at the framework.

Read more

Raphael
While not really a new utility, Dmitry just pushed out a new version of his much acclaimed Raphael vector library. Make sure to check it out!

Read more

Donatello
Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS. The idea came together from various code snippets I had lying around for drawing circles and lines in other projects. I decided to make an attempt at a drawing API using these ideas after using Raphael.js in my Node Knockout team project.

Read more

Best of the Internet
Often, you’re not really looking for a tutorial as much as you’re looking for a rant, an opinion or the musings of a tired developer or just something cool with absolutely zero real world use. This sections contains links to precisely those — interesting and cool stuff from the developer community.

Ryan Dahl on Software
An excellent, little rant-ish post on Unix, software development and abstraction. An excellent read indeed!

Read more

‘Algorithm’ is Not a Four Letter Word
Jamis Buck from 37Signals talk about algorithms and why they should be a part of your programming training regimen.

Read more

Node.js is Cancer
Ted Dziuba explains why he thinks Node.JS is a disaster waiting to happen. Contains a few expletives so be warned.

Read more

repl.it
repl.it is an online environment for interactively exploring programming languages. The name comes from the read-eval-print loop, the interactive toplevel used by languages like Lisp and Python. An excellent tool if you merely want to mess around with a language.

Read more

Node.js Cures Cancer
As it often happens in our field, an incendiary article often results in numerous counter articles. In this example, Brian Beck counters Ted’s post about Node.JS.

Read more

JavaScript Face Detection
Title says it all. Face detection using canvas and the video element along with a bit of JavaScript. Really cool stuff!

Read more

Noise with JavaScript
Cool little script that generates noise using the canvas element.

Read more

Wrapping Up
Well, that’s about all the major changes that happened in our industry lately. Since this is the first time we’re doing something along these lines, everything is still up in the air — future editions will be shaped by your feedback.

Do you want us to cover more standard news? A focus on upcoming scripts maybe? Or just more interesting posts and discussions from the community? Let us know in the comments and thank you so much for reading!

"She estimated that 80 percent of civet coffee in the Philippines was now produced using caged animals" - /via Sprudge.

Is This the End of Popping Vitamins? - WSJ -

@CoffeeAdventure a simple question with a complex answer ;)

Read it: "Steve Jobs' Sister Reveals His Last Words"-

I finally found a nicely designed, Open Source Digital Asset Management system. PHP/MySQL too! ResourceSpace

RT @terryvanhorne: More than 5 children die a day from abuse. Don’t wait another day to save a life: #StopChildAbus ...

@andrewbleakley it comes with an installer, man. Took a while but didn't require anything from me -

Kick Other Devices off a Wi-Fi Network with WiFiKill on Android [Evil Week] -

"Dead Men Walking or Walking Dead? Enterprise CMS Vendors Must Adapt or Die" -

RT @safety: Always make sure you're on before logging in & be wary of weird links in DMs! We're resetting PWs for p ...

The business.

Melbourne Tech incubator:

Transmitting Your Music to Their Speakers [Evil Week] -

Morning coffee thanks to my @Presso via @youtube

I didn't get out for coffee today. Instead, I've been hanging out with the good folks (and animals) at AMWRRO :

I <3 science >> Suck on that Abbott, Jones, Bolt, and other lamers

Yes!! “@Captainturtle Works for me RT @bionic_beer_gut Charge a car in time it takes for a coffee

Awww yes! RT @drhastings: I have designed a mug that expresses exactly how I feel about coffee.

RT @aphlogist: @Presso @BrownOwlCoffee Snake Bite Espresso, hand pulled on a Presso.

That's awesome. “@TheRoasterie We're going to be powerless for 15 minutes, but afterward we'll have solar!

RT @NatGeo: Find out how to catch the Orionid meteor shower this weekend:

@sophbenj you're better off emailing or calling them. They're not as addicted to twitter as I am.

Classy. RT @lunaphyle: Yeah, nice one Australia Post!

Wow, the new Puscifer album is amazing. ♬ 'Monsoons' - Puscifer ♪

RT @Captainturtle: It's gonna get worse. Tragedy @GreenpeaceNZ: Satellite image shows full extent of #Rena Oil Spill so far ...

I thought this happened? > Bitly Makes Its Bitly Pro Features Free To All Users -

Shopify, the online shopping platform, has helped power more than 15,000 e-commerce store fronts including shops for Angry Birds, the Beastie Boys, General Electric and Tesla Motors. Now, the Ottawa company is announcing it’s raised $15 million in a Series B round from existing investors Bessemer Venture Partners, FirstMark Capital and Felicis Ventures along with a new investment from Georgian Partners.

The company plans to use the money to expand its team of 70 employees, explore partnerships and acquisitions and build up the number of developers who build off the Shopify platform. Shopify has about 80 apps built by developers such as QuickBooks, Mailchimp and Hubspot, who make their software available to store front owners. Now, Shopify is launching a $1 million fund called the Shopify Fund to encourage more apps on the platform. Through the fund, developers will get between $5,000 and $10,000 to help them build apps for Shopify.

Shopify was founded in 2005 as an online retailer of snowboards but became a broader platform after founders Tobias Lutke and Scott Lake saw the need for a scalable service for other entrepreneurs. The company, which has been growing quickly, raised $7 million last December.

Shopify has been actively trying to encourage entrepreneurs to build on its ecommerce platform. It’s currently in the middle of its second Build a Better Business competition, which is giving out half a million dollars in prizes and giveaways to winners. The first competition helped create 1,400 businesses and collectively raised $3.5 million in revenue over its 6-month contest period. Last year’s winner, iPad case maker DODOcase, is on an annual run rate of $4 to $5 million.

“A lot of great stores are starting and building their business on this platform,” said Harley Finkelstein, Chief Platform Officer for Shopify. “They can scale up and they don’t have to graduate off  the model.”

Shopify, however, is facing new competition from eBay, which just announced X.commerce, a one-store shopping platform, last week at its developer conference. Shopify also competes with Big Commerce and Yahoo Merchant Solutions.

Related research and analysis from GigaOM Pro:Subscriber content. Sign up for a free trial.
NewNet Q3: Facebook remakes headlines in social mediaConnected Consumer Q3: Netflix fumbles; Kindle Fire shinesDisruptapalooza 2011: how Amazon’s Kindle is changing the portable media game

I'm at Presso (468 High St, Northcote)

For real? "Woman, 23, ages 50 years in just days" -

Box offers 50 GB storage to iOS users -

Obama sends US combat troops to Uganda -

RIP: Dennis Ritchie, Creator Of Unix Operating System, Has Left The Computer Lab -

RT @strvmarv: Trolling Siri users is going to be epic fun. : ) HURRY UP AND GET IT INSTALLED!

Saturday the 29th of October, @padrecoffee is hosting a fundraiser for Heart Kids. Read more:

My Dad. RT @seabirdrescue: Read about the birth of Australian Seabird Rescue - Australian Story

Sweet Viber update -

Royal Coffee are organising support and you can contribute through GCBC here (registration required unfortunately)

The co-op is ASOGABRI and is in the Huehuetenango Departmenta

@thenickels Maybe Santa can put one of these in your stocking too. Then you can take your espresso right off the grid.

Look! Monkeys jamming!

The new website was a BBM project. Hit 'em up if you need any web work done.

Launched the new - Still lots of work to do including redesigning the blog and getting a testimonial that's not mine ;)

No fear of coming up short on coffee or gear at the office now.

Advertise here with BSA
When working on a new web project, displaying a "coming soon page" on its website is a common and good way of informing the visitors about "when it will be launched", contacts details and even the progress of the project.

Sooner or Later is an exclusive coming soon template for WebResourcesDepot readers that is designed by Viv Singh of VIVROCKS.com.

The template is simplistic, has an easy-to-update HTML code and displays a countdown timer for providing an exact launch date-time to visitors.

It makes use of the the Final Countdown plugin for jQuery and launch date can be defined very quickly.

There are also links for the most popular social networks: Facebook and Twitter, so the users can keep connected while the website is not ready.

License: Feel free to use it on any personal or commercial projects (no back links are required but please keep the attributes in the source). It is only not allowed to re-distribute template.



About the designer: Viv Singh is a freelance logo, graphics + website designer and a WordPress expert. Visit him at VIVROCKS.com for some high quality graphics design freebies and to check all the services he provides.
You can follow him @ZoneofWizards on Twitter and his Facebook page.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

I love this photo of a Presso shot in progress. The photo is by Alex - one of our Facebook mates.

 



 





If you’re into WordPress development, you can’t ignore hooks for long before you have to delve into them head on. Modifying WordPress core files is a big no-no, so whenever you want to change existing functionality or create new functionality, you will have to turn to hooks.

In this article, I would like to dispel some of the confusion around hooks, because not only are they the way to code in WordPress, but they also teach us a great design pattern for development in general. Explaining this in depth will take a bit of time, but bear with me: by the end, you’ll be able to jumble hooks around like a pro.

Why Hooks Exist
I think the most important step in grasping hooks is to understand the need for them. Let’s create a version of a WordPress function that already exists, and then evolve it a bit using the “hooks mindset.”

function get_excerpt($text, $length = 150) {
$excerpt = substr($text,$length)
return $excerpt;
}

This function takes two parameters: a string and the length at which we want to cut it. What happens if the user wants a 200-character excerpt instead of a 150-character one? They just modify the parameter when they use the function. No problem there.

If you use this function a lot, you will notice that the parameter for the text is usually the post’s content, and that you usually use 200 characters instead of the default 150. Wouldn’t it be nice if you could set up new defaults, so that you didn’t have to add the same parameters over and over again? Also, what happens if you want to add some more custom text to the end of the excerpt?

These are the kinds of problems that hooks solve. Let’s take a quick look at how.

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length", $length);

$excerpt = substr($text,$length)
return $excerpt;
}

As you can see, the default excerpt length is still 150, but we’ve also applied some filters to it. A filter allows you to write a function that modifies the value of something — in this case, the excerpt’s length. The name (or tag) of this filter is excerpt_length, and if no functions are attached to it, then its value will remain 150. Let’s see how we can now use this to modify the default value.

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length");

$excerpt = substr($text,$length)
return $excerpt;
}

function modify_excerpt_length() {
return 200;
}

add_filter("excerpt_length", "modify_excerpt_length");

First, we have defined a function that does nothing but return a number. At this point, nothing is using the function, so let’s tell WordPress that we want to hook this into the excerpt_length filter.

We’ve successfully changed the default excerpt length in WordPress, without touching the original function and without even having to write a custom excerpt function. This will be extremely useful, because if you always want excerpts that are 200 characters long, just add this as a filter and then you won’t have to specify it every time.

Suppose you want to tack on some more text, like “Read on,” to the end of the excerpt. We could modify our original function to work with a hook and then tie a function to that hook, like so:

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length");

$excerpt = substr($text,$length)
return apply_filters("excerpt_content", $excerpt);
}

function modify_excerpt_content($excerpt) {
return $excerpt . "Read on…";
}
add_filter("excerpt_content", "modify_excerpt_content");

This hook is placed at the end of the function and allows us to modify its end result. This time, we’ve also passed the output that the function would normally produce as a parameter to our hook. The function that we tie to this hook will receive this parameter.

All we are doing in our function is taking the original contents of $excerpt and appending our “Read on” text to the end. But if we choose, we could also return the text “Click the title to read this article,” which would replace the whole excerpt.

While our example is a bit redundant, since WordPress already has a better function, hopefully you’ve gotten to grips with the thinking behind hooks. Let’s look more in depth at what goes on with filters, actions, priorities, arguments and the other yummy options available.

Filters And Actions
Filters and actions are two types of hooks. As you saw in the previous section, a filter modifies the value of something. An action, rather than modifying something, calls another function to run beside it.

A commonly used action hook is wp_head. Let’s see how this works. You may have noticed a function at the bottom of your website’s head section named wp_head(). Diving into the code of this function, you can see that it contains a call to do_action(). This is similar to apply_filters(); it means to run all of the functions that are tied to the wp_head tag.

Let’s put a copyright meta tag on top of each post’s page to test how this works.

add_action("wp_head", "my_copyright_meta");

function my_copyright_meta() {
if(is_singular()){
echo "";
}
}

The Workflow Of Using Hooks
While hooks are better documented nowadays, they have been neglected a bit until recently, understandably so. You can find some good pointers in the Codex, but the best thing to use is Adam Brown’s hook reference, and/or look at the source code.

Say you want to add functionality to your blog that notifies authors when their work is published. To do this, you would need to do something when a post is published. So, let’s try to find a hook related to publishing.

Can we tell whether we need an action or a filter? Sure we can! When a post is published, do we want to modify its data or do a completely separate action? The answer is the latter, so we’ll need an action. Let’s go to the action reference on Adam Brown’s website, and search for “Publish.”

The first thing you’ll find is app_publish_post. Sounds good; let’s click on it. The details page doesn’t give us a lot of info (sometimes it does), so click on the “View hook in source” link next to your version of WordPress (preferably the most recent version) in the table. This website shows only a snippet of the file, and unfortunately the beginning of the documentation is cut off, so it’s difficult to tell if this is what we need. Click on “View complete file in SVN” to go to the complete file so that we can search for our hook.

In the file I am viewing, the hook can be found in the _publish_post_hook() function, which — according to the documentation above it — is a “hook to schedule pings and enclosures when a post is published,” so this is not really what we need.

With some more research in the action list, you’ll find the publish_post hook, and this is what we need. The first thing to do is write the function that sends your email. This function will receive the post’s ID as an argument, so you can use that to pull some information into the email. The second task is to hook this function into the action. Look at the finished code below for the details.

function authorNotification($post_id) {
global $wpdb;
$post = get_post($post_id);
$author = get_userdata($post->post_author);

$message = "
Hi ".$author->display_name.",
Your post, ".$post->post_title." has just been published. Well done!
";
wp_mail($author->user_email, "Your article is online", $message);
}
add_action('publish_post', 'authorNotification');

Notice that the function we wrote is usable in its own right. It has a very specific function, but it isn’t only usable together with hooks; you could use it in your code any time. In case you’re wondering, wp_mail() is an awesome mailer function — have a look at the WordPress Codex for more information.

This process might seem a bit complicated at first, and, to be totally honest, it does require browsing a bit of documentation and source code at first, but as you become more comfortable with this system, your time spent researching what to use and when to use it will be reduced to nearly nothing.

Priorities
The third parameter when adding your actions and filters is the priority. This basically designates the order in which attached hooks should run. We haven’t covered this so far, but attaching multiple functions to a hook is, of course, possible. If you want an email to be sent to an author when their post is published and to also automatically tweet the post, these would be written in two separate functions, each tied to the same tag (publish_post).

Priorities designate which hooked function should run first. The default value is 10, but this can be changed as needed. Priorities usually don’t make a huge difference, though. Whether the email is sent to the author before the article is tweeted or vice versa won’t make a huge difference.

In rarer cases, assigning a priority could be important. You might want to overwrite the actions of other plugins (be careful, in this case), or you might want to enforce a specific order. I recently had to overwrite functionality when I was asked to optimize a website. The website had three to four plugins, with about nine JavaScript files in total. Instead of disabling these plugins, I made my own plugin that overwrote some of the JavaScript-outputting functionality of those plugins. My plugin then added the minified JavaScript code in one file. This way, if my plugin was deactivated, all of the other plugins would work as expected.

Specifying Arguments
The fourth argument when adding filters and actions specifies how many arguments the hooked function takes. This is u[…]

Shelf-life of a Barista (Australia) -

The reports are true. Thanks and goodbye, Steve.

Mind. Blown. RT @vyapada: @Presso That's nothing!

A quick and worthwhile read: integrated thinking -

Want! >> Robot tea infuser -

Advertise here with BSA
MooVES is a MooTools plugin for easing and enhancing the integration of videos from popular video sharing websites (YouTube, Vimeo, Dailymotion, Facebook, Flickr, Google Videoi etc.).

It is unobtrusive and displays the link to the video and a notice if JavaScript or Adobe Flash Player is not enabled.

The plugin works by simply mentioning the URL of the media as a link and calling the MooVES function with targeting that element.

There is no need to know the settings for each video service and a single function makes setting options (like width/height, background/foreground colors, autoplay or loop) possible.

MooVES also has support for HTML5 video tag features (in beta).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Back in June, we announced a pilot program to allow users to surface Google Search data in Google Analytics by linking their Webmaster Tools accounts. We’ve been busy making some improvements and tweaks based on user feedback, and today we’re excited to make this set of reports available to all users.

The Webmaster Tools section contains three reports based on the Webmaster Tools data that we hope will give you a better sense of how your site performs in search results. We’ve created a new section for these reports called Search Engine Optimization that will live under the Traffic Sources section. The reports you’ll find there are:
Queries: impressions, clicks, position, and CTR info for the top 1,000 daily queries
Landing Pages: impressions, clicks, position, and CTR info for the top 1,000 daily landing pages
Geographical Summary: impressions, clicks, and CTR by country

Queries report
To start using the reports you first need to link your Google Analytics and Webmaster Tools accounts. You can get step by step instructions and additional information on the reports in this Help Center article. If you’re not already using Webmaster Tools, we highly recommend you start. It’s a free tool that helps you understand how Google sees your site. Sign up on the Google Webmaster Tools homepage. Enjoy the new reports, and let us know how they’re helping your analysis.

Posted by Kate Cushing, Associate Product Manager, Google Analytics team

 



 





It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.

What To Track
The most helpful errors to track are form-field errors and 404 pages. Form-field errors can be captured after the form’s validation has run; this can be client-side or server-side, as long as you can trigger a Google Analytics event when an error message appears to a user. (We’ll be using Google Analytics in this article, but you can apply these concepts to many visitor-tracking tools, such as Omniture and Performable.)

Form-Field Errors
Forms that allow users to create an account, log in or check out are the places where most visitors will hit stumbling blocks that you are not aware of. Pick pages with forms that have high exit rates or that have high total page views but low unique page views. This could indicate that users are repeatedly trying to submit the form but are encountering problems.

The easiest way to track form-field errors with Google Analytics is to track an event each time a user sees an error message. The specification for _trackEvent is:

_trackEvent(category, action, opt_label, opt_value)
If the form is for signing in and the user submits an incorrect password, I might use the following code:

<script type='text/javascript'>
_gaq.push(['_trackEvent', 'Error', 'Sign In', 'Incorrect Password']);
</script>
If possible, store the error message’s text as a variable, and call this variable within Google Analytics’ event tracker. This way, as you change the text of the error message over time, you can measure the differences between the versions. For example, in PHP, I might write:

<?php
$message = 'Incorrect password';
if ($message) { ?>
<script type='text/javascript'>
_gaq.push(['_trackEvent', 'Error', 'Sign In', '<?php echo $message ?>']);
</script>
<?php } ?>
If it’s possible for the user to receive more than one error message on the page at a time (for example, if they’ve missed more than one field in a form), then you might want to store all of the messages in the same event tracker. Use an array, or concatenate them into the variable that you call in your event tracker. You might see that a user has attempted to skip all of the fields in a form; this could indicate that they are testing the form to see which fields are required and which are optional. You’ll notice this if you have tracked an event that includes all missing fields in the same event. However, storing all of the messages in the same event might prevent you from tracking the effects of individual error messages over time, so begin by tracking each error message separately.

404 Pages
You might already know how many times your 404 page is being viewed, but do you know which URLs the users were trying to reach, or what websites are referring to those URLs? By adding a tracking code to your 404 pages, you can see both. The following snippet will include the URL that generated the 404 error and the URL that linked to that page:

<script type="text/javascript">
_gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer ]);
</script>
Google Analytics Reports
As you track errors as events using Google Analytics, you will find a list of them in your reports under “Event Tracking,” under the “Content” menu. Choose “Categories,” and then start drilling down through your error types.

You can save any of these graphs to your dashboard with the “Add to Dashboard” button at the top of each screen. I find it useful to list the top 404 errors on my dashboard, so that I can see whether anything new has popped up when I log in.

Google Analytics also lets you know of spikes in error messages. The “Intelligence” section allows you to set an alert for when a certain metric reaches a specified threshold. In my case, I want to know when the number of unique 404 errors has increased by more than 20% over the previous day.

In your custom alert, set the alert’s conditions to include “Event Action,” matching your error’s name exactly. In this case, the error name is “404.” Set it to alert you when the “Unique Events” percentage increases by more than 20% over the previous day. Be sure to check the box for the option to receive an email when this alert triggers!

Once you have captured enough data to analyze, start creating these dashboard widgets and alerts in Google Analytics, so that you can make informed decisions on how to improve your website.

How To Analyze Errors
Error messages will help you see in aggregate the most common stumbling blocks for users. Are a lot of users encountering errors with a particular text field? Perhaps the field for the expiration date of their credit card? Or for their email address? You might be surprised by what your users encounter.

Segmenting Data
If your website gets a lot of traffic, consider segmenting the user base to analyze the error messages. Look for groups of users who make up the majority of a certain kind of error event, because there may be something unique about that segment.

“New Visitors” are first-time visitors to your website. They are likely unfamiliar with the typical flow of your navigation and are brand new to your forms and so don’t know what fields are required. “Returning Visitors” will likely be familiar with your website, so they may not have a large impact on error rates (unless you’ve changed something that catches them by surprise).

To change the user segment that you’re looking at, go to your list of error events and click the drop-down menu next to “Advanced Segments.” By selecting “New Visitors” and then hitting “Apply,” the data will update to show only the errors that “New Visitors” have encountered.

Break down your data on error messages according to user segment in order to analyze the data more deeply.

Segmenting users by country can also give more context. I once wrestled with why so many users were triggering error messages for ZIP and postal codes in a form. After organizing the data by country, I saw a high number of errors from one country whose postal-code syntax I hadn’t accounted for in my form’s validation. I fixed the error and saw the error rate for ZIP and postal codes drop.

Check errors by country to see whether any patterns emerge in your error messages.

Referring sources for 404 pages is another way to examine the data. Use the “Filter Event Label” search bar to show errors whose referring source is a particular domain. Searching your own domain first is useful to see which incorrect URLs you can quickly fix on your own website.

Prioritize Issues
After segmenting the data, prioritize the errors that you want to fix. The top priority will be errors that affect a large group of people (i.e. ones that have a high number of unique events). Next, work on the errors that you know you can easily fix. You likely already know the cause of some errors (poor validation, unhelpful error message, etc.), so clean those up. For 404 errors, check which referring links come from your website, and fix those.

Examine 404 errors to see whether any particular referring links can be easily fixed.

Once you’ve cleaned up the errors that are easy to fix, track the new data for at least a week before doing another round of prioritization. Examine what has changed in the top errors and where they come from, and then research the cause of those errors.

Often, forms will need to be made more intuitive to help users avoid error messages. For example, if a lot of users are making mistakes when entering a date, then play with that field. Does your user base prefer drop-down menus for days, months and years? Do they make fewer errors if given a date picker? Are you giving them helpful examples of the syntax they need to follow? Track your changes and measure the rate of error events after each change to see what decreases user error.

Improve Your Error Messages
Improving the text, design and layout of your error messages could decrease the number of repeated errors by users. An error message might not be clear or might be hidden on the page; improve the user experience by testing changes to your error messages.

I prefer A/B testing to compare the effectiveness of error messages and their designs. On one form, I noticed that a number of users were skipping the phone-number field altogether, even though I’d indicated that it was required.

Some of the indicators of a required field that we tested.

After A/B testing different ways to indicate that the field was required and why it was required, we found that the combination of a link and a tooltip helped users recognize the need to fill in their phone number. This solution drastically decreased the rate of errors for this field.

On 404 pages, test out different content on users: link to your most popular pages; present a search form; try humorous content or Easter eggs to lighten the users’ spirits.

As you test different textual and design changes to your error messages, be sure to measure their effectiveness. Examine the following:

Total error events, and total events per error message;
Unique events per error message;
Exit rates on pages with forms and 404 pages.

All of these rates should drop. Ideally, your users should find the website so intuitive that your error event data will represent only […]