Posted by PhilNottingham

It’s the 1^st of January 2012. You've been inundated with well-wishing SMS messages from numbers you don't have saved. You got up late and have only just showered. More than likely, you’re unbearably hungover. Like many others you have just begrudgingly thought about remedying the sour taste in your mouth...

worked out how much you have consumed over the last few days...

before hastily working out how you can fix the consequences...

and wondered how to get rid of the faded, malting shrub which has engulfed your living room.

Although quaint and mildly amusing, the seasonal nature of these search trends was easily predicted. The same is not true for much of 2011, which turned out to be a year filled with of change, uncertainty and amazement. Below is a lighthearted rundown of 10 of the most surprising search industry happenings of last year.

Tales of the Unexpected

1. We're actually using a social network created by Google

Google+ finishes the year with a user base claimed to be around the 62 million mark, indicating that this time, they may have just got it right.

Through comprehensive Integration with existing Google profiles and aggressive marketing across the main Google platform, G+ appears to have hit the ground running, despite uncertainty about where it will fit into our current framework of social sharing and networking in the long term.

While 2010 saw the announcement, launch and immediate critical dismissal of the ill-fated Google Buzz, Google+ spent most of 2011 being taunted, lauded and speculatively compared with Facebook in varying degrees of favourable and unfavourable comment. It seemed as if the world, uncontent with continuously arguing over the merits of differing smartphone operating systems, wanted nothing more than to see two digital networking platforms wage an all-out bloody battle against each other -- like some sort of contemporary Tron that wasn't as terrible as Tron Legacy.

As it turns out, G+ ends the year in an uncertain, but interesting territory; occupying a space somewhere between the open, public broadcast realm of Twitter and the restricted, personal networking of Facebook.

Negatively....Google+'s openness, its complex encircling system and the ability to encircle people without a G+ account, means it lacks the feelings of control and privacy valued in Facebook while offering fairly disparate and confusing methods of locating individuals you may wish to connect with. Going forward, we may find that actually, the vast majority of people don't see a great deal of value in the Circles system - finding fragmented and factional communication a level of complexity above their requirements.

Positively...Google+ pages for businesses and public figures could turn out to be incredibly valuable, as writers vie for rel="author" attribution and companies compete for ever expanding rich snippet opportunities. The +1 sharing system could herald the marriage of search and social, especially if social sharing data in SERPs begins to dramatically alter CTR. Google+ hangouts offer a beautifully designed feature which should really have been available on Facebook and the Circles system has merit for informal interaction across real-life companies and organisations. In the end, it may be that the smaller elements of Google+ become its ultimate virtue -- succeeding to unite presences across the web; acting as a résumé for an individual's personal and professional web activity.

2. MC Hammer announced the launch of a search Engine

Of all the high profile entrepreneurs one could have foreseen staking interest and venture capital in a search start-up - low down on the list was early 90's rapper and reality TV star - MC Hammer. Wiredoo, currently in pre-beta is planned to be a deep search engine - offering uses related information about their search query - as well as results. In 2012, we should see Wiredoo beta launched alongside Vanilla Ice's new social network - Stop, Collaborate & Listen.

3. Google crept in Flight Search and Hotel Search

In another blow to small-time affiliates, Google sneakily crept in their own flight and hotel information, allowing users to compare prices, dates and quotes without having to leave SERPs.

While worrying many SEOs, with the view that Google is moving into a place of monopolistic power with regards to consumer choice; the feature was generally welcomed by users who found it helpful, accurate and valuable. In 2012, we may see Google making the foray into more temporal searches, such as train times, museum opening hours and TV listings. Google Shopping will probably be given a further revamp in 2012.

4. Adobe abandoned development on Flash Player for Mobile Devices

Adobe realised that Flash was unlikely to stand strong in the future; with the expanding war on site-speed, lack of iOS compatibility and YouTube shift towards HTML5 amongst a multitude of factors. Seeing the writing on the wall, Adobe made the brave move to lose some staff and shift their focus towards HTML5 and AIR development, in order to maintain relevancy in an increasingly mobile internet space. Adobe Edge, HTML5 & CSS3 content creation software has been released in preview mode.

In 2012, we'll now see an enormous collective push towards providing exciting, search-engine friendly HTML5 & CSS3 content - with all major parties pulling in broadly similar directions. Now is the time to revamp any legacy Flash content and get on-board the HTML5 train.

5. Microsoft fixed Internet Explorer (sort of)

The haunting presences of archaic IE versions were offered an exorcismin 2011, after Microsoft announced that it would bring auto-update to IE. Starting in Brazil and Australia early this year, IE updates will be included within the wider Windows Update system. Those with auto-update on will be automatically upgraded to IE9. Assuming success in Brazil and Aus, the updates will likely roll out progressively to the rest of the world, allowing us to finally get really creative with all that nice HMTL5 & CSS3 business without worrying too much about old browser compatibility. On the downside, Internet Explorer will probably still be rubbish throughout 2012.

When this auto-update system comes into full force, we can expect complaints from thousands of IT and software companies who have made a good living out of offering pop-up blockers and Internet security systems. The United Kingdom Civil Service will also likely make some fuss as in a feat of unprecedented irony, they have so far refused to allow staff to use anything other than IE6 because of "security concerns".

6. Anonymous took down Visa.

Everyone's favourite V for Vendetta fans made a quite astonishing display of their capabilities in 2011, as they attacked both Mastercard and Visa under what was termed "Operation Payback" - a campaign to target firms the organisations viewed as being against Wiki-leaks. Who knows what we could see from this group in 2012....

7. Apple's voice search was xenophobic

Although pundits were expecting voice integration with the iPhone following Apple's purchase of Siri back in 2010, few expected it to make the huge leap above Google voice search into passive aggressive comments and sarcastic humour. Seemingly unable to effectively decipher the majority of non-north American accents, Siri patronisingly asks most Scottish people to repeat their request and currently refuses to give local search data outside of the US. In 2012, we might see a tempering of Siri's nationalistic bias, with yelp powered local search data offered in Europe and around the world. We'll also likely see Android produce a similar functionality for their handsets - perhaps with a more liberal, multicultural vibe.

8. Exact match domains became more powerful

Despite what i think will be a general consensus that the quality of Google SERPs improved dramatically over the past year, exact match domain names seemed to be ranking better and appearing in greater number, even for extremely competitive keywords.

This was, of course, extremely frustrating for those of us who hold a romantic vision of a world where spammy tactics are redundant and SEOs, clad entirely in white, run around meadows in harmony with Google; gaily laughing at the fools from paid-seo-friendly-links.com.

While we can assume and hope that this problem will eventually get fixed, we can take solace in the introduction of rich snippets and schema.org which also happened this past year - giving genuinely good sites another way to prove their worth in the SERPs.

9. Google stopped providing keyword referral data for logged in users

To the sounds of justified indignation and uproar from the SEO community, Google announced they would be blocking keyword referral information in Google Analytics for logged in users.

Will this affect the day-to-day SEO? I'm not sure. But we'll have to sit tight in 2012 in case any other nasty surprises come our way.

10. Digg fell to insignificancy while Reddit went exponential

Russ Jones spoke about the Fall of Digg and the rise of Reddit at his 2011 Linklove presentation, but few could have predicted how right on the money he was. As we move into 2012, Google Trends shows Reddit on an almost exponential rise while Digg trickles out to nothing.

and It's good news for SEOmoz, whose strong performance in 2011 suggests that they too may overtake Digg in 2012.

A happy and prosperous new year to you all!

Do you like this post? Yes No

Posted by randfish

It's 2012, and that means we get to revisit our expectations for 2011 and prognosticate for the year ahead. In keeping with tradition, I'm first going to evaluate my predictions from last December before determining if I've got the cred to make some for 2012. Here's the rules:

For each prediction, we'll grade using the following points system:

• Spot On (+2) - when a prediction hits the nail on the head and the primary criteria are fulfilled
• Partially Accurate (+1) - predictions that are in the area, but are somewhat different than reality
• Not Completely Wrong (-1) - those that landed near the truth, but couldn't be called "correct" in any real sense
• Off the Mark (-2) - guesses which didn't come close

The rule is - if the score is lower than +1, I'm not allowed to make predictions for the coming year. Cross your fingers for me!

Last year, I made 7 predictions:

1. Someone proves (or a search engine confirms) that clicks/visits influence rankings +2
   Both Google and Bing confirmed in 2011 that they use searcher behavior, including clicks, as ranking signals. This prediction was spot on (though, to be fair, some felt that prior statements had already insinuated this was the case).
