Category Archives: Javascript

IE Test VM’s for Virtual Box

Always a useful resource.

There is a list of VM’s with several versions of IE’s if you are under OSX (might work with Linux as well – haven’t tested).

Very useful if you, for some strange reason, IE doesn’t work with your Javascript, CSS, design, etc.

http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/


Scalable JavaScript Application Architecture

Awesome presentation from a former Tech-Lead from Yahoo.


Getting your head around Backbone.js

Truth is that I’m still a beginner on this and I’m still learning, but since I have found some resources and did a bit of study, here is what I could gather so far.

To be able to understand fully how backbone.js worked I have decided to do a small compare with CakePHP MVC structure, so I have started an example with the following directory structure:

  • app
    • controllers
      • // extend Backbone.Router
    • models
      • // extend Backbone.Model
      • collections
        • // extend Backbone.Collection
    • views
      • // extend Backbone.View
    • libs
      • js
        • jquery files
        • backbone.js
        • underscore.js
        • bootstrap js files -> these weren’t loaded on the main index.php file because of conflict, couldn’t figure out why so far, but I will look into it
      •  css
        • bootstrap css files
      • img
        • bootstrap img files
    • index.php

The index file was a simple file that loaded all required scripts and the only requirement is to load the underscore.js file prior to the backbone.js and, off course, loading your controllers, views, models, collections, after these.

The controllers are called “routers” on backbone js. At some given point they were called controllers, but the naming convention were changed because some confusion. In one of the links that I will paste bellow have more info about this.

The views can work just like the CakePHP views, the only real big difference is that the part that render the “view” is under this view file. In another words, the Backbone.View.extend is both a view and a controller renderer.

The models are a bit bigger concept than CakePHP. The models are split in Models and Collections. To explain this better consider that User is a model and Users is a collection of User, so when you do a Users.get it would return all objects from the User model that is stored.

I have just started to scratch the surface from Backbone.js, so don’t take anything for granted, but here are all links that I’m using at the moment as reference. They are helping me, so they might help you as well:

 

A few weeks after I have 1st written this post I have got an excellent tutorial of how to handle Backbone.js. It is all in Portuguese (Brazil), but with a little Google Translation the tutorial should work perfectly for you.

Here is the link:

http://fernandomantoan.com/javascript/serie-backbone-js-parte-1-introducao/

 


Free JS Books

 

Worth sharing: http://jsmag.revolunet.com/


Backbone.js

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It’s all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server.

This is pretty cool. It is something in between JQuery and NodeJs but it require some migration from JQuery: https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md/

If UX wasn’t an issue and performance or a more objected oriented approach was needed, I would definitely consider it.


JQuery AJAX beforeSend Error

Today I have came by a very strange behavior that was blocking up a dialog to show just prior to the ajax to load. The ajax was binded to a click event and on the ajax beforeSend I had:

$('.dialogModal').dialog();

In theory the beforeSend event will be triggered every time for the ajax call, but, if you have async: false in the ajax call, this will never work for Chrome and IE. Reason is that the beforeSend for both Chrome and IE happens after the ajax is completely done and at that point, my  afterSend took over and closed the dialog.

Off course changing it to async: true will make the dialog to open immediately, but it is not on every ajax request that you want to make it async: true. Take for example when you really want block everything else until the element is fully loaded.

Anyway, there are several ways to solve the issue but if async:true works for you, that is all you need to do.


Using the Facebook Javascript SDK

I have been messing with the FB API’s for a while to get that counter customized for us. The more I messed with the API’s the more I got the feeling that FB is not quite sure what is doing.

The Javascript API that we seen is the new Javascript API and it seems it is on Alpha release. The good thing is that with it we wont need anymore that .htm verification file for running cross-domain javascripts, but the bad part is that currently Goal uses for the fan badges the old javascript API.

New: http://developers.facebook.com/docs/reference/javascript/
Old: http://developers.facebook.com/docs/reference/oldjavascript/

I found a comment saying that if we are currently wanting to use the new API (Javascript SDK) we should fully remove the old references from the site and since it is on Alfa release the data functionality are still not ready. Besides this I was getting error after error when using the new API even after removing all old references from the application.

http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library

The best way to keep track of the Javascript SDK from Facebook is by following the issues list at: http://github.com/facebook/connect-js and by checking on the FAQ. There is a lot of good information there.

Just a note, the Wiki is being deprecated. All the information that we should look are under the developers.facebook.com/docs.

Playing with the API’s, I have created a custom AJAX call using JQuery and JSONP. the JSONP allows a cross-domain request from Jquery AJAX and with that I was able to correctly execute a query using FQL.

The query is a parameter given to a url (http://api.facebook.com/method/fql.query?query=QUERY.) and it will return in either XML or JSON format.

Anyway using the query is pretty simple and if you want to give a test run of the results format before doing anything the best place is:

http://developers.facebook.com/docs/reference/rest/fql.query

There is one annoying bug that I could go through with the new SDK, the SDK wont bootstrap giving an error at line 3. I think is related to cookies and the old API. I will still give a search on that and when I find the solution, I will place it here as an update.

Have fun.


CDN Performance – JQuery donwload

It’s a great article that shows how dowloading the JQuery from a CDN Server can relief your servers from a major load:

http://royal.pingdom.com/2010/05/11/cdn-performance-downloading-jquery-from-google-microsoft-and-edgecast-cdns/


New resources

Happy Friday everybody ….

2 New resources for you to check out:

  1. Javascript Bookmarklets
  2. Zend Framework and Firebug – Log PHP warning, errors and exceptions

Don’t forget also of the PHPArch Free Webcast today about Running PHP on Windows with Hank Jansen and Zack Owens.

Have fun .. .


Follow

Get every new post delivered to your Inbox.

Join 293 other followers

%d bloggers like this: