javascript – Stéphane Caron – No Margin For Errors Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 We must be careful if we don’t want to make HTML5 look bad. Tue, 06 Dec 2011 16:38:43 +0000

Related Posts

No related posts. ]]>
There are some thing we all know we must never do with a technology. For example, we all know we must not do a welcome page in flash anymore, we also know that little animated gif envelopes are banned from contact forms.

These examples have done nothing more than give us content to mock at these poor technology choices.

There seems to be general consensus about these and quite frankly, they are banned because they either don’t bring anything more to the user or are plain ugly.

Let’s be careful with how we handle all these new APIs that are available to us.

Popup games

I think they should now enter the hall of fame of bad use of technology. I just came across this FWA website of the month today and god is it bad.

It uses popups to create a game that works pretty much the same way The Incredible Machine worked. The concept is not bad at all, but the execution is where it fails.

The programmers did a very good job, all the cases are well handled and the game seems to work as intended. That’s not where the problem is.

I’ve tried to play with it for a good 15 minutes, I got the hang of it but the technological choice was really in the way, making it hard to enjoy the game itself.

Good technology is not magic dust 

We always need to be careful when we make a technological choice, we have all these great tools we can use today but because we can use them does not mean we should.

Technology should enhance user experience, not get in the way. Many times while playing that game I clicked mistakenly on the background causing all the popups to go behind the main screen forcing me to press the “restart” button. That’s a good thing the programmers thought of implementing that functionality.

Also, every time you load a level, you have these popups that loads in the bottom left of the screen and then are repositioned, you get the feeling that so much stuff happen at the same time that you have no clue where you should focus.

In now way did the popups enhance the experience. This type of experience worked well with The Wilderness Downtown and that’s probably because you could enjoy the site passively not having to interact with anything while watching the videoclip.


Where it hurts the most is that this site is seen as a technological demo of what HTML5 can do. What’s the takeaway after playing this game? “HTML5 can move popups and play videos!”. Really I feel we’ll laugh at that 5 years down the road.

]]> 28
Tutorial: Open prettyPhoto from an image map. Tue, 19 Apr 2011 12:44:49 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here’s one question that keeps coming back and here’s the ultimate guide to open prettyPhoto from an image map. The solution is really easy and pretty straightforward but let me break it up for you to make sure it’s clear.

Demo »Other tutorials »prettyPhoto page »

The setup

The setup required to open prettyPhoto from an image map is nearly the same as for any other type of content. You first need to include the scripts and CSS on which prettyPhoto rely. To do so, you just need to copy the following code in the head section of the page(s) on which you want to install prettyPhoto.

<script src="path/to/your/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="path/to/your/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="path/to/your/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

If you are accustomed to working with prettyPhoto, you might have noticed that this hasn’t change. The only difference is in the initialization and this is what I’ll discuss next.

The initialization

This is where you need to make one slight change to be able to open prettyPhoto from image map. By default, when you initialize prettyPhoto, you target anchors (<a> element). Since image maps uses the <area> tag, you need to modify the initialization target to area. This can be done in the following way, just put this script before your </body> closing tag.

<script type="text/javascript" charset="utf-8">

The image map

Now all you need to do is add the attribute rel and set it to “prettyPhoto” on all you <area> tags. prettyPhoto will then open the image linked. Note that you can use rel=”prettyPhoto[you_gallery_name]” to open the images in a gallery.

<img src="images/thumbnails/image_map.jpg" width="387" height="85" usemap="#image_map" border="0">
<map name="image_map">
  <area rel="prettyPhoto[image_map]" shape="rect" coords="6,11,72,73" href="images/fullscreen/1.jpg">
  <area rel="prettyPhoto[image_map]" shape="rect" coords="84,7,148,73" href="images/fullscreen/2.jpg">
  <area rel="prettyPhoto[image_map]" shape="rect" coords="161,8,226,73" href="images/fullscreen/3.jpg">
  <area rel="prettyPhoto[image_map]" shape="rect" coords="236,7,301,76" href="images/fullscreen/4.jpg">
  <area rel="prettyPhoto[image_map]" shape="rect" coords="311,8,380,76" href="images/fullscreen/5.jpg">

Bottom line

The only difference resides in the initialization. If you want to customize prettyPhoto using custom settings, you can do it just you would have done it any other way.

If you have any question, feel free to comment.

]]> 51
prettyPhoto 3.1.1: Deeplinking, social sharing, win Thu, 14 Apr 2011 00:21:34 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here’s yet another update that I’m quite proud of. This version introduces 2 new features.

Project Page »Support forums »

First new feature, deeplinking

From now on, every time a prettyPhoto window is opened, the url will be updated. That means that you will be able to share a link to a specific picture. Just follow this link for an example:!prettyPhoto[pp_gal2]/0/

As usual, this feature is customizable and can be disabled if you don’t wish to use it. The setting is called “deeplinking”. A complete list of settings can be found one the documentation page.

