MIH SWAT » ajax

How did they do that ?

Hennie Grobler — Mon, 16 Nov 2009 12:16:43 +0000

Have you ever come across a website and saw some really interesting aspects of the user interface ? Maybe it was a site design that looks like a flash site but was not? Or maybe you came across a site that had a visually appealing menu.

Coming from mostly a backend-development background I get this feeling often. Last week it happened when I saw the Hide option on Facebook. I have seen it a hundred times before but on that day I found myself wondering, so I recreated the sample in my own way from scratch.

The following questions came to mind while looking at Facebook’s implementation:

how to make the hide option, appear next to feed item that the mouse is hovering over.
how to make the ‘menu’ item under the hide option appear and stay there when the Hide button is clicked
how to remove the selected options from the list without having to refresh the whole page
how to send the filter option to the server without posting back the whole page

I decided that I will use styling and jQuery to complete steps 1 – 3 and use a ajax call via jQuery to post the selected filter option back to the server.

Note that you will need some prior knowledge of jQuery selectors in order to follow the code sample. See the following urls for some background information on this:

The following are the steps I completed to make these options work:

Create the folder structure:

Download the latest query plug-in (jquery.js in the screenshot) from http://jquery.com/
Create your project with necessary files. See the screen shot for my folder structure:

Import the style sheets and javascript files:

1. Place the following statements in the index.php file to reference the style sheets and javascript files


    
        How did they do that: Facebook Hide

Create the news feed items:

The sample only shows one of the news feed entries for clarity sake. Repeat item-container div for each additional item you want.
Note the following things when reviewing the snippet
1. The class name for the feed item is item-container.
2. Hide-button is a child element of item-container
3. Hide-menu-header and hide-button-options are child elements of hide-button.
4. The hide-menu-header relates to the Hide button on the screen shot and hide-button-options relate to the menu item under that.
5. The custom user attribute on the span. This is the id (in our case a fictional id x) of the user’s events that must be filtered. This is the value that will be posted back to the server during the ajax call.


    
        
            
                
                    
                        
                    
                    
                
                
                    
                        
                            Bruce Banner
                         posted on twitter
                    
                    
                        8 hours ago | comment | like
                    
               
           
           
               
                   
               
               
                   
               
          
      
...

Link up all the events to the appropriate elements:

Add script to hidebutton.js. The $(document).ready(…) construct is used to ensure that the initialization is only run once the full DOM is loaded. Note that $(document).ready(…) will run as soon as index page is loaded because it is imported in index.php and is not wrapped by any functions.

The script calls three methods that in turn use jQuery selectors to find the appropriate elements by class name or id and then links events to them.

initializeFeedItemHoverEvent: adds the hover event to all elements that contain class item-container (news feed entries). There are 2 functions in this method. The first is fired when a mouse cursor is moved over the element and the second is fired when the mouse is moved away from the element
initializeHideMenuClick: adds a click event to all hide-menu-header (hide menu button) items. It uses $(…).parent and $(…).find to find the appropriate elements relative to the current element. $(this) in this method relates to the hide menu button. It also uses removeClass and addClass to toggle the selected and unselected appearance of the hide menu button.
initializeHideSubMenuClick: Calls the feedfilter() method (explained in the next step) on the appropriate hide button sub menu element. The feedfilter() method will use ajax to post the filter back to the server.

//file: hidebutton.js
$(document).ready(function() {
    initializeFeedItemHoverEvent();
    initializeHideMenuClick();
    initializeHideSubMenuClick();
});

//Initialise the hover events over the newsfeed entries function initializeFeedItemHoverEvent(){
//Find all newsfeed items that have a class called item-container
$('.item-container').hover(function() {
        //Show the hide button when the mouse moves onto the item
        $(this).find('.hide-button').show();
    },
    function() {
        //When the mouse cursor leaves the newsfeed item,
        //hide the hide button and reset the styling to original
        var hideButton = $(this).find('.hide-button');
        hideButton.hide();
        resetStyles(hideButton);
        //Hide the submenu of the hide button
        $(this).find('.hide-button-options').hide();
    })
}

