Front-End Book

The iPhone is getting more and more popular around the world, and soon we will see mobile phones implementing Googles mobile platform Android. For years we have been waiting for the mobile revolution on the web, but the revolution has been more like a breeze with 3G-enabled services for small screens and the Blackberry-concept. In order to make the revolution speed up we need molotov-cocktails such as usable services, standardized platforms, large user base and a change in behaviour. With iPhone and Android, this is what is about to happen.

In this article we have choose to focus on four areas of the web that will change when the mobile revolution starts.

Technical

Anyone who has ever built or run a web serving platform, knows that multiple platforms are a bad thing and adds to complexity and maintenance time and money. In order to serve both traditional web and web for iPhone and Android, changes to the platform will be necessary (Of course, there are always someone who “took aim” for this in their platform when building it). The biggest changes we will se is an even stricter separation of the presentation layer from the business layer. In order to make a platform able to serve x number of types of devices, we need to make sure that nothing in the business layer makes any assumption on what type of presentation device it will be serving the generated content. The presentation layer must be able to choose the correct presentation resources and device-specific services such as payment methods, social bookmarking tools etc.

Usability

When moving services to a mobile platform, focus tends to move to ease of use and effective use of the service, trying to maximize the usability of the service. It is not as convinient to type on a mobile phone as it is on a keyboard, even if iPhone has wonderful mechanisms for scrolling, zooming and changing viewport orientation, it is still far more difficult to navigate the web via an iPhone then it is with a fully featured web browser on your desktop OS. In order to minimize the effects of these short comings, focus on easier and more focused services will be the case. This will of course effect the services we use daily on the desktop web as well, why should I stick with a semi-usable product on the web, when I know the service provider can do better.

Advertising

There are two things with mobility and platforms such as iPhone and Android that will revolutionize the advertising possibilities on the web.

The first and most obvious is of course mobility itself. With positioning it will be easy to target your advertising on the mobile web geographically making conversions more likely and advertising space bigger. Of course geographical targeting is available today as well, but not to the level of detail possible with mobiles using GPS. I believe this will help to increase advertisers and publishers revenue from ads greatly if implemented correctly.

The second possibility opening up is ease of payment. Often when a transaction take place on the traditional web, credit cards or solutions such as paypal are used, adding to the complexity of making a buy, sometimes even customers bounce due to the fact that they feel it is to much hassle to grab the VISA-card or finding the password for your online bank solution. With platforms such as iPhone and Android implementing transparent payment solutions will make conversion rates pop due to the fact it will be easier for the user to actually make a buy, the integration of the purse into the platform makes a buy more like an ordinary buy in a store. On top of platform solutions for payment, mobile phone operators may implement solutions where they charge the user on the next bill. This is a win-win situation for the operators and the users, operators can start charge percentage on credits not payed within 30 days, and the users get a free payment option, as long as they pay within 30 days. I believe this is where mobile web will revolutionize the web the most.

User Expectations

As soon as the iPhone and Android-enabled web services have grown in numbers, user base and revenue people using these services will start to expect all good services they learnt to like on the desktop web will be available and mobile enhanced. This change in expectations will effect market shares in the long run, as the web services able to adapt and serve mobile services as well as the old plain web services will get more users and bigger revenue.

Conclusion

iPhone and Android will change the way we build, use and monetize web based services. The mobile revolution has just begun, and it is important for companies acting on competitive markets online to implement solutions for their customers, because they will start to expect that mobile services are a natural complement to their traditional web service. These days are interesting times.

Not a big update. 

John Resig is writing a new selector engine, sizzle, interesting

I wonder when John have the time to write code, write books, write documentation, write for his blog AND work for Mozilla. He is one productive client side coding entrepreneur. Sizzle is Work In Progress, but John claims it is 4 times faster than the jQuery Selector Engine.

YUI has a new Interaction Pattern in their library

I do not know how many times I have been part of discussions about how to implement a sign in procedure the best way. This new pattern from YUI tries to describe the characteristics of the problem. I really like Yahoo’s initiative with YUI trying to help designers and likes from revinventing the wheel time after time.

Parallax scrolling made easy with JavaScript

10 years ago something, we believed DHTML and JavaScript where the solution to everything, and there are solutions I am proud of from that time, and solutions I wouldnt mention even under torture. These days all client side stuff is focused on availability, usability and other non-relevant bilities ;-). Where is all the cool stuff? jParallax is cool, and from a first point of view, somewhat useless, but hey, keep em coming.

Blueprint CSS 

I hate CSS. No I like separation of content, design and behaviour. But lets be honest, CSS is repetetive and often you find yourself chasing browser bugs hitting CTRL+S, ALT-TAB, CTRL-R, ALT-TAB …. That is why I believe we must minimize the rows of CSS we are actually writing, just as we try to do that with JavaScript using libraries such as jQuery, Prototype or Mootools. Blueprint CSS is interesting, I am thinking of implementing it into my mindset as the default CSS-library together with jQuery for JavaScript and Smarty for templating.

