Web Development Good Practices

In this post I'll try to add some good practices which are nice to have in mind while developing for the web.
Developing for the web includes varios different technologies, this is what I like about web developing, it includes HTML, CSS and Javascript for the client, then a programming language like PHP or C# for the server, let's not even get into the server technology, like Linux + Apache, or Windows + IIS, and data storage like MySQL, Postgree, MSSQL, or even NoSQL databases like MonoDB and Cassandra.

I'll talk about the most common technologies and the ones I know, of course.

HTML

It's very important to follow standards, in every technology, but in web is really important, as your app is released to the masses and HTML is one of the things everyone can see. If you output bad HTML the browser might render it just fine, but it might break in some browsers, also, it's not good for a professional site to have malformed HTML, or deprecated HTML.

If you are starting a project from scratch you should consider using HTML 5, it's already supported, modernizr helps quite a bit for unsupported browsers, it's the new standard and it will look good on your portfolio.

HTML 5 isn't really hard to learn, it's simpler and nicely evolved from the old HTML, so you should really give it a try.

CSS

CSS hasn't changed much, and support for CSS 3 isn't quite implemented correctly yet, so using CSS 2/2.1 is what you should do by now, but that doesn't mean you can't extend it!
LESS is there just for that, it takes CSS and adds a bit of logic inside, like variables, nested rules and more.

You can compile it to standard CSS or just write LESS CSS and use Javascript to interpret it, up to you, Javascript is really supported right now, so it's safe enough to use it.

Do not use flash!

There are very few things you can do with flash that you can't with HTML 5 + Javascript, and to be honest, I can't think of one right now, with HTML 5 + Javascript you can do a Video Player (like youtube does), Image Manipulation, you even have sockets now! There's really no need to use a privative plug in with security issues, you can just use the browser, and the user won't need to install anything nor compromise his security.

Javascript

When using Javascript you might want to use JSHint (or the more strict and mean, JSLint) to check your code, writing code that follows JSHint ensures it follows basic good practices.
Also you should use a library like jQuery, it ensures cross-browser compatibility, making the biggest pains of Javascript go away!
Also! It's important that you understand how Javascript really works, Object Orientation with Javascript can be a bit tricky.
Once you understand this little language it's easy to love it.

Client Side Frameworks

There are several frameworks for this, basically what these frameworks do is give you a nice solid base so you can write cross-browser and even cross-platform (PC, Tablet, Mobile) applications with less effort.
These frameworks give you a base style and/or script for you to be as productive as possible.
My favourite right now is Bootstrap, a lightweight open source framework by Twitter. It gives you a nice CSS reset, fonts adjustments, and a grid system.
It also defines a nice set of components you can use on your site, some with CSS, and others with Javascript (which depend on jQuery).
Using a framework like Bootstrap is highly recommended.

Server Side Technologies

This is sometimes personal taste, and sometimes more technical. The most common technology for web applications today is probably LAMP (Linux, Apache, MySQL and PHP), but there are other technologies which are getting quite popular too, like RoR, Django and ASP.NET MVC.
All of them are free to use, ASP.NET of course requires IIS 7 and a windows environment, but hiring a windows hosting isn't much more expensive than a linux one, nevertheless, if you plan on hosting your own app or are afraid it will scale a lot, licences might be a problem, Azure might be a workaround for this, as you don't pay licences at all, just the resources your site uses, but learning a whole new technology just you host your application there it's not really a big advantage.
Most of the time though, you can just choose whatever you feel like using, and its more fun to use for you, PHP, Django, RoR and ASP.NET MVC all handle themselves pretty nicely, performance won't be a real issue, you should worry about the speed of development and your own fun while developing.

Comparing PHP to RoR is quite unfair though, as RoR is a framework and PHP is a language, if anything, we could compare PHP to Ruby, but you won't ever want to use plain ruby for a web application, what you want is a framework, you can either make one yourself or use a well-tested one.
So for PHP I recommend using a MVC Framework, like CodeIgniter, CakePHP, Symfony or Yii.
What PHP really lacks is some kind of advanced functionality, of course, PHP does have that, but for example, if you want advanced caching, you might need to install APC, or XCache, or memcache, on ASP.NET MVC you just use the standard cache you are given with the framework, this makes PHP a bit harder to use, but more versatile.
Note: StackOverflow uses redis for it's cache.


