FontAwesome and Less

FontAwesome is a very nice font resource. The amount of icons is huge and since they are not images, they scale properly to any size and look nice on any resolution. This is something I really like

One issue I found is that presentational classes force you to modify your HTML to add an icon. While this could be fine for new projects there are situations when you probably would be better using semantic names instead.

That's why I made this, just by searching and replacing on the font-awesome.css file

I added the extension .css to gist files to enable the syntax highlighter. They should be less files.
Doing it this way I can use more semantic names, and when I don't need those I can still use the normal presentational classes that font-awesome offers. So I guess I have the best of both worlds

Internet Explorer 7, 8 and 9 must die or kittens will die

Update: Google is dropping IE8, they don't want to kill kittens 
http://googleappsupdates.blogspot.co.uk/2012/09/supporting-modern-browsers-internet.html

Today is the last day I will spent time fixing issues for Internet Explorer 7, 8 or 9. I stopped doing for Internet Explorer 6 some time ago, and that was a good thing. But it is about time to do the same with the other not HTML5 good enough browsers. Don't get me wrong, Internet Explorer has made a very good job, the browser is really good, but webkit based browsers and Firefox have done an even better job those days. And even Microsoft has done EXTRAORDINARY GOOD JOB making Internet Explorer 10 the best microsoft browser ever.

So why should we (the developers) still suffer because there are huge group of people that won't want to upgrade the browser they use? Before there were not that many options, and Internet explorer users were majority, but nowadays the Chrome user base has increased a lot, so at least for me it make no sense to still support Internet Explorer, 7, 8 or 9 anymore.

How much time have we heard from other developers all the pain that they have to pass to make their websites to work properly in Internet Explorer 7 - 9? Do you remember how much time took to actually kill IE6? I guess that we haven't learned the lesson. As Douglas Crockford said on one of his talks, we are guilty of make that happen. We did a very good job supporting IE6 that we shoot ourselves in the foot while doing it. We made our life a living hell. And we're doing the same again for the other Internet Explorer versions.

So what do we do with the Internet Explorer Users? well, to start we can show to them the path to redemption, and evangelize them. Yeah, we should be like the Jehova Testifiers, we should be HTML5 Evangelizers, and tell our friends and family that they can have a better life, that they will find the peace of mind and the way to heaven if they use a Grade A Browser (either Chrome, Firefox, Safari, Internet Explorer 10, etc). It is the word, it is written in the Bible... of the web, that they need to change or be condemned to a life of misery and pain.

How many times we as developer had cool ideas and want to play with it, we make something really cool with nice transitions, effects and animations, only to hear from our product managers or marketing divisions that, we cannot deliver it, unless it runs on Internet Explorer 7-9, and this gets even worse, because they probably don't know that this new cool stuff that your are playing with won't work well on that oldie browser. Or maybe they know and they just want to make the life of the developer a bit more complex. he he.

So, are the Internet explorer user lost? should they lost any hope? Well I guess that there are some actions that they could make. And that is telling them to stop being lazy and install a better browser, that it is free and cost no money. And if they're not that proactive, we should show to them the path to the light. We all have friends that ask ourselves all the time about

Each time we make a web application we should add a tiny message for Internet explorer users warning them about the fact that their browsers are very old and they will not be able to render the cool content that we the developers are trying to show to them. Do that showing a funny message maybe with some humor something like this:

This browser is really Old! 

The browser you're using does not support the features required by this app. It is very old and you should consider change it to one of the better browsers out there, likeChrome or Firefox But, if you are stubborn enough to keep this very old browser then you can use the chrome frame.

Remember each time you open a web page in Internet Explorer 8 or 9 a WebDeveloper and 2 kittens are killed. So you should stop this insane killing!.

No thanks, I like to suffer! Install Chrome Frame

So at least users will realize that they are using and old browser and maybe, if we're lucky enough they will be able to do something, either switch to a better browser or at the very least install the chrome frame.

There are reasons to still support Internet Explorer users, I know, they're still a huge portion of the total user base in a website. But this could be worse if we keep supporting it!.

So what else can we do appart from showing to them the path to redemption?

Here are couple of actions that we all can make:

1. Talk to our managers to stop making us to work on supporting Internet Explorer 8 - 9 browsers. Tell them how much time is that costing and how much time we should probably get to invest on new "cool" stuff made with newer technology that runs very well on Grade A Browsers. Show them some examples. show them Sprite 3d, three.js, the Atari page for Internet Explorer 10 and other more, let them know that the web could be a more vibrant place, not only to display information in the traditional way but to do very very cool stuff!.

Mention to them that now the Chrome frame does not require administrative permissions so you don't need to be an administrator to install it.