YAML (Yet Another Multicolumn Layout)

This one looks interesting as well, but the only reason I list this is because the name is the same as the configuration language YAML I will talk about below. 

YAML (YAML Ain’t Markup Language)

Before I have used XML for configuration, moving more and more over to JSON, because of the benefits parsing and using it. But YAML is what I have started using for some types of configuration, because of its easiness to read, write and share. Look into it. I love it for configuring navigations.

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 believe Facebook will become the no 1 social network before the end of 2007, but there are some things I still miss and I hope they will sort out. If they sort them out, they will please me, grow in signup numbers and earn more cash.

Revenue Sharing on the Facebook Network

One feature that I think will make the number of sign ups and use of Applications explode is the possibility to share revenues within the network. Take the the iLike application for example: The author/programmer of the application is an affiliate for iTunes and makes a small profit each time a Facebook user buys a song from another Facebook user iLike-list. If a User B buys a media item from a list provided by User A, User A should earn a small amount of the profit the application author gets.

Possible solutions on revenue sharing on Facebook

1. Facebook Applications with affiliation and/or subaffiliation between developer and users
2. Get part of ad-earnings from Facebook when visitor to user content clicks an ad if ad presentation is based on content context.
3. Let a user get a smaller amount for adding new active users to their network and earn even more if his/her active users add even more active users.

I believe that this will happen somewhere, users give the social networks a lot of information that the companies can use in order to earn a lot of money, sooner or later the companies must start to share in order to get new customers and good content.

Below you find 10 jquery plugins and jquery extensions you cannot do without if you are a serious front-end developer

1. Easy DOM Creation with jQuery

2. Form plugin

   If you are doing AJAX-stuff, you must have this plugin.

3. Dimensions

   This plugin should be a part of the jQuery Core.

4. Interface

   This library solves 90% of your user interface issues. Excellent work Stefan!

5. Thickbox 3

   Note I have written version 3, I hope this version will be more extendable than the second version.

6. Tablesorter

   Solves a generic problem on medium-sized datasets, I want to see an ajax-extension on this fetching data on the fly when paging the resultset.

7. jQuery Form Validation

   Need I say more, this is the mother of all User Interaction Design Patterns, and it is important that someone has taken this beast on.

8. jQuery Cookie

   Nothing fancy, but a really good plugin. Instead of writing it yourself again, again, again ….

9. JSON

   JSON is what XML should be, jQuery should support it better in the core.

10. Simple Star Rating Plugin

    Nice implemented Eye-candy.

Choosing the correct plugins to gain functionality from is an important detail in your front end architecture and should be taken seriously in order to create a future-proof and well built front end architecture.

This article is an introduction to how to create good form validation with javascript. I will briefly describe the interaction pattern of client side validation with javascript. Later I will focus on 10 actions that will make your form validation perfect.

The Design Pattern of Client Side Form Validation

Whenever a user needs to submit data to your application, there is a need in validating the users input.

Top 10 tips for JavaScript Form Validation

Use a form validation framework or a form validation library

I strongly recommend using some kind of JavaScript-library or framework when implementing your client side validation. On top of that it is important to use/implement a validation framework, this is because you will have bugs and issues with your client side validation, and a framework makes it easier addressing these bugs and issues. When we changed client side validation on a redesign of a larger site lately, we built the validation framework on top of the jquery javascript library. That architecture has made it easier addressing issues and bugs that do arise during development and maintenance of your forms.

Focus on solving the big validation problems

As soon as you start developing and implementing your validation, it is easy trying to address all potential validation that is needed for all types of input. My advice is to try to catch 75-85% of the potential user input errors in the front-end validation. Trying to catch all will lead to the following:

• Bloated code, your framework will grow too large
• More or less impossible to test client side validation as there are too many combinations of validation that can go wrong
• Business rules will move to the front-end.(More on how to avoid this by using Ajax later)

To avoid this I think that creating a small validation framework that can do most of the validation is the way to go, and leave the specific things for the server (or create a plugin to your framework later) to validate.

Do Form Validation before form is submitted

The traditional JavaScript form validation pattern used since the 1995+ is to validate the form when the user hits the submit button, and whenever the script encounter a form item with some error in it, focus on that form item and prompt the user with an JavaScript-alert saying that something went wrong.Today, there is no need doing it that way.In your pursuit of creating the perfect front-end validation framework, you must add the possibility to validate controls on other events than just submitting. I see these potential events:

• Whenever a controls value is changed
• When a control is blurred
• Periodically check if controls has changed
• When a control that is connected to another control changes value
• When a form is submitted
• When a form is reset (if you for some reason finds it intelligent to have a reset-button on your form)

Use Ajax Form Validation for business data input

In order to validate business data you have three alternatives

• Let the server take care of it
• Add business logic to your front-end code
• Let the front-end talk to the back-end through an Ajax-API