It's important to note though, most of the time you won't really need to worry much about the server-side technology, that beeing what database engine you use, how you cache, what language or framework you use, what you do have to have in mind is the client side, that's why using something like Bootstrap is awesome.

If you do care about the server, then you can start worrying about using MySQL, Oracle, Postgree or MSSQL, or mixing standard SQL with a NoSQL database like MongoDB, Cassandra or Redis, or mixing different languages, like making your own modules for PHP in C, or use Facebook's HipHop PHP to compile your PHP code to C++, but that's far beyond the scope of this entry.

What I want to emphasize is, use whatever you find fun, and pay special attention to the user interface, follow the standards and you will be fine, they are there for a reason.

Read more...

Javascript Clean HTML

Normally when using WYSIWYG editors liks CKEditor, you allow the user to enter poorly formatted HTML, this isn't really a big issue most of the time, but you have to be very careful with this, for example, if you allow them to enter any html, they could easily send a tag with a custom request, and XSS injection.

This isn't about security but a little help with managing the generated HTML, I needed a function to clean empty tags, thanks to the awesomeness of Regular Expressions, I ended up with this little guy

String.prototype.htmlTrim = function () {
        return this.replace(/<(p|div|span|b|u|i|strong|em|h\d+)>\s*\n*\t*[ ]*\s*\n*\t*<\/\1>/, '');
};

That will clean all empty tags, but it won't fix much more. Anyways! I think this might be helpful for some people so I'm sharing it here.

Usage is

myString.htmlTrim();

Read more...

Object Oriented Javascript 1: Inheritance

Pretty Javascript!

Javascript is such a different language, I wouldn't call it hard to use or understand, but we are used to different and more structured languages, Javascript gives you so much freedom, you end up doing whatever you want, and not quite understanding what's really going on, personally I find this frustrating, as I really want to understand everything I do, afters years of barely using Javascript for web development, for several reasons I decided to go a bit deeper on this, and find out what's really going on with my code.

When we think about object orientation we normally think of languages like Java, or Ruby, in which a Class defines how an object will behave, and you can then implement inheritance by just adding a "extends" to that class definition.
This implementation of Object Orientation is based on classes, Javascript on the other hand uses Prototypes.

Before Prototypes... Let's talk about the new keyword

Hey hey, stop right there my fellow reader, let's take a moment to relax and go back to the basics, let's talk about the new keyword.
In Java, for example, the new keyword takes a class, and creates/instantiates an object based on that class, the object has all the definitions the class specified.
But in Javascript, we have no classes! What on earth does the new keyword do then?
Well the new keyword can only be used on function definitions, and that function will act as a constructor for our new object.

But there are other ways of creating objects, why bother using new? Well let's see! Let's make some objects

var a = {x:12};
var b = {x:12};

As you can see, we have two objects, a and b, they both hold the same definition, but its repeated, what if we wanted to create 10, or 100 objects? Well we use the new keyword! That way all our instances references only one object

var a = function() { this.x = 12; }
var obj = new Array();
for(var i = 0; i < 100; i++) { obj[i] = new a(); }

We just made 100 objects! Inside an array but...well you get the idea, using the new keyword is closely related to classes, as it's how we say "Take this class, make an object modeled after this class", but as we have no class, we just give the new keyword a constructor, and say "Here, make an object and call this constructor".
Inside the constructor, we can use the "this" keyword as if we are already inside our object, just like a regular constructor.

Ok, so we have the equivalent of a class constructor, but how do we set the attributes, and methods to share across all objects? Prototypes!

What are prototypes?

Awesome question! Prototypes are objects, the special thing about prototypes is that every object in Javascript has a prototype (except some system objects), and a prototype specifies the methods and properties the object will have when instantiated.

Let's take a look at this simple code.

var A = function() { this.x = 12; } // function expression
var objA = new A();                    // creates an instance of A, using the A as constructor
objA.x
> 12
var objB = new A();
objB.x
> 12