2. Google local/maps adds filtering/sorting -1
   This one was almost completely wrong. I expected something more like what Yelp offers (and I thought Google's move to do this in recipe search was the beginning of something broader). Google has added more suggested searches as seen below, which is the only reason I'm giving myself a "not completely wrong."
   
   _
3. Social search will rise -1
   This guess was also quite nearly off the mark, but Google's move into social saved it, at least partially. Google+ has added a lot more depth of social elements and signals for the engine, and for anyone logged into their Google/Gmail/Google+ account, the prevalence of social results is quite remarkable.
4. Rank tracking will be possible through the query string -2
   Sadly, this one was dead wrong. We saw rank tracking in the query string first emerge in 2009 and I was sure that Google would roll this out more broadly, but instead we're still getting only 10-20% of search referral strings with rank data included, and the new (not provided) issue has made manual or machine-based rank tracking even more essential. Sad, because I think this was a big opportunity for Google to be more open.
5. Mobile will have a negligible effect on search/SEO +1
   While many pundits will surely claim that 2012 will (finally) be the year of mobile, I'd say 2011 has helped prove that the search world  is pretty device agnostic. Rather than changing SEO, mobile and tablet adoption has merely meant that there's more searches around local and location and that the web as a whole is a bigger part of people's lives than ever before.
6. Software will become an SEO standard +1
   This one's hard to quantify, but I think it's directionally accurate. Here's the Forrester Interactive Marketing report, which notes a large adoption of SEO software at the enterprise level, and with the death of Yahoo! Site Explorer, software and tools from third parties is more essential than ever. I'm not going to give a +2 as I'd say we're still missing conclusive proof that software is "standard," though our upcoming industry survey may help shed light on that.
7. We'll start to move away from the title "SEO" to something more all-inclusive +1
   It didn't happen in a big way, but the phrase "inbound marketing" and "inbound marketer" appears to be gaining traction. I like the wording, which suggests earning people's trust and interest rather than buying it and includes SEO, social media, content marketing, blogging and web analytics. In our recent survey of agencies, "inbound/organic" agency was how the largest group of respondents described their firms:
   
   We'll be releasing the full data tomorrow night on the blog - stay tuned!

When we tally up the numbers, it's +5 and -4, leaving me with +1, just barely enough credibility to make predictions for another year :-)

This year, I'm making 8 predictions (rather than 7). The goal with each is not just to share an opinion, but hopefully to provide some action (implied or explicit) for marketers on at least a few. I'm also aiming to have each prediction be verifiable at year's end, so that I can, once again, check my work.

Prediction #1: Bing Will Have a Slight Increase in US Marketshare, but remain <20% to Google's 80%+

According to Comscore, Bing + Yahoo! have ~30% market share in the US to Google's ~65%. I personally think these numbers are relatively bogus and put much more faith in those generated by sources like Statcounter (which look at traffic sites receive rather than queries performed by a sample audience). Statcounter shows Google at ~82% and Bing+Yahoo! totally to ~16%. I'm guessing those numbers will be pretty similar come January 2013.

The biggest reason, IMO, isn't necessarily just brand loyalty and inertia for Google, but their continued superior performance on long tail queries (note: plenty of the comments in the linked-to Reddit thread are worth a read to get a sense of how "early majority" searchers feel).

Prediction #2: SEO Without Social Media Will Become a Relic of the Past

Already, we're seeing SEO and social media marketing become intrinsically intertwined, but in 2012, I believe we'll see SEO without social fade, just as SEO without link building did from 1999-2000. It's not just that social signals are making their way into the ranking algorithms (in both direct and indirect ways), but also that social is becoming the dominant method of both sharing and discovery for web users. The link graph will remain useful for years to come, but the social "sharegraph" is chipping away at its ability to illustrate what's new, interesting, useful, relevant and high quality.

This trend could well be part of what finally weakens the title of SEO (though I think the practice/tactic will remain strong) and forces those of us who've used that name to describe our profession for over a decade to migrate to something broader.

Prediction #3: Google Will Finally Take Stronger, Panda-Style Action Against Manipulative Link Spam

One of the major weaknesses of Google (and Bing, to be fair) is their continued over-reliance on links as an overwhelming ranking signal. Just recently, I took up a friend's offer to point some obviously shady links from sites Google should clearly be discounting at several webpages. We saw dramatic results within 24 hours - #1-5 rankings that have sustained for several weeks (more news on this experiment to come). This shouldn't be the case and Google's webspam and search quality teams know it.

In 2012, I believe Google's search quality folks will roll out algorithmic changes in how they value low quality links that help them regain pride in their work. The embarrassment and quality gap caused by linkspam is egregious and, if left to stand, gives competitors an opening while simultaneously weakening searchers' trust in Google's results. Just as "content farms" took their hits in 2011, I think link spam's up for some blows in 2012.

Prediction #4: Pinterest Will Break into the Mainstream

The last 4 years have seen Facebook, Twitter, LinkedIn, FourSquare and Tumblr all break the 10+ million users mark. In 2012, I give Pinterest good odds for doing the same. Pinterest is also the first major social network where the gender balance heavily favors women (which is, IMO, a great thing).

(above, my sad attempt at a Pinterest board)

Because of this breakout, don't be surprised to see lots more posts like these showing marketers how to leverage Pinterest to help share their content and find potential customers.

Prediction #5: Overly Aggressive Search Ads Will Result in Mainstream Backlash Against Google

There are some pretty crazy things going on in the search advertising world right now. To wit:

On my laptop (which has fairly impressive resolution), I can only see a single organic result, and the paid search markup is incredible. Star ratings, seller reviews, prices and individual items, photos and featured brands are all dominating the page.

Google's own "comparison ads" in the credit/finance world push organic results down even further, as the Google product still allows for three additional full size ad slots above the organic listings.

Perhaps the most aggressive of all is Google's new ability to insert a logged-in users email address automatically into PPC ads, as pictured above. These are still rare, but I wouldn't be surprised to see them roll out in greater force.

My prediction is that in 2012, we'll see the start of "paid search blindness" being studied, reported and impacting the engines' bottom lines. Organic results still garner 80%+ of all clicks, but that percent has been dropping as Google gets more aggressive with paid search to continually meet earnings expectations. 

Prediction #6: Keyword (Not Provided) Will Rise to 25%+ of Web Searchers

Despite Google's statements that missing keyword data will stay below double digits, I'm predicting that by December of 2012, we'll be looking at a quarter of all searches coming from logged-in (and thus, keyword-anonymous) searchers. Google's working hard to get adoption of Android, Google+, Google Apps and Gmail, all of which will increase the percent of not provided searchers.

While I wish this program would roll back (as there's clearly no real privacy risk or they wouldn't provide the data to paid advertisers), Google's the 800-pound gorilla and the marketing field's counterpoints, while far more valid, likely won't play as well in the media. Google's got the politics sewn up on this one, so our only hope is that they decide to do less evil. Unfortunately, that's not the way they've been trending of late.

Prediction #7: We'll See the Rise of a Serious Certification Program

The search/inbound marketing industry is in sore need of a program that helps early talent in the field become mature professionals. Today, SEMPO, Market Motive, Inbound Marketing University (from Hubspot), Search Engine College and a variety of others provide this service, but none of them are yet at scale or universally respected by hiring managers and companies in the field.

It's hard to quantify what "the rise of..." means. Thus, I'll predict that by year's end, at least one industry certification has 5,000+ users on LinkedIn (currently, Market Motive leads the pack with ~1,700)

Prediction #8: Google Will Make it Very Hard to Do Great SEO Without Using Google+

Google's just started to add Google+ brand pages in search results, They're leveraging Google profiles for rel=author tags. They've made Google+ circles and +1s visible in SERPs. In 2012, I think this pattern becomes a concerted effort by Google to tie promotional efforts in organic results to the Google+ login/verification system. This will not only encourage/force usage of their social network, but give them a much greater ability to tie social, ranking and visibility signals together (and probably fight spam + manipulation, too).

The positive for marketers is that closer integration with the social platform will reward those who can successfully manage both SEO and social media marketing. It's also (hopefully) going to be a boon for white hat tactics that help build brand signals while reducing the effectiveness of exploits that manipulate (like exact match domains or anchor text link spam). The negative is that Google's probably going to get even more data about ALL of our online behaviors, making themselves an even more overreaching and powerful force on the web than they are today. We just have to hope they'll also become more benign, though more power rarely leads to less corruption.

I'm looking forward to hearing your predictions (and opinions on the above) in the comments. I think we've got an exciting year ahead.

Do you like this post? Yes No

Posted by JoannaLord

In paid search there are a lot of rough Adwords accounts out there. You've seen them I'm sure. I know I've worked on them. We get brought in to assess the situation and make some big decisions around whether an account has potential or whether it would be better just to start fresh. This is one of the most common questions we get asked -- how am I doing?

I'm always looking for tools that can help advertisers answer that question. Usually I have to log in and pull reports myself to get to a point where I feel comfortable enough to jump on a phone call and give my opinion. Needless to say that ends up costing time on both ends which of course costs money on both ends. 

Recently, Larry Kim, founder of Wordstream, dropped by the Moz offices and a few of us Mozzers were able to explore what their team has been working on. We checked out Wordstream's PPC Grader pretty closely and I thought it would be worth running through what we found. I can honestly say it offers us paid marketers a unique snapshot that can be really useful when first getting started with a company or client.

Their Google Adwords PPC Grader tool (report w/ some blurring pictured above) runs by looking at your AdWords account and grading against averages and best practices they've seen from analyzing thousands of other AdWords accounts. To help show off some of the tool's benefits I am going to go ahead and share some actual data (and screenshots) of the tool's analysis of our Google AdWords account.

The big deliverable from the tool is a lengthy report page that shows a bunch of data about your account, but the first number you see is a rough "score" comparing your AdWords campaign's performance to other accounts in your spend range. It's worth pointing out that a concern we had with the PPC grader was the "spend range" component. The range SEOmoz fell into was "$15,000 to $99,999,999.00." Our monthly budgets run on the low end of that but we are compared to huge companies with huge branding budgets. You can see where that might affect some data. With that said, the tool is still a great way of showing a client or company the potential PPC has as a channel. It makes the case that with time and resources there is a profitable place to grow this account to. 

Below are the sections included in the PPC Grader (as you can see this is some seriously awesome data!):

• Account Diagnostics - An overall score and rundown of your account compenents & counts.
• Wasted Spend- A look at your negative keyword list and projected spend waste calculation. 
• Quality Score- A graph of your quality score distribution, which is often overlooked by too many paid search marketers.
• Impression Share- A share of voice view that helps you understand how often your ads are appearing for relevant searches.
• Click Thru Rate - Analysis to help you compare your CTR to competitors in your spend range for both Search and Display networks.
• Account Activity- A snapshot to help you better understand the volume of recent activity in your account and comparitive views.
• Long-Tail Keyword Optimization- Helps you understand if you are holding your own in the long-tail arena, which holds huge potential for PPC-ers.
• Text-Ad Optimization - Quick glance of how many text ads you have running, and how many per ad group to better understand how tailored your ads are.
• Landing-Page Optimization - Helps you see how many this account has, and how that compares to your competitors in this spend range.
• PPC Best Practices- A pass/fail audit whichs helps you quickly identify any low hanging fruit to go after on the best practices list.
• Overall Grade- A reminder of your account grade and performance summary. 

Phewwww. That sure is a lot huh? This snapshot is an epic first view for paid search marketers. I'm not going to go through each of the sections in depth because that would take forever, but I thought I'd run through some of my favorite pieces to start. After that I'm going to mention some other feedback and feature requests we have. Let's start off with what we think is really awesome...

PRO #1 : Depth & Breadth of Summary

A report with both such a broad view and such a deep view is really hard (if not impossible) to come by in PPC. One of my favorite sections of the Wordstream PPC Grader is the PPC Best Practices checklist. It gives you a top-level view of how well you are doing. Below you can see what came back when we ran the SEOmoz account through the Grader:

You can see we are doing well on every section, except for "Modified Broad Match Type." This is 100% accurate, we have yet to play around too significantly with match type strategy at SEOmoz, and have instead focused on long-tail expansion. This is a great reminder that we are leaving an excellent option on the table, and we can better prioritize match type expansion in 2012.

PRO #2: Impression Share View

I love this section. This view helps us understand how often our SEOmoz ads are showing up. We can see if our budgets are where they need to be and if our ad ranks are sitting in the right places. This can help with a really common conversation paid marketers have with advertisers around budget. Most  times advertisers want to improve PPC performance without increasing budgets. While optimization should always be happening, there is a time and place for budget changes. Bid management and budget management need to be revisited often. Wordstream's Grader helps make the case for this. 

You can see that SEOmoz scored in the 58th percentile which is pretty decent, but there is still so much more we can be doing. This sort of view helps us make a case for more budget, as well as helps us prioritize some ad position management internally. This means we need to set aside more time to work on quality scores, and targeting. A view like this can tell us so much.

Okay those are just a couple of the PROs we found by running the Wordstream Grader for the SEOmoz PPC account. I do want to run through some of the concerns we had, and lace in some feature requests the team over here would love to see.

Concern #1: Competitive Spend Range

I mentioned this above but since the competitive bucket we are in is so large, we really need to take this audit with a grain of salt. The budget spend of an account is indictive of big differences in how an account will perform, and be managed. Let's look at an example:
 

If we were to just glance at our CTR summary without considering the above limitation we would think we are doing horribly on our CTRs. It shows us performing at the 10th percentile. Yuckkk. If you take a closer look though, we are at a 1.39% CTR and our "competitors" at a 5.34%. The baseline for CTR success is a 1.00%, so we feel pretty great about out 1.39%. Seeing that our competitors have a 5.34% makes it quite clear we are being bucketed with advertisers who have large (in the millions) budgets who likely bid on brand terms (in the hundreds). We only have a few brand terms and those perform at the 4.00% level. 

Feature Request #1:

It is absolutely awesome that Wordstream has collected these audits across thousands of advertisers, but we would love to see a budget drop-down filter that had more bucket ranges to help us better categorize ourself appropriately. As a side request to this it might be cool to see some place where we as advertisers can add in "how long this account has been active" to help further categorize the advertisers so the comparison carries more description. It would be cool to know if that average lifetime of the accounts I'm being compared to is 6 months, or 3 years, you know? Just some ideas. 

Concern #2: Industry Non-Specific Data

Just like in SEO, PPC performance varies greatly depending on both your industry and your site's purpose. By not having an "industry or site type" filter in the Grader, all of my data is compared to advertisers with such different goals, resources, etc. Below is a great example of how this can hurt the data cause:

Knowing how I am doing on my landing page optimization (LPO) is key. I really appreciate Wordstream building this in, as I believe it's one of the most valuable pieces to PPC success. Unfortunately given the data is not industry specific, and the competitive spend range issues, this data isn't very useful for me.

It shows me with 23 landing pages, and my competitor having 543 landing pages. Having over 20 unique landing pages given our limited PPC spend, and the size of our keyword list is pretty good. That is the score I'd love for them to show me somehow, like a "size of account" to "#of landing pages" ratio. By showing me that my competitor has over 500 pages built out, its safe to assume I am being compared to an ecommerce site, or at the least a site with big budgets and lots of resources (most likely a CMS that has a PPC template system in place). I can't really gauge from this if I am doing well in LPO.

Feature Request #2: 
I'd love the ability to bucket my site into an industry like a "software" or "tech" bucket, and then have them show me how I am doing compared to them specifically. At the very least I'd like to be compared to other SaaS companies, or B2B companies. I'd also love a score that shows me something like -- a "size of account" to "#of landing pages" ratio for my account and then shows me industry standard. I am really impresses that Wordstream has included LPO in their audit, but I'd love to see them push this a bit further.

So What's the Good Word?

While the tool has a few caveats, I think it's safe to say the Wordstream Grader is the best of it's kind out there. I haven't highlighted all the features of the tool here (as it would make this a monster of an unreadably long blog post), and I would encourage anyone with a Google AdWords account to give it a spin, particularly since it's totally free. The report is great for quick snapshorts, and benchmarking your progress. I'd love to hear your experiences with the tool and feedback - I'm a fan of the folks at Wordstream and of the metrics-comparison methodology in general. So feel free to leave your thoughts in the comments below!

Sidenote: Wordstream also has a great keyword research tool and Rand is planning to do a follow-up post at some point, so stay tuned for that! He'll be digging into their keyword research tool to gauge its value for SEO folks. If you've got any thoughts, experiences or suggestions there, that's also much appreciated. 

Do you like this post? Yes No

I've been playing with Sublime Text 2 recently and have quite enjoyed how quiet my ageing laptop is when the fans aren't running due to a Java-based IDE.

As with a lot of editors, Sublime Text supports snippets which are essentially text expansions of a short phrase into more text. I needed to create a few getXxx() and setXxx() methods for some properties of a class and decided that the easiest way to do this would be with a snippet.

To create a snippet, go to Tools->New Snippet... and replace the code example provided with this:

<snippet>
    <content><![CDATA[public function get${1/(.*)/u$1/}()
{
    return $this->${1:$SELECTION};
}

public function set${1/(.*)/u$1/}($$1)
{
    $this->$1 = $$1;
    return $this;
}
]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>getset</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.php</scope>
    <!-- Optional: Description to show in the menu -->
    <description>Create getter and setter methods</description>
</snippet>

Save the file as getset.sublime-snippet and you're done.

To use, simply type getset followed by tab (in the latest dev builds, at least) and it will automatically expand. Alternatively, select some text and use shift+cmd+p -> getset to automatically replace the selected text with the get and set methods completed for the text that was selected.

In this talk from YUIConf 2011, Jeff Burtoft (@boyofgreen), Lead Frontend Engineer at USAA, shares what he’s learned about building performant and scalable cross-platform mobile web apps using YUI. In the course of the talk, Jeff reveals some of the pitfalls of dealing with device limitations — particularly when building native-wrapped web apps that run in web views — and explains how he and his team worked around them using YUI.

Links

• View in HD on YouTube
• Full YUIConf 2011 Playlist on YouTube

Posted by randfish

Near the end of December 2011, we ran a survey on this blog asking consultants and agencies of all sizes and geographies to contribute their pricing models and cost structures. I'm pleased to share the results of that survey in the hopes that it will give everyone in the search industry a better idea of the range of fees and the services provided.

Obviously, this data is imperfect - SEOmoz is not a professional data surveying firm and our only tool was a basic list of questions on SurveyMonkey. That said, I'd be surprised if a professional surveyor found dramatically different data - there was enough participation to receive a trustworthy sample size and firms provided their personal/contact information (many of which I recognized while digging through the responses, but obviously will not be sharing identities publicly), which means we likely did not receive intentionally manipulative/misleading information. The data is provided below in three formats - first, some personal, high level takeaways from the survey, next an infographic from the great folks at AYTM Market Research and finally, a dump of the responses in CSV and Excel formats (without any personally identifiable info).

(via AYTM's infographic)

Do note that while 600+ responses were received, we've elected to share data only from those regions with 10+ responses (490 total), which include:

• United States - 287 respondents
• United Kingdom - 76 respondents
• Canada - 34 respondents
• Australia/New Zealand - 28 respondents
• Germany/France/Italy/Netherlands - 34 respondents
• India - 31 respondents

Many countries had 1-3 respondents and while we certainly appreciate those contributions, it's our feeling that sharing this data could actually be misleading/non-productive as a single firm/consultant could dramatically skew the results. All the information in this blog post, the infographic and the Excel data dump are split into those 6 regions.

Top 9 Takeaways

These are my personal takeaways from the data:

1. Hourly SEO Costs Vary Across Countries, but $76-$200/hour is Most Common
   With the exception of India (the only developing region that was well-represented in our survey), hourly costs of $76-$200 (representing three responses) covered 50%+ of all firms. It was highest in Australia/New Zealand at 62%, followed by 58.1% in the US and 56% in Canada. Granted, this is a wide range, but it provides the answer to a frequently-asked question from those seeking SEO services for the first time.
   _
2. By-the-Project Pricing is Popular and Most Commonly $1,000-$7,500
   70.1% of respondents said they offer project-based pricing (the most common pricing system selected in the survey). 43% of consultancies were represented by the four price ranges: $1,001-$1,500, $1,501-$2,500, $2501-$5,000 and $5,001-$7,500. Obviously, there's a wide variety of prices here, not surprising given that the types of projects offered may be quite diverse. 
   _
3. Monthly Retainer Pricing Has the Widest Distribution
   While both hourly and by-the-project rates do have a wide range of pricing, monthly retainers are certainly the most distributed of the price questions asked in our survey. The two most common were $251-$500/month (13.8%) and $2,501-$5,000/month (11.3%).
   _
4. The Death of Hands-On SEO Has Been Greatly Exaggerated
   There's been plenty of hand-wringing over the past few years from both bloggers and SEO clients complaining that consulting firms don't provide enough "hands-on" help. Yet, in the survey, 88.5% of respondents said they offer "hands-on SEO changes to sites" and 79.1% provide "hands-on link building." Clearly, hands-on help is still very popular.
   _
5. Inbound/Organic > Pure SEO
   Pure "SEO" consultants/agencies may be fading as broader "inbound marketing" services firms (offering SEO, social, content, conversion, analytics, etc) rise. The data showed 150 respondents (25%) saying they were primarily focused on SEO while a slightly greater number, 160 (26.7%), offered a broader range.
   _
6. Web Design/Development Agencies do a Lot of SEO
   The third most popular type of respondent was a web design/development agency offering SEO services. In the UK, these types of firms were better represented than either SEO-focused providers or broader inbound/organic firms.
   _
7. Employees:Clients/Month Ratio is Between 1-2
   The screenshot below takes advantage of SurveyMonkey's crosstab feature, which enabled me to look at the number of monthly active clients broken down by the quantity of employees a consulting firm has (you can only choose 5 responses at once, but the data's still revealing). 
   
   _
8. Vast Majority of Consultants Service Small-Medium Businesses
   This may seem mathematically obvious, but it's not always top of mind at many of the marketing conferences I've attended, nor the blogosphere in general. A disproportionate amount of attention is often focused on top brands, but in the world of consulting, most firms service relatively small businesses. Even those who do serve larger businesses (perhaps aspirationally) often offer services to small and medium businesses. 41% of respondents offer consulting to small, hyperlocal businesses, e.g. the restaurant around the corner.
   _
9. Though Project-Based Pricing is Most Popular, the Majority of Consultancies Also Offer Monthly Retainers and Hourly Rates
   Early in my SEO career, project-based pricing seemed relatively rare (though quantifying this is hard since no formal surveys I'm aware of collected this info). Today, it was the top response, offered by 70% of the participating firms. Monthly retainer pricing was next, offered by 60%, followed closely by hourly rates (55%).

I'm certain others perusing the data will find other interesting takeaways (hope to read some of those in the comments).

Infographic from AYTM

Many thanks to the team at AYTM for putting together the following graphic representing the data in the survey across the 6 regions with more than 10 respondents. The image below shows a sample of their work and links to a larger version here on Moz:

Feel free to use/embed the larger, linked-to version, but please do provide credit back to AYTM and this post (nofollows are fine - just want to make sure folks are getting the right data source) :-)

Data Dump Files

I've made two files available from the survey data for those interested in looking at the raw figures in more depth:

1. Excel file with responses broken out by the 6 regions - download
2. Unfiltered summary of responses to all questions - download

The individual results contain personally identifiable information, and even without the emails/company names, the details of location, services,  pricing, etc. could be used to determine an individual consulting firm's identity. Given that we promised anonymity when launching the survey, I felt that providing this data, while valuable, wasn't appropriate. If you have specific filters you'd like to see applied, please let us know in the comments and we'll try to make that happen.

Many thanks to everyone who participated in this survey. In the next few months, SEOmoz will be launching a redux of our 2010 Industry Survey, which will hopefully provide even more detailed information across all parts of the search, social and inbound marketing fields. Stay tuned!

Do you like this post? Yes No

Yeah, there s already other frameworks out there for Node that do some neat things. But today @dustin and myself launched an MVC Framework for Node.js architected to suit MVC enthusiasts. Introducing Matador! Providing sane defaults and a simple development structure, scaling as your application grows. Features a flexible routing system, easy controller mappings, basic request filtering, and a handy scaffolding tool to get up and running quickly. Rather than explaining more here, have a play yourself. Cheers!

Posted by Cyrus Shepard

Google's Superior SEO Strategy

Notice anything odd about your Google+ profile? Does it rank incredibly well in Google’s search results for your own name?

Colleagues note that their G+ profile now outranks other online identities that they’ve worked for years on. My own Google+ profile, just 5 months old, ranks #2 for my name. It now ranks higher than both my Twitter and Facebook profiles, even though I use those services far more often.

Profiles aren’t the only thing ranking. Individual Google+ posts frequently appear in search results as well.

Ranking for people’s names is one of the Holy Grails of search, like Amazon ranking for every book in print. With 7 billion people in the world, ranking on the first page for even a small portion of these is lucrative territory.

As search and social focus more on the individual, the war over names has begun.

How has Google won so much real estate on their own search pages in such a short period of time? Do they cheat? No, not really - more on this later. Google wins by employing really smart Search Engine Optimization techniques – the same SEO practices available to any online business.

For Facebook especially, this is a sensitive issue. Facebook actively prevents Google from crawling most of its content, allowing big G to access “Fan” pages, but limiting information from regular profiles. Now that Google+ has entered the social game, this policy puts Facebook results at risk of dropping in rankings and losing search real estate.

I often work with websites and startups wanting to build SEO features into their platform. If I were to build a social media service for SEO domination from scratch, I would build it exactly like Google+.

Here's the takeaway: Use SEO to your competitive advantage, no matter your niche.

1. Incentivize Inbound Links

Not long ago, Google started displaying author photos in its search results. In order to display a photo, Google asks authors to add links from their webpages to their Google+ profile. This creates potentially millions of high quality links from the world’s most influential online publishers, all pointing to multiple Google+ profiles.

Twitter and Facebook both benefit from similar links, but never before has a social media service offered such an incentive.

Google's SEO Tactic: Require Authors to Link to their Google+ Profile

2. Internal Linking

One thing noted about Google+ when it was released was just how easy it was to be in lots of circles, or add lots of people to your own. People who struggled on Twitter for years to build up 1000 followers, suddenly found themselves in 2000 or 3000 Google+ circles, seemingly overnight.

Google’s strategy to connect everyone on the planet also makes for good internal linking. Following more than 1000 people may not create a practical social experience, but it creates a great SEO opportunity. The more your content is shared in other people’s streams and profiles, then the more your content is crawled, indexed, and deemed important by search engines.

Google'sSEO Tactic: Encourage Large Circles Counts

3. Lots of Indexable Content

My public Google+ profile contains a wealth of information, all visible to search engines, including:

• Biographical Information
• Full Text of Public Posts
• Photos
• Links to people who have added me to their circles
• Everything I have ever +1’d

Compare that to my Twitter account – limited to 160 characters of biographical information, or my Facebook profile, which reads like an auto-generated pamphlet.

Consider how a search engine sees these pages. Take a look at the source code of any Google+ profile or use a tool SEO-browser (a search robot simulator) to see how many words appear on each profile.

• Facebook – 275 Words

• Twitter – 491 Words

• Google+ – 2621 Words

Google structures content to provide a wealth of information for search engines, to index and serve in search results.

Google'sSEO Tactic: Search Engine Friendly Profiles

4. On-Page Optimization

Google+ makes it easy to share posts from others – a feature much like retweeting on Twitter or reblogging on Tumblr. These Google+ posts frequently show up in search results as their own entries.

As the title tag is one of the most important aspects of on-page optimization, Google wisely choose longer, more descriptive title tags. Compare these to the shorter title tags offered by Facebook and Twitter, which often run no longer than three unique words.

Here’s the title tag to 3 different posts, all by Rand Fishkin. Each of these posts is indexed by Google.

• Facebook – Yesterday, I…
• Twitter – Twitter / @randfish: Running test of Google+’s …
• Google+ – Rand Fishkin – Google+ – Shocking how many of the folks featured in this post form…

Which do you think ranks better for a query with “Rand Fishkin” in the search?

Google'sSEO Tactic: Descriptive Title Tags

5. User Generated Content

Every post I’ve ever written on Google+ has been public. As a result, every post has been crawled and indexed by Google search. The privacy settings on the profiles are simple, intuitive and encourage openness.

The big green button screams, “Pick me! Pick me!”

Most Twitter posts are public by default, although unless a tweet becomes famous the 140 character limit prevents most tweets from reaching the definition of “rich” content. Facebook, in contrast, only shares posts from fan pages with Google, and not posts from regular profiles.

Google'sSEO Tactic: Encourage Public Sharing

6. Show Google+ Author Profiles in Search Results

The first 5 items on this list represent SEO tactics that anyone can use, but in a way #6 belongs to Google alone. By linking to Google+ profiles in search results, they create an advantage that no other social media service can duplicate.

Is Google “cheating” by favoring it’s own property? Some say yes, but on the other hand, is there a more relevant result? To me, it makes more sense to connect my author profile with the website that actually hosts the content, such as my profile on SEOmoz.

This demonstrates the power of rich snippets. Since Google introduced author photos in search results, webmasters have scrambled to get their mug included – the idea being that rich snippets of all kinds increase click-through rates. The question is, are we increasing the CTR of our own website, or Google+?

Google's SEO Tactic: Creative Rich Snippets

What Can You Do?

Except for #6 above, most of these techniques are available to any online business. Google has found a way to create large amounts of search engine friendly content, and do it at scale.

The lack of diversity this creates in Google's search results is troubling to some. Google risks turning into McGoogle, where every result and every page looks the same. With any luck, more companies will adopt strong SEO strategies to raise themselves in search.

Now that the adoption of Google+ has hit 62 million users and growing, expect to see far more Google+ in your search results soon.

Do you like this post? Yes No

Welcome back to my series on WiFi. In Part 1 of the series, I began with some basics of RF and explained some differences about antennas. It should be apparent at this point that there is a science behind this activity, and I’ll take this moment to warn you thoroughly before we move on: These posts are a good way for you to become familiar with WiFi and should provide you with some solid knowledge to help improve your WiFi coverage. However, this brief education is not a replacement for having an actual RF engineer do a site survey of your environment! If you have a “must work right the first time” environment, and you’re reading this because you’re the decision-maker and don’t have the slightest hint about what all this is about, Get An Expert. They do this all day long. It’s money well spent.

If you do use these techniques below, Your Mileage May Vary. It’s also important to note that if you go to all this work, setup your access points, then your neighbor goes and installs his AP right next to yours on the same channel, then you’re going to be stuck re-doing these activities all over again. WiFi isn’t a static situation; as people get more WiFi-connected devices, the playing field changes, and it will change on you, I guarantee it.

Understanding RF Interference and What It Does to WiFi

You hear people joke about microwave ovens interfering with WiFi equipment pretty often. Most people laugh it off as an urban legend. It’s not. Below, I have included some RF spectrograms for your entertainment. If you haven’t seen images like this before, they are a visualization of signal frequency and intensity over time. Past-to-present is a top-to-bottom relationship, and the colors are a heatmap (with red being a strong signal.) As you look at both types of graphs, the channels start from 1 at the left hand side of the graph, and go up through 12 in the right hand side. NOTE: Quick Shout-Out to the guys at metageek.net for creating the awesome Wi-Spy and accompanying Chanalyzer Pro software. We paid full price for the DBx bundle (Comes with the Wi-Spy DBx and Chanalyzer Pro) and I definitely feel like it was money well spent. Check them out if you want to do these types of visualizations yourself.

These images show what the wireless signal looks like in my suburban home. Not a lot of interference in this visualization, you can see my home Cisco Aironet 1240 AP humming along happily as visualized by the wavy lines in the waterfall spectrogram, above. In the lower graph, we see signal strength (Amplitude) measured by frequency.

Let’s shake things up, and show what happens when you fire up a microwave oven:

Look out, here comes that microwave burrito exploding all over your RF Spectrum! For about 30 seconds, I nuked a mug of water and this was the result. You can see through the swamp of RF that the access point does its best to compensate for the signal interference, but that’s a pretty strong blast of RFI.

Do you have a baby monitor at home? Is it on 2.4ghz? Ready to see what it’s doing to your wireless signal?

These two charts were captures I took from my friend’s house (incidentally, the gentleman who I mentioned in the previous post – he has a penchant for wifi problems.) I was over his house and ran some traces to get a visualization of his wireless conditions in preparation for installing a new wireless router. I asked him if he noticed the WiFi being slower at night and he’d mentioned that it did indeed seem to be more problematic at night. Welcome to the wonderful world of random equipment in your home causing issues with your wifi. In the above trace, you can see the telltale wavy lines of the access point, trying to power its way through the interference. The graph below has just the slighest hint of bell curve, which is where his AP was situated in the RF Spectrum. I believe in this case his AP was on channel 3. Needless to say, we popped his new wifi router on channel 11, which is quiet in these graphs.

One final graph to show. If you scroll back up to the initial image I showed of my suburban home, this will give you an idea of what your general household’s 2.4gHz spectrum might look like. Now, compare that image to this:

This, my friends, is what the 2.4gHz spectrum looks from the Stack Exchange offices. We’re located down by Wall Street, on the 26th Floor of One Exchange Plaza. Our scenic vantage point does come with a cost! These spectrograms show just how much RF interference we are subject to at this location. Astute readers may notice the timescale difference on the graphic, but I assure you that the 30 second view is just as nasty.

What can we take away from these charts? One could safely summarize this entire section as “Location and the gadgets in your home both play a significant role in how your WiFi might perform.”

Mapping Your Wireless Landscape

It’s worth noting that even though the above charts were taken using a very expensive measuring tool, your laptop’s WiFi card is a potent ally in your quest to improve your coverage. For the next section, I am assuming that you firstly are running Windows and have downloaded and installed both Vistumbler as well as Microsoft SQL express. I am aware that a strong number of our readership are Linux based, and there is also a big Mac contingent. I’ll unabashedly say that the steps I’m following and the software choices I made were purely for my convenience, but I hope that I explain the process in easy enough terms so that the tinkerers out there can take the wheat from the chaff, so to speak.

Step 1 – Take some measurements!

Vistumbler is a wardriving utility that, when attached to a gps, can help you map where there are wireless access points in range of your device. We’re going to borrow it for a more sedentary purpose. Fire up Vistumbler, set your laptop in the areas where you want to consume your WiFi signal, and then start the scan/capture process. Leave the laptop there for at least 30-60 minutes, as we want a whole lot of datapoints to work with. It will keep track of every time it hears of an access point and record the relative strength of the signal. Once the time is up, you can either run the detailed export to CSV now, or “Exit (Save DB)” and come back to export the file later. NOTE: If you’re in a tight urban region like we are at Stack Exchange, leaving Vistumbler up for 30+ minutes will result in a tremendous amount of data! It’s wise to have a very powerful PC to handle the vistumbler export process, or do seperate scans and aggregate the data together in a later step.

Step 2 – Massage the data!

Sadly, Vistumbler’s export to CSV does leave a bit to be desired with its field quoting. We’re going to open the csv in Excel, since it seems to be especially forgiving. Once we’ve opened it in Excel, we’ll do the following steps:

• Make a new column for Location. Populate the column with a location name. You’ll want this when you’re querying SQL later on.
• Save the file as an Excel spreadsheet.
• Fire up SQL Server Management Studio.
• Create a new database if you don’t already have a good scratch database, then right-click the db and select tasks->import data.
• Using “Microsoft Excel” as a datasource, submit your new excel file as the source data. HINT: If you’re getting an error about unable to find a particular OLE provider, and you’re on 2010 like me, with 64bit windows, you will likely need this link to load said provider.
• Select the destination database; elementary stuff here. From this point on, “Just Keep Hitting Next,” except for the prompt where you specify the destination table name. I strongly advise you to change that name to something easier to type rather than the default date/time string. Finally, Finish to start the import job. This may take a while, so don’t be afraid if it seems like it’s taking too long.
• Repeat these steps for each file of data. Be sure to specify the same table name for each import, it will append to the database.

Step 3 – Analyze!

With this complete, congratulations! You now have data in a sql server that you can use to leverage the power of SQL to get some statistics from. I’ll admit I’m a SQL neophyte — I can do some joins and “GROUP BY”s but I’m sure others could tease a lot more information out of it than I have. Here are some basic queries for your dataporn pleasure:

Get a sorted list of strongest access points across all locations:

select LOCATION, SSID, AVG(SIGNAL) AS AVGSIGNAL
FROM [dbo].[wifilog]
GROUP BY LOCATION,SSID
ORDER BY AVGSIGNAL DESC

In the above query, we see that in our sysadmin office, as well as somewhere in our office (for shame, I forget where I took the trace!) the strongest signals are SO-GUEST (our current guest wireless AP) and ROVIO (for our cute little mobile webcam.) We’ve also got a couple shadow AP’s (as specified by NULL) followed up by some other AP’s that I’m not sure who or where they are. Suffice to say, our current AP is pretty strong in these two locations.

Find the average signal strength of all APs at a particular location:

select SSID, AVG(SIGNAL) AS AVGSIGNAL
FROM [dbo].[wifilog]
WHERE LOCATION='sysadmin'
GROUP BY SSID
ORDER BY AVGSIGNAL DESC

Similar to the first query, you can drill down by a particular location and see the top AP’s seen at that location. This is useful, but what we’re really looking for is the least used channels at a certain location.

Get a channel utilization chart

select LOCATION,CHANNEL,SSID,AVG(SIGNAL) AS AVGSIGNAL
FROM [dbo].[wifilog]
GROUP BY LOCATION,CHANNEL,SSID
ORDER BY AVGSIGNAL DESC

The above gives us some pretty useful information. We can see here that channels 8 and 11 have several entries, and only one device in range of our scans is on channel 6. Using some critical thinking, it’d indicate that channel 3 might be a good choice should we want to add a new AP to this environment. Lets massage the query a bit to see if that’s confirmed by our other data:

select LOCATION,CHANNEL,SSID,AVG(SIGNAL) AS AVGSIGNAL
FROM [dbo].[wifilog]
WHERE CHANNEL in (1,2,3,4,5,6)
GROUP BY LOCATION,CHANNEL,SSID
ORDER BY AVGSIGNAL DESC

At first blush, one might be enthusiastic about channel 3 given the fact it’s not used as the main carrier frequency in any of our entries. Be careful, though, for WiFi channels have some pretty strong overlap:

As this graphic shows, each wifi “Channel” is merely just a 5MHz swatch of the 2.4ghz ISM band. WiFi signals have a 22Mhz bandwidth, so realistically there’s only 3 channels one can use in an environment without any fear of interference or overlap. Because of this, one needs to take into account not only the channel but also the signal strength of potentially interfering access points.

In our case at Stack Exchange, there are just so many APs utilizing so many channels that we’ve ultimately decided to go with a Cisco controller-based access point layout, which will dynamically change channels based on signal conditions in realtime. For those of us at home, this is way too expensive of an option for most. Sadly, we’ll just have to take these data queries and give it our best shot.

I hope this blog series helps you a bit with your next WiFi installation. In summary:

• Antenna choice matters when you’re trying to cut through interference or travel long distances.
• Most residential building materials will not diffuse wireless signals to an appreciable amount unless you’re talking about very far distances, (i.e. trying to use your laptop on the third floor at the far side of your house when the AP is in the basement, for instance.)
• Be aware of electronics in your home that might share the 2.4GHz radio spectrum; they can seriously affect your wireless transfer rate and signal strength.
• Apps like Vistumbler can catalog used channels in your environment and you can then use this data to find a quiet spot in the spectrum.

As always, I welcome your comments and criticisms, below. Also, feel free to share any specific SQL queries you used that might help glean even more information from the datasets you’ve gathered!

Posted by randfish

If you've been following my posts on Linkscape's index, you know that we've been trying to aim for fresher, better and larger indices over the past few months, but have been finding some very tough challenges. It turns out that indexing the web, canonicalizing millions of pages and calculating a link graph with quality metrics is super-hard; who knew? :-)

As part of those efforts, we've been working toward an experimental index that leverages a more search-engine style crawler that crawls fresher pages/sites more often and less fresh stuff less frequently. That index, however, is taking its sweet time (and we're doing a lot of babysitting and monitoring to make sure it's smooth). Our tentative plan is to have that index launched in the next 2 weeks, but we felt that since our last index was at the very end of November, a new one with fresher data was warranted. Hence, last night, we launched an interim index with the following metrics:

• 36,660,519,013 (36 billion) URLs
• 427,626,242 (427 million) Subdomains
• 128,149,029 (128 million) Root Domains
• 387,656,119,262 (387 billion) Links
• Followed vs. Nofollowed
  • 2.05% of all links found were nofollowed
  • 55.00% of nofollowed links are internal, 45.00% are external
• Rel Canonical - 10.57% of all pages now employ a rel=canonical tag
• The average page has 69.12 links on it (negligible from last index)
  • 57.76 internal links on average
  • 11.36 external links on average

This index is smalller than our last few, but the numbers look reasonably solid and the data's from the first few weeks of December, so it should be helpful to all you link builders and analyzers. Do be aware, though, that this update is likely to only last a couple weeks before we replace it with our new version, for which we have high expectations (but don't want to promise the moon just yet).

Also noteworthy - last night, when the index first launched, we experienced some wackiness with Page and Domain Authority scores. Those should have largely settled down to normalcy now, but if you see anything odd, please let us know.

Do you like this post? Yes No

Posted by randfish

Welcome to our first Whiteboard Friday of the new year. It's 2012 and we're going to kick it off by examining the intricacies that revolve around anchor text. Although, this may seem like a very basic topic, we are going to cover some lesser known aspects of anchor text that is sure to satisfy even our more advanced SEOs. Enjoy and don't forget to leave your comments below!

Video Transcription

Howdy, SEOmoz fans. Welcome to another edition of Whiteboard Friday. Happy New Year. This is the first Whiteboard Friday of 2012, and today we're talking about anchor text, which could seem like a basic topic. But, in fact, there are a lot of intricacies that we should cover. Let's get right to them.

What I have drawn here is a web page, and it says, "I just found this great website on Portuguese cooks. You should check it out." Now, this, this text in blue with the underline, that links somewhere, and that link points to another page. Let's say it's a page over here, a very nice page on Portuguese cooks. It has some pictures on it. I don't know what it's got.

What it's saying to the engines is not only eye this page and this website, I'm voting for this other page over here, and I want to pass over some PageRank and link juice. I want to pass over trust. I want to pass over the domain diversity, whatever the signals, the keyword agnostics signals are, but I also want to say that I particularly like this web page about Portuguese cooks. That's what I think you, search engine, should interpret and take away from it.

Of course, this anchor text with the keyword embedded in it becomes a very strong signal to search engines, and as we all know, this is one of the strongest signals that Google and Bing interpret, Bing maybe even stronger than Google. Because of this, lots of people go down a path of trying to acquire links that say the precise keyword that they want.

Of course, this is a challenge because most natural links on the Web don't generally do this. They will say things like your brand name. They might say something about your site. They might use your personal name, if they're linking to a blog or something. But it's rare, it's uncommon that they might say "Audi 87 engine parts for sale" or "best deals on holiday gifts." These types of anchor texts, the things that people search for, longer phrases, in particular, are very hard to get as natural links, and this is one of the biggest reasons that gray and black hat SEO exist because manipulating the search engines by acquiring lots of links that have these keyword matches pointing to your page can, in fact, do a great job of ranking you up, at least temporarily until the engines catch up and do something bad to you or to the people linking to you.

What I want to cover is some intricacies around this, some details that you may or may not know about anchor text, and those include: Number one, multiple anchors from the same page "do not" provide more value. What I mean by this is if this page said I just found this great website on Portuguese cooks, you should check it out and a bunch of other text, and then it said Portuguese cooks again and linked over to this page, not helpful. It does not add additional value. There is no reason that you should be going, "Oh man, I wish I could get four anchor text match links from this web page." No, that's not going to help you.

Multiple web pages will help you, but if they're from the same domain, that's not nearly as valuable as if they're from different domains. That leads us to the next thing, diversity of anchor text, diversity of the source. The root domain source of the anchor text links provides the strongest benefit, meaning if you can get lots and lots of websites, not just individual web pages but different unique web domains, linking to you saying "Portuguese cooks," chances are good this web page will do very well.

Number three, the fluctuating anchor text. This is something that people talk about all the time. They don't just talk about diversity of the link location across different domains, but they talk about diversity of anchor text itself, meaning, "Oh, I should have one that says Portuguese cooks and one that says Portuguese cooking and one that says cooks from Portugal. I'm going to vary up the anchor text a lot."

I'm a little skeptical about this, not because it's not potentially useful, and it should be a natural thing if you're going out and doing white hat types of link building and inbound marketing. But because the primary reason I think most SEOs do this is so as to not trigger pattern matching problems in the engines, meaning if every website that's linking to me says Portuguese cooks, that's suspicious, highly suspicious. That suspiciousness is the feature that people are trying to prevent.

So, I'm not so sure whether this fluctuation is all that important unless you're doing manipulative types of link building, in which case SEOmoz is not all that helpful for you. So, you're probably not watching this video.

Number four, the first anchor text in the HTML of a page is what Google counts, Bing as well. This was discovered on SEOmoz a couple of years ago. We ran some tests about it. We published the results. There was a lot of skepticism. I think Debra Mastaler from Alliance-Link wrote about it and said, "Hey, Matt Cutts, would you please confirm this?" And he did. He came out and said, "Yeah, that's how we interpret it".

So, basically, here's what's going on. If you see a web page and it says this website is awesome, it features highlights of great Portuguese cooks, now look, these two links are both pointing to the same page. I don't know why my handwriting is so terrible in 2012. I hope that repairs itself soon. That means not that the website is going to get credit for the anchor text website and the anchor text Portuguese cooks, but rather they are going to consider the anchor text website and ignore Portuguese cooks.

It's very frustrating, and something that you should think about when you're doing internal linking and you say, "Oh, yeah, we should optimize this link." If it's already in your menu, if it's already at the top of the page somewhere in a side bar and that's higher up in the HTML code, then that is what the engine is going to count. So, do be aware of that and same goes for anything that you're earning externally. If you've got the optimized anchor text for your website in the footer of the blog post where it talks about the author, Rand Fishkin is the CEO of SEOmoz, an SEO tools company, but I've already link to SEOmoz's home page somewhere in the blog post above, that "SEO tools company," that's not going to help anything. That's going to be discounted by the engines.

Number five, internal anchor text, meaning anchor text that comes from your own site, your own pages, it does help. It helps a tiny bit. You can see a little bit of benefit from that. I wouldn't focus on it too much because tiny is a small amount. That's probably the most obvious statement I've ever made on Whiteboard Friday. But nevertheless, tiny, small amount, therefore don't focus too much energy on this. Link naturally, internally. Link in such a way that people think your site is good, and, yeah, if you can work in your anchor text, great.

External anchor text is where it really helps, meaning websites that are not your own linking to you. That's where you really get value from anchor text, and you do need to worry about this a little bit. There should be some manual efforts, some efforts, whether that's guest posting and blogging, whether that's sponsoring an event, whether that's getting your biography featured or something like that, getting a badge embedded somewhere or a graphic embedded somewhere that links back to you in a certain way, you do need that anchor text link match. So, working on at least a little of that external anchor text is definitely worthwhile.

Number six, if a link uses an image, like this, so check out this awesome site on Portuguese cooks, and then here's a little screen shot of the Portuguese cooks website, and this is linking over. I tried to illustrate that in blue. This does not have any anchor text. It's an image. So what could the anchor text possibly be?

The answer is they use the Alt attribute. The engines use the Alt attribute that becomes the anchor text usually, not always. If there is no Alt attribute, sometimes they'll use something like the surrounding text, and you can sort of see and feel that association. Sometimes, they'll use page titles. Sometimes, they won't use anything, but they'll have weaker signals from those other areas of the page, that kind of thing.

If you are embedding images and you're linking back to yourself or you're getting links from somewhere or you're linking out to someone, you want to help them out, use good Alt attributes that describe the page that you're linking to. This is a great best practice just in general for screen readers and usability reasons. It's also good for search engines.

Then finally, number seven, no surprise, surrounding text can matter as well. Just as in this example where we said, "Hey, Portuguese cooks is mentioned right before the image," the engines may be using surrounding text of an anchor, particularly where the anchor itself doesn't have much value or context.

If something says, "Click here, you'll find some great information about Portuguese cooks," the engines might sort of glance around the page and look at the sentence, parse the paragraph, try and understand, "Hey, what do you think they're talking about here? What seems relevant?" This is one of the reasons why you can see that people who have earned not necessarily great anchor text can rank very well for keywords because it's often talked about. That topic is talked about when their website is talked about, and it becomes a brand association thing. It becomes a contextual association thing. This is a helpful thing to think about if you are earning links and you can't control the anchor text. Maybe, at least, you can get them to mention what you do somewhere near the link.

All right, everyone. I hope this edition of Whiteboard Friday has been helpful. I look forward to discussing more details about anchor text in the comments and hope to see you again all next week for another edition of Whiteboard Friday.

Happy New Year! Take care.

Video transcription by Speechpad.com

Do you like this post? Yes No

I had a situation recently where a number of live migrations failed in a truly nasty way. The live migration failed part way through, but didn’t properly back-out the changes. This left the instance running nowhere, but in a “migrate” state in the database. I tried to reboot the instance, which then left the instance in the “running” state.

Of course, the instance wasn’t actually running anywhere and the reboot command wouldn’t start the instance, because it thought it was running. The logs complained that the instance wasn’t running whether I tried to restart the migration, or reboot. What a full of fail situation.

So, to fix this, I needed to make the instance actually start. In this situation, the database thought the instance was running on host virt2, but the instance’s libvirt files were on virt4. I copied the nwfilter file across to /etc/libvirt/nwfilter, then the domain file across to /etc/libvirt/qemu. I then created the nwfilter, then the domain:

virsh nwfilter-define /etc/libvirt/nwfilter/<instance-nwfilter>.xml
virsh create /etc/libvirt/qemu/<instance-domain>.xml

Once the instance was started, I re-migrated the instance and all was good.

As a side note, I think what caused the migration failure was that I tried to migrate too many instances at the same time from a host that was already slightly overloaded. Of course, this is no excuse for nova to fail.

Fellow Nestoriaks,

Over the last few weeks we've not just switched map providers, but also rolled out an array of new features designed to improve the property searching experience.

1. Geotargetting

If you visit our sites in a modern browser, you'll see the option in the search box (as shown here on our Italian site) to search by letting your browser tell us your location. If you click it and share your location with us, your browser turns your location into longitude and latitude, and your search is launched. It's a nice example of letting technology do the work for you.

2. Banning listings you dislike

For some time users have asked us for the ability to block or ban certain listings. We do our best to filter all terrible listings from the search results, so that you never even see them. Unfortunately though, we're not perfect (yet), and more importantly there are many things that we just can't know - like availability or personal taste. So now we give you the ability to block any listing that you don't like from the search results. Click and you'll never see that listing again. So go crazy, start banning up a storm. But remember - with great power comes great responsibility.

As you can see in this screen shot, the banning button appears on each listing when you move your mouse over the listing.

3. Saving listings

Another much requested feature is the opposite of banning: saving. It works exactly as you'd expect, click the save button on each lsiting and it will go to your save list. To save you'll need to sign in (so we can remember you when you come back).

At the upper right of each page (screenshot below from our German service) you'll now see a small bar which shows you how many listings you've banned and saved (once you've signed in). It also has a button that when clicks reveals your save list, gives you the option of logging out, and the chance to reset your ban list.

On a final note we've also fine tuned the appearance and functionality of Nestoria on the ipad. It's a start but you can expect much more from us in the coming months on the mobile front.

Please let us know what you think about all of these features and how we can go about making property searching simpler.

Permalink | Leave a comment  »

If you are in Chicago, have a free evening January 12th, are interested in Git and are familiar with SVN, this free event, sponsored by ThoughtWorks Chicago and GitHub Training is just what you've been waiting for. Come listen to Matthew's thoughts about moving from SVN to Git on GitHub and ask your hardest questions.

Join Us

• Thursday, January 12th, 2012 from 6:30pm to 8:00pm
• ThoughtWorks Office
  200 East Randolph
  26th Floor
  Chicago, IL 60601
• RSVP here (required)

London School of Economics and Political Science
Sheikh Zayed Theatre, New Academic Building
54 Lincoln's Inn Fields, WC2A 3LJ
Most new businesses fail. But most of those failures are preventable. The Lean Startup is a new approach to business that's being adopted around the world. It is changing the way companies are built and new products are launched. The Lean Startup is about learning what your customers really want. It's about testing your vision continuously, adapting and adjusting before it's too late. Now is the time to think Lean.
This event marks the publication of Eric Ries new book TheLeanStartup

Registration is from 4pm with the talk starting at 4:30pm with an opportunity for Q&A afterwards, followed by drinks and light refreshments. To sign up Pleaseregisterhere.
The Seminar Centre
The Hauser Forum
3 Charles Babbage Road
Cambridge, CB3 0GT
His book, 'The Lean Startup', is an incredible work. Its only flaw is its name. Eric's principles of innovation apply to any organisation of any type and of any size, and not just startups.
Lean is one of the major trends shaping our world and its impact goes beyond just optimizing our supply chains. Lean startups can be the most capital efficient companies in the world, because they strive to prevent energy from being expended uselessly. Human talent, passion, and wisdom is too precious a commodity to allow it to be wasted.

• Nick Bradbury (of Homesite Fame) has a great piece on hateful hiring, based on 37 signal’s ‘Why we don’t hire programmers based on riddles and parlor tricks’ and I can do nothing but applaud and agree. I find it insulting as a developer to be asked to go on a whiteboard in an interview and show some clever pseudo code. We have our stuff on GitHub and online, check it before you invite me
• NASA chose to go open source with some of their code and you don’t need to be a rocket scientist to take part
• Vexflow brings sheet music notation to the browser using Raphaël
• Test on real mobile devices without breaking the bank has some good tips on exactly that. I find the most annoying thing to be handling all the different chargers. Can has standard cables, please?
• FluidApp reminds me of Mozilla Prism – run any web site as a native OSX app instead of in a tab
• Why the movie industry can’t innovate and the result is SOPA is an interesting history lesson on how Hollywood just doesn’t get technology
• Michelle Levesque posted quite a few Why this skill posts about skills needed to be a web maker. Nice pattern style approach there
• An In Depth Analysis of HTML5Multimedia and Accessibility is a very good read if you wondered about subtitling and captioning in HTML5 video
• Sevenly have a nice idea – sell T-Shirts to bring money to charitable causes and advertise them at the same time
• Cross Browser HTML5Progress Bars In Depth is a good overview about this not enough used element
• Animating with sprite sheets has some good tips on saving HTTP requests and not having to worry about images being loaded or not
• What CSSProperties Are Supported When You Drop IE6Support – the future is bright
• An interesting proposal to the CSS working group to detect if scripting is enabled with a mediaquery
• A plea for progressive enhancement shows just how wrong you can go on mobiles when you think you do things right with responsive design
• The Mozilla event menu is going to be a very handy decision tree to see what events are worth your time and which really are just nice to have
• Codeyear by codecademy is a nice idea – send people some code exercises each day
• On the topic of codecademy and other “get you started quickly” resources, there’s a my thoughts on codecademy post on O’Reilly – also check the comments, some very good points in there

Posted by Paddy_Moogan

I used to spend a lot of my time plowing through Google to find potential link targets for client websites. I still do this a lot but I've changed my approach a lot of the last 12-18 months to try and become a bit more efficient. I've changed my approach so that the first point of call when looking for link targets is lists.

Lists are awesome for link building because someone else has already done some of the hard work for you. If you can find good quality, curated lists of websites, then you can be reasonably sure that you have found sites that are good ones to get links from. You still want to run your own analysis and due diligence, but the end output is probably going to be a higher majority of quality sites than you would have gotten from pulling lists straight from Google SERPs.

I like to put link building techniques into processes which makes them easier to follow and easier to scale if you need to automate parts of it. The process I use can be broken down into the following -

1. Find your lists
2. Scrape together your master list
3. Filter and prioritise

I'll go through each of these in more detail to explain the steps for each one.

1. Find your Lists

There are multiple ways of doing this and there are probably more places to find them than you think. To make things a bit clearer, let's think about these "types" of lists, they are roughly in order of personal preference -

• Curated lists found on other websites
• Top x type lists found on other websites
• Public Twitter lists
• Good quality directories

There are more, but just these ones alone with give you enough link targets to keep you busy for a long time!

Curated lists found on other websites

For me, these are the best types of lists to find. They are hand curated which means that the quality of the list should be pretty good, usually they have also been curated by a subject matter expert who knows the sites in their industry well. I always try and find these first because they tend to give me the higher quality sites - albeit in low quantities.

My main method for finding these sites actually starts off very simple, it will be something like -

It really does start off that simple.

This can give me lots to get started with, just this search alone gave me a list of seven blogs curated by The Times, a list of ten law blogs from Cision and a list of employment law blogs curated by a professional lawyer. This was only taking a few from page 1 of the search results too, there were many, many more.

You can of course vary the types of searches you do, then you can go a bit deeper with some advanced search queries. Here is a quick example -

This search gave me some great results including this list from the Inner Temple and this curated list from a law firm.

Here are a few more that you can use -

• "list of * blogs" "uk law"
• "list of * websites" "uk law"
• list of uk law blogs inurl:resources

Garrett French also lists his method for link building with lists and some advanced queries on Citation Labs.

When I've found very high quality sites, I also tend to keep a note of them in my Chrome Bookmarks so I can easily find them again in the future -

You could use anything you want to do this really, for example you could use something like Evernote and attach the list to a project. At Distilled we also keep a record of link targets in Buzzstream which means they are easy to find again in the future for follow up or other projects.

Top x type lists found on other websites

This is a personal favourite, the quality can sometimes be a little dubious, but overall you will find pretty good quality websites. The great thing about these ones too is that they tend to be refreshed every year so lots of these lists exist.

Similar to curated lists, finding these can start off with something simple -

These returned lots of great results, one of which I'd class as a curated list from The Telegraph.

You can of course go a bit more advanced again and use some of the following -

• top * food blogs
• best * food blogs
• best food blogs inurl:links

There are so many of these it's unreal. I'd like to think they were slow down as people get bored, but quite frankly, they still work well for things like link bait!

Public Twitter lists

You need to do a bit of extra work to pull the websites out of these ones, but it's worth the extra effort and much of this can be automated. You can actually find these a number of ways. One of my favourites is this advanced query in Google -

Once you have found a list, you want to click on the "following" tab which brings up the people on the list rather than their tweets -

This brings you to a URL such as this one which (if you wanted!) you could scrape the usernames of the list members from. You could then scrape their profiles using something like Google Docs with Xpath and pull out their websites if they have them.

To help you with this task, I knocked together a very quick and dirty scraper in Google Docs which you can get a copy of here. It's not that robust but will do the job on up to 50 usernames quickly and easily. Make sure you are logged into your Google Account then click "Make a Copy" from the File menu.

Another easy way is to use something like Listorious which has a nice clean interface and pulls back Twitter lists based on your keywords -

As I said, there are loads of ways to find these lists. I tend to find that just searching for my keywords in Twitter search and finding influential people often leads me to lists of some sort. 

Good quality directories

I had to mention the D word at some point :). Being honest, I don't use this one that much but it can be useful in some very niche industries where there may not be that many lists created by individuals. 

Luckily, it's super easy and quick to find a list of sites in some of the better directories. My first point of call is usually Dmoz. I try to ignore the fact that many categories these days are controlled by SEOs! You can find some really good niche sites on Dmoz, for example did you know there was an association of tea drinkers with a directory of member blogs? I found this via Dmoz!

There are a few other directories out there which are decent quality, but you'll probably find you get a lot more commercial and lower quality sites in the lists and will have to do some filtering later. 

A few more directories I'd take look at -

• Best of the Web Blogs
• Yahoo! Directory

Please don't dismiss the Yahoo! Directory without taking a look, there are some decent sites on there, for example on this list of photography blogs, which is quite extensive.

RIght, so now we have a number of places we can find lists. Next up is to collate these into our own master list so we can filter and sort to find our final list of link targets.

2. Scrape together your master list

Hopefully I don't lose too many of you now, I'm not going to ask you to build your own tools to do this. Whilst we are big believers in hacking together your own tools for various SEO jobs, there are some very simple plugins that can do this job for you. Having said that, if you can build your own scraper to pull in link targets - go for it!

Here are a couple of ways of pulling link targets from a page very quickly without building a tool.

Multi-links for Firefox

I love this plugin. It's a very handy tool for loads of stuff. In this case, we're going to use it to pull the URLs of the link targets in our lists into a spreadsheet. 

Lets use one of the examples I linked to above, say you wanted to pull the URLs of the websites in this list on The Telegraph -

Using Multi-links, you simply right click just above the first link, then drag the cursor down so all the links you want are within the red lines -

Keep pressing the right click button, then press the left click, then select "Copy URLs" -

You can then just paste it into your spreadsheet. Much quicker than going to each site and copying the URL! 

Extra Tip - this tool also allows you to open highlighted links in other tabs which can be very useful for link prospecting. However be careful, if you do not want this, make sure you keep hold of the right mouse button! If you release it, all tabs will open at the same time. Opening loads of tabs in Firefox at the same time can slow it down a lot - I've done it with over a hundred links before and crashed it.

If you are looking for something similar that works in Chrome, take a look at Linkclump.

Scrape similar plugin for Chrome

This nice little plugin takes away a lot of the hassle of learning things like Xpath and allows you to grab elements of a page which are similar to each other - such as links.

Lets use the same example as above and scrape the links from The Telegraph again. I simply right click on one of the links in the list and click on "Scrape Similar". I get the following list which looks accurate to me -

I can then export to Google Docs in the bottom right corner, easy!

For a more detailed look on using this plugin for link building, go and read Justin's post which gives a great step by step guide.

3. Filter and prioritise

At this point we should have a spreadsheet of link targets, which we have gathered pretty quickly using some simple search queries and a few plugins or tools. Now we need to filter, sort and prioritise. Chances are that you have ended up with a pretty big list of potential link targets, so you need someway of knowing where to start to give you a good return.

I know some of you will prefer to use Excel at this point, some will prefer Google Docs. So I'm going to cover both and show you how to quickly prioritise your link targets using some simple tools.

Filtering using Excel

This became a lot easier recently with the discovery of these SEO tools for Excel by Niels Bosma. There are loads of features you can use which are for onpage SEO analysis which you should definitely take a look at. For the purposes of this post, I've taken the following screenshot of metrics for link building which you can get -

For those of you who have never seen it before, here is a very quick snapshot of just a few of the other elements you can gather with the plugin -

Richard Baxter did a great post on the plugin and all the different features you can use, it's well worth a read over on SEOgadget.

Once you've gathered these metrics, you can start to filter and sort by whichever metrics matter to you. I tend to look for large numbers of social shares and then look at PageRank as a rough indicator. Whilst PageRank isn't perfect, it's still useful for filtering large sets of data.

Filtering using Google Docs

As much as I love SEO tools for Excel, I think I still prefer using Google Docs for gathering metrics on the fly. There are loads of posts for hacking together Google Docs to do various things (all with free downloads of the tools themselves) so I'd advise you go and take a look at those.

For this type of work, I tend to use a Google Doc which looks like this -

You can add loads more into here if you wanted, but I want to keep it simple for now. I like being able to pull Domain Authority straight into my spreadsheet which you can do with the free version of the SEOmoz API key.

Again, once you've got all your metrics, you can filter, sort and prioritise based on your key metrics. Then it's a case of starting to contact each site and giving them a good reason to link to you!

Final Important Step

Go and do something with this list! Importantly, ask yourself the following -

What reason can I give these people to link to me?

or

Why should these people give a sh*t about my site?

If you can answer these questions confidently, you have your hook ready to go and do your outreach.

That's about it for this post, I'd love to hear your feedback and comments below or feel free to tweet me if you have any questions or feedback.

Do you like this post? Yes No

On your Galaxy Nexus, go to Settings -> About phone and tap on the item which displays the version ‘Android version 4.0.1′ three times.

The settings screen and status bar will disappear and you’ll see this:

Chris Banes reportsthat this doesn’t work on his Nexus running 4.0.2.

I’m very excited to announce that Professional JavaScript for Web Developers, 3rd Edition is now shipping and available in bookstores. Over six years, the first edition was released and it changed my life in ways I never could have anticipated. It was through this book that I ended up at Yahoo! and was invited to speak at conferences for the first time. The first edition was a labor of love and that love has continued over the years through the second edition and into this one, which took over a year to complete.

Those who know me shouldn’t be surprised that this book is more than just an update. The 3rd edition features five completely new chapters covering the new HTML5 APIs such as history state managements, canvas, offline applications, web workers, and more. Throughout the book, I’ve added references to changes in ECMAScript 5, including how strict mode works and how to use the new object-creation APIs. All of the existing chapters were also updated with the latest browser support information including mobile support (sadly, that will always be a bit out-of-date). A special appendix about ECMAScript Harmony is also included to give you a taste of the future.

I’m also incredibly honored to have a foreword written by Rey Bango. Rey had so many kind words about the 2nd edition that I was thrilled when he agreed to write the foreword for this one. And here it is:

I look back at my career (now 20+ years) and in between coming to the realization that my grey hairs
have really sprouted out, I reflect on the technologies and people that have dramatically affected
my professional life and decisions. If I had to choose one technology, though, that has had the single
biggest positive influence on me, it would be JavaScript. Mind you, I wasn’t always a JavaScript believer.
Like many, I looked at it as a play language relegated to doing rotating banners and sprinkling some
interesting effects on pages. I was a server-side developer and we didn’t play with toy languages, damn
it! But then something happened: Ajax.

I’ll never forget hearing the buzzword “Ajax” all over the place and thinking that it was some very cool,
new and innovative technology. I had to check it out and as I read about it, I was floored when I realized
that the toy language I had so readily dismissed was now the technology that was on the lips of every
professional web developer. And suddenly, my perception changed. As I continued to explore past what
Ajax was, I realized that JavaScript was incredibly powerful and I wanted in on all the goodness it had to
offer. So I embraced it wholeheartedly working to understand the language, joining the jQuery project
team and focusing on client-side development. Life was good.

The deeper I became involved in JavaScript, the more developers I met, some whom to this day I still
see as rockstars and mentors. Nicholas Zakas is one of those developers. I remember reading the second edition of this very book and feeling like, despite all of my years of tinkering, I had learned so much.
And the book felt genuine and thoughtful, as if Nicholas understood that his audience’s experience
level would vary and that he needed to manage the tone accordingly. That really stood out in terms of
technical books. Most authors try to go into the deep-dive techno-babble to impress. This was different
and it immediately became my go-to book and the one I recommended to any developer that wanted
to get a solid understanding of JavaScript. I wanted everyone to feel the same way I felt and realize how
valuable a resource it is.

And then, at a jQuery conference, I had the amazing fortune of actually meeting Nicholas in person.
Here was one of top JavaScript developers in the world working on one of the most important web
properties in the world (Yahoo!) and he was one of the nicest people I had ever met. I admit, I was a bit
starstruck when I met him and the great thing is that he was just this incredibly down-to-earth person
who just wanted to help developers be great. So not only did his book change the way I thought about
JavaScript, Nicholas himself was someone that I wanted to continue to work with and get to know.

When Nicholas asked me to write this foreword, I can’t explain how flattered I was. Here I am being the
opening act for the guru. It’s a testament to how cool of a person he is. Most importantly though, it
gives me an opportunity to share with you why I felt this book is so important. I’ve read many JavaScript
books and there are certainly awesome titles out there. This book, though, offers in my opinion the total
package to make you an incredibly proficient and able JavaScript developer. The smooth and thoughtful
transition from introductory topics such as expressions and variable declarations to advanced topics
such as closures and object-oriented development is what sets it apart from other books that are either
too introductory or expect that you’re already building missile guidance systems with JavaScript. It’s
the “every man’s” book that will help you write code that you’ll be proud of and build websites that will
excite and delight.

Rey Bango
Sr. Technical Evanglist, Microsoft Corporation
jQuery Project Team

I hope that Rey, and all of you, enjoy the 3rd edition just as much as (if not more than) the 2nd edition. The book is available for purchase at Amazon and available for download as an ebook from Wrox.

We are excited to announce two new features for Gauges today.

Daily Summaries

Have you ever wanted a quick snapshot of how your site did the previous day, something to look at during the boring morning commute? Gauges makes that possible with daily summaries for your sites via email. We made them simple and sexy, just the way you like it.

Go to My Account and then Email Summaries to turn on the daily summary for one or more gauges.

Browser Support

Need to find out what percentage of your users can view CSS animations or use the Javascript File API? Gauges has exactly what you need to find out the percentage of CSS, HTML5, and Javascript features your visitor's browsers support.

View any gauge and select Technology and then Browser Support to see a graph like the one below.

A few ambitious developers, Andrew Tobin, Brendan Forster, and Paul Jenkins, have created a great community project for 2012, entitled "Code52".

The description from the site says it all: "We want to build fun stuff in our spare time, give back to projects which need support, and create a community which is inclusive and engaging."

To do that, they're building 52 new Open Source projects in 52 weeks, as well as blogging about the experience and their progress. Getting involved in Open Source for new developers can seem overwhelming, but Code52 is a project dedicated to helping new developers get involved. Their first project, a Markdown editor for Windows called MarkPad has been a resounding success:

If you're interested in participating or even suggesting ideas for the rest of the 50 projects for this year, head to code52.org and get involved!

Ultimate CSS gradient generator.

When to use which HTML5 element.

Cut the Rope, HTML5 version and behind the scenes.

CSS image reflection With Webkit.

Photoshop simulator in HTML, CSS and jQuery works just like the real thing.

50 inspiring entrepreneur startup quotes.

GameBoy Color emulator written in JavaScript.

Fbootstrapp, a toolkit designed to kickstart development of Facebook iframe apps.

Color Thief, a script for grabbing the color palette from an image.

Lovely fireworks particles.

Build a gorgeous online presentation in CSS3 with impress.js.

iPhone4 in pure CSS3.

How to build a responsive thumbnail gallery.

Understanding the Command Design Pattern using PHP.

Scrollorama, the jQuery plugin for doing cool scrolly stuff.

The JavaScript guide to Objects, Functions, Scope, Prototypes and Closures.

Design best practices for the mobile web.

Never guess if your side bar is the right width again. Instead, use the Golden Ratio Calculator.

WebGL liquid surface experiment.

The Goldilocks approach to responsive web design.

This fall New York City will open The Academy for Software Engineering, the city’s first public high school that will actually train kids to develop software. The project has been a long time dream of Mike Zamansky, the highly-regarded CS teacher at New York’s elite Stuyvesant public high school. It was jump started when Fred Wilson, a VC at Union Square Ventures, promised to get the tech community to help with knowledge, advice, and money.

I’m on the board of advisors of the new school, which plans to accept ninth graders for fall of 2012. Here’s why I’m excited about this new school:

1. It’s a “limited, unscreened” school.  That’s Board of Ed jargon. It means that any student who is interested can apply—their grades and attendence record are not taken into account in deciding whether or not to admit them, only their interest. I think this is the best thing about the school. A lot of kids are just not interested enough in other academic subjects to get good grades, but they would make great software engineers. A lot of immigrants (especially in New York) are not yet proficient enough in English to get good grades in all their subjects, but they’re going to make great software engineers, too. And in my humble opinion, a school that accepts a cross-section of students is bound to be more enriching than a school that only accepts academic superstars.

2. OMG do we ever need more software engineers. The US post-secondary education system is massively failing us: it’s not producing even remotely enough programmers to meet the hiring needs of the technology industry. Not even remotely enough. Starting salaries for smart programmers from top schools are flirting with the $100,000 mark. Supply isn’t even close to meeting demand. This school is going to be pretty small (in the 400-500 student range) but the Board of Ed has promised that if it’s successful it’ll be used as a template for more schools or for special programs inside larger schools. I predict that they will be overwhelmed with applicants and this will be the most popular new school in New York City in years.

3. And we need more diversity, too.One of the reasons the elite US colleges seem to turn out so few computer science majors every year is that they are only drawing from a narrow pool of mostly white and asian males. Minorities and women are embarrassingly under-represented. Hopefully an unscreened school in New York City can pump a lot more diversity into the pool.

4. It’s not a vocational school.Unlike traditional vocational schools, this new school will have a rigorous academic component and will prepare students for college. But college is not for everyone—many of the best programmers I know were just not interested enough in a general four year degree and went straight into jobs programming.

I’m pleased to be involved in this project, but it needs more help: they’re still looking for qualified computer science teachers and a principal. If you’re interested drop me an email and I’ll make sure it gets through to the right people.

Need to hire a really great programmer? Want a job that doesn't drive you crazy? Visit the Joel on Software Job Board: Great software jobs, great people.

I am in Vancouver, Canada right now and yesterday night the Super VanJS meetup attracted around 160 people to come and see Rebecca Murphy, Robert Nyman, Jim Andrews, Preet Jassi and little me talk about all things JavaScript.

My own talk was the last of the day and was an ad-libbed introduction to a few of the things I coded lately wrapped in a request to reclaim HTML5 as JavaScript developers. The audio of the talk is available on archive.org:

The links to the demos I talked about are available here and here is a gist of what was covered:

I started by explaining my confusion about Supervan JS as Supervan is a terrible movie from the 70s with very interesting cover and back sleeve art and even more awesome posters.

I then continued to explain my unhappiness about the decline of HTML5. With this I meant that there are lots of marketing demos of HTML5 using a lot of technologies that are actually not HTML5 or use it in a very Flash-intro-ish way. I showed just how annoying it is to play Angry Birds online and how the recent Cut the Rope port looks much smoother. I also pointed out that none of them really use the web to their advantage by for example have feedback mechanisms or allow for level editing.

In essence I wanted the audience to think about bringing HTML5 into the “boring” world of day to day deliveries instead of just games and showcase sites. For this, I showed a few code examples and explained how they can benefit from HTML5 features.

I showed how to move an element to the current mouse position and how you can make this faster by using CSS translate instead of left and top using translateZ(0) to trigger hardware acceleration even when you don’t go 3D. I then showed that you can move things smoothly by adding CSS3 transitions instead of writing a JavaScript animation.

I continued introducing the 3D CSS maker, a tool to play with CSS 3D translation and animation that generates code for you.

The blue beanie maker was next showing how you can use drag and drop to put an image into the browser and manipulate it with Canvas.

The image cropping with canvas demo shows how you can enhance the functionality of browsers without having to write and install extensions. In it you can get a bookmarklet to crop any image on the web in the browser by double-clicking (in Webkit and Opera) or with a context menu (in Firefox).

I then continued to show a demo of less obtrusive video overlays showing how you can add hints for overlays on videos by reading data- attributes in the HTML and reading the current time of the video.

The last demo was a simple game with a an HTML twist that showed using canvas for game animation, touch, orientation and keyboard events to control a game paddle and how to read the necessary game data from HTML and thus making it easy to rebrand and change the game.

I ended with a plea to try some of these things out and play with all the cool APIs and hooks browsers provide us with these days instead of relying on frameworks and libraries for everything or build for one single environment. HTML5 is there for developers, if we allow only marketing people to play with it we do a disservice to ourselves.

I will follow up this with in-depth posts on hacks.mozilla.org and we also shot videos of the talks which will (quality permitting as there were some issues) be released soon.

All in all I had a great time, got lots of good questions and enjoyed the event a lot. Seeing that Vancouver is only a 2 hour flight from the valley there is a big chance I will be back soon.

Simple examples are always difficult to create because while you want to demo some feature, you also want something that seems to make sense. I wanted to try to distill down some of the complexity of creating a Y.App application by building a bare bones two panel app. Here’s the sourcecode:

All I did was create a model, which has three attributes, a view which will render this model, and then built the skeleton of the “app”. We have two pages, both of which use the same view and model structure, and I also used the built-in system for wiring up events. In this case on the “button” tag.

Of course, all this code does is let you switch between to views, but all the work going on behind the scenes to wire up the events, utilize the models, etc is very powerful. This example really just scratches the barest surface of what you are capable with this new framework, and I encourage you to check out a more complex example on the YUI staging site here.

Information Scent

In the early 1990s, PARC researchers Peter Pirolli and Stuart Card developed the theory of information scent (more generally, information foraging) to evaluate user interfaces in terms of how well users can predict which paths will lead them to useful information. Like many HCIR researchers and practitioners, I’ve found this model to be a useful way to think about interactive information seeking systems.

Specifically, faceted search is an exemplary application of the theory of information scent. Faceted search allows users to express an information need as a keyword search, providing them with a series of opportunities to improve the precision of the initial result set by restricting it to results associated with particular facet values.

For example, if I’m looking for folks to hire for my team, I can start my search on LinkedIn with the keywords [information retrieval], restrict my results to Location: San Francisco Bay Area, and then further restrict to School: CMU.

Precision / Recall Asymmetry

Faceted search is a great tool for information seeking systems. But it offers a flow that is asymmetric with respect to precision and recall.

Let’s invert the flow of faceted search. Rather than starting from a large, imprecise result set and progressively narrowing it; let’s start from a small, precise result set and progressively expand it. Since faceted search is often called “guided navigation” (a term Fritz Knabe and I coined at Endeca), let’s call this approach “guided exploration” (which has a nicer ring than “guided expansion”).

Guided exploration exchanges the roles of precision and recall. Faceted search starts with high recall and helps users increase precision while preserving as much recall as possible. In contrast, guided exploration starts with high precision and helps users increase recall while preserving as much precision as possible.

That sounds great in theory, but how can we implement guided exploration in practice?

Let’s remind ourselves why faceted search works so well. Faceted search offers the user information scent: the facet values help the user identify regions of higher precision relative to his or her information need. By selecting a sequence of facet values, the user arrives at a non-empty set that consists entirely or mostly of relevant results.

How to Expand a Result Set

How do we invert this flow? Just as enlarging an image is more complicated than reducing one, increasing recall is more complicated than increasing precision.

If our initial set is the result of selecting multiple facet values, then we may be able to increase recall by de-selecting facet values (e.g., de-selecting San Francisco Bay Area and CMU in my previous example). If we are using hierarchical facets, then rather than de-selecting a facet value, we may be able to replace it with a parent value (e.g., replacing San Francisco Bay Area with California). We can also remove one or more search keywords to broaden the results (e.g., information or retrieval).

Those are straightforward query relaxations. But there are more interesting ways to expand our results:

• We can replace a facet value with the union or that value and similar values (e.g., replacing CMU with CMUOR MIT).
• We can replace the entire query (or any subquery) with a union of that query and the results for selecting a single facet value (e.g., ([information retrieval] AND Location: San Francisco Bay Area AND School: CMU) OR Company: Google)
• We can replace the entire query (or any subquery) with a union of that query and the results for a keyword search a single facet value (e.g., ([information retrieval] AND Location: San Francisco Bay Area AND School: CMU) OR [faceted search]).

As we can see, there are many ways to progressively refine a query in a way that expands the result set. The question is how we provide users with options that  increase recall while preserving as much precision as possible.

Frequency : Recall :: Similarity : Precision

Developers of faceted search systems don’t necessarily invest much thought into deciding which faceted refinement options to present to users. Some systems simply avoid dead ends, offer user all refinement options that least to a non-zero result set. This approach breaks down when there are too many options, in which case most systems offer users the most frequent facet values. A chapter in my faceted search book discusses some other options.

Unfortunately, the number of options for guided exploration – at least if we go beyond the very limited basic options — is too vast to apply such a naive approach. Unions never lead to dead ends, and we don’t have a simple measure like frequency to rank our options.

Or perhaps we do. A good reason to favor frequent values as faceted refinement options is that they tend to preserve recall. What we need is a measure that tends to preserving precision when we expand a result set.

That measure is set similarity. More specifically, it is the asymmetric similarity between a set and a superset containing it, which we can think of as the former’s representativeness of the latter. If we are working with facets, we can measure this similarity in terms of differences between distributions of the facet values. If the current set has high precision, we should favor supersets that are similar to it in order to preserve precision.

I’ll spare readers the math, but I encourage you to read about Kullback-Leibler divergence and Jensen-Shannon divergence if you are not familiar with measures of similarity between probability distributions. I’m also glossing over key implementation details  – such as how to model distributions of facet values as probability distributions, and how to handle  smoothing and normalization for set size. I’ll try to cover these in future posts. But for now, let’s assume that we can measure the similarity between a set and a superset.

Guided Exploration: A General Framework

We now have the elements to put together a general framework for guided exploration:

• Generate a set of candidate expansion options from the current search query using operations such as the following:
• De-select a facet value.
• Replace a facet value with its parent.
• Replace a facet value with the union of it and other values from that facet.
• Remove a search keyword.
• Replace a search keyword with the union of it and related keywords.
• Replace the entire query with the union of it and a related facet value selection.
• Replace the entire query with the union of it and a related keyword search.

Visualizing Drift

It’s one thing to tell a user that two sets are distributionally similar based on an information-theoretic measure, and another to communicate that similarity in a language the user can understand. Here is an example of visualizing the similarity between [information retrieval] AND School: CMU and [information retrieval] AND School: (CMU or MIT):

As we can see from even this basic visualization, replacing CMU with (CMU OR MIT) increases the number of results by 70% while keeping a similar distribution of current companies — the notable exception being people who work for their almae matres.

Conclusion

Faceted search offers some of the most convincing evidence in favor of Gary Marchionini‘s advocacy that we “empower people to explore large-scale information bases but demand that people also take responsibility for this control”. Guided exploration aims to generalize the value proposition of faceted search by inverting the roles of precision and recall. Given the importance of recall, I hope to see progress in this direction. If this is a topic that interests you, give me a shout. Especially if you’re a student looking for an internship this summer!

I’m not really sure what I was expecting from The Tangled Web: A Guide to Securing Modern Web Applications. Having learned more about web security in the past year, I suppose I was hoping for a more in-depth treatment of common web application security issues. In my mind, I pictured a chapter on Cross-Site Scripting attacks and mitigation steps, a chapter on Cross-Site Request Forgery and what to do about it, etc. Instead, the book tackles the security problem with an exhaustive and dry examination of all the technologies that make up the web. Though interesting technically, it’s very easy to get lost in these details and end up at the other end unsure of how the description relates to real-world security issues.

For instance, the author goes into how a URL is parsed and the differences between how different browsers parse URLs. That’s interesting information, but I’m still not sure what type of attacks I should look out due to these issues and how to address them if they do occur. The same treatments are given to HTTP itself, HTML, CSS, JavaScript, and other parts of web application stack.

One of the most frustrating aspects of this book is how browser names are frequently thrown around without version numbers. Saying “Internet Explorer” does something leaves me wondering if that was one of the many issues fixed in Internet Explorer 9 and 10 or not. While it’s fine to leave off version numbers when discussing Chrome, Internet Explorer just has far too many differences to make this useful.

I found the code examples to be incredibly terse, and in some cases missing completely. Case in point, a discussion of the sandbox attribute for <iframe> doesn’t have a single code example showing its proper usage. Certainly property usage is part of ensuring security. Other sections of the book suffer from the same code-terseness to its detriment. A lot of the topics could stand more actual examples.

Which brings me to my overall issue with the book: it reads more like it was written by a researcher for a researcher. This really isn’t a book to help you solidify your web application security. In fact, I’m not sure I picked up any new techniques from reading the book at all. My head is now filled with trivia knowledge about web browsers that I’m unable to practically apply to my work, which is frustrating. The only attempt the author makes at giving actionable advice is on the “checklist” at the end of each chapter. The checklist contains way-too-terse descriptions of how to mitigate certain attacks…but without practical code examples, the bullet points are quite lost.

This book seems mostly targeted at amateur security professional who need a good brain dump on all the various flaws in internet protocols and technologies in order to get their feet wet. It’s definitely not for web developers looking to improve their web application security, making the subtitle, “A Guide to Securing Modern Web Applications”, a complete misnomer. If anything, it’s a guide through current web technologies showing you that the internet is a mess and leaving you to wonder how to fix it.

I really, really wanted to like this book, but unfortunately, I just didn’t find it practical enough to recommend it as guide for most web developers. If you don’t understand security issues at all, then this is probably a good book to pick up, but otherwise, you’ll need to go elsewhere to find practical advice.

And in the “pointless but fun” section and as my preparation for the trip to Japan tomorrow for Mozilla Vision 2012 I thought it would be fun to try to create a Domo-Kun in CSS from two lists of info about it.

I am sure real CSS gods like Lea Verou and Chris Coyier could do it in one element. :)

