As you should know multiple data export formats are an absolute requirement to web applications these days.

Recently i got through working on a proposal creation and management application with theme support.
So i couldn’t bare to use a simple customized pdf export system using FPDF or something alike – i needed a really good HTML to PDF converter.
Well, i’ve spent a couple of days looking for the best answer to this question.

I’ve tested 4 different HTML to PDF classes/libraries out there, and read about a few more throughout the web.

Dompdf, which i had used before on previous projects was my first choice, the code is kind of nicely done and well organized into classes. I had to edit the filenames but it ended up playing well with NaturePhp. It worked more or less in the beginning but after de first application release some strange rendering and memory problems. The application would just die if i the user added some custom texts sometimes (without any errors displayed…) and text alignment and tables didn’t work very well…

So i went back to looking for another solution – the first i tested was TCPDF – it worked actually much better than dompdf, but the lack of much CSS support didn’t work for my purposes – still it looked like really stable and had some nice extra features.
I´ve also tried html2fpdf but it didn’t really work as i expected.

After much looking around i finally found html2ps. The site looks a bit old and ugly but i had already read some nice quotes about it somewhere so i decided to take a look.
Meaningless to say html2ps ’saved’ my weekend – it works really good. Well it’s not perfect, but as long as keep your html more or less simple and well formed, it renders nearly perfection.
Stable, reliable and so far the best option i’ve tested for HTML to PDF conversion for php.

However, the API code and online documentation could be better – it took me a while to integrate it into NaturePhp and get it to work. It really is much simpler if you use it via a simple HTTP request (with options via querystring) as the ‘demo’ folder shows.

I know it is not easy – I myself am struggling to get some decent NaturePhp documentation out – but such a nicely working project should really be given a nicer look to the site/docs and possibly some major code review.

Visit them at tufat.com or freashmeat

Still, from now on, it will be my PDF converter of choice, unless something better comes around…

here is a simple deployment shell script (.sh) using rsync to deploy your local application to a productive location.

You can download it here.

Follow the README file for setup and usage.

Feedback comments are always welcome :)

This particular error is caused due to common HTML entities usage on XHTML outputs, which follows XML entities rules.
Basically means you are using a  -like entity, when in XHTML you should use a  -like entity;
The only named entities for XML are &, > and <. For all others you need to use the Unicode character code (eg.  ).

Here’s a HTML to XML entities conversion table:

There are two ways of solving this, either you reinstall the game from your original CD (and it will setup the correct resolution for your mac) or correct the settings at UnrealTournament.ini :
find the lines that look something like this:
FullscreenViewportX=1280
FullscreenViewportY=1024

and change them to your current resolution, eg. :
FullscreenViewportX=1024
FullscreenViewportY=768

Save it and UT should now be up and running ;)

don’t your clients always ask for some specific details on their Location markers on google maps? Ours do.
So, in order to shorten our workload, we’ve developed a small handy tool to create a quick customized map using some of the upcoming FallForward game tech.

This small tool is posted at http://9tree.net/tools/GMLocation/ and it is completely free to use.

We’ll be updating it as we need more features for our clients.
Next feature will probably be support for multiple Location markers.

Hope you guys like it ;)

For our current project we required some neat instant user notifications, therefore we created a simple Growl-inspired notification system using Mootools.

Now updated for IE6 compatibility!

Download it here!

The package contains a sample.html very self-explanatory for most users;

Just include the js_growl.js and the js_growl.css files in your page’s header and send a user notification whenever you need using:

JS_Growl.notify('Your text or content html goes here.');

Any bugs/features just give me a comment, i’ll check it out ;)

i tryed using some Adium away applescripts for QuickSilver posted at  blacktree but couldn’t get them to work, either no one ever tested it or they were designed for a really old Adium version.
So i wrote a couple of simple QuickSilver plugins to support setting away and back on all accounts on Adium 1.2+.

You can download them here!

Just unpack the zip and copy the applescript files to  “~/Library/Application Support/Quicksilver/Actions”, you might have to create the “Actions” folder.
Restart Quicksilver and you’re done, just type “Adium set away” or “Adium Back from Away” in QS to use them :)

Here it is, for:

1
2
3

<div id="example">
	<a id="drag_button" style="cursor:pointer;cursor:hand;">Drag</a>
</div>

Just use:

$('example').makeDraggable({handle:$('drag_button')});

Notes on IE:
The drag button element “<a>” can’t take href=”#” and can’t contain an image, as it will make it draggable by windows and will not work as supposed.
If you require to insert an image into it then use it as a background image for the drag button element, and set the element’s height and width according to the image for proper appearance:

1
2
3
4
5

<p id="example">
<div id="example">
	<div id="drag_button" style="background:url(img_location.png) no-repeat;width:15px;height:15px;cursor:pointer;cursor:hand;">
	</div>
