HTML5 WebSockets makes it possible to open a persistent connection to a server within a web-browser via javascript.

UPDATE: Mastering the new Spec-76 WebSockets handshake with PHP.

Websockets works already in the latest Webkit-browsers like Safari 5 and Chrome 5. Firefox 4 Beta 1 knows the Websocket-Object but it can’t open the connection :(

My Websocket test script sends the current mouse position via socket connection to the server and then receives all positions of all current open sockets and prints them to the browser-window. In other words, you can see the mouse cursors of the other users on the page.

var socket;
 
function init() {
	var host = "ws://84.38.67.247:8080/dev/websocket/server.php";
	try {
		socket = new WebSocket(host);
		socket.onopen = function(msg){ };
		socket.onmessage = function(msg){
			eval('var data = ' + msg.data + ';');
			for (userId in data) {
				if (data[userId].position) {
					var pos = data[userId].position.split(',');
					var color = data[userId].color;
					render(userId, pos[0], pos[1], color);
				}
			}
			dump(data);
		};
		socket.onclose = function(msg){ };
	} catch(ex){ console.log(ex); }
 
	$('body').bind('mousemove', function(evt){
		send(evt.clientX, evt.clientY);
	});
}
 
function render(u, x, y, c) {
	if ($('#'+u).length == 0) {
		$('
 
 
').appendTo('body');
	}
	$('#'+u).css('left', x+'px');
	$('#'+u).css('top', y+'px');
	$('#'+u).css('background', c);
}
 
function send(x,y) {
	var msg = x + ',' + y;
	socket.send(msg);
}

On the server side i use a PHP5 script. I have written my own server-class but it’s based on the work of the phpwebsocket project. The server.php instantiate the WebSocketServer object and contains the callback function.

http://bohuco.net/dev/websocket/

Source Codes:
WebSocketServer.php
server.php

Der SproutCore Erfinder Charles Jolley verlässt Apple und gründet ein Unternehmen das sich mit der Entwicklung neuer Rich-Web Applikationen auf HTML5-basis beschäftigen wird.

Jolley war unter anderem für die MobileMe Plattform zuständig und hat für Apple Javascript Frameworks entwickelt. Die neue Firma wird Strobe Digital Publishing heißen und Jolley beschreib sie so:

Strobe Digital Publishing is a better way to put content onto the iPad and other mobile touch devices. Based on a blend of HTML5 and native technology, Strobe content applications offer a great native-style reading experience with the ability to deep link and share content to drive traffic.

SproutCore ist ein HTML/Javascript Framework das diverse Komponenten für Rich-Web Applikationen zur Verfügung stellt – Demo.

via cnet, maclife.de

Selbst wenn man keine klassische Volltext-Suche auf der Seite hat kann man mit dem Site Search Tracking von Analytics arbeiten.

Man kann mittlerweile mehrere Parameter (GET, POST) angeben die in die Messung miteinbezogen werden sollen. Ausserdem kann man Parameter für Suchkategorien definieren. Falls man eine AJAX-Suche hat muß man die Messung manuell auslösen das sieht beim asynchronen Analytics so aus:

_gaq.push(['_trackPageview', "/jobs/search?keywords=Oida,Voda&locations=Linz,Wien&categories=Jobs"]);

“keywords” und “locations” wären in diesem Fall eine kombinierte Query und “categories” die Suchkategorien.

Eine wirklich simple Idee … mittels der Farbunterscheidung zwischen “visited”- bzw. “nicht visited”-Links kann man die Browser-History eines Benutzers stehlen. Man braucht allerdings eine Linkliste die man vergleichen kann, also ist es kein richtiges stehlen. Im Detail funktioniert es so das man mittels Javascript Links erzeugt und vergleicht in welcher Farbe sie dargestellt werden. So kann man zB feststellen ob der Benutzer vorher schon bei den Konkurrenten vorbeigeschaut hat.

Mein Beispiel-Script kann man unter folgender Adresse finden:
http://bohuco.net/dev/history/

(via dicabrio)

Today Google released their new Closure Compiler, you can use it to optimize and minify your javascripts.

Now i show you how to use the new Google Closure Compiler over the RESTful API with PHP5. First of all, you don’t need to install anything, we will connect the free API via cURL usually activated in PHP5.

The API (see reference) resides under the following URL and requires four params:

http://closure-compiler.appspot.com/compile

compilation_level
is one of three options: WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, ADVANCED_OPTIMIZATIONS,
i use simple optimizations, it don't need further config (like advanced) but is
better than whitespace only.

output_format
is "text" if you want compile a javascript

output_info
is "compiled_code" if you want compile a javascript

js_code
is your javascript source code, instead you can submit "code_url" param, an url
to a javascript-file

 

enough with theory, now the PHP code:

 
$script = file_get_contents('http://www.domain.com/scripts/script.js');
$ch = curl_init('http://closure-compiler.appspot.com/compile');
 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, 'output_info=compiled_code&output_format=text&compilation_level=SIMPLE_OPTIMIZATIONS&js_code=' . urlencode($script));
$output = curl_exec($ch);
curl_close($ch);

i use it in a deployer script and replace the content of my script files with the compiled versions. you can tryout the compiler with a simple html-form.

Über den Lagesensor kann man ermitteln ob das iPhone gerade hochkant oder horizontal gehalten wird. Safari am iPhone besitzt dazu ein spezielles window-attribut. In window.orientation steht entweder 0 (für vertikal) oder +/-90 wenn das iPhone quer gehalten wird, je nachdem welche Richtung es gedreht wurde.

Um auf eine Änderung reagieren zu können gibt es den Event-Handler onorientationchange den man zum Beispiel im BODY-Tag verwenden kann:

 
    <body onorientationchange="alert(window.orientation);"></body>

» Beispiel-Seite

Google hat diese Woche einen Javascript Debugger/Profiler für Chrome veröffentlicht, bisher waren ja nur die WebKit-Tools enthalten.

via golem

My favorite feature in firebug is console.log but it has one problem, you have to remove all calls from source code before going live else your visitors will get many many javascript errors. But there is a really simple solution for that problem, getfirebug.com hosts a javascript which creates a fallback console object if firebug is not installed.

[sourcecode language="javascript"]

[/sourcecode]

So, now we are on the save side and can play around with the console object. The usually most used method is “log”, it simply prints something to the console. Strings, Arrays, Objects, Dom, XML … everything works, log can also print more than one variable at once.

[sourcecode language="javascript"]

console.log(‘A String’, ['an','array'], document.getElementById(‘domObject’));

[/sourcecode]

Console can write messages with a specific type, so you can print errors and warnings to your console.

[sourcecode language="javascript"]

console.error(‘an error’);
console.warn(‘a warning’);

[/sourcecode]

Outline object members in console with the ‘dir’ method.

[sourcecode language="javascript"]

console.dir({nice:’to’, see:’that’, cool:function(){ alert(‘cool’); }});

[/sourcecode]

If you wanna see all cool features, now and live, there is an example page on bohuco.net/code:
http://bohuco.net/code/firebug-logging/

More infos:
http://getfirebug.com/console.html
Google Code – Fun with Firebug

gameQuery, a new jQuery plugin, provides functions for creating browser games. In this early stage gameQuery supports a main-loop, game area (playground), sprites with CSS animations and sounds (not tried yet).

I have played around with gameQuery and here is the result. A simple Pong clone that should work in IE6/7, Chrome and Firefox.

The current gameQuery version is 0.2.5 and so there are some points for improvement. Every sprite needs an animation and every animation needs an image even if you don’t need it. Playground is always position:absolute and it has a black border. Only little things that you can override.

found @ Ajaxian

Die definitive Link-Sammlung:

http://www.crockford.com/javascript/private.html

http://mckoss.com/jscript/object.htm

Wichtig: Private Variablen können nicht aus den public Methoden gelesen werden sondern nur aus den private-Methoden … also MUSS es für die privaten Variablen Setter- und Getter-Methoden geben. Und, die privaten Methoden werden NICHT mit “this” aufgerufen:

[sourcecode language='javascript']

var test = function() {

// private variable
var status = 1;

// private method
var getStatus = function() {
return status;
}

return {
publicMethod: function() {
var status = getStatus(); // NOT this.getStatus();
}
}
}

[/sourcecode]