If you have ever developed a WordPress theme, you have inevitably come across having to add some sort of pagination to the WordPress loop. Whether in your “index.php”, “archives.php” or “search.php”, you end up adding some code that looks like the following:

<?php endwhile; ?>
 
<div class="pagination">
	<p class="alignleft"><?php next_posts_link( __( '&laquo; Older Posts', 'wap8' ) ) ?></p>
	<p class="alignright"><?php previous_posts_link( __( 'Newer Posts &raquo;', 'wap8' ) ) ?></p>
</div>
 
<?php endif; else : // no posts found ?>

So what’s wrong with this code? Technically, nothing at all. You are simply hooking into the next_posts_link() and previous_posts_link() to show the “Older” and “Newer” post links. But, when you check out your source code, in the browser, you will notice that there is an empty div tag at the end of your posts. And, if you are anything like me, you hate empty div tags!

Well, fear not. There is a simple way to avoid those pesky empty divs from destroying your otherwise beautiful markup with a simple function and conditional statement.

Step 1: The function

I like to keep my development workflow and simplistic as possible. So, instead of writing extra lines of code every time I need to check if pagination is needed, I created a simple function to do the job for me. Open up your “functions.php” file and add the following. I recommend placing this at the end of the file, right before the closing <?php ?> tag.