//Initialise the click on the hide menu item
function initializeHideMenuClick(){
    //Find the hide button the user clicked and toggle (show/ hide) submenu
    $('.hide-menu-header').click(function() {
        //Find parent with class 'hide-button' of the current element
        //from there find the child of the found element called 'hide-button-options'
        var element = $(this).parent('.hide-button').find('.hide-button-options');

        //Find out which class is set on the current element
        //and based on that set a different class
        if ($(this).attr('class') == 'hide-menu-header'){
            $(this).removeClass('hide-menu-header');
            $(this).addClass('hide-menu-header-selected');
            element.show();
        }
        else {
            $(this).removeClass('hide-menu-header-selected');
            $(this).addClass('hide-menu-header');
            element.hide();
        }
    })
}

//Initialise the click event on the hide sub menu
function initializeHideSubMenuClick(){
    //When the user clicks on the menu option then
    //call the feedfilter method in the  jquery.feedfilter.js file
    if ($(".hide-button-options").length > 0) {
        $(".hide-button-options").feedfilter();
    }
}

//Hide the menu button and its sub menus
function resetStyles(hideButton){
    var menuHeader = hideButton.find(".hide-menu-header-selected");
    if (menuHeader != null){
        menuHeader.removeClass('hide-menu-header-selected');
        menuHeader.addClass('hide-menu-header');
    }
}

Complete the server post back:
The following section describes the code that fires when a user clicks on the hide button sub menu option. It first extracts the user id that is stored in the custom user attribute and posts it back to the specified page.

Note the if (response == “success”) {..} section. It finds all the news feed items with a sub element that has a user attribute with the same value as the news feed item that the user chose to hide.

//jquery.feedfilter.js

//Specifiy the feedfilter function definition
//What must happen when the user clicks the sub menu item
(function($) {
	$.fn.feedfilter = function() {

		this.click(function() {
			//Call setFeedfilter
            setFeedfilter($(this));
			return false;
		})

		function setFeedfilter(obj) {

            //Get the value of the user attribute on the current element
            //as the user clicked on the hide sub menu the current element is
            //the hide sub menu
            var user = obj.attr("user");
            var container = obj;
            var originalContent = container.html();

			$.ajax({
		    	type: "POST", //post back method
		    	url: "ajaxpostback.php", //page to post back to
		    	dataType: "json",
		    	data: {"userId": user}, //additional parameters
		    	beforeSend: function(xmlhttprequest) {
                                //change the content of the sub menu button to appear as a
                                //loading animated gif
		    		container.html('')
		    	},
		    	complete: function(xmlhttprequest, textStatus) {
                               //add any code here that should fire once the post back
                               //is completed
		    	},
		    	success: function(response) {
                               //add any code that must run once the postback is completed and
                               //successfull
		    		if (response == "success") {
                        $(".item-container .hide-button-options").each( function() {
                               var data = $(this).attr("user");
                               if (user == data)
                               {
                                   $(this).parent('div').parent('.item-container').hide();
                               }
                            }
                        );
		    		}
                    else
                    {
		    			alert(response);
		    		}
		    	},
		    	error: function(xmlhttprequest,status,error) {
		    		alert("There was a problem with filtering events.");
                    container.html(originalContent);
                    }
		    })
		}
	}
})(jQuery)

What happens on the post back page?

I have not implemented the actual persisting of the filter setting but have shown how to retrieve the parameter value passed from the client side.

View the result

Browse to the index.php page and you should get something similar to the screenshot shown below.

What’s next?