Second new feature, social sharing tools

Social is big, we all know it. So I’ve added social sharing tools straight in prettyPhoto. These tools in conjonction with the new deeplinking feature, allow you to share specific prettyPhoto picture all over the social web.

As usual, this feature is customizable and can be disabled if you don’t wish to use it. The setting is called “social_tools”. You can either customize the social tools markup of set it to false to disable the feature. A complete list of settings can be found one the documentation page.

Bug fixes

This version also fixes several bug, here’s the complete list:

  • Fix IE7 overlay_gallery overlay bug
  • Fix bug when opening percent based media then opening normal sized media, the second opened image wouldn’t be resized.

If you need any support, please visit the support forums.

]]> 36
prettyPhoto 3.1: New theme and ajax support Fri, 01 Apr 2011 00:40:05 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here’s yet another update to prettyPhoto. It’s quite a big one too, I’ve decided to change the default theme and add ajax support…finally.

The theme is a collaboration between Orman Clark and Christian Budsched (Kriesi). I just saw it being used in a WordPress theme and found it so nice that I had to make it the default theme of prettyPhoto. So Orman and Christian, thank you very very much for saying yes!

Here’s the complete changelog:
Added: Ajax support.
Fixed: Long title would cause the box to jump up a bit.
Fixed: Namespaced scroll event.
Fixed: Browsing throught picture wouldn’t bring you back to the end when clicking previous while being on the first picture.
Fixed: Resize bug.
Fixed: Issue where the inline gallery would cause a preloading of the iframes.
Optimized: Gallery injection script, now 30% faster.
Changed: The YouTube embed code for the new iframe embed.
Changed: Slideshow are now enabled by default.

As usual, head over to the project page to download the latest version.

]]> 17
INK is ready for prime time! Thu, 17 Mar 2011 17:14:42 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Lots has changed since I’ve released the plugin last week. I’ve added bunch of functionnality, made sure the users are able to disable it, fixed some layout bugs. In short, I worked a lot on it!

I now get the feeling it’s ready for primetime, I’ll start promoting it around and see what the response is. Feel free to do the same.

As usual, don’t hesitate if you have any recommendation to make or any problem with the plugin, I’ll be glad to help you out 🙂

Visit the project page »

]]> 8
Introducing: INK – Own your content Fri, 11 Mar 2011 20:56:06 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here’s my latest plugin. This time I wrote it in pure javascript because I didn’t want it to be tied to a library.

What is INK?

INK is a new way to own your content. It’s a well known fact, the content you produce can be shared all around the web and in a very large number of ways. One of the most common ways is to simply copy the content and paste it wherever we want it to be shared. That’s fair, but there’s one problem; most of the time you don’t get credited for the content you have produced and the shared content is given out of context without any way to go back to the source (your site!)

Where to get it?

As usual, head over the project page for all the sweet details.

Project page »

]]> 6
prettyPhoto 3.0.2: Much needed bug fixes Tue, 08 Mar 2011 01:30:01 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I know, I haven’t been really active lately, but don’t worry I was working on prettyPhoto for the past several months. This new version does not boast any new feature (*sad face*), but it does contains a lot of bug fixes. It is a recommended update for anyone running prettyPhoto on their site.

Where can I get it?

Head over the project page to download this new version 🙂

You can also follow the project on github to be up to date on the latest prettyPhoto development

Help it broke my site!

As usual, if you have any problem with this new release, please head over the support forums where you will be taken care of.


  • Fixed: The overlay gallery is now only displayed on rollover to resolve issue where it always showed during slideshow
  • Fixed: Made the filetype check case insensitive
  • Fixed: Percent based sizes to be independant
  • Fixed: Issue with trailing characters after the filename
  • Fixed: An issue when opening big images in inline content
  • Fixed: Make sure the content never scroll over the top
  • Fixed: Initial prettyPhoto position
  • Fixed: Slideshow autoplay when closing – reopening prettyPhoto.
  • Fixed: Scroll issue in IE
  • Fixed: Width issue in IE
  • Fixed: prettyPhoto default size
  • Fixed: image preloading and image injection code
  • Fixed: Resize icon behavior
  • Changed: prettyPhoto now loops through the gallery instead disabling the next arrow on the last item
  • Changed: Namespaced events to play better with other plugins.
  • Changed: Keyboard event to only preventDefault on actions used by prettyPhoto


]]> 19
JavaScript string localization done right Thu, 02 Dec 2010 02:38:41 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I live and work in a bilingual environment and most of the things I work on needs to be localized.

While it’s easy to do localization on the server side, it’s not so easy on the client side. There are several solutions available online, but most of the times they are either over-complicated or contains all the languages strings in one file, none of them really cut it for me.