/*-----------------------------------------------------------------------------------*/
/* Pagination test
/*-----------------------------------------------------------------------------------*/
 
function wap8_show_posts_nav() {
	global $wp_query;
	return ( $wp_query -> max_num_pages > 1 );
}
</code>

In a nutshell, all we are doing here is checking if there is more than one page to display with this loop. Nothing fancy or complicated here. Same the file and let’s move on.

Step 2: Add the condition to the loop

Remember the block of code I showed you at the beginning of this post. Well, we need to modify this to work with our function. Change that block of code to the following:

<?php endwhile; if ( wap8_show_posts_nav() ) : ?>
 
	<div class="pagination clear">
		<p class="alignleft"><?php next_posts_link( __( '&laquo; Older Posts', 'wap8' ) ) ?></p>
		<p class="alignright"><?php previous_posts_link( __( 'Newer Posts &raquo;', 'wap8' ) ) ?></p>
	</div>
 
<?php endif; else : // no posts found ?>

As you can see, after the endwhile, we add a conditional check using our function. If there is more than one page, show the div, if not, move on and do nothing.

That’s it. Happy WordPress developing!

When I was working in government, in the Cabinet Office and the Home Office, much discussion went on about how to make government consultations more available to everyone. Commentable format, that would be accepted, read and considered. In the digital world we were in, it was recognised that the consultation process needed to be changed to that everyone could have a democratic voice.

