Jean-Pierre Pommet

HTML5 Forms Validation in Firefox 4 - Mounir Lamouri's Blog

Sun, 14 Nov 2010 21:47:47 +0100

HTML5 Forms Validation in Firefox 4

By Mounir Lamouri on Wednesday, November 10 2010, 18:00 - Permalink
HTML5 Forms specifications introduce some new input types, attributes and other awesome features. One of the transversal features is native browser-side form validation.
For Firefox 4, we tried to focus on that feature and ship it as complete as possible. All following features descriptions are available with Firefox 4 beta 7 except some which are going to be available in following betas (it’s clearly specified when that’s the case).

Why browser-side form validation?

The idea behind form validation in HTML5 Forms is to prevent using JavaScript to check basic stuff in your forms: Is this email address valid? Is this field filled in? Do passwords match? These are often checked in JavaScript when you click on the submit button. You might write your own javascript code or use a library but that will always be a repetitive, boring and error-prone task. With forms validated by the browser, you no longer have to care about those steps, just write simple HTML.
For the user, the validation being done by the browser is a guarantee of quality with better accessibility and consistency.

How can I make my form using this feature?

If you use new attributes related to form validation or new input types with internal validation, you will automatically opt in for form validation by the browser (if supported by the browser). All new input types introduced with HTML5 forms except search and tel benefit from internal validation.
Firefox 4 is going to support email and url and the validation will check if the value is a valid email or url respectively.
In addition, these attributes will provide an automatic validation mechanism:

required: a required form control will be invalid if its value is empty. This is working for <input> and <textarea>. If set on a <input type=’checkbox’>, the element will have to be checked. On a group of <input type=’radio’>, one of the radio button will have to be selected. If set on a <input type=’file’>, a file will have to be selected.

<select> will accept the required attribute in Firefox beta 8 (see What’s next?).
<input required> <textarea required></textarea>
pattern: you can specify a regular expression ^[1] to check the element’s value. This can be used only on some <input> types (text, search, tel, email and url). When you use pattern, it’s highly recommended to use the title attribute to describe the pattern.
<input type='tel' pattern='\d\d \d\d \d\d \d\d \d\d' title="Write a phone number in the format 'XX XX XX XX XX'"> <input type='email' pattern=".*@company\.com" title="Enter you company email address">
maxlength: maxlength can already be used with Firefox 3.6 but it will only block the keyboard inputs made by the users on an <input> so they can’t type more characters than the value specified in the maxlength attribute. In Firefox 4 beta 7, this applies on <textarea> too. In addition, if the value is set via .value, the element will become invalid if the new value has a length bigger than maxlength.
<input maxlength='10'> <textarea maxlength='140'></textarea>
How can I opt out?

You should probably think about that twice, If you have your own system for form validation, you should probably try to disable it when the browser can manage form validation instead of disabling the validation by the browser for your own system. However, there might be other reasons why you would want to disable form validation. Good reasons might be if you want to use some new input types but you don’t care about checking the validity.
The simplest way to opt out is to add the novalidate attribute to your <form>. You can also set formnovalidate on your submit controls. You should prefer formnovalidate than novalidate if you want to have one submit control with form validation and another without.
Detecting this feature is not really easy given that you want to have a message being shown but you can’t know for sure if the browser is going to show something even if form validation seems to be supported. I will try to write another post about that later.

How can I specify my validity rules?

You can make an element invalid by calling .setCustomValidity(errorMsg). Doing some checks on oninput() and calling .setCustomValidity() should be enough in most situations.
.setCustomValidity() takes in parameter the error message. You can pass the empty string to .setCustomValidity() if you want to remove the custom error.
With this method, you can check that two password fields have the same value very easily:
<script> function checkPassword(p1, p2) { if (p1.value != p2.value) { p2.setCustomValidity('passwords do not match'); } else { p2.setCustomValidity(''); } } </script> <input type='password' id='p1'> <input type='password' onfocus="checkPassword(document.getElementById('p1'), this);" oninput="checkPassword(document.getElementById('p1'), this);">
How can I change the text of the error message?