Mention to them that Microsoft is very close to release (finally) a very good Internet Browser, Internet Explorer 10 and that we should only support that version from that time on.

2. Mention to our friends and family that they do not require to use Internet Explorer 8 - 9 that they can use better browsers, one more time.

3. Do not spent time fixing cosmetic issues in Internet Explorer. Don't do it. If we all stop doing it, a good portion of our users will be forced to upgrade to other browsers, like Chrome or Firefox. Even better those browsers expose a silent update feature, so they will be "up to date" most of the time with no effort (yeah we now our users are lazy). If they (PM, UE, Marketing teams) force you, make your web app work at some level, and stop there. At least stubborn users will see something, probably not that cool, but they will be able to use your app.

4. If you are a developer, make a tiny javascript library that other developers can include in their websites to detect and older browser and show to them a message that the one above, make this to not depend on anything so every website in the world can use the script and will spread the word about stop using Internet Explorer 7 - 9

IF WE STOP SUPPORTING THEM ALL TOGETHER, THEY WILL CHANGE, OTHERWISE WE ARE GOING TO HAVE A VERY BAD LIFE UNTIL THEY DIE. And they could stay forever if we let them, like it happen with Internet Explorer 6.

So this is the last day I support Internet Explorer 7 - 9, I will politely reject make any cosmetic fix for IE, and will reserve the cool stuff only for Grade A Browsers.

Web developers of the world, get united against Internet Explorer 7 -9.

PD: Well if you force me to do it, I will still do, but against my will, hahahahaha.

touch draggable for iPad/iPhone

Some time ago I had to implement a good draggable plugin for mobile devices (iPad and iPhone), the current app was using the jquery ui draggable and it was good (very good) in the browser. But sadly it was not that good on mobile, it was choppy and not really nice.

We had layer to simulate the mouse events on the devices that does not support it, and that made the jquery ui plugin to work properly. Well at least as good as it could be on mobile devices.
But somehow (maybe because in my interior I had a designer/UX soul) I feel it was not good enough, the performance was not that great and that was very sad. jquery ui draggable uses top/left properties to move the elements around, and since those properties are not hardware accelerated, it does not look good on the iOS devices.

But css transforms are hardware accelerated so I took the decision (about one year ago) to make this very tiny widget implementing the same interface of the jquery ui one (well only the one I needed at least) and the result is this widget, which seems to perform better than the current version of the draggable one from jquery ui. I'm pretty sure the next version is going to fix this for mobile/tablet devices, but just in case you feel adventurous, like to take risks or just like to play with new code, you can use this one and implement the rest of the interface that is missing here.

Source code:
https://github.com/royriojas/touch-draggable

Demo: (make sure you visit it on an iPad/Android)
In the case of android it seems the experiment at the bottom is not working not sure why yet
http://dl.dropbox.com/u/16252882/royws/td/demo/touchdraggable.html



Bye!

Yet Another Validation Plugin… Again!

Well this is the first widget wrote by me from scratch that will include in my End of studies project Astrea. This is a simply widget but a really useful one. 
Validate forms is a very common task, and is usually performed either writing custom functions for each field like is suggested in this page http://www.w3schools.com/js/js_form_validation.asp., which could be considered "the old school way". Another approach is to use a plugin that involves the writing of few lines of javascript to perform the validation, wiring each field with the type of validation that will perform and with the error message that is going to be used. Like in the case of this jQuery Validation Plugin http://jquery.bassistance.de/validate/demo/marketo/. and Another plugins try to improve the way validation is done, like this one http://www.devx.com/webdev/Article/31695
While they do a great job validating the fields, which is what you expect from a validation library in the first place :), it is not always customizable enough. There are situations when you may want the validators look differently or be in a completely different position in the form layout. Other times, you don't want to use the form to send the data directly maybe you just want to extract the value fields as a JSON Object and send that object to the server using Ajax, etc.
Well This is Yet Another Validation Plugin. It is not perfect but include a bunch of features that I found useful in all the time I'm doing web development.

 

Features

1. It is completely customizable with CSS, and since is manually located in the form layout, it could appears in any position. And the error messages can contain whatever you need from plain text to html.
   
2. It is unobstructive, and somehow aspect oriented. The behavior of the validators is set using data-* properties
   
3. It is possible to add new validators and they will work fine (In the case of dynamic forms)
   
4. It is simply to use, and I tend to believe that can be easily extended to add support to new type of validators.
   
5. It is not restricted to validate one single field. Several fields can be validated at once.
   
6. It is possible to validate just a subset of the validators, or even just validate one. I plan to support validate outside the main container
   