</div>

I’ve developed this plugin a while ago, i’ve now updated it to a releasable version, already working up to wordpress 2.5.1

ROT13 Email Protection at Worpress Plugins

Download ROT13 Email Protection Plugin v0.1!

In order to install it, as most wordpress plugins, just put the rot13_email_protection.php file  inside your /wp-content/plugins folder.

Any bugs, give me a comment, i’ll check on it.

I’m just finishing our new website and i’ve been posting here the effects i’ve created for it.
This one is a little more “show off”;
It’s the way we’ve set up our portfolio using Fx.Elements for the togglers and Slides for the presentation images.
You can check how it works here.

Using this html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div>	
	<div id="kwicks_pics">
		<a href="http://4hsa.pt" class="kwicks_pic">
		    <img src="images/portfolio/4hsa_big.png"/>
		  </a>
			<a href="http://techtrouts.com" class="kwicks_pic">
		    <img src="images/portfolio/techtrouts_big.png"/>
		  </a>
			<a href="http://webandcookies.com" class="kwicks_pic">
		    <img src="images/portfolio/wac_big.png"/>
		  </a>
	</div>
	<div id="kwicks">
	  <a href="http://4hsa.pt" rel="image" class="kwick">
	    <img src="images/portfolio/4hsa1.png" title="4HSA - Qualidade e Seguran&ccedil;a Alimentar" alt="4HSA - Qualidade e Seguran&ccedil;a Alimentar"/>
	  </a>
		<a href="http://techtrouts.com" class="kwick">
	    <img src="images/portfolio/techtrouts1.png"/>
	  </a>
		<a href="http://webandcookies.com" class="kwick">
	    <img src="images/portfolio/webandcookies1.png"/>
	  </a>
	</div>
</div>

This css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#kwicks_pics {
	visibility:hidden;
	clear:both;
	width:880px;
	height:300px;
	text-align:center;
}
#kwicks_pics .kwicks_pic {
	display: block;
	background:none;
	border:none;
}
#kwicks {
	clear:both;
	width:auto;
	height:180px;
}
#kwicks .kwick {
	float:left;
	/*width should be the same as javascript's var szNormal*/
	width: 55px;
	background:none;
	border:none;
}

And this Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

window.addEvent('domready', function(){
 
	var sequential = false; //changed to true requires to pass every intermediate image on slide
	var szNormal = 55; //should be the same as css #kwicks .kwick{width}
	var szSmall  = 50, szFull = 250, selected=0;
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 350, transition: Fx.Transitions.Back.easeOut});
	var kwickspics=$$("#kwicks_pics .kwicks_pic");
 
	var kwickspics_obj={
		movingTo:(kwickspics.length-1),
		selected:(kwickspics.length-1),
		next_i:false,
		checking:false,
		on_move:false,
		wait_delay_move:false,
		the_fxs:[],
		init:function(){
			kwickspics.each(function(kwickspic, i){
				kwickspics_obj.the_fxs[i]=new Fx.Slide(kwickspic, {
					duration: 200,
					//transition: Fx.Transitions.Back.easeOut,  -- transitions here return error on IE7, no idea why :/
					onComplete:function(){
					if(kwickspics_obj.wait_delay_move){
						kwickspics_obj.wait_delay_move=false;
						setTimeout(kwickspics_obj.checkStep,100);
						return;
					}
					if(kwickspics_obj.next_i!==false){
						kwickspics_obj.wait_delay_move=true;
						kwickspics_obj.the_fxs[kwickspics_obj.next_i].slideIn();
						kwickspics_obj.selected=kwickspics_obj.next_i;
						kwickspics_obj.on_move=false;
					}
				}});
				kwickspics_obj.the_fxs[i].hide();
			});
			$('kwicks_pics').style.visibility='visible';
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideIn();
		},
		moveTo:function(i){
			kwickspics_obj.movingTo=i;
			if(!kwickspics_obj.checking) kwickspics_obj.checkStep();
		},
		checkStep:function(){
			if(kwickspics_obj.on_move || kwickspics_obj.movingTo==kwickspics_obj.selected) {
				kwickspics_obj.checking=false;
				return;
			}
			kwickspics_obj.checking=true;
			kwickspics_obj.on_move=true;
 
			if(sequential){
				//requires to pass every image
				kwickspics_obj.next_i = kwickspics_obj.selected>kwickspics_obj.movingTo ?  kwickspics_obj.selected-1 : kwickspics_obj.selected+1;
				//go directly to final image
			} else kwickspics_obj.next_i=kwickspics_obj.movingTo;
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideOut();
			return;
		}
 
	}
	kwickspics_obj.init();	
 
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
			kwickspics_obj.moveTo(i);
		});
	});
 
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	});
});

Hope you’ll put it to good work ;)