Each error types have a string associated describing the error. For example, if an input element is required and has no value, the message will be “Please fill out this field”. Firefox will try to be as clever as possible to show the best error message but you might want to override it in some situations where the rules are very complex. For example:
<input type='email' required pattern='.*@company\.com'>
You might prefer to have a simple “Please, enter your corporate email address.” instead of three generic messages depending of the unfulfilled constraint.
To help with that, we have introduced a non-standard x-moz-errormessage ^[2] which let you specify an error message for a given form control. Regardless of the error, if x-moz-errormessage is present and different from the empty string, its value will be used as the error message instead of the default one.
This is non-standard so it should be used carefully. See http://www.w3.org/Bugs/Public/show_…. In addition, you should know that .setCustomValidity() lets you indirectly set your own error message but we do not really like that because you will let the browser think that the element is suffering from a custom error even if it is not.

How can I change the error popup UI?

Unfortunately, there is no way to change the UI. The popup is part of the browser and it’s currently not possible to style the browser from the content. This might change later but that will not be done for Firefox 4.
If you think the current popup is ugly, you should know it’s not final. We will try to enhance that later, see bug 602500. All comments are very welcome!

New CSS pseudo-classes and default styles

CSS3 UI introduce new pseudo-classes that HTML5 is now using like :invalid, :valid, :required and :optional. Firefox 4 beta 7 supports all these pseudo-classes and adds a new pseudo-class: :-moz-submit-invalid which applies on submit controls when a form has an invalid element.
:invalid has a default style which is a red box-shadow. This default style is going to be removed when :-moz-ui-invalid will be added (see What’s next?). In the mean time, you can easily remove this default style in your stylesheets:
:invalid {   box-shadow: none;   }
What’s next?

It’s a bit early to say what will be done after Firefox 4 but we already know that a few things will be done in the following betas:

required attribute for <select>. You will be able to specify that a select element is required. This rule will be fulfilled if you select at least one option which has a value different from the empty string. See bug 596511. This might be fixed for beta 8.

Let <output> being subject from constraint validation. Output elements are currently barred from constraint validation but it seems to be too restrictive and .setCustomValidity() might be useful in some situations. See bug 604673. This might be fixed for beta 8.

Adding :-moz-ui-invalid and maybe -moz-ui-valid pseudo-classes. :invalid and :valid pseudo-classes are very bad for UI and UX perspectives. We want to introduce new pseudo-classes which would follow some UX rules. This will probably be the subject of a future blog post. Related bugs: bug 605124 and bug 605125.

Notes

[1] The regular expression will follow the JavaScript regular expression rules and will be checked against the entire element’s value.

[2] The prefix is the new recommendation, see http://www.w3.org/Bugs/Public/show_….

via blog.oldworld.fr

Posted via email from Jean-Pierre Pommet’s Blog | Comment »

RockMelt - Your browser. Re-imagined.

Tue, 09 Nov 2010 02:48:50 +0100

via rockmelt.com

Pretty cool to see the whole RockMelt Team when you download their browser.
But now time to test it !

Posted via email from Jean-Pierre Pommet’s Blog | Comment »

A Certain Blog (fBta): Adding extra columns in jQuery Datatable

Sat, 06 Nov 2010 16:42:04 +0100

A Certain Blog (fBta): Adding extra columns in jQuery Datatable:

fbta:

JQuery Datatables is an awesome and easy to use plugin for displaying data in a table from almost any source. It is very flexible and easy to use. I however came across a little problem of adding extra columns in a dynamic table. I googled and still could not find a very suitable or easy to…

Blog | Graphicpeel: iOS Icons Made in Pure CSS

Tue, 29 Jun 2010 01:37:18 +0200

Blog | Graphicpeel: iOS Icons Made in Pure CSS:

Click here to see 11 iOS icons made in only CSS, no images whatsoever.

NOTE: This demo will only work correctly on a webkit browser and has only been tested in Safari 5 and Google Chrome 5. Here’s how it will look when rendered correctly. Update: Apparently, there’s a bad bug in…