Styling can be refined. I used some inline styles etc that can be moved to the style sheets.
Content is static at the moment. The news feed items would normally be generated from a data store of some sort
Add additional error handling
I used inline php and markup together to simplify the example. Best practice though, is to split your php code and markup. One approach would be to implement the Model View Controler (MVC) design pattern. A good option for this is to use the Zend Framework (http://framework.zend.com/). It implements the MVC pattern and has loads wrapper classes that wraps commonly used functionality to promote reuse.

Vacancies at SWAT

Jacques van Niekerk — Tue, 03 Nov 2009 11:27:04 +0000

Would you like to work at SWAT ?

We have a few positions vacant at the moment – have a look:

In Sao Paulo, Brazil – we need a junior front-end developer. You are highly skilled in front-end development, with specific skills in CSS, HTML and Javascript. You are a competent programmer, but you prefer to work on the front-end. You will be working under the guidance of an experienced and expert engineer. You like working with bright and clever people, and you are passionate about the web. The successful candidate will speak English, and will be a paulistano, or be willing to relocate to Sao Paulo.

In Johannesburg – we are looking for a senior technical architect. You will have the opportunity to establish the blueprint and create the framework for truly cutting edge media delivery platforms that will change the face of media in South Africa. And that is no exaggeration. You should have outstanding technical skills, including the ability to code as and when required. You must be able to interact with a team of highly skilled professionals. You will ideally have experience of VOD, digital TV, IP-TV and related technologies. A background as a developer is essential – you will have in-depth knowledge of the Microsoft .Net platform, but also wider knowledge of open source platforms and languages. You are comfortable dealing with executives and senior managers. You’re not only an ubergeek, but also an inspirational tech leader. This is a challenging position – but it represents a massive opportunity to the right person. Detailed requirements here.

In Cape Town – we are looking for a junior tester, who will devote a great deal of time to ensuring that a large corporate social network meets the right quality standards. You will be part of the SWAT core team – you must be prepared to work with some of the best developers, architects, geeks and web-heads you are ever likely to meet. Can you execute tasks on your own initiative, prepare and execute test plans ? More details on the position can be found here.

Cape Town – we are looking for someone to play the role of Internet Evangelist. This role is available to anyone who is absolutely passionate about the web, who is capable of conveying this passion to diverse audiences, who learns quickly … and who can teach others. Your role will be to evangelise the use of Web technologies (and other Internet related technologies) into the larger group – the challenge is to make people from all non-internet businesses see the Internet as an opportunity not a threat. In addition you will perform tasks as assistant community manager for the corporate social network, and you will assist the Analyst in the team with research tasks. You must be willing to travel in South Africa and abroad, as required. To apply for this job, you will have to demonstrate passion, interest and knowledge of the Web and related technologies. You are a well-spoken, confident geek, web-head and proud to be a Web addict.

Finally, and also in Cape Town – we want to recruit a PHP developer. You will be have outstanding technical skills, wide experience in web based development, and you will be able to hold your own amongst an elite group of developers and architects. Javascript, Zend Framework, AJAX, OO, Web 2.0, REST, SOAP and UML will be old news to you. You are passionate about the web. If you think Twitter is silly, you don’t need to apply. More information here.

If you are interested in any of these positions, please send your CV to Melanie Koch. We look forward to hearing from you.

The State of Javascript

Dani Valentin — Mon, 02 Nov 2009 18:16:41 +0000

Douglas Crockford wrote in a 2001 article that javascript was the world’s most misunderstood programming language. In another article, from 2008, he explains why: “Its obvious defects, its unfashionable programming model, intentional mispositioning at its introduction, and its ridiculous name caused it to be rejected as unworthy by most knowledgeable programmers”. And then, he recognizes: there was AJAX. And AJAX gave javascript a second chance.

In another place, I read about the phases javascript’s been through since its creation:

The “We need scripting for web pages” phase. (Netscape)
The “We should standardize this” phase. (ECMAScript)
The “Javascript is not a toy” phase. (Ajax)

And now we are in a new phase: Javascript is a programming language phase. And, even though it is currently the world’s most popular programming language, there are still a lot of confusion about its current state, lack of knowledge of its power and outdated information about it. This article tries to throw some light at it.

First, a little bit of history

Javascript was introduced in December 1995 by Netscape. It was developed by Brendan Eich and was called Mocha and LiveScript before. According to Brendan himself, the confusing name was given when Netscape and Sun did a license agreement and wanted to make javascript complementary scripting language to go with Java. Others believe that the name was given so it could ride along in Java marketing, since this was the hot programming language of that time.

In the beginning, the language targeted non-tech people, specially designers and amateurs and the main idea was to add some interation to web pages. That is why the language is so flexible: it was supposed to make programming easy for beginners.

ECMA and standardization

After it was launched, Microsoft, interested in getting some of Netscape’s users for itself , developed a compactible dialect to the language. It was called JScript, as Javascript is a trademark of Sun Microsystems, and was included in Internet Explorer 3. Because of the emerging different implementations, people realized the importance to standardize it.

This job was given to ECMA that wrote a document decribing how the language should work. The language described in this document, the ECMA-262 specification, is called ECMAScript. Other programming languages are based in ECMAScript, like ActionScript.

We are currently in edition 3 (Javascript 1.5 – published in 1999). The forth edition of ECMA-262 (Javascript 2.0) was supposed to be finished in October 2008. Along with the critics it received, the most important were:

The language didn’t need that much change
Javascript didn’t need to look like Java or any other language
Javascript already does well what it proposes to do
Javascript did not need a better extension mechanism

Because of differences between gigantics – in one side: Google, Mozilla and Adobe (that supported version 4); on the other: Microsoft (that was working in a softer version, 3.1), this edition was suspended and a new mid-term edition was created: ECMAScript Harmony. (more here and here).

Javascript versions and browsers

Javascript is currently in version 1.8.1. That doesn’t mean all browsers run the latest version or even the same one. The table bellow shows each browser and its respective javascript version.

Version	Release date	Equivalent to	Netscape Navigator	Mozilla Firefox	Internet Explorer	Opera	Safari	Google Chrome
1.0	March 1996		2.0		3.0
1.1	August 1996		3.0
1.2	June 1997		4.0-4.05
1.3	October 1998	ECMA-262 1^st edition / ECMA-262 2^nd edition	4.06-4.7x		4.0
1.4			Netscape Server
1.5	November 2000	ECMA-262 3^rd edition	6.0	1.0	5.5 (JScript 5.5), 6 (JScript 5.6), 7 (JScript 5.7), 8 (JScript 6)	6.0, 7.0, 8.0, 9.0
1.6	November 2005	1.5 + Array extras + Array and String generics + E4X		1.5			3.0, 3.1
1.7	October 2006	1.6 + Pythonic generators + Iterators + let		2.0			3.2, 4.0	1.0
1.8	June 2008	1.7 + Generator expressions + Expression closures		3.0
1.8.1		1.8 + Minor Updates		3.5
1.9		1.8.1 + ECMAScript 5 Compliance		4

Javascript Engines

Since last year, browsers have been fighting on which one has the best Javascript performance in the so-called Second Browser War. It all began with Google Chrome and its engine, V8. Then, Safari launched its SquirrelFish that evolved 3 months later to SquirrelFish Extreme. In june 2009, Mozilla released its Firefox 3.5 with an optimized SpiderMonkey engine, called now TraceMonkey, that boosted its speed to 40 times in some cases.

Lifehacker did some speed tests last june with the final versions of Safari (4.0), Chrome (2.0) and Internet Explorer (8) and almost-there betas of Firefox (3.5b99) and Opera (10b1). The results can be seen here.

Other Javascript uses and projects

It is worth remembering other uses of javascript, besides in a webpage. First of all, we can use it for:

We can also mention other interesting projects:

Rhino is an implementation of Javascript 1.7 written in Java by Mozilla. Running on it, you have a lot of Javascript server-side projects
Javascript on Rails: this is a 2007 project, developed by Steve Yegge, that ports Ruby on Rails to Javascript. Steve did this because he wanted something like RoR to work on projects in Google but this was not an allowed programming language in the enterprise. It also runs on top of Rhino.
ScreamingMonkey: another Mozilla project, its goal is to allow Tamarin to run within non-Mozilla browsers, starting with Internet Explorer, allowing them to understand Javascript 2 even though not implemented