Skip to content
accelerando

Tag Archives: JavaScript

Optimizing web resources with wro4j, Spring and ehcache

18-Jan-12

I think that almost no website today can do without JavaScript. There are some incredible good JavaScript libraries like jQuery for which an enormous mass of plugins and extensions exits.

The downside of this is, that for example the JavaScript code of my daily picture project Daily Fratze is bigger than the whole startpage of my first “homepage” was.

With every problem there is a solution, namely JavaScript compressors and minifier. Those tools can compress the code by removing superfluous whitespaces, renaming variables and functions or even by optimizing the code.

So far i have used the YUI compressor maven mojo in my Spring based projects. This is a build time solution that compresses JavaScript and CSS files when creating a war file.

For me it had several disadvantages: I don’t see the effect of compressing when i develop my application and it could not concatenate multiple script files.

The later is important because every additional request a browser makes slows down the loading of a webpage. And manual hacking all JavaScript into one file? No way…

wro4j to the rescue:

Free and Open Source Java project which brings together almost all the modern web tools: JsHint, CssLint, JsMin, Google Closure compressor, YUI Compressor, UglifyJs, Dojo Shrinksafe, Css Variables Support, JSON Compression, Less, Sass, CoffeeScript and much more. In the same time, the aim is to keep it as simple as possible and as extensible as possible in order to be easily adapted to application specific needs.

My goal was to integrate wro4j with Spring and ehcache with a minimum number of additional configuration files.

If you’re interested in some of my ideas, read on:

More…

Share This

Filed in English posts, Java | Comments (0) »

Server push, jquery atmosphere and the throbber of doom

03-Feb-11

I’m using the Atmosphere framework to implement server push (a.k.a. Comet) in a Spring 3 application.

Atmosphere includes a fine jQuery plugin to handle the client side code. The plugin works quite well and Jean-Francois, the author, has a good tutorial in his blog: Using Atmosphere’s JQuery Plug In to build applications supporting both Websocket and Comet.

The code works but causes webkit browsers (Chrome and Safari) to show the throbber (that little spinning thingy in tab or address bar). In iOS browsers that loading progress bar will not disappear.

I found some suggestions to get rid of the “throbber of doom” but none of them worked for me.

So here is my solution which is tested with jQuery 1.4.2 and jQuery.atmosphere 0.6.3:

<script>  	
	// See https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
	if(!Function.prototype.bind) {
		Function.prototype.bind = function( obj ) {
			var slice = [].slice,
			args = slice.call(arguments, 1), 
			self = this, 
			nop = function () {}, 
			bound = function () {
				return self.apply( this instanceof nop ? this : ( obj || {} ), args.concat( slice.call(arguments) ) );    
			};
 
			nop.prototype = self.prototype;
			bound.prototype = new nop();
			return bound;
		};
	}
 
	var subscribe = function() {		 	
		$.atmosphere.subscribe(
			'/subscription/url',
			function(response) {				
				$('body').append(response.responseBody + '<br>');						
			},
			$.atmosphere.request = {								
				transport: 'websocket',
				fallbackTransport : 'long-polling'
			}
		);
	};
 
	$(window).load(function() {				
		setTimeout(subscribe.bind(document),500);
	});
</script>

The trick is: Wait for the whole page to be loaded (including all resources) by using $(window).load instead of $(document).ready. Then set a timeout to your subscription function. The timeout will change the execution context of the function to the global object (in most cases window). This needs to be corrected to the document for the atmosphere jQuery plugin to work. Here comes bind() to the rescue. This is a Javascript 1.8.5 function and it is not available in all browsers (see bind) and therefore added to the prototype.

So far i’ve tested this in Firefox 3.6, Chrome 8, Safari 5 and Internet Explorer 8 and had no problems.

Share This

Filed in English posts | Comments (0) »

OS X Suchfelder in Safari

01-May-06

Safari hat eine schöne Funktion. Trifft er im HTML Text einer Seite auf ein input Element vom Typ “search”, so stellt er es so dar:

Suchfeld im Safari

Der Inputtyp “search” ist allerdings nicht XHTML konform. Mit einem kleinen JavaScript, dass man beim onload des Bodies ausführt, bekommt gültiges XHMTL raus.

Im XHTML Code der Seite ganz normal den Typ “text” notieren und eine Id vergeben:

<input type="text" id="searchtextinput" title="Suche" name="s"/>&#160;<input type="submit" value="go!" />

danach eine JavaScript Funktion mit folgendem Inhalt erstellen und onload ausführen:

var input = document.getElementById("searchtextinput");
input.type = "search";

Share This

Filed in Apple | Comments (0) »

WordPress 2.0.x, Safari und der Visual Rich Editor

22-Apr-06

Ein passender, erster seitenspezifischer Eintrag:

Nachdem ich gerade ohne Probleme WordPress 2.0.2 mit dem wundervollen Tiger Style Administration Panel von Steve Smith eingerichtet habe, muss ich mich direkt drüber ärgern, dass auch dort im Safari unter Mac OS X der Default Visual Rich Editor von WordPress nicht angezeigt wird.

Anscheinend führt der Visual Rich Editor im Safari direkt zu einem Totalabsturz. Leider funktionieren selbst die Quicktags nicht im Safari bzw. die Buttons erscheinen erst gar nicht.

Das allerdings kann man leicht ändern: Man braucht nur die Datei admin-functions.php im Verzeichnis wp-admin wie folgt anpassen:

More…

Share This

Filed in Wordpress | Comments (0) »
Close
E-mail It