jQTouch and Sencha Touch: Which is right for you?

Tue, 22 Jun 2010 15:01:49 +0200

9-bits:

Recently I had the pleasure of announcing Sencha Touch, a standards-based mobile app framework which I helped create. As expected, this has raised some questions about jQTouch, a similar library I created last year. As covered before, jQTouch will remain separate, maintained, and free under the MIT license. This post helps distinguish the similarities and differences between the two libraries for the discerning mobile developer.

Read More

senchainc: In introduction to Sencha Touch’s features and...

Fri, 18 Jun 2010 01:38:40 +0200

senchainc:

In introduction to Sencha Touch’s features and capabilities from our VP Products, Michael Mullany.

Ajaxian » WebM: The On2 codec is here, with support from Google, Mozilla, and Opera

Tue, 25 May 2010 06:36:05 +0200

Wednesday, May 19th, 2010

WebM: The On2 codec is here, with support from Google, Mozilla, and Opera

Category: Google, Video

The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.

The WebM launch is supported by Mozilla, Opera, Google and more than forty other publishers, software and hardware vendors.

WebM is an open, royalty-free, media file format designed for the web.

WebM defines the file container structure, video and audio formats. WebM files consist of video streams compressed with the VP8 video codec and audio streams compressed with the Vorbis audio codec. The WebM file structure is based on the Matroska container.

It happened. Today, Google is up on stage at I/O unveiling a new WebM project alongside a slew of partners (notably: Mozilla and Opera on the browser side) that gets the On2 codec out into the open. This is huge news for the fight for Open Video, and everyone will now have eyes on Safari.

YouTube will be a huge push here, and you can go to their html5 version: http://www.youtube.com/html5 and check it out. Today it is available in trunk builds on Chromium and Firefox. Soon, an Opera beta, Chrome dev release, and more.

The project is going after:

Openness and innovation. A key factor in the web’s success is
that its core technologies such as HTML, HTTP, and TCP/IP are open
for anyone to implement and improve. With video being core to the
web experience, a high-quality, open video format choice is needed.
WebM is 100% free, and open-sourced under a
BSD-style license.

Optimized for the web. Serving video on the web is different
from traditional broadcast and offline mediums. Existing video
formats were designed to serve the needs of these mediums and do
it very well. WebM is focused on addressing the unique needs of
serving video on the web.

Low computational footprint to enable playback on any device,
including low-power netbooks, handhelds, tablets, etc.*

Simple container format

Highest quality real-time video delivery

Click and encode. Minimal codec profiles, sub-options; when
possible, let the encoder make the tough choices.

* Note: The initial developer preview releases of browsers supporting WebM are not yet fully optimized and therefore have a higher computational footprint for screen rendering than we expect for the general releases. The computational efficiencies of WebM are more accurately measured today using the development tools in the VP8 SDKs. Optimizations of the browser implementations are forthcoming.

Congrats Open Web.

Update: Flash will ship VP8, as will IE9. Now everyone looks at the Safari team :)

(One thing though about IE9 support: “In its HTML5 support, IE9 will support playback of H.264 video as well as VP8 video when the user has installed a VP8 codec on Windows.”). That is a bummer.

Posted by Dion Almaer at 10:46 am 8 Comments
—>

via ajaxian.com

I have been working with video for a long time, I am glad there is a new open source video format based on the excellent video codec VP8 video codec, audio codec Vorbis and the container Matroska. it’s a good news for the Open Web.

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Chromium Blog: A sneak peek at the Native Client SDK

Thu, 13 May 2010 21:00:17 +0200

via blog.chromium.org

Write code in js, use the power of C/C++ libraries for web apps ! Works only on Chromium though…Just imagine what kind of powerful web application you can develop !!

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Multi-Safari

Thu, 13 May 2010 21:00:11 +0200

Multi-Safari

Français

Introduction

Safari normally uses the Web Kit framework found inside Mac OS X to render web pages and execute javascript. This means that if you preserve an old version of Safari to run it on a newer version of Mac OS, it will use the newer Web Kit found in the system and you will get the same results as with the newer version. Thus, you would normally need a separate installation of Mac OS X for each version of Safari you want to test a website into.

