Front-End Book

I have added three new features to this blog in order to give people who comment a little extra back whenever they take some time and add a comment to my postings.

1. Remove nofollow on comments

We are using the plugin NoFollow Free by  Michele Marcucci. That plugin removes the nofollow from author links in comments when a user has submitted x number of approved comments. On Front-End Book you must have 5 approved comments before the nofollow attribute is removed from author links.

2. Automagically add back link to commentors blog

CommentLuv by Andy Bailey lets you automagically add a link to posters last blog post if a feed is found on the site the athor of the comment has in its author link. We use CommentLuv on Front-End Book and when you comment and use an url where your blog is, CommentLuv will show last blog post.

3. Top list of commenters

To the right we are from today starting to list our best commenters with their name linked to their website and with the number of comments next to them.
Keep up the commenting!

Today the design of the upcoming release of WordPress 2.7 was released, and I really like it.

Mad props to Matt Thomas and Andy Peatling for their visual talents. You can expect these designs to be extended to the rest of the 2.7 screens and implemented over the coming weeks.

The new navigation seems like it is going to reduce number of clicks dramatically.

jQuery looks more and more as the standard JavaScript-library, distributed with Microsoft Visual Studio and Nokias SKD:s for widgets in the future.

“Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications.”

“Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.”

“In fact their [Microsoft and Nokia] developers will begin to help contribute back to the jQuery project by proposing patches, submitting test cases, and providing comprehensive testing against their runtimes. As with any contribution that comes in to the jQuery project it’ll be closely analyzed, reviewed, and accepted or rejected, based upon its merits, by the jQuery development team - no free ride will be given.”

Read more:

http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/ http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx http://www.hanselman.com/blog/jQueryToShipWithASPNETMVCAndVisualStudio.aspx

This is just amazing. Bruce Springsteen captured on film making a wonderful version of The River on the streets of Copenhagen in the end of the 80’s.

No one, not even my wife, have missed that there is a new player on the browser scene, Google Chrome. Though we have different views on the topic, both me and my wife had the same questions and comments popping up.

• Why are they releasing a browser?
• If someone can gain market shares on the browser market, Google can.
• Is this a good or a bad thing?

Of course there are no definite answers to any of the questions, and I think they have the chance to gain market shares if they manage to make the integration with their services in such a way it feels natural to use Google Chrome instead of any other browser available (and fully functional).

But the big question is why they are releasing a browser and how it effects the end user.

I will try to reason around this issue, without getting into the conspiracy area (just touching it slightly).

In order to understand Google Chrome, we have to identify where Google have their biggest earnings and what focus Google have. Google focus on search and their income comes from a lot of different services both for end users and for businesses, with their biggest income generating from advertising. They are building a solid online office suite, Google Apps, and they probably make a dollar or two on other services as well, but the big thing is advertising. I believe that there are three main reasons Google have entered the browser market.

1. Increase Possibility to Target Ads

Google have strategically and slowly moved the positions when it comes to knowledge about user behaviour. In the beginning long time ago (10 years exactly), the user was “anonymous” and only shared entities such as geographic location, recurring visits, clickstreams etc etc, the ordinary web analytics stuff all websites without user accounts get by using Google Analytics.

Later Google Account was released via services such as GMail, Search History, iGoogle and other personalised services enabling Google to gather more data for business purposes such as ad targeting and personalised search results. With Accounts enabled on these services, Google could gather personalised data while using services where you needed to be logged in.

Google Toolbar was the next step in further evolving the possibility to gather personal data, but still Google only gathered information from people who actually installed a toolbar, I do not know the numbers, but I believe that the ratio may be pretty low. Still Google could increase the knowledge about those users, gathering information when surfing on other properties than Googles, but, and a big but is that they made this sharing of private material opt-in, and probably lost a lot of information that way.

By offering a browser, focused on usability, stability and ease-of-use, they will now target the really big audience, and they can hide the privacy issues in a EULA. By owning the browser chrome, they will gather enormous amounts of user data, making it easier to target people with ads contextually targeted both to content and user behaviour.

With their own browser, they can start showing targeted ads even on websites that do not affiliate through their Adsense program.

2. Remove Technical Barriers for Earning Money on Advertising

By owning the browser, Google can make sure that targeted ads do not get blocked. Maybe this is not a huge problem right now, but as a strategic decision, it is important, by trying to move the masses to start use Google Chrome, Google can be sure that whatever technical solution they choose for displaying the ads, they will know that ad impressions will be higher and given that, conversions will rise, and given that Google Inc. will earn more money.

3. Distribution Platform for Coming Services

Google Chrome is Googles iTunes. I believe Google are building a distribution platform, enabling them to start targeting new markets, where companies such as Apple, Amazon, Netflix, Rhapsody and other companies earning their revenues from micro-payments.

Google are going to increase the marginal for advertising revenue, but in order to really grow, as fast as we have gotten used to, they need to find new mass markets where they really can earn money from transactions. So believe me when I say that within a couple of months Google will start taking market shares from Apple and Amazon on digital items such as music, movies, applications for the web and Android.

Conclusion