Well, the work continues on how to make that open, but we have a situation here that we just need to forget about fixing that  for the minute (make it my problem for how we formalise the responses in order to make sure your voices are heard officially,there will be a way) and take the JFDI route.

No, not the…

This one…

Michael Gove has opened his consultation on ICT in education, the one he referred to in his speech last week. His speech was very long and full of lots of information, some have accused it of not saying very much – but what he definitely said was that this consultation was coming, and that he ackowledged the problem. Which is a great start.

This is a very important consultation and opens a whole new door to open education and should not be ignored. But the consultation is in the formal format and requires you to answer specific questions, and not see what anyone else has said.

So, Craig Snowden @CraigSnowedIn, a 17 year old developer from Scotland who answered a twitter call to open the consultation, popped it into Google docs.

In Google docs you can read and comment, and see others’ comments, and properly understand what this might be saying.

Now, this is not the formal process, but there is no reason why the comments cannot be fed into the formal process and I will volunteer to do that. So if you fancy meandering over, having a read and saying what you think should be said, then go here. It is unbranded, it is not pretty, the formatting remains from the original. But it is a document, and you can comment as you wish, inline. (Just highlight the part you want to comment on, go to the ‘insert’ tab, scroll down to comment and Bob’s your Uncle).

The original and official consultation is here should you wish to formally respond directly.