These special versions of Safari use the original Web Kit framework that came with them, bundled inside the application. They will mimic original Safari rendering and javascript behaviours. HTTP requests and cookies however are still handled by the system and may not work exactly the same.

Download

Thanks to the jQuery Project for hosting these files on their CDN.

Note: The files only contain English and French localizations to make them smaller.

Safari for Leopard (Mac OS X 10.5)

Leopard shipped originally with Safari 3.0. Safari 3 for Leopard is not compatible with Mac OS X 10.4 (Tiger) although Safari 3 for Tiger works fine on Leopard.

Safari 3.2.1 (Leopard version) (19.2 Mb)

Safari 3.1.2 (Leopard version) (18.7 Mb)

Safari 3.0.4 (Leopard version) (15.8 Mb)

Safari for Tiger (Mac OS X 10.4)

Tiger shipped originally with Safari 2.0. All these versions should work fine on Mac OS X 10.4 (Tiger) and 10.5 (Leopard). There’s a small problem when running 2.0.x on Leopard though: the javascript alert function does not work.

Safari 2.0 (3.4 Mb)

Safari 2.0.2 (3.2 Mb)

Safari 2.0.3 (3.2 Mb)

Safari 2.0.4 (3,2 Mb)

Safari 3.0.4 (Tiger version) (13.2 Mb)

Safari for Panther (Mac OS X 10.3)

These versions only run on Mac OS X 10.3. They depend on a few private frameworks and symbols in the operating system which are no longer here in later versions.

Safari 1.2 (2.7 Mb)

Safari 1.2.3 (2.2 Mb)

Safari 1.3 (3.9 Mb)

Safari 1.3.1 (4.2 Mb)

Safari 1.3.2 (4.1 Mb)

Safari for Jaguar (Mac OS X 10.2)

This version of Safari works on Mac OS X 10.2 (Jaguar) through 10.4 (Tiger). Unusable on Leopard.

Safari 1.0 (2.2 Mb)

Compatibility Grid

Version 10.2.8 (Jaguar) 10.3.9 (Panther) 10.4.11 (Tiger) 10.5.x (Leopard)
1.0 x x x¹
1.2.x x
1.3.x x
2.0.x x x²
3.0.x (Tiger) x x
3.0.x (Leopard) x
How I did this

I have documented the procedure I use to create the self-contained applications on my weblog. There are two differences however:

Added a nice version-number badge on the icon so you can distinguish different versions when side by side in the dock.

Instead of naming the old safari executable “TrueSafari”, I name it with the appropriate version number and change the script accordingly. This means that when one Safari crash, the version number will appear in the error message.

The bundle identifier for Safari 2.0 and later is changed to com.michelf.MultiSafari to avoid a version-check on Leopard preventing older versions of Safari from launching. As a consequence, preferences for the modified Safari downloads are stored separately from the Apple-provided Safari, and the launcher script has been modified to copy Apple’s Safari preference on the first run.

Notes

I’m providing these files free of charge so that web developers can test their website for interoperability within many version of Safari with less hassle. The copyright for these files still belongs to Apple Inc. If Apple asks, I will remove the files.

Safari 1.0 works on Tiger but you’ll have to create the window in an unconventional way: either by opening a local file or by choosing Open Location in the file menu. The “Cannot open file” message at the application startup can be ignored. ↩

Safari 2.0.x didn’t work initially on Leopard due to the system blocking older versions of Safari. The 2.0.x downloads have been updated to use a different bundle identifier (com.michelf.MultiSafari) and are no longer affected by this block. ↩

Version	10.2.8 (Jaguar)	10.3.9 (Panther)	10.4.11 (Tiger)	10.5.x (Leopard)
1.0	x	x	x¹
1.2.x		x
1.3.x		x
2.0.x			x	x²
3.0.x (Tiger)			x	x
3.0.x (Leopard)				x

via michelf.com

It is pretty useful if you need older version of Safari for different version of MAC OSX, just download them !

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Eliot's Ramblings / Streaming Twitter into MongoDB