That's nice, we have two instances of A, an anonymous function acts as constructor, and we didn't use prototypes! Using the new keyword, we even create instances properly so the function is referenced and not copied twice. This is a pretty efficient way of defining objects in Javascript.

But why, oh why prototypes then?

I didn't need them before, why learn about them? Well, what if we need to extend our A pseudo-class? As we don't have classes, we have to put all the things we want our instances to share in the prototype, instead of the class! So to inherit something, we use... that's right, the prototype.

Let's first understand how this is possible: When a method of an object is requested, the Javascript interpreter asks the object for that method, if it can't find it, it asks the object for it's prototype, and it seeks the method in the prototype, that way, we can create a chaining of prototypes, and implement inheritance cleanly.

Don't worry! Here is the example

var Animal = function() { this.type = "Mammal"; } var Cat = function() { this.name = "Cat"; } Cat.prototype = new Animal(); // Cat gets all the properties of this object
var myCat = new Cat();
myCat.type
> "Mammal"
myCat.name
> "Cat"

Note that we use new Animal() to set as the prototype, as we need an object, not a function, otherwise it would not work!

As myCat doesn't have a type property, it looks up on the prototype definition of Cat, and calls the method we want, there it is! Inheritance!

Okay so maybe we need prototypes...

Good! Now that I convinced you that prototypes are what cool kids use, let's now take a closer look on protoypes

var A = function(){} // object definition with empty constructor
A.prototype.x = 12; // using the prototype, we define x as 12
var objA = new A(); // create an instance of the object
objA.x
12
A.prototype.x = 6; // modify the prototype after instantiating an object
objA.x 6 // ta-da!

Crazy huh? Well maybe it's not that impressive, as you could say "Hey but why don't just change the x property of objA to 6?" Well yes, it would do the same, but imagine x is a function, and there are 10 instances of A, some by inheritance, some regular instances, and we change x, do to something completely different, changing a method at runtime! It's a lot of power! This is why Javascript is so dynamic, and scary sometimes, you have so much freedom! You can have some crazy design patterns for your programs!
As the instances of A don't have an x property, Javascript looks for the prototype's implementation of x, making this possible.

Note: As Javascript is so dynamic you should be careful with your code! Make sure you follow good standards to not end up with a crazy monster of a program, you can't even understand or debug!

Other cool things you can do...

Have you heard of Partial Classes? Not a big deal really, it lets you define a class in separate files, so you have a part of the definition in one, and a part in other, it's not quite the same as inheritance, it's the same class, the compiler just joins all the files and then compiles the class as one.

This is cool, and you can do it in Javascript! This lets you extend classes without inheriting, and making your own extensions, for example, say you want to add a method to Javascript's native String class, it's easy!

String.prototype.isNullorEmpty = function() { return (this == null || this == "" || this == undefined); }
"".isNullorEmpty()
> true
"hI".isNullorEmpty()
> false

Prototypes are pretty hard to get used to, but they certainly do not lack power!

Read more...

MSSQL Alternative to MySQL's LIMIT Pagination

In MySQL is quite easy to paginate, with SQL you just do

SELECT * FROM MyTable LIMIT 10, 5

That will select the first 10 rows starting from 5, oddly enough MSSQL does not have an easy way to do this, there are a lot of different ways to do it, but the easiests is using two TOPs

SELECT TOP 10 * FROM MyTable WHERE id NOT IN (SELECT TOP 5 id FROM MyTable ORDER BY Id DESC) ORDER BY Id DESC

This will work as long as you don't want to start from 0, of course, in that case a regular TOP statement will do fine.

Read more...

ASP.NET: Disabling a button control when clicked, and do postback

I'm not a fan of ASP.NET, but work is work, and I have to use it for now.
Beeing a fan of Open Source and PHP it's quite hard to get used to, but I find the structure of C# fun enough, what I don't really enjoy is the ASP.NET framework, seems too hard to do basic things, and too easy to do complex things (If you let it handle things for you).
Nevertheless, this is a common problem I think many people might have, when you have a button control which has a postback event associated, and you also want to associate some javascript to it, well, I saw many solutions but by far this was the cleanest and easiest.

Enjoy!

Read more...