Here's One Solution

An outline of the development process and the people involved

Sometimes I have to explain to somebody exactly what it is that I do as a front-end developer. It’s something that for the vast majority of people happens behind the scenes. The final product hidden behind the graphic treatment that is the only immediately visible aspect of web design.

Separation and specialisation

At its simplest, web development is split into a few separate stages with different groups contributing to each stage. In reality these stages have blurred and changeable boundaries, but they provide a good conceptual model for understanding how a website or application is built.

Here I’m going to try to explain the life cycle of a web project and what the various roles are in that process.

Research

The first stage of any design project is an analysis of the problem you’re trying to solve or the goal you’re trying to achieve. This analysis includes looking at similar existing products or projects, research into the potential audience and defining goals and success measurements.

Identify the business goals and success measurements

• Brand managers
• Sales team
• Analytics experts

Research the audience and their goals

• User Experience professionals

Look at and compare existing solutions to the problem

• User Experience professionals
• Technical Designers
• Graphic Designers
• Information Architects
• Content Stategists

Design

Having thoroughly researched the problem, the next stage is to design a solution. Note that I’m using the term design here to mean product design, rather than graphic design. This stage will usually involve a lot of sketching, brainstorming and several iterations.

Choose an appropriate medium and platform

• User Experience professionals
• Technical Designers
• Graphic Designers

Define a process for achieving the audience goals

• User Experience professionals

Design wireframes and sketches of the content structure and processes

• User Experience professionals
• Information architects

Plan and structure any content

• Information Architects
• Content Strategists

Develop branding and visual styles

• Brand Managers
• Graphic Designers
• Content Strategists

Build

Once you have a detailed plan of what the product will be it is time to start building it. Very often this is seen as a final stage, but for the best results it should run alongside the design stage from as early as possible with regular testing, iteration and refinement.

Note that the Content Management System is really a project in itself and subject to its own equivalent development process.

Platform and server setup, maintenance and monitoring

• Systems Administrators

Content management and database design

• Back-end Developers
• Information Architects

System logic, data processing, payment transactions

• Back-end Developers

Tools for measuring success

• Analytics experts
• Back-end Developers

Building the interface

• Graphic Designers
• Front-end Developers

Testing, refining and iterating

• User Experience professionals
• Graphic Designers
• Technical Designers
• Front-end Developers
• Content Strategists

Launch

Once your test and refine iterations have reached a point where the product is ready for the public you can put it live.

Launch the website (make it available on the public internet)

• Systems Administrators
• Back-end Developers

Post launch

The website or application launch isn’t the end of the project. Using your analytics data to check against your success criteria, alongside ongoing user testing you should be continuing to refine the product.

Ongoing success analysis

• User Experience professionals
• Analytics experts

Testing, refining and iterating

• User Experience professionals
• Graphic Designers
• Technical Designers
• Front-end Developers
• Content Strategists

So what is your role?

Whilst I’ve listed commonly used job titles under each stage, you’ll find that most people working in the web industry span a couple of these titles. Teams work best when there is a degree of crossover and people working in related disciplines can often provide valuable insight at every stage of the process.

So while I call myself a front-end developer, or occasionally a user-interface developer or user-interface engineer, I’d expect to be actively involved in any of these roles:

• User Experience professional
• Technical Designer
• Front-end Developer

And I can make a valuable contribution to these roles:

• Graphic Designer
• Information Architect
• Content Stategist

Where do you fit into this process? Have I misunderstood, or misrepresented any of the roles or stages above? Have I missed out your speciality? Let me know in the comments.

A Solarized theme for Aptana in Eclipse

There seems to be a bit of a buzz around Ethan Schoonover’s Solaraized colour palette at the moment. It’s an impressive bit of work. I had a look around and couldn’t find a version for Apatana, which I use in Eclipse, so I quickly put one together.

I’ve adapted the default Aptana colour scheme to use Ethan’s palette, rather than try to match the samples on his site and I may well tweak it as I go on. If you want to try it out then you can download it here.

Animations on iPad using Zepto.js

Since leaving TMG, I’ve been working on a couple of iPad projects. I’m finding the Zepto.js library to be a huge help. It is essentially a stripped down version of jQuery. It gives you chaining, selectors and a nice API, but because it is only aimed at Webkit loses all the cross-browser stuff you get in jQuery Mobile.

One of the main jobs in building things for the iPad is adding nice smooth transitions and animations. I thought that the best way to do this would be to toggle a CSS class using JavaScript,

$('div.animate').toggleClass('newposition');

and then use CSS transitions to animate the change.

div.animate {
    position: relative;
    left: 0;
    -webkit-transition: left 1s linear;
}

div.newposition {
    left: 500px;
}

This was horrid though. The animation worked, but it was jerky at best, with lots of the intermediate steps not being rendered. I found that I got a much better result by using the anim() function provided by Zepto.

$('div.animate').anim({translate3d: '500px,0,0'}, 1, 'linear');

This works by adding the animation as inline CSS, but that means any further changes and CSS rules get increasingly complicated. The method I’m using to solve this problem is to setup a clean up function and call that once the animation has completed.

var cleanup = function() {
    $('div.animate').toggleClass('newposition').attr('style','');
}
$('div.animate').anim({translate3d: '500px,0,0'}, 1, 'linear',cleanup);

This seems to work pretty well, but am I overcomplicating things? Have you found a better way to handle animations?

Webkit (Safari and Chrome) removes links containing only floated elements from the tab order

I’ve just found a strange bug in Google Chrome.

I’ve been working on a set of templates for fineartdavid.com, and was testing them for keyboard accessibility. I hadn’t expected anything unusual because there is nothing very complicated in the the HTML. When I tabbed through the page however, the large images were being skipped.

At first I thought the problem was caused by block-level links. These are allowed in HTML5 and are a good solution to the design pattern where you have an image and a header both pointing to the same link.

<a href="#" >
    <img src="/path/to/image.png" alt="descriptive alt text" title="" />
    <h2>Blog entry title</h2>
</a>

A few experiments showed that this was fine though, and that the problem only happened when the image was floated. Further investigations showed that any links that contain only floated elements are removed from the tab order.

Check out the test suite. Obviously has implications for accessibility, so lets hot it is fixed soon.

Update: I’ve updated the title because this happens in Safari too, meaning it is a Webkit, and not Chrome bug.

Update 2: I’ve filed a Webkit bug report.

Clearing (or deleting) cached SVN passwords in Eclipse using Subclipse

I’ve spent a long time today trying to delete a cached SVN password in Eclipse on my Mac. Every time I tried to connect to my SVN repository I was getting a 403 authentication error. Eclipse wasn’t offering me a chance to resupply my credentials though.

After a lot of searching I found this post which provided the  answer.

Japan Shah: how to clear subeclipse password svn for eclipse?.

So, if you’ve read lots of other posts and still haven’t found the mysterious cache file, try here:

/Users/{username}/.eclipse_keyring

Deleting that file solved the problem for me.

Taking a look at PHP and MySQL

Last week I started reading Kevin Yank‘s (@sentience) book, Build your own database driven web site using PHP and MySQL. I bought a copy from Sitepoint when it was part of their advent promotion.

It’s only early days at the moment, but it seems relatively straight forward so far.

One of my main concerns with learning any programming language is that I’ll learn enough to get things to work, but not enough to build something secure and scalable. Kevin addresses this early on in the book which has reassured me that I’m learning to do things The Right Way.

Hopefully with a bit of work I’ll soon be able to add another skill to my CV.

Disclosure: I’ve made those affiliate links – hope you don’t mind.