My suggestion is to go with the first or the last option, if you go with the last option there are a couple of things to keep in mind

• Make sure your code is secure. Sometimes “smart” solutions like these, exposes business data to people with a little technical knowledge
• Create a server-side API that has a defined set of methods with a defined set of parameters to be sent to it.
• Create a client-side wrapper, wrapping the functionality exposed in the server-side API.
• Only allow communication between the server-API and the client-side API-wrapper
• Make your API-responseType configurable, sometimes you want to show the result as HTML, sometimes you want to manipulate the answer within your JavaScript code and sometimes you will use the response for more queries. I think that the API at least must be able to response with these types:
  • json
  • html
  • xml
  • script
  • text

Typical business data in my mind, are unique usernames and emails, age-validation rules, address verification etc etc

Do extensive testing of your javascript form validation

There is one thing worse than no validation: Validation that do not let correct data through.In order to avoid this, my finding is that coding is a smaller part then the actual testing of the validation framework. My tips is to create unit-tests for all your validation rules as a part of the validation framework, this way it is easy for you/your team to verify functionality whenever a change is needed to your framework

Rewrite input data to valid formats

Some input will come in different formats, dates for example. JavaScript Form Validation should address this problem by rewriting from known invalid formats to the valid format. An example can be:20070325 -> validation rewrite format -> 2007-03-25Because the user has not made an error, he/she has given the system a correct date, it is not his/her problem if the system doesnt use his/her format. The system should then be able to rewrite the known wrong format (20070325) to the system correct format (2007-03-25). Typical areas where reformatting can be used

• Dates
• Time
• Phone numbers
• Social Security numbers / Personal Numbers
• Trim spaces
• Remove/exchange invalid characters

Attach javascript form validation late in the design process

Semantic webs must be able to present forms that do validate and function without the attachment of behavior, which is the case when adding JavaScript Form Validation. Therefore I think it is important to make sure your use-cases is valid with or without the adding of client side validation. If you make sure this is valid, there will be small problems making sure the web is ready for mobile users and search engines.

Make the script i18n- and l10n-compatible

If your web is successful for an international public, the non-english-speaking audience is next. In order to achieve this it is important that even user generated error messages is localised and translated. Make sure your client side validation framework is prepared for translation and other localised parameters such as currencies, dates and time-formatting.

Add callback functions to validator framework

90 % of the time you want to use your validation framework as it was intended to be used, 10 % of the time you will be wishing that your framework would be more generic to achieve some specific interesting effect you have identified while working with your site and validation framework. In order to achieve this I think it is important to add the possibiltity to attach callback functions for your forms, letting the developer use your library in a way you couldnt dream of. The definition of a good library is when people using it creates stuff you as a creator of the library didnt think was possible.

Make your framework/library extensible

If you add working hours to a framework or a library, it is important that the architecture of the library/framework is open, and is extendable.

Resources

• Jörns Demo of jquery form validation
• Will Jessup has a nice example of form validation with jquery.

I think LinkedIn is a very addicitive and playful implementation of professional social networking

And now Geni launches relation networking. I just started out and I think they have made an excellent job in implementing this, even my not-so-tech-savvy-father and alikes around the world will enjoy and play with this, making this the fastest growing Socianet ever (my prediction).

And the interaction on this socianet is amazing. I do not even remember how I signed up, it was a transparent signup process.

We will hear more from Geni.

Dan Brown writes a good and informative article about how to make a competitive analysis from an Information Architetural / Design point-of-view. A must read for those interested in business analysis and the more theoretical area of work for people working with front-end related issues. I liked it.

Every industry has its own version of the competitive analysis and its function is clear: to line up your product with other products and show where yours falls short and where yours is superior.

• Digital Web Magazine - Competitive Analysis

Found this really good looking plugin for jquery that tweens/animates between muliple pages/images. You can easily extend it with your own tweening functions. There is probably a lot of work still needed on this plugin, but if he makes Will Jessup manages to remove all bugs and add the functionality he mentions on the site, I believe it can be a really nice plugin for galleries and other areas of a site where you would like to step through a big set of pages/images.

• Tweenbox

I read Garrett Dimons posts The Time is Now for Front-End Architects, The Latest on Front-End Architecture, Front-End Architecture at Web Visions 2006, Front-End Architecture: Markup is the Technical Foundation, Front-End Architecture: Browsers, Front-End Architecture: AJAX & DOM Scripting and realised that Front-End Architect fills the gap for all of the different titles I have had the last 5 years.

If you tell someone that you work with front-end related issues on the web, people tend to say that they also know HTML and you can see in their eyes that they wonder how it comes you suck so hard not getting a better job after almost 10 years in the business. The front-end is a huge and ever growing area of potential problems and a variety of solutions to these problems.

After the vacations and paternity leave I will step into the big boss room and discuss a smaller title change. Maybe I find this one more suitable to whatever I actually do for a living.