Since I’m obsessed with optimization and performance in the things I develop, I tried to come up with the best solution in that sense. Please note that this method works well if you have a back-end to feed you the localized strings, if you have to do localization that usually means you have some kind of framework running behind the front-end.

So basically, I always only include one localized JavaScript file in my projects, let’s call it “localization.php” and here’s a sample:

<?php header("Content-type: text/javascript"); ?>

var localized_errors = {
	connect : "<?php echo _('Oops! We couldn\'t connect you to the server') ?>",
	loging : "<?php echo _('Oops! We couldn\'t log you onto the server') ?>"

var localized_label = {
	previous : "<?php echo _('Previous') ?>",
	next : "<?php echo _('Next') ?>"

Now you might have noticed that it’s a PHP file that contains JavaScript, the key here is to make sure that this PHP file is served as JavaScript using the correct header.

Note the the variable scope is global so these are accessible from any javascript file elsewhere in my projet.

Now if you looked closely, you’ll see the I reference the gettext PHP function. If you’ve never heard of it, I highly suggest you read into it, if you’re already using something similar, you should see where I’m going 🙂

The gettext function basically takes a label for parameter and then go look for that label in the proper translation table. So all of the hard work is done on the server side, none of it really happen in the JavaScript.

Here’s what the browser actually see:

var localized_errors = {
	connect : "Oops! We couldn't connect you to the server",
	loging : "Oops! We couldn't log you onto the server"

var localized_label = {
	previous : "Previous",
	next : "Next"

See that? It’s a nice JavaScript file containing two JSON objects, nothing else. It cannot get easier than this.

Now to reference the labels from anywhere in you application you only need to reference them like so:


Now let me explain why it’s better to use that method.

The usual localization solutions for JavaScript are done using a JSON object containing all the localized labels, that means that not only do you have to maintain your usual localization tables, but you also need to maintain it for your front-end and experience tells me that you’re just adding another potential breaking point.

Also, if you use the “traditional” method and you have 3 languages, your localized JavaScript is three times bigger as it should be, bigger is not alway better 😉

So that’s it, let me know what you think of if you have any other better method.

]]> 15
prettyPhoto 3.0.1: Bug fix for jQuery 1.4.4 Thu, 25 Nov 2010 02:29:17 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
It occurred to me that jQuery 1.4.4 broke the API functionality of prettyPhoto. So I’ve just patched it and updated the files.

Head over the project page to download the latest version.

]]> 33
Tutorial: Opening custom content in prettyPhoto Tue, 28 Sep 2010 12:59:20 +0000

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Over time it became clear that people want to use prettyPhoto for a very wide variety of things. prettyPhoto is a jQuery lightbox that already opens images, videos, flash. While I want to keep the code as small as possible and cover most of the people needs, I also want to make sure everyone is happy with prettyPhoto. That means I cannot add every request to the code base. That’s why I’ve included a new setting called “custom_markup” in the latest release. This tutorial will cover the basics on how to use this new setting and make the most of it.

Please note that in order to be able to tinker with prettyPhoto to achieve similar results, you need some basic JavaScript knowledge.

After you have completed that tutorial you should be able to open a Google Map in prettyPhoto. As usual, if you have any questions, feel free to leave a comment.

Demo Download

The prettyPhoto setup

The first thing you need to do is download the latest version of prettyPhoto that can be found here. Then you need to initialize it just like you would for any other use, only difference is that need to pass an additional parameter, the “custom_markup” parameter. As the name state, this parameter should container the markup needed for the content you want to open in prettyPhoto. This content needs to have sizes defined or else the content wont resize properly.

Here’s an example using Google Map:

	custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>'

So now, in the content area of prettyPhoto, you will find a div with the id “map_canvas“.

The Google Map setup

Since this demo will use Google Map, you also need to make sure that all the JavaScript needed is included in the page. In that case, the following code is needed.

<!-- Google Maps Code -->
<script type="text/javascript"
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    var map = new google.maps.Map(document.getElementById("map_canvas"),

<!-- END Google Maps Code -->

As you might have noticed, the code needed to initialize Google Map is wrapped into an “initialize” function. This function will be used in the next step.

The magic

So prettyPhoto has been initialized, the code needed for Google Map is there, what now? First you will need to modify the prettyPhoto initialization settings, you will use the “changepicturecallback” setting. This setting is a callback, a function that’s called after the prettyPhoto code has been executed. In that case, the callback is called every time prettyPhoto is opened or every time a new picture is shown. So what you want to do is call the Google Map “initialize” function. Here’s how:

	custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
	changepicturecallback: function(){ initialize(); }

You then only need a link to trigger the opening of prettyPhoto. Here’s what it looks like:

<a href="#?custom=true&amp;width=260&amp;height=270">Open a google map</a>

All the parameters are required or else the opening won’t work.

Bottom line

So that’s how you open custom content in prettyPhoto. For working examples, check out the demo pages or download the package.

Demo Download

]]> 67