Must read for all front-end people

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Peter Svensson at Script Uncle has written a very good article on what to expect and how to define a front-end developer.  I have myself worked as interface developer, front-end developer, gui developer, front-end architect, web developer etc etc and I am willing to agree with Peters view on the topic. Today working as a front-end X could be anything, it all depends on what the people hiring you have in mind for today. I really appreciate Peters view on what the expectations are on front-end people when you look in the ads:

Looking at the skill set that the front-end developer should have we find that he or she must be a veteran of all major US armed conflicts since WWII, be able to design, build and fly a commercial airliner, have discovered at least three different cures for cancer (of which at least should have received the nobel price in either of Medicine, Physics or Chemistry) and also be the founder of two or more major schools of painting, including cubism.

It is important the the front-end gets its focus in large projects, and that we do not generalize to much thinking that person A can carry the role of the designer, coder, developer, architect and usability specialist and still do a good job. But on the other hand, front-end stuff is for people who do not understand the complexity of things happening in the back-end of a system. We only do this because we hope that one day we also may write generic server side solutions with xml configuration for creating value objects independent of data source.


4 Great Books for Increasing Revenue From Your Website

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


How iPhone and Android Will Change the Web

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.


The Front End Guy is the Go To Guy - Human Interfaces

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.


Some Web Development Links for You

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.

 


3 tips for a more dynamic website in less than an hour

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:

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.

Screenshot of Yahoo Pipes

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


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?


Front-End Architecture: The Pre-Study

This article is the first article of 30 in my series on Front-End Architecture. The goal with the articles is to document things I have never documented and share knowledge and experience to anyone that are interested in the architectural decisions made.

Get to know your problem domain

Before starting a big redesign you have to identify, quantify and gather data on almost everything that has anything to do with your front-end architecture. What I would do first is to read the requirement specification and business goals for the redesign of the web you are working on. I have seen a lot of requirement specifications and to be honest, I have yet to see a requirement specification that puts front-end requirements clearly. If the requirement specification fails to specify requirements that affect the front-end architecture, I stress the value of creating a pre-study focusing on all the aspects you may think of. Below I list some of the areas I think is crucial to address in a front-end pre-study.

Statistics

How many daily visitors can you expect? What type of clients can you expect visiting your website, instead of looking at the current statistics, look at trends over a period of at least half a year, this way you are sure you will not miss any significant data hiding in the stats.

Performance

If you are redesigning your website, measure everything you can measure and if you are building from scratch, look at competitors as guideline to what you have to achieve at least. Things I would measure is
• HTTP-requests
• Response times
• Render time
• Download size
There are a lot of online tools you could use for measuring stuff like this. Please visit WebSiteOptimization.com

Design Paradigms

Make sure your knowledge is up to date. If you where involved in a bigger redesign 3 years ago, it is probable that there is new knowledge and design paradigms. We had a huge change of design paradigm 4-5 years ago, when the whole industry moved from table-based to css-based design. We are now seeing changes in how we use scripting in webpages with ajax, mashups and external apis. There is no need implementing new stuff, just because you can, but it is important that you expand your knowledge. You never know when you will need that knowledge.

Surveys and Usability Studies

If you need answers to a lot of questions regarding the user interface, there is no such thing as speaking directly to the customers. If you have access to surveys or usability studies, I suggest reading them closely and try to extract everything you think is of importance for the front-end architecture.

Design

Is there any mockups on the upcoming website? Often designers design a mockup for start-up meetings of bigger redesign projects. These designs may say something on what to expect of the design. Is there anything in the design that you think will impose a problem for you?

Other

Depending on your website, the time-frame for the redesign project and other parameters a pre-study may analyze a lot of different aspects of potential issues and possibilities for the front-end architecture.

Deliverables from a Front-End Architecture Pre-Study

Typical deliverables from a pre-study may be recommendation on technical platform, guidelines for the user interface, prototypes of certain business processes, proof-of-concepts on technical solutions.

Next article will focus on the Front-End Platform, and we start with the server side part of the front-end architecture.


30 Articles on Front-End Architecture

This article is the first in a series of 30 articles dedicated to Front-End Architecture. I have been working with front-end related tasks for more than 10 years and realized that I haven’t documented my findings very well. This project will change that.

In this series of article the focus will be general and the use-case, or scenario, is a bigger redesign (hardware, software, design and user interactions) of a high traffic web. The issues raised and answered in these articles is applicable on projects where everything is made from scratch as well. The goal is to put a lot of my findings and experience on paper and to share the knowledge I have that may help someone facing architectural decisions within the front-end area.

The first question in this series of articles is What exactly do you mean when you talk about Front-End Architecture?. There is no simple answer to the question, but I will try to answer it here in brief and in the series of articles in detail.

I believe that Front-End Architecture deals with everything that is in some way user-oriented. It is not as simple, as to say that front end architecture is the presentation layer in an application. A lot of times user-oriented tasks has effects on a big part of the system you are building. In my profession I have always tried to focus on things within and above the business layer. A lot of decisions made in the front-end may effect data models and choice of server software and such things, but I try to stay out of those areas, as I am certain that there are people enjoying those issues and does it better without my involvement.

Things I have worked with in my profession as Front-End Architect:
- Business logic in Java
- Business logic in VB.NET
- Business logic in PHP
- GUI logic in JavaScript
- GUI logic in Java
- Definition of data models for XML or JSON transfer
- Definition of API:s for 3rd party developers
- Analysis of MVC-frameworks
- Analysis of Presentation Engines
- Analysis of Server Side Libraries
- Analysis of Client Side Libraries
- Analysis of Clients
- Analysis of Mobile Clients
- Analysis of Competitors
- CMS Analysis
- Performance Reviews
- Documentation
- SEO
- I18n
- L10n
- Troubleshooting
- Payments
- User Interaction Design
- Use Case Definitions
- Mockups
- Prototypes
- Requirement Specifications
- Requirement Analysis
- Research
- Usability Studies
- Statistics
- A/B Testing
- Business Processes
- Conversion Rates
- CSS
- Ajax
- Semantic Markup
- Microformats
- Affiliate Integration
- Cowboy (NS4)
- Sumo-wrestler (IE)
- Kamikaze Pilot (Maintain JavaScript by programmers with too much ego and too little knowledge)

The list may grow during the articles. From the next article we will start focusing on some of the areas listed above. The first article will be on “Front-End Architecture: The Pre-Study”.


Contact

You are more than welcome to contact us if you would like to discuss anything regarding the blog.

About

Front-End Book is run and primarily written by Mattias Hising, an experienced Lead Developer from Uppsala, Sweden. I try to focus my efforts on Front-End related issues, as I find the problems to solve are more complex and interesting than the ones in traditional back-end development.

Twitter | GitHub | FriendFeed | LinkedIn | StumbleUpon | Facebook | Delicious