Matt Cutts says that there are no hidden agenda behind this, they just wanna make the web a better place. If I where a share holder on Google I would not like those kind of arguments. “making the web better” is just that, an argument, not a strategy. And as a public company Google Inc. must find new ways to increase the market value of the company. I believe Google Chrome is the fundamental piece in Googles future platform taking market shares from competitors such as Apple, Netflix and likes as well as the Chrome will enable Google to increase the marginal on their advertising programs.

Right now I am reading two books on the benefits of collective intelligence, and have just finished two others with focus on optimizing your website technically, in conversion rates, through usability and performance.

All these books are of interest to people who takes a scientific approach to developing and tuning the website he/she is running.

High Performance Web Sites by Steve Souders

Steve Souders covers all the different sections from YSlow on how to speed up your website. He shows that you will get most effect from putting your efforts into perfomance tune the frontend before working on backend tuning. I found this book really worth reading as it is spot on on every issue, and very focused on describing gains and implementation details for each and every single section of performance tuning on the frontend. I really recommend this book because I feel that for a serious website owner this book will pay itself in a couple of weeks with more generated sales and less used bandwidth.

Buy this book on Amazon.com

Website Optimization by Andrew B. King

Andrew B. King also focus on optimization and tuning of your website, but the focus is on SEO, PPC-campaigns and Conversion Rate Optimization. He also tries to write some chapters on performance tuning, but when it comes to frontend performance tuning I recommend Steve Souders book instead. This book is really good for people who would like to learn more about optimizing PPC-campaigns and start tracking and incread conversion rates. I recommend this book for those chapters, which are really good and have help me increase incomes on the websites I have PPC-campaigns for.

Buy this book on Amazon.com

Programming Collective Intelligence by Toby Segaran

Toby Segaran guides us in building smarter web applications based on Collective Intelligence. The book mixes theory and practice and shows how “easy” it is to actually create applications with community based product recommendation system and other intelligent solutions. I found this book interesting as a starting point on how to technically implement some of the web 2.0 features users have become used to use online.

Buy this book on Amazon.com

Wikinomics by Don Tapscott and Anthony D. Williams

Wikinomics is the book I have just started reading and it focus on how the community trend will change the enterprises. The focus is on how the masses create something of big value through collaboration. An interesting thing of course is the fact that a lot of people interact in larger communities building a greater value (Wikipedia, Youtube, Linux etc, etc) without getting paid, still the quality of the outcome often exceeds the alternatives built traditionally with labour and investment banks.

Buy this book on Amazon.com

I do not know how many of you who work with front-end related tasks on a daily basis, but I sure do. One thing I have learned is that working with front-end related entities makes you connect to a lot of different departments within an organisation. Often this is a good thing, sometimes it is not as good.

A lot of different requirements must join forces in any tier within an architectural solution, but in the front-end, the closer we come to the end-user, more people belive they have a saying on any matter that may arise. This is very positive for the people who have dedicated their daily efforts into working with front-end development and other entities of the front-end (graphical design, interaction design, information architect, etc), because these people tend to get more insight into the product they are working for, because we all know that information is king, and with all these requirements from different departments, the front-end is the place to get to know and learn the core business. One not so good thing about being a human interface for user interfaces is that you sometime have no clear mandate and have to take on the role as a mediator, trying to tie the data-model-requirements together with the business requirements for time-to-market for promotional materials.

I stress that in larger organisations where there are a lot of people working with tasks and issues that effects the front-end, there should be some kind of position with a clear mandate making decisions when too many requirements from different departments start to mix and needs resolvment. This mandate could either be a person, with some kind of service architectural role, or a group of people combining different types of competences within the front-end area touching all involved stakeholders such as IT, marketing, operations etc etc.

Being the front end guy/girl is a good way to get insight into what is happening within the organisation, something that is sought after from a lot of people, but also a pretty quick way to headaches and frustration when you realise that you are sitting on all the information and no clear mandate to do the best out of it.

Saw that jQuery UI has been updated to 1.5b4 and that Enchant is now part of UI as the effects engine. Neat.

This is what jQuery needs. jQuery started out as a good library, and from my point of view the only usable javascript library for high traffic websites with more than one developer working on it. The library is still uncompeted when it comes to solving those two problems, even though some people will argue that prototype is a bigger library, but hey, just because billions of flies eat manure doesnt make it a delicatess. But what Prototype have and jQuery do not is a good UI-package in Scriptaculous. So when someone wants to build a rich interface for their website, often they go for prototype + scriptaculous, and when you want an ajax-driven front that looks good for your webapp, maybe you turn to ExtJS, but jQuery have until now forced you to write your own UI or download third party plugins with so-and-so support for new jQuery versions.

jQuery UI with Enchant built into it is the Prototype + Scriptaculous-killer when it comes to features and quality. What jQuery needs now is to bundle this with the next Ruby-on-rails killer and with Wordpress and they will prevail as the one and only JavaScript library.

This post aims at giving you 3 tips for achieving a more dynamic webpage with very little programming and no change in your workflow. The tools we are going to use are:

• Yahoo Pipes
• Twitter
• Wordpress
• Delicious
• Magpie RSS

What we would like to achieve is a website that feels more dynamic even when you are not writing articles on your blog/website. This article is based on a web running PHP, Smarty, Wordpress and a hosting plan that gives you the possibility to create and change rights for directories. You can of course adapt these tips to any server architecture you may be using, but these examples will feature this architecture.

Integrate Yahoo Pipes for News

Yahoo Pipes lets you, easily and graphically, create advanced mashups from different external sources such as RSS and other content available online. You can aggregate, manipulate and filter the content to fit your needs. Yahoo Pipes is very powerful used correct. In this post we will focus on how to take 1 or more RSS-feeds, combine them into one and filter out the content that fits on your website as targeted news.

Below you find a screenshot of a pipe where I have aggregated a couple of RSS-feeds from startup-blogs, sorted all items on publish date and filtered out all items that have the name “social” in the title.

Pipes is very intuitive and you should be able to create a solution like this in less than 10 minutes.

Save your Pipe and give it a nice name, then click Run Pipe…, on the resulting page you will get the option to “Get as RSS”, copy that URL, it should look something like this: http://pipes.yahoo.com/pipes/pipe.run?_id=BMHzDooV3RGSSmEWJhOy0Q&_render=rss

You now have dynamic content that are filtered according to your needs, below we will show you how to integrate it to your website with Wordpress Plugins or with Magpie RSS and Smarty.

Integrate Twitter to Wordpress

Twitter is a micro-blogging service that lets users tweet messages to their twitter profile. If you are using twitter, why not integrate your tweets to your blog, making it more dynamic, and if you like to, more personal. Maybe you do not want to create a single post for every tweet (max 140 characters), a daily aggregation maybe suits your blog better. Alex King has built a Wordpress Plugin on top of Twitters API which do just that (among other things). Downloading and installing the plugin should not take you more than 10 minutes all together.

Integrate del.icio.us as Link Manager

If you run a web site or a blog, you probably collects and share bookmarks on social bookmark services such as del.icio.us, BlinkList, simpy, Ma.gnolia, reddit and other social bookmarking sites. Why not utilize the well specified apis and tagging possibilities that they offer. In this example I have choosen to go with del.icio.us, but I am pretty sure you can do this with all of the popular social bookmarking services, the only thing is that they have to have an RSS published for the tag you are using to pinpoint your dynamic content.

In this example we are going to use del.icio.us and my bookmarks tagged with jquery as a resource for adding external links to your website that updates automatically when you add new bookmarks tagged with jquery to your online del.icio.us bookmarks.

My jQuery bookmarks can be found at http://del.icio.us/hising/jquery. By adding /rss between hostname and username, you will get the list of jQuery bookmarks in a format suitable for integration with your web site. In this case the url to the rss is http://del.icio.us/rss/hising/jquery

RSS Integration Code Example

With Magpie RSS and Smarty

Download Magpie RSS and follow the installation instructions. One thing you dont want, is to grab the feed every time someone visits your page, you are want to cache the result for a specified period of time, in this example we cache the feed response for 1 hour (set this depending on how often you think you will update your dynamic content)

channel array which contains info on the rss
//$news->items array that contains the feed items

/*
item example:
array(
	title => 'Weekly Peace Vigil',
	link => 'http://protest.net/NorthEast/calendrome.cgi?span=event&ID=210257',
	description => 'Wear a white ribbon',
	dc => array (
			subject => 'Peace'
		),
	ev => array (
		startdate => '2002-06-01T11:00:00',
		enddate => '2002-06-01T12:00:00',
		type => 'Protest',
		location => 'Northampton, MA'
	)
);
*/
?>

When you have got the result from your controller/php-file make sure you expose the response data to your view manager, and print out your items. In this example I have used the Smarty templating engine

//PHP:
require_once(YOUR_SMARTY_PATH . 'Smarty.class.php');
$smarty = new Smarty();
$smarty->assign('news', $news);
$smarty->display('template.tpl);

//Template

{foreach from=$news->items item=item}
{$item.title}

{/foreach}

As Wordpress Plugin

Download a plugin for integrating external RSS into your blog. There are a lot of different plugins for this, in this example we will use FeedList. Upload and enable the plugin. Then in your template add this:

 'http://del.icio.us/rss/hising/jquery',
            'num_items' => 10));
?>

More Examples on Creating a Dynamic Web Quickly

There are many other ways to create a more dynamic web site. You could use FeedBurner for creating Headline Animators. Headline Animator is an animated banner that cycles through your feed’s five most recent items. It’s an easy way to promote your content anywhere you can place a snippet of HTML. By doing this you can promote content from another blog on your website AND add a more dynamic web. All this is easy steps, under an hour of labour, to achieve a more alive web. Do you have any other tips that are a quick win when it comes to adding dynamic content to your web site?

I follow Nate Koechly on Twitter and saw that he tweeted about Flickr finally have launched video. Now the low $25 dollars for this superb service is even more valuable. Have a look at the new feature here.

Updated:

• Original post to Flickr Blog
• Help Section on Flickr

Follow me on twitter.