Here's One Solution

Setting RGBa backgrounds using inline CSS

I’m working on some code that is injected into a page using JavaScript and has to exist in an unknown environment. To make sure that the styling is not over-ruled by other CSS applied to the page I am adding some CSS as inline styles. This works fine until you try to apply an RGBa background with a hexadecimal fallback.

Usually you would declare something like this in your CSS.

div {
    background-color: #666;
    background-color: rgba(0,0,0,0.6);
}

All browsers apply the first background colour value, and this is then overridden by the second value in browsers that understand RGBa. Browsers that don’t understand RGBa just ignore it and continue to use the first value.

If you apply this inline however, it doesn’t work in IE7 or IE8.

<div style="background-color: #666;background-color: rgba(0,0,0,0.6);">content</div>

Inspecting the elements shows that the background colour value is empty.

As I am adding all of this code to the page using JavaScript I decided to try setting the styles using JavaScript at the same time.

div = document.createElement('div');
div.style.backgroundColor = "rgba(0,0,0,0.6)";
if (div.style.backgroundColor.indexOf("rgba") == -1) {
    div.style.backgroundColor = "#666";
}

The trouble with this version is that IE7 and IE8 throw a JavaScript error when you try to set a RGBa value for the backgroundColor property. This gave me an idea I could use though. If setting an RGBa colour throws an error, then we can catch it, ignore it and set the value as the hexadecimal fallback.

div = document.createElement('div');
try {
    div.style.backgroundColor = "rgba(0,0,0,0.6)";
}
catch(e) {
    div.style.backgroundColor = "#666";
}

This is the method I am currently using. If you know of a better way, let me know in the comments.

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.

Letter to Startup Britain website

The UK Government are sponsoring a website to encourage Startup Britain.

As with 90% of UK Government websites, there are basic accessibility issues that would take somebody 5 minutes to put right. Here’s the email I sent explaining a couple of quick and easy fixes.

Hi there,

Your website looks like it could be a useful tool, but I spotted a couple of problems that could make it difficult for those with disabilities to use.

Firstly, there is no way to know where you are on the page if you’re using a keyboard and not a mouse. You have the following line in your CSS.

/resource/css/site/base/site.css line 91

a {
    text-decoration: none;
    outline: none;
}

If you remove it, then links that people have focused on by using the tab key will have an outline and they will know where they are on the page.

The next big issue is to do with the email signup form.

<fieldset>
	<input class="clear-input textbox" id="register-email" name="entry.0.single" value="Your email address">
	<a class="submit button" href="/"><span>GO</span></a>
</fieldset>

There are a number of problems here that make the form difficult for people using a screenreader to use.

1) No <form/> element. This makes it hard for people to know where on the page the form is.
2) No <label/> associated with the <input/> element.
3) An <a/> element with ambiguous text instead of a <input type="submit"/> element.
4) Form won’t work without JavaScript.

Much better would be to use something like this:

<form action="/register" method="post">
<fieldset>
	<label for="register-email">Your email address</label>
	<input class="clear-input textbox" id="register-email" name="entry.0.single" value="Your email address">
	<span class=" button"><input type="submit" value="Go" class="submit" /></span>
</fieldset>
</form>

With this code the JavaScript enhanced form would still work, but it would fall back to a regular form if JavaScript is not available for any reason.

Hopefully your web design team can implement these changes quickly and make the site easier to use for people with disabilities. It may be worth asking them to check the rest of the site as there may well be other problems that I didn’t immediately notice.

If you have any questions then drop me a line.
Best regards
David

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?

HTML5 elements inside block level links cause styling issues in FF 3.6

I was fixing a couple of bugs in the new design or fineartdavid.com, the site I use for my artwork, and was reminded about something I found a while back, made a test suite for and then forgot about.

If you have one of the new HTML5 elements inside a block level link bad things happen in Firefox 3.6. I’ve tried explicitly setting the element to display: block in the CSS, but this hasn’t worked.

HTML5 elements in links test suite

It seems to me a fairly common use case. The exact code I wanted was a figure with a figcaption, all wrapped in an a, but right now this bug means we can’t have nice things.

Do you know a way to fix this? Am I missing something stupid?

Update

Remy Sharp is calling it a vomit bug which seems an appropriate name. zcorpan suggests in the comments that nesting a div could help so I’ve added that to the test suite.

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.

Using a CSS gradient and a background image on the same element

I’ve spent the last 2 weeks working on the next version of the tmg website and I’ve been having a lot of fun using lots of CSS3.

One of the problems I ran into was having a background image and a css gradient on the same element. CSS gradient’s aren’t a part of the official W3C backgrounds and borders spec, but they have been implemented by Webkit (Safari and Chrome, amongst others) and Mozilla (Firefox) using vendor prefixes. The trouble with things that aren’t in the spec is that it is a bit harder to find the relevant documentation.

These won’t work

The problem stems from the fact that gradients are specified as a background-image, which means they override any previously declared background-image. If you do it in the opposite order, the background-image will override the gradient.
I’ve simplified the CSS here, but if you want to see the full code for each example just fire up Firebug or your browser’s built in developer tools.

.example1 {
	background-image: url(../images/plus.png);
	background-image: -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b); /* for firefox 3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b)); /* for webkit browsers */
}

.example2 {
	background-image: -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
	background-image: url(../images/plus.png);
}

This does work

Well it turns out that it is actually very easy to apply both a gradient and a background image to the same element. You can read about the Mozilla implementation and Safari (Webkit) implementation on their websites, or you can carry on reading here.
The trick is to set the gradient and the background-image using the multiple background syntax which is part of the W3C spec.

.example3 {
	background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
	background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

How about combining the -moz- and -webkit- backgrounds?

Using this new found information, the obvious question is “can we use the multiple background syntax to declare the gradient for webkit and mozilla at the same time?”. Let’s find out.

.example4 {
	background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

Rather annoyingly that doesn’t work. I would have thought that each browser would ignore the vendor prefixes it doesn’t know, but it looks like that only works for CSS property names, not values. Although thinking about it, that’s not what’s going on with the other examples because the vendor prefix is on the value there and not the property name.

Whatever the reason, it looks like we’ll have to stick to multiple, vendor-specific lines for the time being. Hopefully CSS gradients will be incorporated into the spec soon so we will only have to declare them once.

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.