Web development related posts

It was on my todo list for a while: “code a URL shortener“. And yesterday, I don’t know why, I decided it was the day to definitively check this line off. Here is the story of a guy who wanted to code a service in one small afternoon.

tldr: it took around 3 hours to code it all (it took a little more afterwards actually when mates pointed out CSS bugs in IE) and you can see it at http://yop.la.

What to do today?

I woke up at around 1pm this wednesday (I know I know, my rythme of life is a disaster). I went to the kitchen to serve myself the usual bowl of cereals, and switched on TV. What to do today – did i ask to myself? Hmm, I did all the urgent work for the current projects, I redesigned my blog … now what? Ah, there is this line at the bottom of my todo list that hangs for months. Pff, how much would it take, I’m not kind on loosing too much time on a project that won’t get me a penny? Oh, I’m sure it won’t take too much, let’s see if I can do it in one afternoon hehe.

Deal? Deal! Let’s play Below, the table of contents:

1. Phase 1: thoughts and analysis
2. Phase 2: design the database
3. Phase 3: build an architecture
4. Phase 4: finally write the pages
5. Phase 5: have a coffee
6. Phase6: put it online and show to mates

read more… »

In a previous post one week ago (When the studies end…) I told you about my wish to redesign my site. Now it’s done! To remind you, it used to look like that before:

I loved the former template. At least for the first day, and then I started to hate it because it was a commercial template that a lot of people have. It was not original, it was not me.

That’s why I wanted to make my own theme, something unique that I would be the only one to have, and that really looks like me: sober, simple and efficient. Something that goes right to the goal.

Let’s dive into the assets of my new website:

• under everything, we have the HTML5 Boilerplate framework, a powerful default for building HTML5 pages
• I had the opportunity to learn how to make WordPress themes (and to see how WP sucks for developers). Nevertheless, I’ll come back to you soon with a little framework I did to integrate external pages to your WP blog (or the opposite)
• of course, the website is W3C compliant (validates HTML5 and CSS3)
• I now surf on the social wave! I added share links for Facebook, Buzz, Twitter and Digg
• I made it compatible with the following browsers: Chrome, Safari, Firefox, Opera, IE8, IE7 and even … IE6 (yes, IE6 … with a few hacks though). There is even a mobile version for mobile devices
• I got a score of 86/100 at the Google’s speed test. The score goes down a lot because of the share links, but I’m still not happy though…

To finalize, there are some easter eggs I put in the website. It’s not a lot but it’s still funny when you encounter them I hope you’ll like this new version, and I’m open to any feedback or suggestion you could have.

This week, I had to set up and configure an nginx server for the first time. If there is something that I think is essential for a web server, it’s to clearly separate the environment of each of the websites that run on it. Especially, when you execute PHP (or whatever) scripts on your website, security is something you have to pay attention to.

read more… »

As nothing’s as straight forward as PHP, I had to write my own class to sort ArrayCollections. My work was inspired by what Peter Dehaan did.

The method is to be used as follows:

ArrayUtils.sort(games, "playerScore", "DESC", true);

to sort an ArrayCollection of games by player score, with a descending order. The last parameter indicates that we want a numeric sorting rather than a alphabetical sorting.

I encapsulated the method in an ArrayUtils class, but you’re free to do as you wish. That’s because I think I will add more methods to my class in a near future. You can download the class here: ArrayUtils.as

package classes.utils
{
import mx.collections.ArrayCollection;
import mx.collections.Sort;
import mx.collections.SortField;
 
/**
* Useful functions to manipulate arrays
*
* @author Cyril Mazur cyrilmazur.com
*/
public class ArrayUtils
{
/**
* Sort an arrayCollection by key
* order MUST be either "ASC" or "DESC"
*
* @author Cyril Mazur cyrilmazur.com
* @see http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-
using-the-sortfield-and-sort-classes/
*
* @param ArrayCollection arrayCollection
* @param String sortBy
* @param String order
* @param Boolean numericSort
*
* @return ArrayCollection
*/
public static function sort(arrayCollection:ArrayCollection, sortBy:String,
order:String, numericSort:Boolean):ArrayCollection {
/* Create the sort field and fill it */
var dataSortField:SortField = new SortField();
dataSortField.name = sortBy;
dataSortField.caseInsensitive = true;
dataSortField.numeric = numericSort;
 
/* Set the order, by default it's ascending */
if (order.toUpperCase() == "DESC") {
dataSortField.descending = true;
}
 
/* Create the Sort object and add the SortField object
created earlier to the array of fields to sort on. */
var dataSort:Sort = new Sort();
dataSort.fields = [dataSortField];
 
/* Set the ArrayCollection object's sort property to our
custom sort, and refresh the ArrayCollection. */
arrayCollection.sort = dataSort;
arrayCollection.refresh();
 
/* Return the collection */
return arrayCollection;
}
}
}

Download the source here: ArrayUtils.as

I’m open to any suggestion to improve the code

In Flex (as in Java, or even PHP) you can dynamically get references to a class from its name. Just to remind you, it’s that easy in PHP:

$className = 'User';
$myUser = new $className;

Not a lot more complicated in Java:

Class className = Class.forName("User");
Object myUser = className.newInstance();

The Flex way is as follows:

var className:Class = getDefinitionByName("package.User") as Class;
var user:Object = new className();

But despite PHP and Java, there is a little subtlety for Flex. You can encounter the following error when executing this code:

ReferenceError: Error #1065: Variable User is not defined

And it took some time for me to figure out what the problem was… After looking at the right speling of my class name and so worth, I figured out that the problem comes from the way that Flex compiles its code. Actually, Flex compiles its code so that if a class is not used, it will keep this class off the final compiled program. And even a

import package.User

won’t change a thing. The only way to get it done, is to put a reference to that class somewhere in your code, wherever … as long as it’s referenced somewhere, Flex will not forget the class at the compilation process. A simple and ugly way is to add a dummy reference to this class somewhere, like:

private var _dummyUser:User;

or shorter:

User;

and you’re done.

It has been already discussed on forums and blogs, but as I came across this I had to write an article about it

I was writing a bit of Javascript this afternoon. Everything was fine until it came to test it on IE, and there the nightmare began (again, and again, and again…). Yes, IE (all versions) sucks at handling onChange events for checkboxes and radio buttons. Sometimes it works, sometimes not at all, sometimes you gotta click somewhere else in the page to trigger it…

I’ve made some researches on the Internet, and there is no beautiful way to fix that. The only way is to totally give up onChange events for those two elements (yes, you HAVE to give up a very regular feature just because ONE browser doesn’t support it properly), and to replace it by an onClick event. You’ll then hope that your code doesn’t change the values of your checkboxes in another way than by clicking on it, otherwise you’re fucked. Or you have to call the related onClick function every time.

Let’s see for example the case when you use an HTML label element for your input:

<input type="checkbox" onclick="someFunction();" id="myCheckbox" />
 
<label
  for="myCheckbox"
  onclick="document.getElementById(this.for).onclick();"
>
    Check me
</label>

I just had to change that in my case hopefully.

When you upgrade a project from Flex 3 to Flex 4 (and by the way, if you’re a student, you can have a free license for Flex Builder at http://www.adobe.com/devnet/flex/free/index.html), you probably encounter this error if you use States:

Error: State overrides may no longer be explicitly declared.
The legacy states syntax has been deprecated.

So if you used to have something like that:

<mx:State name="mainMenu">
    <mx:SetProperty target="{mainMenuContainer}" name="visible" value="true" />
</mx:State>
 
<mx:Container id="mainMenuContainer"></mx:Container>

It should be this way from now on:

<mx:State name="mainMenu"></mx:State>
 
<mx:Container id="mainMenuContainer"
    visible="false" visible.mainMenu="true">
</mx:Container>

Looking forward to the official livedoc for Flex 4 ^^

Nothing new with that, but as I never remember the correct procedure, I decided to write this reminder for myself

So, let’s assume you are user A on your machine A (in my case it’s my laptop), and you want to connect as user B to machine B (in my case it’s a dedicated server). And you don’t want to be asked userB’s password each time you log in. This tutorial was made for Linux OSs and openSSH.

read more… »

I don’t know why JSON is not natively supported in Flex, since it’s a widely used serialization format (even the latest version, Flex 4 when I write these lines). Whatever, if you want JSON serialization functions in your Flex application, you will need to add a library to your project by yourself.

However, Adobe itself made a JSON library that you can find at http://code.google.com/p/as3corelib/. Follow these steps to add your JSON library to your Flex project:

1. Download the .zip archive and extract it. What you need is the .swc file in the lib folder.
2. In Flex Builder / Flash Builder, go to your project’s properties, and then to the Flex Build Path panel.
3. Click on Add SWC, and select the as3corelib.swc file
4. In your project, add the following line: import com.adobe.serialization.json.JSON;

You should be able now to use JSON functionalities in your Flex project

We learn new things everyday. As english is not my mother language, I couldn’t have guessed this one if I weren’t told of it. For years, I’ve been using the REFERER http header in my web projects like everyone, and of course for me there was no reason to think it was not the right spelling for it. But it is. And modern spellcheckers have it in their database: the correct spelling is REFERRER with two Rs.

Where and when does this mistake come from?

The mistake comes from 1996 actually, in RFC 1945, the document that gives the specifications of the HTTP1/0 protocol. It was at first a misspelling in the computer scientist Phillip Hallam-Baker’s original proposal to include the field to the HTTP specifications. At this period, neither REFERER or REFERRER were recognized by the standard unix spell checker, and the misspelling remained. (wikipedia, 2009) <= hehe the Harvard referencing system is now in my blood

Referer with only one R is now a word commonly used by professionals in the domain, and we might be able to write both without passing for a fool (you’ll even pass for an erudite person  when you explain the origin of the word to your colleagues during the coffee pause)

Notice that the correct spelling, referrer, is also in use in some contexts, such as the DOM specifications (document.referrer).