Stéphane Caron – No Margin For Errors http://www.no-margin-for-errors.com Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.5 We must be careful if we don’t want to make HTML5 look bad. http://www.no-margin-for-errors.com/blog/2011/12/06/we-must-be-careful-if-we-dont-want-to-make-html5-look-bad/ http://www.no-margin-for-errors.com/blog/2011/12/06/we-must-be-careful-if-we-dont-want-to-make-html5-look-bad/#comments Tue, 06 Dec 2011 16:38:43 +0000 http://www.no-margin-for-errors.com/?p=1033

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.

HTML5?

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.

]]>
http://www.no-margin-for-errors.com/blog/2011/12/06/we-must-be-careful-if-we-dont-want-to-make-html5-look-bad/feed/ 15
Occupy Flash…really? http://www.no-margin-for-errors.com/blog/2011/11/22/occupy-flash-really/ http://www.no-margin-for-errors.com/blog/2011/11/22/occupy-flash-really/#comments Tue, 22 Nov 2011 19:41:26 +0000 http://www.no-margin-for-errors.com/?p=1019

Related Posts

No related posts. ]]>
Occupy Flash is probably one of the dumbest movement I’ve seen in a while. Don’t get me wrong, I fully understand that choosing Flash for web development is not exactly the best choice you can make. The problem is that this campaign is totally useless and it’s probably more harmful than good.

So bad

You can’t simply start a campaign stating that Flash has become useless and then ask the user to uninstall it from his computer, this will NOT make a better world. Truth is, Flash is not holding anyone or anything back. You (as a web developer) don’t want to use it? Then just don’t, this will be a much stronger statement than uninstalling it from your mom’s computer.

It’s one thing to try to explain to someone technical the strain that Flash can put on a computer, but trying to explain this to a non-technical person just won’t work. Flash is still being used quite a lot here and there and HTML5 fallbacks (for the lack of a better word) are not always present.

 

Users don’t care.

What’s the point of asking people to uninstall Flash…really? It will only make the experience worse and in no way improve it. It’s true that it’s sometime needed to ask people to upgrade. And upgrade is the keyword, if you take Internet Explorer 6 or 7 for example, these are really hurtful for the web and this really hold us back. But Flash? It’s optional! You can be sure that if you uninstall it today you’ll be pissed as hell.

Rebrand…please, or just die.

We do not need another movement to raise awareness around Flash, the ones who can really make a difference are the ones who make the web. These people already know all the ups and downs of Flash and if they don’t they shouldn’t be in the industry.

Just work the other way around, instead of asking users to uninstall Flash, ask developers to stop supporting it, but then again, we all know it.

]]>
http://www.no-margin-for-errors.com/blog/2011/11/22/occupy-flash-really/feed/ 12
I’ve just been busy http://www.no-margin-for-errors.com/blog/2011/08/10/ive-just-been-busy/ http://www.no-margin-for-errors.com/blog/2011/08/10/ive-just-been-busy/#comments Thu, 11 Aug 2011 01:00:53 +0000 http://www.no-margin-for-errors.com/?p=992

Related Posts

No related posts. ]]>
Don’t worry, prettyPhoto isn’t dead. I’ve just been very busy these past months and didn’t put as much time as I wish I did. I’ve just release an update, check the project page for the complete release notes: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Why was I busy?

I was working on an iPhone app! Most of my nights were spent learning Objective-C and the intricacies of the language.

The app is called “Nabit” and it allows you to make sequence shots quickly and easily. I personally think is pretty damn cool, but you could say I’m biased, so I’ll let you judge by yourself:  http://nabitapp.co/

It has been quite challenging so far, in the past month I had to learn how to wireframe an iPhone app from start to finish, learn Objective-C, build proof of concept prototypes and finally build the whole thing. The app is still young and we plan on improving it at a steady pace, so if you have any comment, don’t hesitate!

Here’s what it can do:

]]>
http://www.no-margin-for-errors.com/blog/2011/08/10/ive-just-been-busy/feed/ 14
Tutorial: Open prettyPhoto from an image map. http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/ http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/#comments Tue, 19 Apr 2011 12:44:49 +0000 http://www.no-margin-for-errors.com/?p=960

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">
$(document).ready(function(){
  $("area[rel^='prettyPhoto']").prettyPhoto();
});
</script>

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">
</map>

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.

]]>
http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/feed/ 50
prettyPhoto 3.1.1: Deeplinking, social sharing, win http://www.no-margin-for-errors.com/blog/2011/04/13/prettyphoto-3-1-1-deeplinking-social-sharing-win/ http://www.no-margin-for-errors.com/blog/2011/04/13/prettyphoto-3-1-1-deeplinking-social-sharing-win/#comments Thu, 14 Apr 2011 00:21:34 +0000 http://www.no-margin-for-errors.com/?p=938

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: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!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.

]]>
http://www.no-margin-for-errors.com/blog/2011/04/13/prettyphoto-3-1-1-deeplinking-social-sharing-win/feed/ 35
prettyPhoto 3.1: New theme and ajax support http://www.no-margin-for-errors.com/blog/2011/03/31/prettyphoto-3-1-new-theme-and-ajax-support/ http://www.no-margin-for-errors.com/blog/2011/03/31/prettyphoto-3-1-new-theme-and-ajax-support/#comments Fri, 01 Apr 2011 00:40:05 +0000 http://www.no-margin-for-errors.com/?p=928

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.

]]>
http://www.no-margin-for-errors.com/blog/2011/03/31/prettyphoto-3-1-new-theme-and-ajax-support/feed/ 14
INK is ready for prime time! http://www.no-margin-for-errors.com/blog/2011/03/17/ink-is-ready-for-prime-time/ http://www.no-margin-for-errors.com/blog/2011/03/17/ink-is-ready-for-prime-time/#comments Thu, 17 Mar 2011 17:14:42 +0000 http://www.no-margin-for-errors.com/?p=887

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 »

]]>
http://www.no-margin-for-errors.com/blog/2011/03/17/ink-is-ready-for-prime-time/feed/ 1
INK – Own your content http://www.no-margin-for-errors.com/blog/2011/03/11/ink-own-your-content/ http://www.no-margin-for-errors.com/blog/2011/03/11/ink-own-your-content/#respond Fri, 11 Mar 2011 20:57:14 +0000 http://www.no-margin-for-errors.com/?p=841

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
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!)

]]>
http://www.no-margin-for-errors.com/blog/2011/03/11/ink-own-your-content/feed/ 0
Introducing: INK – Own your content http://www.no-margin-for-errors.com/blog/2011/03/11/introducing-ink-own-your-content/ http://www.no-margin-for-errors.com/blog/2011/03/11/introducing-ink-own-your-content/#respond Fri, 11 Mar 2011 20:56:06 +0000 http://www.no-margin-for-errors.com/?p=837

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 »

]]>
http://www.no-margin-for-errors.com/blog/2011/03/11/introducing-ink-own-your-content/feed/ 0
prettyPhoto 3.0.2: Much needed bug fixes http://www.no-margin-for-errors.com/blog/2011/03/07/prettyphoto-3-0-2-much-needed-bug-fixes/ http://www.no-margin-for-errors.com/blog/2011/03/07/prettyphoto-3-0-2-much-needed-bug-fixes/#comments Tue, 08 Mar 2011 01:30:01 +0000 http://www.no-margin-for-errors.com/?p=781

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.

Fixes/Changes

  • 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

 

]]>
http://www.no-margin-for-errors.com/blog/2011/03/07/prettyphoto-3-0-2-much-needed-bug-fixes/feed/ 18