7. It is not only restricted to validate actual forms, any container (a div i.e.) can be used as the container for the validation.
   
8. It support asynchronous validation, so actually it is easy to perform Ajax validation with this approach
   
9. Each field is also validated on blur, change, while the user is interacting with the field.
   
10. can validate any type of fields, radios, checkboxes, etc.
    
11. Out of the box this plugin supports the following validation types: required, compare, range, regex and custom. Using the regex and custom validators it is possible to perform almost any kind of validation.

Example of Validator Widget

Go ahead to the result tab to see in action and use the html tab to see the required html, javascript and css
You can find the code here in the Astrea repo. under the examples folder.
To know how to use it take a look to the source code in the example above, I will include a brief documentation later.
The widget is implemented using the widget factory from jQuery UI. So I guess this is actually good news if you're already including this library.
The widget is still work in progress, so there are probably bugs and other stuff. But for a first release I guess it is good enough.
If you have developed in ASP.NET you can find this validator plugin somehow similar to the ASP.NET validator component. That is intentional. I had to work on a PHP project after 4 years of been developing with ASP.NET and missed the validators, and like a lot of us, well I just like to reinvent the wheel and still this can be used for my End of Studies Project. (Yes I know that I ended the University 4 years ago, But I guess it is better late than never)

 

know Issues.

• To support async validation, the custom validators receive a callback function as part of the arguments. It's up to the programmer to call it with the right validation value. An example of async validation will be included later.
  
• If more than one validator is assigned to the same field, if the first fail and the second succeed the failed class gets removed so the visual hint to denote that a field has failed the validation is lost. This will be fixed soon.

 

Short FAQ

Licensing?

