lunes, 2 de abril de 2012

jQuery plugin boilerplate Gist

I created a jQuery plugin boilerplate in a github gist

https://gist.github.com/2289039

Hope you find it useful, if it has something wrong or it can be improved, please let me know.

jueves, 22 de marzo de 2012

HTML5 Form Validation

Since the creation of the web, developers have deal with validation of forms, a way to ensure the correct input of data to benefit both the business logic (not having dirty data) and the development of the rest of the application (ensuring that server side data processing gets already filtered info). HTML5 has come with many awesome features and one of those is very good news to many people that has to do forms all the time. HTML5 now has attributes that handles this task, so the browser will take charge of this.

A typical form consist of a opening and closing <form> tag, and inside we put <input> tags with different types based on our needs. You might want to use <label>, <textarea>, <select> and <fieldset> as well.

<form action="" autocomplete="off">
    <label for="username">Username</label>
    <input id="username" name="username">
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
    <input type="submit" class="btn" value="Login">
</form>

HTML5 comes with useful new types:
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
You can see current browser compatibility of these types here.

Particularly in this post we want to discuss the new attributes, they allow us to validate data input on the fly, without the need of javascript.
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step
 To validate non-empty fields, you simply put the required attribute:

<form action="" autocomplete="off">
    <label for="username">Username</label>
    <input id="username" name="username" required>
    <label for="password">Password</label>
    <input id="password" name="password" type="password" required>
    <input type="submit" class="btn" value="Login">
</form>

 Attributes url and email allows to validate for valid url and email addresses:

<form action="">
    <label for="username2">Username</label>
    <input id="username2" name="username" required>
    <label for="password2">Password</label>
    <input id="password2" name="password" type="password" required>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>
    <label for="url">Homepage</label>
    <input id="url" name="url" type="url">
    <input type="submit" class="btn" value="Register">
</form>

 The pattern attribute is particularly useful, you can use regular expressions to validate custom types of data entry. The good old title attribute will allow us to specify a message:

<form action="">
    <label for="username2">Username</label>
    <input id="username2" name="username" 
     pattern="[a-zA-Z0-9]{5,}"  
     title="Minimum 5 letters or numbers." required>
    <label for="password2">Password</label>
    <input id="password2" name="password" type="password"  
     pattern=".{5,}" title="Minimum 5 letters or numbers." required>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>
    <label for="url">Homepage</label>
    <input id="url" name="url" type="url">
    <input type="submit" class="btn" value="Register">
</form>
 
You can check current browser support at caniuse.com

As you can see, with html5 this and many other features will allow faster
coding and more rich web pages.

Reference:
http://w3schools.com/html5/html5_form_attributes.asp
http://css.dzone.com/articles/look-html5-form-validation
 
 

jueves, 26 de enero de 2012

miércoles, 25 de enero de 2012

The Napster effect

Created in 1998, Napster was the first P2P service created to share mp3 music all over the Internet. Since then, the war between music records, movie studios and internet sharing services hasn't stopped. Last week was Megaupload, a file sharing service with main offices in Hong Kong. What the law and order doesn't know is that, killing one of the heads of this monster, only causes the growth of more heads. This is what I call the Napster effect. Right now, hundreds of other services are being created and are becoming stronger than ever. People who didn't know what a file sharing service is, they now know it because they heard it on the evening news. Users of Megaupload and other sharing services, are copying files in more robust and creative ways than before, having in mind that their loved service might suffer from an FBI shut down. Enough said, the closing of Megaupload is the trigger of a big change in the internet.