JoshEmerson.co.uk

The Responsive Process Permalink

Posted 1 month ago

I was fortunate enough to be at the Responsive Summit last week. Unfortunately many of those who weren’t there responded to this very negatively on Twitter and described the event as elitist. Suffice it to say, I understand where you are coming from, but it just wouldn’t have been possible to have everyone around one table. I think Josh Brewer did an excellent job channeling the questions that were asked from the wider community and submitted on the responsive summit website.

So what knowledge did I gain from this day? We discussed every detail of what it means to create a responsive website. We even discussed future tools for designing websites which respond to their context and new file formats for images which could responsively enhance themselves. I’m really excited about the future of the web, but how can we improve our work using only the tools available today? Read More

Tagged: Responsive Design

Lettering.js without any dependencies Permalink

Posted 2 months ago

The plugin lettering.js allows for some neat typographical designs but I prefer not to have to use a specific framework in order to use a javascript plugin.

I’ve made a version of this excellent plugin which only uses javascript and has no dependencies. Feel free to use it on your next typographical endeavour.

Often I choose to use pure javascript for websites and it’s a shame when I have to load an entire framework for a single plugin. I hope this comes in useful for others too.

Just pass in an element, or an array of elements like so:

lettering(document.getElementById('id'));

Download it from GitHub.

Tagged: Code, Javascript, jQuery

Set your headers! Permalink

Posted 10 months ago

I’m now setting expiry headers and gzipping content on this website. I was amazed at how easy it is to get an ‘A’ rating on YSlow.

I’ve used the following .htaccess rules for my website which I pulled from HTML5 Boilerplate and modified. I suggest you do the same as the boilerplate is a great starting point – it includes almost every .htaccess rule you will ever need, and then some.

# Expiries Headers
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/x-icon              "access plus 1 week"
  ExpiresByType image/gif                 "access plus 1 week"
  ExpiresByType image/png                 "access plus 1 week"
  ExpiresByType image/jpg                 "access plus 1 week"
  ExpiresByType image/jpeg                "access plus 1 week"
  ExpiresByType text/css                  "access plus 3 days"
  ExpiresByType application/javascript    "access plus 3 days"
  ExpiresByType text/javascript           "access plus 3 days"
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
  FileETag None
</IfModule>

# Gzip Compression
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
</IfModule>
</IfModule>

These settings will improve the speed of your website significantly, and as it’s so easy, there’s no reason not to. I almost wish there were sensible defaults built into servers, imagine how much faster the internet would be.

Tagged: Code

Hiding fallback content Permalink

Posted 10 months ago

Hiding fallback content using javascript is a very common technique. It means that any scenario where javascript isn’t available is automatically handled.

I’ve noticed that on many websites, this fallback content is briefly shown, before the javascript has downloaded and run. It’s not a huge problem, but it’s not ideal. So I’ve created a very simple script that ensures fallback content is only revealed to those without javascript (or when the javascript fails to run).

The first bit of the script is added immediately after the opening <body> tag:

<script>
document.body.className+=' has-js';
var hasjsrm=setTimeout(function(){document.body.className=document.body.className.replace(' has-js','')},5000);
</script>

The first line of javascript adds the class “has-js” to the body. Your stylesheet should hide fallback content that is a child of “.has-js”. This content will immediately be hidden. There’s another scenario we are handling in the second line of javascript; what if the main javascript file doesn’t download, or has a parse error? This line will remove the class “has-js” after 5 seconds.

Now, in our main javascript file, on the very last line, we add this code:

clearTimeout(hasjsrm);
$('body').addClass('has-js');

The first line will cancel that timeout, so the class isn’t removed again. The second line will add the class again incase it was too late. If you aren’t using jQuery for your project, use this script instead:

clearTimeout(hasjsrm);
document.body.className+=' has-js';

That’s all there is to it; pretty simple, and yet bulletproof. If the javascript doesn’t run within 5 seconds the fallback content will be revealed. Otherwise, users will never see this content. If 5 seconds isn’t long enough for your script to run then increase the duration.

You can grab the code and see an example at has-js on GitHub.

Tagged: Code, Javascript

Base64 and the tiling background Permalink

Posted 10 months ago

Any website that uses tiling background images will experience this issue. Whilst the page is loading, the content is displayed before the background images has downloaded, and so the site may look similar to this:

In some cases you may prefer this behaviour of content being shown first, and background images loaded asynchronously. This can make a website look rather odd however, and is very distracting because the site changes as it loads.

If you embed your background images within the CSS then they will be downloaded with the CSS, and nothing will be displayed until both the CSS and background images are downloaded. The whole site will appear at once, although it will have taken longer to display at all. Because fewer HTTP requests are made by embedding images, some sites can experience a performance boost.