Note: Closing Date: Wednesday 11 April 2012

If you have no idea what this is all about, here are a few blog posts that might help:

Year 8 is too late

Teach our kids to code e-petition

Paragraph Seven

Open Education – it’s not impossible, it is already here

The Guardian tech weekly podcast on tech skills and education

Lazy, layabout teens

My ICT teacher can’t mark my homework

My head teacher won’t let me teach computing

Open education and the freedom to teach computing

Open Government Data *wince* it’ll take a while… Open Education? Next September? No probs

Having pestered someone working on a large healthcare web site in the UK to release some of their browser statistics I got a tweet today that they released an infographic (available here as a PDF). The site has had over 2 million visitors in 2011 and here is what they looked for:

Most went to the homepage and then to services. A big part was search and services offered.

In terms of devices used to read the site the web is not really as mobile as we make it out to be:

Windows rules supreme, followed by Mac, iOS, Android and Blackberry. I was surprised at the low number of Blackberry actually. It would also be interesting to see just how many services like meeting times are done via text message.

The browser share was the real blow here:

Internet Explorer accounts for 55% of the numbers, with Safari at 16% and Firefox at 14% following after quite a gap. Chrome clocks in at 11% and others with 4%.

When it comes to the version the IEs used, the numbers are interesting:

With 47% IE8 is the most used browser, followed by IE7 with 24% and IE6 with 19%. IE9 only accounts for 10%.