While this validator widget has been made for my own consumption, I guess that everybody can use it freely and improve it if is required. The source code is on Github under the Astrea project (Astrea is the name of the Library that I'm looking to finish as my End Of Studies Project). The Project will be released under the LGPL and MIT licenses. So Feel free to use it.

Can't find the documentation?

That's my fault, I haven't enough time to write a proper documentation for this widget yet. I promise I will include one soon. For now you can see how it works live in the code example above.

Can't find the unit tests?

My fault again, this project is just starting and I will love to include unit tests for all the widgets that I will include as part of this Library. So Unit testing using QUnit will be added in the future.

Why not use the HTML5 validators?

Well actually I believe is a good idea to use HTML5 Validators, but the problem with this, is that is not supported by all browsers at this point. I will keep a close eye to how the HTML5 validators evolve and will update this library accordingly.

Validators seems to not been working on Browser XX.XX?

This first release has only been tested in later versions of Mozilla Firefox and Chrome by now. I haven't had time to test it thoroughly in all browsers. So it is possible some issues could appear.

Yahoo Developer Network – All APIs page

Today while was trying to make a custom control to convert currencies, I faced an ugly problem: The free soap web service that I was planning to use was simply down. A big problem considering the time I had to made that control.

After some goggling I found some sites that perform this kind of job. Some of them were using originally the same web service I was trying to use and because they were facing the same problem as me they decide to change it. They were using somehow the YAHOO finance quotes service to retrieve the exchange rate between two currencies, but they were making the calls directly at the server side (trying to do it using Ajax raises the Cross Site Scripting problem).

Then I was curious about to know if somehow the YAHOO finance service could had some kind of REST API that could help me to obtain this value directly. But I was not lucky and couldn’t find that…

But I found something even better the Yahoo Developer Network - All APIs page and there I found a lot of interesting things… really a lot. But the most impressive think I found was the YQL.

The YQL stands for Yahoo! Query Language. This is a really impressive concept. It basically allows to make calls to almost any web resource (html pages, dynamic pages and any other resource) and query this result using css or xpath to retrieve the parts of the content that are relevant for us in JSON or XML formats. And it supports make Cross Site Scripting calls too!

The potential that I found in this tool is really amazing you can retrieve almost any relevant information from many sites and use it in the way you want.

YAHOO has some good resources. Really good resources!

Testing Windows 7

I just finished the installation of all the programs that I usually use every day on my computer with the RC1 of the Windows 7. And I must admit it was relatively easy to get it working fine. I had some troubles but they were quickly solved.

Some of the aspects about this new Windows version are really nice.

1. The installation itself was easy. I remember I tried to install Vista RC1 a long time ago, It was just terrible, a lot of components of my computer just won’t work ever on that because the drivers for them simply didn’t exist. This time instead almost of my hardware components were ready to use, just after the installation. The Wireless USB receiver, the USB web cam and my two audio cards were the exception, but I didn’t have any trouble trying to install the vista version of the driver that came with the USB receiver, or with the driver version of Vista for my two audio Cards (Soundblaster Audigy 2 Platinum, and the default integrated audio that came with my Intel DP35DP Motherboard). I found the Driver version for the Intel Integrated Audio on the Intel website, and even when they claim that the driver was beta also it is doing really good right now.
2. The Aspect of the Desktop. I don’t know if Microsoft copy the new desktop style from others Operative Systems, I will only say that it looks good, I seems a lot like Vista, but with less invasive warning windows (yes they’re still there). Well I must admit I have not used Vista too much, I really didn’t use Vista on a regular basis like to make a fair comparison. But comparing Windows 7 with the well loved Windows XP you really see some good changes in the UI. I’m tempted to believe that this instance of Windows 7 is running faster than my old good XP.

I will post more comments about Windows 7 later… for today it is time to stop!

Bye.

Export to CSV in Unicode format so Excel can read Japanese characters in the right way

To make this history short, here is the problem I had. The Client wants to export the data from a report (basically a table) in csv format. This data could contain Unicode characters (basically Japanese characters). This file was intended to be used to move the data to other programs like excel or others.

Well to solve that requirement i made this method, that basically receive the data ready to be put in the csv format and save it to the response.

protected void ExportToCSV(object sender, EventArgs e)
 {
    if (String.IsNullOrEmpty(CSVData.Value)) return;

    var strFileNameexport = FileNameHidden.Value.Replace(" ", "_");
    Response.Clear();
    Response.ClearContent();
    Response.Buffer = true;
    Response.ContentType = "text/comma-separated-values";

    Response.ContentEncoding = Encoding.UTF8;
    Response.Charset = Encoding.UTF8.HeaderName;
    var data = CSVData.Value;    

    Response.AddHeader("Content-Disposition", string.Format("attachment;Filename={0}.csv", strFileNameexport));

    Response.Write(data);
    Response.End();
}

As you can see as far to this point everything seemed to be working fine. But suddenly when we try to open a exported file that contains Japanese characters, Excel was not able to display those characters. It replace those characters with garbage

So to Solve the Problem we...

• found that excel expects the csv file to be in "utf-16le" (UCS-2 Little Endian) (weird, really weird).
• when you put the data in this format, the "," character is not longer a valid column separator (even more weird, weird!!!!) so you need to use other character like "\t" (I know, I know... if you use \t as a separator the mime type should tab separated value files, but Excel seems to don't complain about it.
• It is also recomendable that you enclose the data for each cell using quotes, this way the values inside won't be interpreted wrong if a separator character is present there.
• then realize that we were receiving the data in utf-8 format so we first need to convert the bytes from utf-8 to utf-16
• And the most important note: YOU NEED TO PUT THE MARKER BYTES SO THE PROGRAMS COULD RECOGNIZE THE ORDER OF THE BYTES IN THE FILE TO KNOW IF THEY ARE IN LITTLE ENDIAN OR IN BIG ENDIAN you can found a lot of information about it in the internet. but no one really tells you that this is necessary to make the file recognizeable by Excel as a csv file.

private static byte[] GetUCSStringFromData(string value)
{
    if (String.IsNullOrEmpty(value)) return new byte[] { };

    value = value.Replace("\",\"", "\"\t\"");

    var utf8Encoding = Encoding.UTF8;
    var utfBytes = utf8Encoding.GetBytes(value);

    var ucs2Encoding = Encoding.GetEncoding("utf-16le");
    var ucs2Bytes = Encoding.Convert(utf8Encoding, ucs2Encoding, utfBytes);

    var bytesFinal = new List {0xff, 0xfe};
    foreach (var b in ucs2Bytes)
    {
        bytesFinal.Add(b);
    }

    return bytesFinal.ToArray(); // ucs2Encoding.GetString(ucs2Bytes);

}

protected void ExportToCSVForExcel(object sender, EventArgs e)
{
    if (String.IsNullOrEmpty(CSVData.Value)) return;

    var strFileNameexport = FileNameHidden.Value.Replace(" ", "_");
    Response.Clear();
    Response.ClearContent();
    Response.Buffer = true;
    Response.ContentType = "text/comma-separated-values";

    //Those lines makes it possible to work with UCS2
    Response.ContentEncoding = Encoding.GetEncoding("utf-16le");
    Response.Charset = Response.ContentEncoding.HeaderName;

    var data = GetUCSStringFromData(CSVData.Value);

    Response.AddHeader("Content-Disposition", string.Format("attachment;Filename={0}.csv", strFileNameexport));
    
    Response.BinaryWrite(data);
    Response.End();
} 

So never forget it!