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

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 :)

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?

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.

Thanks to @SeanDelaney for pointing it out.

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’.

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.

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.

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 :)

→ View the CSS Border Radius experiments.

As you should see the demonstration uses CSS borders, border radius, positioning and a few other CSS techniques to get an entirely useless smiley face complete with animations (sort of). Actually I don’t think it’s entirely useless, sometimes I like to breaking away from looking at things in a web design perspective and simply exploring the technology available whether the end result is useful of not.

Check out the source code and you’ll see the html is nothing special, the good stuff happens in the CSS. It’s best viewed with Safari, Firefox 3 or Google Chrome although Internet Exploder and Opera are worth a look.

What do you think — other than round corners could there be other uses for border radius?