Of course these are not stats of a common web site, but it shows a few things to me:

• Web sites that people really need to go to would be wise not to block out older browsers
• The large numbers of IE8 and Safari shows us that browsers that come with the OS are the weapon of choice
• IE8 will be a problem to face for a few years to come

I love that the St. George’s trust made these insights available, and I’d love to see much more of these being released. Browser data from counter companies is to me just a very small percentage of the market of sites that provide services to people out there.

Internet 2011 the year in numbers, nearly every possible Internet stat you could ever want.

Command and Conquer, recreation of the real time strategy game in HTML5 and Javascript.

Overview of CSS3 features and the basics of how to use them.

10 super useful PHP code snippets.

A good HTML5/JavaScript/CSS reference site.

Sketch in 3D with animating lines on HTML5 canvas.

A collection of pure CSS creations.

Test-Driven JavaScript development in practice.

CSSrefresh, automatically load CSS files when they change during development.

20 great sites to learn the ins and outs of video game design.

In my previous post^[1], I introduced using CSS media queries in JavaScript both through a custom implementation and using the CSSOM Views matchMedia() method. Media queries are incredibly useful, both in CSS and JavaScript, and so I continued with my research to see how best to take advantage of this capability. As it turns out, the matchMedia() method has a few interesting quirks that I didn’t realize when I wrote the first part of this series.

matchMedia() and its quirks

Recall that matchMedia() returns a MediaQueryList object that allows you to determine whether or not the given media type matches the current state of the browser. This is done using the matches property, which returns a boolean. As it turns out, matches is a getter, which requeries the state of the browser each time it’s called:

var mql = window.matchMedia("screen and (max-width:600px)");
console.log(mql.matches);

//resize the browser

console.log(mql.matches);  //requeries

This is actually really useful, because it allows you to keep a reference to a MediaQueryList object and repeatedly check the state of the query against the page.