Fri, 16 Apr 2010 19:04:20 +0200

curl http://stream.twitter.com/1/statuses/sample.json -u: | mongoimport -c twitter_live

One thing that you can do with mongo is have 1 streaming master and 1 read/write master

server A:

./mongod —master —dbpath /tmp/a

server B

./mongod —dbpath /tmp/b —master —slave —source localhost:27017 —port 9999

You can then pipe the stream into server a, and it will only process the live stream.

Server B will replicate all changes. You can also write to it, query on it, etc… This way you can do operations that block writing on server B, but server A will never backlog.

via eliothorowitz.com

A super good tip with MongoDB !!! :D

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Nothing Insightful: Introducing "Aristo", A jQuery UI Theme

Tue, 30 Mar 2010 02:19:27 +0200

Nothing Insightful: Introducing "Aristo", A jQuery UI Theme:

For those that arn’t familiar with jQuery UI, it’s essentially a collection of jQuery plugins that try to do for user interaction what jQuery did for JavaScript. Like it’s parent library, jQuery UI does its very best to remain cross browser compliant. It is easy to implement. It is …

Beautiful Motion Graphics Created With Programming: Showcase, Tools and Tutorials - Smashing Magazine

Fri, 12 Feb 2010 01:24:56 +0100

via smashingmagazine.com

A really good article from smashingmagazine which provides informations about how to create fantastic graphic animations with free programming tools

Posted via web from jppommet’s posterous | Comment »

Encrypting Passwords with PHP for Storage Using the RSA PBKDF2 Standard

Tue, 05 Jan 2010 01:24:00 +0100

via itnewb.com

A good and straight forward article that provides a solution to hash password in PHP.

Posted via web from jppommet’s posterous | Comment »

danhacker: New ‘Mass Effect 2’ box art The game i am waiting...

Wed, 18 Nov 2009 18:26:12 +0100

danhacker:

New ‘Mass Effect 2’ box art

The game i am waiting for month !! I can’t wait to play this game :)

Fast Updates with MongoDB (update-in-place)

Wed, 18 Nov 2009 18:25:24 +0100

mongodb:

One nice feature with MongoDB is that updates can happen “in place” — the database does not have to allocate and write a full new copy of the object.

This can be highly performant for frequent update use cases. For example, incrementing a counter is a highly efficient operation. We need not fetch the document from the server, we can simply send an increment operation over:
db.my_collection.update( { _id : ... }, { $inc : { y : 2 } } ); // increment y by 2
MongoDB disk writes are lazy. If we receive 1,000 increments in one second for the object, it will only be written once. Physical writes occur a couple of seconds after the operation.

One question is what happens when an object grows. If the object fits in its previous allocation space, it will update in place. If it does not, it will be moved to a new location in the datafile, and its index keys must be updated, which is slower. Because of this, Mongo uses an adaptive algorithm to try to minimize moves on an update. The database computes a padding factor for each collection based on how often items grow and move. The more often the objects grow, the larger the padding factor will be; when less frequent, smaller.

See also:

http://www.mongodb.org/display/DOCS/Updating

http://blog.mongodb.org/post/171353301/using-mongodb-for-real-time-analytics

bastienlabelle: soxiam: Make a better FM (via cvander)

Sun, 15 Nov 2009 09:04:29 +0100

bastienlabelle:

soxiam:

Make a better FM (via cvander)

From Webfaction : A little holiday present: 10,000 reqs/sec with Nginx!

Fri, 13 Nov 2009 19:10:48 +0100

A little holiday present: 10,000 reqs/sec with Nginx!

Updated Dec 19 at 05:15 CDT (first posted Dec 18 at 06:01 CDT) by Remi in General - 11 comment(s)

A few weeks ago we quietly started to configure our new machines with Nginx as the front web server instead of Apache (we still run Apache behind Nginx for people who need all the features from Apache).

Here is a little benchmark that I did to compare Nginx versus Apache (with the worker-MPM) for serving a small static file:

This benchmark is not representative of a real-world application because in my benchmark the web servers were only serving a small static file from localhost (in real life your files would get served to remote machines and some of your requests would be dynamic) but the results are impressive nonetheless. Both servers are capable of serving a huge number of requests per second, but Apache’s performance start decreasing as you add more concurrent connections whereas Nginx’s performance almost doesn’t drop!

But here comes the best bit: because Nginx is event-based it doesn’t need to spawn new processes or threads for each request, so its memory usage is very low. Throughout my benchmark it just sat at 2.5MB of memory while Apache was using a lot more:

To take advantage of the lightning speed of Nginx we have added two new types of applications to our control panel: the “static only” app and the “symlink to static-only” app. They just work like a normal “static/cgi/php” and “symlink to static/cgi/php” app, except that they can only serve purely static content (no .htaccess support) and they are served directly by the front Nginx server.

Even if your site is not static you can still serve all your static data (CSS, javascript, images, …) directly from Nginx and enjoy the speed gain.

Nginx is only available on Web57 and over. If you’re on an older server and would like to use Nginx open a ticket and we’ll give you an extra plan on a new Nginx server and a free week to transfer your data.

Nginx FTW!

[Updated December 19th, 2008 to clarify the fact that we still run Apache behind Nginx for people who need all the Apache features]

11 comments:

Super Frank said on 2008-12-18 10:28:05:
Awesome! You guys just keep getting better and better!

Andrew Bates said on 2008-12-18 18:23:04:
Nginx sounds pretty cool. Now I just need to make my app as fast as Nginx…

Michael Warkentin said on 2008-12-25 00:29:20:
Nice! Thought that the static-only apps were new..

glebk said on 2009-01-13 20:39:52:
That’s a good beginning.
Btw, have you thought of using lighttpd instead of apache for a Django platform? it can save lots of resources

Sean said on 2009-01-14 11:53:46:
@glebk - if enough users ask for a Django+lighttpd installer, we’ll certainly provide one. Until then if anyone wants to run that, they’re free to run it as a custom app :)

Jim said on 2009-01-28 22:21:15:
your upgrade brought down my site, ugh

Sean said on 2009-01-29 08:14:59:
@Jim - Really? That should not have happened. If you’re having a problem with your site, please log in to the control panel and open a support ticket, we’ll be happy to take a look.

Brent said on 2009-02-03 18:23:44:
Is nginx running on top of apache? or the other way around? Do any of the apache processes run slower because of this?
From your benchmarks it looks awesome.
b r e n t

Sean said on 2009-02-04 14:30:39:
@Brent - Apache runs behind nginx. It ran behind another Apache before this change, so there’s really no difference in the backend Apache’s performance.

chusty said on 2009-05-18 09:13:31:
I’m using nginx for quite a long time now … and I’m really happy because of that :).

Bison said on 2009-06-18 05:14:49:
Wow, I missed that. I was waiting for this.
I might just switch to one of these servers after my holiday.
The next step would be lighttpd and varnish.
Great work!

Leave a new comment:
(Note: comments may be moderated)

via blog.webfaction.com

A very good benchmark indeed but i am wondering about nginx’s cpu resource consumption. Does anyone have an idea ?

Posted via web from jppommet’s posterous | Comment »

"My decision to stop iPhone development has had everything to do with Apple’s policies. I respect..."

Thu, 12 Nov 2009 10:20:00 +0100

“My decision to stop iPhone development has had everything to do with Apple’s policies. I respect their right to manage their platform however they want, however I am philosophically opposed to the existence of their review process. I am very concerned that they are setting a horrible precedent for other software platforms, and soon gatekeepers will start infesting the lives of every software developer.”

- Joe Hewitt (via mathieuthouvenin)

Brett Domino: Hip-Hop Medley - Stylophone Beatbox

Wed, 28 Oct 2009 00:31:35 +0100

via youtube.com

They are amazing !! :D

Posted via web from jppommet’s posterous | Comment »

Let’s make the web faster !

Wed, 24 Jun 2009 21:53:10 +0200

Let’s make the web faster !