It’s fairly easy to embed images into CSS, you will need to base64 encode them. I used an online converter to do this. Then take the string that your converter supplies and paste it into your CSS.

This CSS:

background: #FFF url(background.png);

Becomes this:

background: #FFF url(data:image/png;base64,iVBORw[...]SuQmCC);

This technique won’t work for IE6 and IE7, so we need a conditional comment:

<!--[if lte IE 7]>
    <link rel="stylesheet" class="ie7.css" />
<![endif]-->

In that CSS, you should link to the images rather than embedding them. The downside of this technique is that IE6 and IE7 will end up downloading the images twice, but all other browsers benefit.

I’m going to be using this technique on an upcoming project. You can see it in action on MobileMe.

Tagged: Code, CSS, Tutorial

History API: tips & tricks Permalink

Posted 11 months ago

I’ve just made an update to my website so that page navigation takes advantage of the brand new history api which allows us to push history states to the browser without using hashes (like new twitter). There are great advantages of using the history api instead of hashes – your visitors see the same version of your site as search engines do so there is only one URL for any given page. Adding this functionality on to an existing site meant that I automatically used progressive enhancement – those that don’t have a modern browser, or even don’t have javascript can still use my website.

Along the way I encountered some hurdles and came up with some pretty nifty solutions. I thought I’d share some of them.

Tagged: Code, HTML5, jQuery, Tutorial

Working on a startup project Permalink

Posted 1 year ago

I’ve been working on Fontdeck since October 2010. This was my first experience of working on a startup project and it’s been an incredible one.

Fontdeck was created as a joint project between Clearleft and OmniTI, it lets you use custom fonts on your website and sorts out all the fiddly stuff.

Since joining the project, I’ve been involved in refreshing every single page of the website and generally improving the experience. There’s a great sense of satisfaction watching something take shape in this way, and getting to leave my mark on a site as prominent as Fontdeck is a huge privilege.

Because this project is internal to Clearleft, we have complete control over it. If I’m not sure which decision to make I just walk over to Paul, Andy or Rich and we can have a quick chat, ensuring that we make the best decision. When compared to typical client relationship, where communication is much more complex and often inefficient, we have a good thing here.

I feel a small team where every person can offer some specific skill set is ideal for Fontdeck; there’s real momentum to the work going on. Perhaps with the pace of the internet being so incredibly fast, lean and mean is often a huge advantage.

Working in the same room as all the other guys at Clearleft, I also get to see life on the other side of the pond. When working with large corporate clients, communication is key. It can literally make or break a project. I think the guys handle this incredibly well, and I’m secretly learning from them all the time!

Tagged: Clearleft, Personal, Thoughts

HTML5 without the shiv Permalink

Posted 1 year, 3 months ago

When it comes to the new HTML5 elements, most browsers can handle them just fine. All versions of Internet Explorer prior to IE9 won’t create dom structure for these elements. This seems like a bit of an issue.

Remy Sharp has created HTML5 shiv, a JavaScript file that enables these new elements, ensuring they affect the DOM when they appear in HTML. Whilst this script does an excelent job solving this issue, I feel that javascript should be used to add functionality to a page, it shouldn’t be required in order for a page to render.

Sometimes it’s possible to create a site that uses the HTML5 elements for semantics, but doesn’t rely on them for styling.

Take the following example:

<header>
  <ul>
    <li><a>Section 1</a></li>
    <li><a>Section 2</a></li>
    <li><a>Section 3</a></li>
  </ul>
</header>

We could style the <header> in some way, but in order to do that we would need to use HTML5 shiv. Or we could apply the styling to the <ul> instead. If we do that, we don’t need the shiv at all.

I think we should use the shiv where necessary, but try not to rely on it. Some great HTML5 sites that use HTML5 without using HTML5 shiv:

Fontdeck
This site

Ok, that list is looking a bit sparse, if you’ve built an HTML5 site without javascript, or know of one, let me know.

Tagged: Code, HTML5, Tutorial

Fontdeck stuff Permalink

Posted 1 year, 3 months ago

I’ve been working as an intern at Clearleft for the past 2 months, and I’m having a great time.

As an intern, I had images of making endless cups of tea, and although I have attemted to fill that duty (sorry for the undrinkable tea Jeremy!) I’ve also been let loose on some pretty exciting stuff.

Firstly, I got to turn Paul Lloyds great designs into a reality on the Fontdeck blog, and just yesterday, we rolled out some new pages for viewing typefaces and fonts on Fontdeck.