Chrome and Safari have a weird behavior, though. The initial value for matches is always correct but doesn’t get updated by default unless the page has a media block defined with the same query and at least one rule (hat tip: Rob Flaherty^[2]. For instance, in order for a MediaQueryList representing “screen and (max-width:600px)” to update appropriately (including firing events), you must have something like this in your CSS:

@media screen and (max-width:600px) {
    .foo { }
}

There needs to be at least one rule in the media block, but it doesn’t matter if that rule is empty. As long as this exists on the page then the MediaQueryList will be updated appropriately and any listeners added via addListener() will fire when appropriate. Without this media block on the page, the MediaQueryList acts like a snapshot of the page state at its creation time.^[3]

You can fix this by adding a new rule using JavaScript:

var style = document.createElement("style");
style.appendChild(document.createTextNode("@media screen and (max-width:600px) { .foo {} }"));
document.head.appendChild(style);    //WebKit supports document.head

Of course, you would need to do that for every media query being accessed using matchMedia(), which is a bit of a pain.

There is also a strange quirk in Firefox’s implementation. In theory, you should be able to assign a handler for when the query state changes and not keep a reference to the MediaQueryList object, such as:

//doesn't quite work in Firefox
window.matchMedia("screen and (max-width:600px)").addListener(function(mql) {
     console.log("Changed!");
});

When this pattern is used in Firefox, the listener may never actually be called even though the media query has become valid. In my tests, it would fire between 0 and 3 times, and then never again. The Firefox team has acknowledged this is a bug^[4] and should hopefully be fixed soon. In the meantime, you need to keep the MediaQueryList reference around to ensure your listeners fire:

//fix for Firefox
var mql = window.matchMedia("screen and (max-width:600px)");
mql.addListener(function(mql) {
     console.log("Changed!");
});

The listener here will continue to be called as long as there is a reference to the mql object.

More on listeners

My initial description of the media query listeners in my previous post was incomplete due to a misunderstanding on my part. The listeners are actually trigger in two instances:

1. When the media query initially becomes valid. So in the previous example, when the screen becomes 600 pixels wide or less.
2. When the media query initially becomes invalid. For example, when the screen becomes wider than 600 pixels.

This behavior is why the MediaQueryList object is passed into the listener, so you can check matches to determine if the media query just became valid or not. For example:

mql.addListener(function(mql) {
    if (mql.matches) {
        console.log("Matches now!");
    } else {
        console.log("Doesn't match now!");
    }
});

Using code like this, you can monitor when a web application moves into and out of certain states, allowing you to alter the behavior accordingly.

To polyfill or not?

When I first looked at matchMedia(), I did so with the intent of creating a polyfill. Paul Irish^[5] implemented a polyfill using a technique similar to the one I described in my last post (and gave me credit for it, thanks Paul!). Paul Hayes then forked^[6] his work to create a polyfill with rudimentary listener support based on a very ingenuous use of CSS transitions to detect changes. However, as it relies on CSS transitions, the listener support is limited to browsers with CSS transition support. That, coupled with the fact that calling matches doesn’t requery the browser state, and the bugs in both Firefox and WebKit, led me to believe that building a polyfill wasn’t the right approach. After all, how can you polyfill appropriately when there are such obvious bugs in the real implementations that need fixing?

My approach was to create a facade to wrap this behavior in an API where I could smooth out the issues. Of course, I chose to implement the API as a YUI Gallery module^[7] called gallery-media. The API is very simple and consists of two methods. The first is Y.Media.matches(), which takes a media query string and returns true if the media matches and false if not. No need to keep track of any objects, just get the info:

var matches = Y.Media.matches("screen and (max-width:600px)");

The second method is Y.Media.on(), which allows you to specify a media query and a listener to call when the media query becomes valid or invalid. The listener is passed an object with matches and media properties to give you information about the media query. For example:

var handle = Y.Media.on("screen and (max-width:600px)", function(mq) {
    console.log(mq.media + ":" + mq.matches);
});

//detach later
handle.detach();

Instead of using CSS transitions to monitor for changes, I use a simple onresize event handler. On the desktop, the size of the browser window is the main thing that will change (as opposed to mobile devices, where the orientation may also change), so I made this simplifying assumption for older browsers. The API uses the native matchMedia() functionality where available and patches up the differences in WebKit and Chrome so that you get consistent behavior.

Conclusion

CSS media queries in JavaScript are a bit more complicated than I first expected, but still quite useful. I don’t think it’s appropriate to polyfill matchMedia() giving the strange bugs that are still abound, effectively preventing you from even using the native code the same way across browsers. A facade, on the other hand, insulates you from the bugs and changes that are likely to occur going forward. Now go forth and use CSS media queries to their potential…in JavaScript.

References

1. CSS media queries in JavaScript, Part 1 by me
2. Rob Flaherty’s tweet
3. matchMedia() MediaQueryList not updating
4. matchMedia() listeners lost
5. matchMedia polyfill by Paul Irish
6. matchMedia polyfill by Paul Hayes
7. YUI 3 Gallery Media module by me

Integrating social media services in your website design is vital if you want to make it easy for readers to share your content. While some users are happy with the social media buttons that come built into their design template, the majority of WordPress users install a plugin to automatically embed sharing links on their pages. Many of you will find that a plugin does exactly what you need; others not so much. Some are poorly coded, and most include services that you just don’t need. And while some great social media plugins are out there, they don’t integrate with every WordPress design.

If you aren’t comfortable editing your WordPress templates, a plugin is probably the best solution. If you are comfortable making a few edits to your theme, then consider manually integrating social media so that you have more control over what services appear on your website.

Today, we’ll show you how to manually integrate the three most popular social media services on your website: Twitter, Facebook and Google+. First, you’ll learn how to integrate Facebook comments on your WordPress website, to make it easier for readers to discuss your posts. Then, we’ll show you the most common ways to display your latest tweets in the sidebar, which should encourage more people to follow you on Twitter. Finally, we’ll show you how to add sharing buttons for all three social media services to your home page, posts and pages.

Please make sure to back up all of your template files before making any changes, so that you can revert back if something goes wrong. Testing your changes in a non-production area first would also be prudent.

Integrate Facebook Comments On Your Website

Because most people are signed into Facebook when they browse the Web, enabling Facebook comments on your website is a great way to encourage people to leave comments. It also curbs spam. While many solutions purport to reduce spam comments on WordPress, most are either ineffective or frustrate visitors by blocking legitimate comments.

Feature-rich commenting solutions such as IntenseDebate and Disqus have benefits, of course, because they allow users to comment using Facebook and a number of other services; but before visitors can comment, they have to grant access to the application, an additional step that discourages some from commenting. By comparison, integrating Facebook comments directly enables visitors to comment with no fuss. Also, this commenting system allows users to comment by signing into Facebook, Yahoo, AOL or Hotmail.

Before integrating Facebook on WordPress Mods at the end of September, I looked at a few solutions. I followed a great tutorial by Joseph Badow and tried a few plugins, such as Facebook Comments For WordPress. The reality, though, is that the official Facebook comment plugin is the quickest and easiest way to add Facebook comments to your website.

Simply follow the steps below to get up and running.

1. Create a Facebook Application

To use Facebook comments on your website, create a new comment application for your website on the Facebook Application page. This step is required, whether you add Facebook comments manually using a third-party plugin or with the official Facebook plugin.

Simply click on the “+ Create New App” button on the Facebook Application page, and enter a unique name for your application in the “App Display Name” field. The “App Namespace” field doesn’t have to be filled in for Facebook comments (it’s used with the Facebook Open Graph Protocol).

You will then be provided with an “App ID/API key” and an “App secret key.” You don’t need to remember these numbers because the official Facebook comments plugin automatically inserts them into the code that you need to add to your website.

2. Add the Code to Your Website

Next, go back to the Facebook Comments plugin page and get the code for your website. The box allows you to change the URL on which comments will be placed, the number of comments to be shown, the width of the box and the color scheme (light or dark).

You don’t have to worry about what you enter in the box because all of the attributes can be modified manually. And it doesn’t matter what URL you enter because we will be replacing it later with the WordPress permalink:

• href
  The URL for this Comments plugin. News feed stories on Facebook will link to this URL.
• width
  The width of the plugin in pixels. The minimum recommended width is 400 pixels.
• colorscheme
  The color scheme for the plugin (either light or dark).
• num_posts
  The number of comments to show by default. The default is 10, and the minimum is 1.
• mobile (beta)
  Whether to show the mobile version. The default is false.

When you click on the “Get Code” button, a box will appear with your plugin code (choose the HTML5 option, because FBML is being deprecated). Make sure to select the application that you set up earlier for your comments so that the correct application ID is added to the code.

Insert the first piece of code directly after the <body> tag in your header.php template:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src="http://www.smashingmagazine.com//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Put the second line of code where you want to show the comments. Make sure the static URL is replaced with the WordPress permalink (<?php the_permalink() ?>) so that comments show correctly on every page of your website.

<div class="fb-comments" data-href="http://www.smashingmagazine.com/<?php the_permalink() ?>" data-num-posts="15" data-width="500"></div>

To put Facebook comments above WordPress comments, add the above code just below the line that reads <!-- You can start editing here. --> in the comments.php template. To put Facebook comments below WordPress comments, add the above code below the </form> tag (again in the comments.php template).

If you plan to completely replace your WordPress comments with Facebook comments, simply replace the call to your comments.php template with the call to your Facebook comments. For example, to replace comments in posts, simply add the code to the single.php template. Similarly, edit the page.php template to show Facebook comments on pages.

Your should now see the Facebook comments box displayed on your website. To get an update whenever someone leaves a comment using Facebook, add yourself as a moderator to your application on the Comment Moderation tool page.

Show Your Latest Tweets In The Sidebar

Displaying your latest tweets is a good way to encourage people to follow you on Twitter. The most common place to display tweets is in the sidebar, although you can add them to any area of the website.

Display Your Latest Tweets Manually

I have tried a few manual solutions for showing tweets on my websites, and my favorite comes from Chris Coyier of CSS-Tricks. His RSS fetching snippet is a quick and effective way to show the latest tweets from your account. The RSS address of your Twitter account is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx (where xxxxx is your Twitter user name). For the tweets that you favorite, use http://twitter.com/favorites/xxxxx.rss. For example, the RSS for the latest tweets from Smashing Magazine is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag; and to display only the favorites, https://twitter.com/favorites/smashingmag.rss. Once you’ve got your Twitter RSS address, simply add it to Chris’ PHP snippet.

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>

<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='http://www.smashingmagazine.com/<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>

For a more stylish way to display tweets manually, check out Martin Angelov’s tutorial “Display Your Favorite Tweets Using PHP and jQuery,” or Sea of Cloud’s “Javascript Plugin Solution.”

Display Your Latest Tweets Using the Official Twitter Widget

The official Twitter profile widget looks great and is easy to customize. You can define the number of tweets to display and whether the box should expand to show all tweets or provide a scroll bar.

The dimensions can be adjusted manually, or you can use an auto-width option. The color scheme can easily be changed in the settings area, too. Once the widget is the way you want it, simply grab the code and add it to the appropriate WordPress template.

Display Your Latest Tweets Using a WordPress Plugin

If you don’t want to code things manually or use the official Twitter profile widget, you could try one of the many plugins available:

• Cardoza Twitter Box
• Floating Tweets
• Latest Twitter Sidebar Widget
• My Twitter Ticker
• Tweet Blender
• Twitter Plugin for WordPress
• Twitter Widget Pro

Add Social-Media Sharing Buttons To Your WordPress Website

Adding social-media sharing and voting buttons is very straightforward and enables readers to share your content on the Web. Simply get the code directly from the following pages:

• Facebook,
• Google+,
• Twitter.

The buttons you get from the above links work well when added directly to posts (single.php) and pages (page.php). But they don’t work correctly on the home page (index.php) or the archive (archive.php) by default, because we want to show the number of likes, pluses and retweets for each individual article, rather than the page that lists the article. That is, if you simply add the default code to index.php, every button will show the number of shares for your home page, not for each article.

To resolve this, simply make sure that each button uses the article permalink, rather than the URL of the page it is on. To add sharing buttons only to posts, simply choose the button you want from the links above and copy the code to single.php; to add the buttons only to pages, just add the code to page.php.

To show the number of likes, pluses and retweets that an article has on the home page and in the archives, follow the steps noted below for Facebook, Google+ and Twitter below (the code for showing a sharing button on the index page will work for posts and pages, too). You can see an example of sharing buttons integrated in post excerpts on my own website WordPress Mods and on popular blogs such as Mashable.

Facebook

Facebook’s Like button comes with a lot of options. Choose from three layouts: standard, button count and box count. An email button (labelled “Send”) can be added, and you can set the width of the box, too. You can also show profile pictures below the button, choose between the labels “Like” and “Recommend,” choose between a light and dark color scheme, and set the font.

You need to add two pieces of code to your website. First, add the JavaScript SDK code directly after the <body> tag (in the header.php template). This code has to be added only once (i.e. if you’ve already added the code to show Facebook comments on your website, you don’t need to add it again).

Put the second piece of code where you want to show the Like button. To ensure that the correct page is referenced, add href="http://www.smashingmagazine.com/<?php echo get_permalink($post->ID); ?>" to the second piece of code. It should look something like this:

<div class="fb-like" data-href="http://www.facebook.com/smashmag" href="http://www.smashingmagazine.com/<?php echo get_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>

More information on how to customize the Like button can be found on the Facebook Like Button page.

Google+

Google+ offers four sizes of sharing buttons: small, medium, standard and tall. The number of votes that a page has received can be shown inline, shown in a bubble or removed altogether.

Linking to your article’s permalink is very easy. Just append href="http://www.smashingmagazine.com/<?php the_permalink(); ?>" to the g:plusone tag. For example, to show a tall inline Google+ button, you would use the following code:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" annotation="inline" href="http://www.smashingmagazine.com/<?php the_permalink(); ?>"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src='https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

For more tips on customizing the Google+ button, please view the official Google+ button documentation page.

Twitter

Twitter offers four types of buttons: one for sharing links, one for inviting people to follow you, a hash tag button for tweeting stories, and another for mentions (used for contacting others via Twitter). The button you need to show the number of shares that an article has gotten is called “Share a link.”

On the button customization page, you can choose whether to show the number of retweets and can append “Via,” “Recommend” and “Hashtag” mentions to the shared link.

To make sure Twitter uses the title of your article and the correct URL, simply add ata-text="<?php the_title(); ?>" and data-url="<?php the_permalink(); ?>" to your link. For example, if you were using the small button, you would use:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="smashingmag" ata-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://www.smashingmagazine.com//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

To show the larger button instead, simply append data-size="large" to the link. To show the popular vertical button (shown below) instead of the default horizontal button, append data-count="vertical" to the link.

For more tips on customizing the Twitter button, please view the official Twitter button documentation page.

Summary

Many WordPress users continue to use plugins to integrate social-media sharing buttons and activity on their websites. As we’ve seen, though, integrating social-media services manually is straightforward and, for many users, a better solution than simply installing a plugin and making do with whatever features it offers.

Integrating Facebook comments on your website takes only a few minutes and is much less complicated than any of the available plugins. While good tutorials are available that show you how to manually add Twitter to your website, the official widget from Twitter is the best all-around solution for most websites.

Some fantastic plugins exist for WordPress to automatically insert social-media voting buttons in your design. Installing and setting them up takes only a few minutes, although manually adding the buttons enables you to give them maximum visibility.

Remember, play it safe and make any changes in a test area first before applying the changes to the live website. I also recommend backing up all of your template files before changing anything (and your database if required). A few minutes of preparation could save you hours of troubleshooting, so try not to skip this step.

Hopefully, you’ve found this useful. If you are unsure of any aspect of this tutorial, please let us know and we’ll do our best to clarify the step or help you with it. Also, subscribe to Smashing Magazine via RSS, Twitter, Facebook or Google+ to get the latest articles delivered directly to you.

(al)

© Kevin Muldoon for Smashing Magazine, 2012.

In August, we announced that AWS Identity and Access Management (IAM) added support for Identity Federation. This enabled customers to use their existing identities (e.g. users) to securely access AWS APIs and resources using IAM's fine-grained access controls, without the need to create an IAM user for each identity.

Today we are announcing that we have extended IAM’s Identity Federation functionality to also enable federated users to access the AWS Management Console. This allows you to enable your employees to sign in once to your corporate directory, and then use the AWS Management Console without having to sign in to AWS, providing single sign-on access to AWS.

In my previous post on the topic of Identity Federation, I discussed how you could setup an identity broker, which calls our Security Token Service (STS), requesting temporary security credentials to provide your users access to AWS. You explicitly specify the permissions that these temporary credentials give your users, as well as control the amount of time (1 to 36 hours) these credentials are valid for. Well, these same temporary security credentials can now also be used to access the AWS Management Console.

Here's the basic flow:

	User signs in to the enterprise network with their enterprise credentials.
	User browses to an internal site and clicks on Sign in to AWS Management Console. Page calls identity broker. Identity broker validates access rights and provides temporary security credentials which includes the user's permissions to access AWS. The page includes these temporary security credentials as part of the sign-in request to AWS.
	User is logged in to the AWS Management Console with the appropriate IAM policy.

If you have already built an identity broker, perhaps using our sample application, to enable Identity Federation to AWS service APIs for users in your enterprise directory, you’re already most of the way there. All you need to do is implement an internal web page with redirect links to the AWS Management Console, and include the temporary security credentials as part of the sign in request. Below is some simple Ruby code sample that shows how to do just that (just replace the highlighed items with your own identifiers and URLs):

You can control the user name displayed in the upper right corner of the AWS Management Console when your user logs in. You can also optionally provide an "Issuer" URL when signing your users in. This URL will then be displayed to the user when their credentials expire, so they can re-authenticate with your identity system before continuing to use the AWS Console.

The following services support Identity Federation to the AWS Management Console today: Amazon EC2, Amazon S3, Amazon SNS, Amazon SQS, Amazon VPC, Amazon CloudFront, Amazon Route 53, Amazon CloudWatch, Amazon RDS, Amazon ElastiCache, Amazon SES, Elastic Load Balancing, and IAM. We'll of course be adding support for additional service consoles over time (the busy Amazon DynamoDB team is already working on it!).

-- Jeff;

In all the years that I’ve been using Adobe Fireworks, I have always had to perform one task in every project: remove the background from a logo. Most of the time, it’s because the client doesn’t have the original raw file that their previous designer used to create their company’s logo, or because I need to work with a bunch of affiliate logos that I downloaded from the Web and not all of them have transparency information.

With a rectangular or elliptical logo, I just trace over it with a shape and turn it into a mask. But when tracing a mask is impractical (as with complex shapes or text-based logos), I used to follow a method that I devised for extracting logos in Adobe Fireworks that doesn’t rely on the dreaded Magic Wand tool. This method took advantage of a few Live Effects to remove the background and retain the logo form. It was simple, but also primitive: it worked perfectly only when the contrast between the logo and background was already ideal and the logo form had only one color. Otherwise, I ended up with jagged edges.

I have since much improved the process of handling multi-colored logos and non-white backgrounds; it works best on solid-colored text and shapes with clear outlines. Because it involves Fireworks’ awesome features and tools, this method is a quick and easy solution that you can incorporate in your Web and interface design workflows.

And yes, still no Magic Wand tool.

Let’s Begin!

To start off, fire up Adobe Fireworks and load your logo image on the canvas. In the example below, I created a three-color logo text, surrounded by a blu-ish hue, on a canvas with a transparent background.

Create a back-up of the image by selecting it using the Pointer tool (V on the keyboard), cloning it (Shift + D, or in the menu Edit → Clone) and hiding it (L, or View → Hide Selection). You will need this back-up near the end of the process, but for now, keep it hidden.

Place the logo image on the Fireworks canvas.

Tip: You can also use Duplicate (Ctrl/Cmd + Alt/Opt + D, or Edit → Duplicate) instead of Clone to copy the image. The difference is that Duplicate offsets the position of the copied object by 10 pixels down and 10 pixels to the right, whereas Clone creates the copy in the same exact position as the original object.

The original image and hidden back-up in the Layers panel.

Step 1: Breakdown

To be able to deal with the different colors of the logo separately, we first need to break the logo down into “pieces,” one foreground color per piece. Use the Pointer tool to select the logo image, and use one or more bitmap selection tools (Marquee or Oval Marquee (M), Lasso or Polygon Lasso (L) — set the Edge to “Hard” in the Properties panel) to select a piece of the logo. Make sure the piece you select has only one color (not counting the image’s background). Cut and paste the selected piece (Ctrl/Cmd + X, and then Ctrl/Cmd + V) to separate it from the rest. Do this for each piece; cancel the Marquee selection (Ctrl/Cmd + D or Esc, or in the menu Select → Deselect) and switch back to the Pointer tool (V) if you need to select the logo image again.

Tip: Double-click on an image object to quickly switch from Pointer tool to Marquee tool.

Select a piece of the logo.

In our example, I’ve used a (rectangular) Marquee, but you can use the Oval Marquee for circular or elliptical selections, and the Lasso or Polygon Lasso for irregular shapes.

Cut up the logo into pieces.

If your logo has only one color, skip this step and treat the whole image as your only piece.

Step 2: Desaturate

Select all of the pieces of the logo image using the Pointer tool, and apply a Hue/Saturation filter (in the Properties panel, go to Filters: [+] → Adjust Color → Hue/Saturation…). Drag the Saturation slider all the way to the left (-100) to reduce the logo to grayscale. Make sure that Lightness is set to 0 and that Colorize is unchecked before clicking “OK.”

Desaturate all pieces.

A Note on Filters

Adobe Fireworks features two almost identical sets of filters: one in the application menu and another in the Properties panel (the Live Filters).

Filters menu vs. Live Filters in the Properties panel

Filters applied using the application menu are “destructive,” in that they can’t be undone by any other means except Undo (Ctrl/Cmd + Z, or in the menu Edit → Undo). Furthermore, target vector objects (shapes and text) need to be converted into bitmap objects before they can work their magic, which makes editing the original object harder. To adjust the effect of the filter that you just applied, you will need to undo that step and reapply the filter.

To maintain the ability to easily edit an object and its filters’ properties, always use the Live Filters in the Properties panel. This way, you can make changes to the original object, and the filters will adjust automatically. You will also be able to change a filter’s settings at any time, or disable or remove the filter, without adversely affecting the other filters.

Step 3: Levels

What makes this newer method different is the use of the Levels filter (as opposed to the Brightness/Contrast filter of the older method) to push the dark grays into pure black and the light grays into white, while maintaining the smooth edges of the logo’s curves.

Select one piece of the logo image using the Pointer tool, and apply a Levels filter (in the Properties panel, go to Filters: [+] → Adjust Color → Levels…). In the Levels dialog, set the Channel drop-down to “RGB” (which is the default). Below the histogram under Input Levels, move the left and right arrow sliders to change the intensity of the dark and light areas of the image piece, respectively. Make sure that the Preview checkbox is checked, so that you can see your changes in real time. Move the left arrow slider just enough to the left to get the logo part to show up completely black, but not so far left that the edges of the logo become jagged. The same goes for the right arrow slider: move it right to get a pure white background. You can leave the center slider untouched. Click “OK” to apply the filter.

Apply the Levels filter to each piece.

You can check the accuracy of your filter values by bringing up the Info panel (Shift + Alt/Opt + F12, or in the menu Window → Info) and hovering over the black area to obtain its RGB color value. The RGB values should all be set to 00; otherwise, go back to the Levels dialog and readjust the slider.

Use the Info panel’s RGBA reading to check the color values.

Do the same for the white area, this time setting all three RGB values to FF in the color reading.

You can further fine-tune the levels by changing the number values in the left and right text boxes in the Input Levels dialog, which correspond to the left and right sliders in the visual graph. Increase the value of the left text box to darken the dark-gray areas until all three RGB values are set to 00 in the Info panel; decrease the values if the edges of the logo become too jagged. The inverse is true for the right text box. This allows you to get pure black and white colors, while keeping the edges of the logo as smooth as possible.

Repeat the whole process in step 3 for all other image pieces.

Pieces with different settings in the Levels filter. Notice the same rightmost value across all instances, corresponding to the same background color.

Bonus side effect: If your original logo image has compression artifacts, this step could greatly reduce them.

Step 4: Alpha Transparency

Once all of your image’s pieces have been “leveled” into black and white, use the Pointer tool to select an image piece and apply a “Convert to Alpha” filter (in the Properties panel, go to Filters: [+] → Other → Convert to Alpha). Doing this step separately per piece is important because each piece has a different setting in the Levels filter. If you were to apply a new filter to all pieces at once, Fireworks would equalize the settings for all of the other filters present.

Apply a “Convert to Alpha” filter to each piece.

In this step, you will again be able to check for the accuracy of your settings for the Levels filter; if the black area of an image piece is not completely black, it will show up as slightly transparent once the Alpha filter is applied. (This is where the checkerboard background of the canvas comes in handy.) Also, if the background is not completely white, you’ll see it faintly after converting the image piece to alpha.

Applying the “Convert to Alpha” filter to all pieces.

Step 5: Recolor

At this point, you have successfully extracted the logo form from its background. The next step is to bring back the original colors. To do this, open the Layers panel (F2, or in the menu Window → Layers), and look for the object that you hid at the beginning of this tutorial. Click on the visibility box at the left end of that object to make it visible again. Nudge it down so that it’s below the processed logo pieces and in clear view. Use the Pointer tool to select an image piece and apply a Color Fill filter (in the Properties panel, go to Filters: [+] → Adjust Color → Color Fill). In the Color Fill settings, click on the color swatch, and sample the corresponding color from the original logo image. Do the same for all other image pieces.

Apply a Color Fill filter to the first piece, picking the color from the original logo image.

To sample a color for the Color Fill filter: 1. Click on the color swatch in the filter dialog, 2. Click on the part of the image whose color you want to sample, 3. The color swatch will update with the new color.

Step 6: Convert To Symbol

Once you have recolored all of the pieces, select the original logo image with the Pointer tool and hide it (Ctrl/Cmd + L, or in the menu View → Hide Selection). You can also click on the eye icon of that object in the Layers panel to hide it. Select all of the image pieces using the Pointer tool, and convert them into a symbol (F8, or Modify → Symbol → Convert to Symbol…) before using it in your layout, so that new filter changes affect the new logo as a whole.

The Convert to Symbol dialog.

If you wish to make changes to the objects inside the symbol, you can do one of the following:

• With the instance of the symbol selected, go to Modify → Symbol → Edit Symbol;
• Right-click on the instance of the symbol, and select Symbol → Edit Symbol;
• Double-click on the instance of the symbol.

All logo pieces recolored and converted into a Symbol.

Taking It Further

You now have a version of the logo that you can set against any type of background: solid, gradient, textured or tiled. You can even use it as a bitmap mask over a photo, pattern or gradient if you want a different look. To do this, you’ll need to flatten the logo symbol first (Ctrl/Cmd + Alt/Opt + Shift + Z, or in the menu Modify → Flatten Selection), but you can always bring back your final logo by dragging an instance of the symbol from the Document Library panel (F11, or Window → Document Library) onto the canvas.

The final result.

If you are feeling adventurous, you could try turning it into a vector object using the Magic Wand tool first (W) and then running the “Convert Marquee to Path” command (Select → Convert Marquee to Path). Your mileage may vary, though: “Convert Marquee to Path” doesn’t always play well with complex shapes, but you can always tweak the vector paths that are created by that command until they match the logo.

(al) (mb) (vf)

Downloads

Need a sample to study? Download the sample archive for this tutorial (ZIP file, 57.6 KB), containing the Fireworks PNG (created in Adobe Fw CS5).

Further Reading

• “Rapid Fire #8: Extracting Logos,” SixThings
  My original method for extracting logos.
• “About Live Filters,” Adobe Fireworks CS5 Help
  All about Live Filters.
• “Symbols,” Adobe Fireworks CS5 Help
  Working with the Symbols feature.
• “Select Pixels,” Adobe Fireworks CS5 Help
  A rundown of the different pixel-selection tools.
• “Working with masks in Adobe Fireworks,” Adobe Devnet
  An excellent video tutorial (by Jim Babbage).

<#comment hash="032f1f9585446b6b21372fa906dfbb36" />

Smashing Is Looking For Experts On Fireworks, Photoshop & Illustrator

As our crafts mature, so do our tools. Fireworks, Photoshop and Illustrator are powerful tools that we, as designers, use on a regular basis. Fireworks is surely more flexible for Web at times (and UI/screen design in general), since it is dedicated specifically to the Web designer’s needs. And yet, it is underrated by many. We should all indeed be more open to try out new and different tools and share the techniques and our experiences with the community.

We’d love to cover more articles on Fireworks, Photoshop and Illustrator explaining useful techniques, tips and “lessons learned” from professional designers. So, if you:

• Have a solid knowledge of at least one of these tools,
• Have a solid experience in design (especially Web/screen/mobile),
• Have a couple of articles published on any of the tools mentioned,
• Or perhaps have even released some extensions or tools for Fireworks, Photoshop or Illustrator…

Then please drop us an email at ideas@smashingmagazine.com. Please include details about your experience, examples of your work, links to your articles and your article ideas (at least two). Of course, all authors get paid :-)

We look forward to hearing from you!

— Smashing Editorial Team

<#comment hash="a908fea4e77d75841be54d4ed6fdefa0" />

© Jose Olarte for Smashing Magazine, 2012.