Ryan Roberts

Why front-end developers are so important to the future of businesses on the web

Unfortunately the perception of the front-end developer’s role remains somewhat coloured by an early association in observers’ minds with the other, loosely related role of the web designer. The role of web designer is an extremely important and valid one, but it is very different to that of the web developer, and the lack of a clear distinciton between the two, in some people’s perception, is unhelpful and does both roles an injustice.

Largely gone are the days of HTML-monkeys, spending days on end converting Photoshop comps to pixel-perfect layouts. A web developer’s role is broad: from developing in what Yahoo!’s Nate Koechley calls ‘the world’s most hostile development environment’ — the browser — and ensuring cross-platform and cross-browser consistency, to working with art directors and designers and remaining true to their vision, to considerations and implementations of accessibility, usability and the overall user experience.

A web developer is responsible for everything that sits on the client side of the web stack — the content, presentation and behaviour layers. Few other roles touch so many other key aspects of a business as does a web developer’s. Good businesses realise what an asset they have in their front-end web development team, and welcome their input into the product development process.

Read the full article at: paulcarvill.com

Useful wee jQuery snippets

Here are some short jQuery snippets I use on a regular basis:

Header catch-all snippet

	$('h1,h2,h3,h4,h5,h6').addClass('hx');

This snippet adds the class .hx to all heading elements. Having this class to use comes in handy for non-essential styling and saves you from typing out the following #content h1, #content h2, #content h3… etc. Ideally I’d have a h* class but CSS isn’t a fan of the asterisk.

Strict doctype friendly new window snippet

    $('a[rel=external]').click(function(){
		window.open(this.href);
		return false;
	});

Sometimes you just have to open a link in a new window/tab and this is an old but still very useful snippet to have.

Note: If you don’t agree with the use of rel attribute for defining external links simply swap rel out for class or even a[href^"=http://"] which would target all links starting with http://.

Print this page snippet

	$('<a href="#print">Print this page</a>').click(function(){window.print();}).appendTo("body");

Appends a link to the body allowing the user to print out the page. You can change body to any other element in the document. You can also change .appendTo to .prependTo or one of the many other jQuery manipulation thingamabobs.

Grab cite and stick it into a title attribute snippet

$("q, blockquote").hover(function(){
	var getCite = $(this).attr("cite");
	var cite = ('Cite — ' + getCite);
	$(this).attr({ title: cite });
});

Now this one probably isn’t all that useful to everyone but I thought I’d stick it in anyway. I have no doubt it could be improved so if you have a suggestion please post it. What it does is grab the cite attribute content (usually a URL) and sticks it into a title attribute so you can hover over the element and see the citation.

Got any of your own to share?

It would be great to share common snippets you find useful in every day use, so please feel free to suggest any in a comment and maybe you could make this post even better :)

AIGA – Defining the Designer of 2015

Through interviews, focus groups, workshops and surveys AIGA and Adobe have laid out a set of essential competencies they believe attempt to define designer of the future. AGIA say the findings are not conclusive and the set of competencies are to be considered for the wider studio environment rather than for a single designer. Here are the top five:

1. Ability to create and develop visual response to communication problems, including understanding of hierarchy, typography, aesthetics, composition and construction of meaningful images
2. Ability to solve communication problems including identifying the problem, researching, analysis, solution generating, prototyping, user testing and outcome evaluation
3. Broad understanding of issues related to the cognitive, social, cultural, technological and economic contexts for design
4. Ability to respond to audience contexts recognizing physical, cognitive, cultural and social human factors that shape design decisions
5. Understanding of and ability to utilize tools and technology

I don’t think there is anything particularly surprising here or in the full list. These competencies are required now are they not?

In defense of HTML 5 and that 2022 date

HTML 5 has been getting a lot of focus lately, especially the 2022 date of when it will apparently be ready.

I’ve considering writing about this for a while now but today Ian Hickson (HTML 5 editor) posted a comment on Jeffrey Zeldman’s blog that for me pretty much clears up the matter:

I’ve mentioned 2022 as a date I hope to see two complete and bug free implementations of all of HTML5 in various articles, but I wasn’t aware of one where I was quoted as actually saying it’d only be ready by then. The plan is to have it more or less “ready” by October this year. (We’ve never had two complete and bug free implementations of any Web spec before as far as I know, so 2022 is pretty optimistic in a way.)

Sounds much better don’t you think? Pretty much ready by the end of 2009.

Let’s just get this straight — last call working draft is planned for October 2009, Candidate Recommendation status is set for 2012 and then the Proposed Recommendation should appear around 2022. In-between 2012 and 2022 browser vendors will implement the Proposed Recommendation and (hopefully) providing feedback to further refine the spec. The WHATWG will work on detailed test suites (or I presume it will be them) so browser vendors can aim for that “complete and bug free implementation”. But as Hixie says this hasn’t been done before so 2022 isn’t such a crazy date.

Over the next few years we should expect to get increased support for and use out of HTML 5, certainly far in advance of 2022… In fact you can start using HTML 5 today if you like.

You can find out more about HTML 5 including the time-line in this Tech Republic interview with Ian Hickson.

Firefox Accessibility Extension

Developed by Jon Gunderson of the Illinois Center for Information Accessibility, the Firefox Accessibility Extension is a valuable addon that aims to assist web developers and people with disabilities in navigation, running accessibility checks, reports, styling and much more. It’s essentially an accessibility version of the web developer toolbar addon for Firefox.

Thanks to @SeanDelaney for pointing it out.

A nice example of paper prototyping

Each one on its own square by Fabricio Marchezini, Karine Drumond & Leandro Alves, is an animated paper exploration of a new web browser concept aimed at improving user productivity.

The concept was created by the group for Mozilla Labs ‘Design Challenge: Summer 09’.

W3C to drop XHTML 2 in favour of HTML 5

XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5

The W3C announced yesterday that they plan to allow the XHTML 2 Working Group charter to expire and put the remaining available resources into developing HTML 5.

It also appears the W3C plan to leave XHTML 1.* where it is and end further development, again in favour of HTML 5:

The expectation is that HTML 5 will define the next generation XML serialization of HTML. Therefore, W3C does not at this time plan to allocate resources to the maintenance of XHTML 1.1, XHTML 1.1 Basic, and XHTML Print beyond the current round of revisions. W3C does not plan to revise the XHTML 1.0 Recommendation.

Unsurprisingly for some I am pleased to see this happen. Thanks to lack of support from Microsoft’s Internet Explorer proper XHTML was little more than a myth. Furthmore XHTML 2 was never really going anywhere, HTML 5 is already being implemented by browser vendors and some developers have started using it in their work.

Quick Tip: Combine IE6 & IE7 style sheets into one CSS file

The star filter filter hacks and conditional comment are both well known methods of targeting Internet Exploder 6 and 7, and by using these together in one style sheet served from an IE conditional comment you can cut down on HTTP requests, focus your work into one file and help improve your productivity.

Start off with a CC targeting Internet Explorer 7 and lower;

<!--[if lte IE 7]>
	<link href="ie.css" type="text/css" rel="stylesheet" media="screen"/>
<![endif]-->

Now in this style sheet you’ll want to use the above mentioned filters to target both IE 6 and 7, here’s an example;

/* IE6 styling */
* html #content {
	width: 300px;
	}

/* IE7 styling */
*+html #content {
	width: 200px;
	}

But what about IE8? Well so far I don’t know of any hacks to specifically target version 8. This isn’t anywhere near as bad as the previous versions when it comes to bugs but I have come across some over the past few weeks. Let me know if you find anything or if you work out a better solution to above.

The office

I’ve just moved in to my new office, what do you think? ;)

Continue reading…

Fun with CSS Border Radius

Here’s a CSS experiment I was playing with and posted on twitter recently, with no blog at the time there wasn’t much chance for an explanation or discussion so I thought I’d give it its own place here :)

Continue reading…