I’m so glad to be given this opportunity, the guys at Clearleft have put a lot of trust in me. This is the shape of things to come, and I’m looking forward to getting more of Paul’s great designs out there.

Tagged: Clearleft, Project, Website

Using jQuery as a fallback for CSS3 transitions Permalink

Posted 1 year, 4 months ago

Everyone is keen to get started with CSS3, and transitions are a great way to animate a hover effect or any change between CSS properties. This works great for people with modern browsers, but there are quite a few people who may miss out on the greatness.

As far as I can work out, CSS3 transitions are implemented on the following browsers:

Safari 4+ (introduced 2008)
Firefox 4+ (2009)
Google Chrome 7+ (introduced 2010)
Opera 10.50+ (introduced 2010)

I may be wrong with a couple of versions (where does google keep it’s version history?) but did you spot the glaring omission?

No single version of internet explorer, not even 9 supports transitions. I’m sure they will implement this in the future, but right now there are a lot of people who won’t get the full experience.

So what can we do about this? We could just stick with jQuery for animating, but this seems kind of like admiting defeat. What we need is some gracefull degradation for browsers that don’t support CSS transitions.

Modernizr is a great script for detecting which features a browser supports, but it seems like overkill at 10kb. I took the source from GitHub and reduced it as much as possible. The resulting script is 283 bytes after compression, much better!

Uncompressed version:

function cssTransitions() {
	m = document.createElement('z');
	s = m.style;
	function test_props( p ) {
		for ( var i in p ) {
			if ( s[ p[i] ] ) {
				return true;
			}
		}
		return false;
	}
	function test_props_all( prop ) {
		d = 'Webkit Moz O ms Khtml'.split(' ');
		var u = prop.charAt(0).toUpperCase() + prop.substr(1);
		e = (prop + ' ' + d.join(u + ' ') + u).split(' ');
		return test_props( e );
	}
	return test_props_all( 'animationName' );
}

After compressing with Closure Compiler:

function cssTransitions(){m=document.createElement("z");s=m.style;return function(f){d="Webkit Moz O ms Khtml".split(" ");var a=f.charAt(0).toUpperCase()+f.substr(1);e=(f+" "+d.join(a+" ")+a).split(" ");a:{for(var b in e)if(s[e[b]]){f=true;break a}f=false}return f}("animationName")}

This function creates an element in the dom and tries to apply the css “animationName” to it. We can use it like this:

if ( !cssTransitions() ) {
	// Browser doesn't support CSS Transitions
	// Let's fall back to jQuery instead
}

So, if you had the following CSS transition:

.animate a:link, .animate a:visited {
	opacity: 0.75;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	-webkit-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}
.animate a:hover, .animate a:focus {
	opacity: 1;
}

Then you could fall back with:

if ( !cssTransitions() ) {
	$('.animate a').hover(function() {
		$(this).css({opacity:0.75}).fadeTo(300, 0.5);
	}, function() {
		$(this).css({opacity:1}).fadeTo(300, 0.75);
	});
}

We have to set the CSS before transitioning it in order to prevent the hover state from appearing before we transition it.

This article seems very code heavy, but I can’t leave you without my last piece of the puzzle; color animation

jQuery UI comes with color animation, but again we don’t need all the code. I got the source from GitHub and grabbed just what I needed, so if you want to animate color, all you’ve got to include is:

$.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","borderColor","color","outlineColor"],function(f,a){$.fx.step[a]=function(b){if(!b.colorInit){b.start=getColor(b.elem,a);b.end=getRGB(b.end);b.colorInit=true}b.elem.style[a]="rgb("+Math.max(Math.min(parseInt(b.pos*(b.end[0]-b.start[0])+b.start[0],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[1]-b.start[1])+b.start[1],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[2]-b.start[2])+b.start[2],
10),255),0)+")"}});
function getRGB(f){var a;if(f&&f.constructor==Array&&f.length==3)return f;if(a=/rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(f))return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)];if(a=/rgb(s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*)/.exec(f))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55];if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f))return[parseInt(a[1],16),parseInt(a[2],
16),parseInt(a[3],16)];if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)];if(/rgba(0, 0, 0, 0)/.exec(f))return colors.transparent}function getColor(f,a){var b;do{b=$.curCSS(f,a);if(b!=""&&b!="transparent"||$.nodeName(f,"body"))break;a="backgroundColor"}while(f=f.parentNode);return getRGB(b)}

Slightly heavier than the Modernizr code snippet, but still not bad at 1kb.

So that’s it. Hope you find some use for this. Now we can use CSS3 and sleep easy.

Tagged: Code, CSS3, jQuery, Tutorial

Older Posts

RSS
Older Posts