Tuesday, November 24, 2009

10 Great Libraries/Links for Web2.0 Websites


A few great Javascript Libraries and other Links that I used and which I'd like to share:


Create perfectly smooth animations with this library, you can even use CSS to describe the animation transitions. There's probably no animation idea Animator couldn't handle.
Easy to implement and fairly easy to use.

A packed, single file version of the Lightbox 2, which is great for overlaying pictures on your website. Particularly great for galleries, as it let's you navigate through the images.
Very easy to implement and very easy to use (just add a rel parameter to your linked images)

If you want intuitive file management, then drag&drop in trees is the way to go. The gurus at dhtmlgoodies.com offer you one good implementation of that. Though it took quite some adjustments for me to get it working smoothly, it was a great help to me.

The one thing HTML4/XHTML is missing: Multiple file upload within one dialog. A great tool to make your uploads more user friendly. A bit hard to set up though.

I haven't used this one yet but I'm planning to implement this into my website. One problem with making a website fully AJAX is that the functionality of the history button gets lost. This lib is one way how to bring it back.

IE6 is not the newest browser, but still being used by a lot of people. And one big frustration about making a website IE6 compatible is that it's lacking alpha transparency. This small script automatically fixes all PNG-Images in your source code through a microsoft filter. All you gotta do is to load the script.

A collection for fully customizable Web2.0 loading animations.

A great Firefox plug in that gives you many tips on how to optimize your website speed

1000 Free-to-use awesome-looking 16x16 Pixel icons. I use them everywhere

A collection of free sounds

Sunday, November 22, 2009

Web 2.0 Thoughts

As a web developer you are confronted with a massive wave of emerging technologies like scripting languages (PHP, Python, Ruby on Rails, Zope,..), data storage systems (MySQL, PostgreeSQL, SQLite, XML, Cloud), protocols (JSON, AJAX/HTTP), web services (twitter, youtube, gmail, facebook,..), content management systems (Typo3, Joomla,...) and ever growing software, addons and libraries.

Nowadays being a web developer is a completely different matter like it was 7 years ago when I started my "Internet-career". Back then, it still was an achievement to be able to create your own file upload and file listing in simple HTML and PHP. Over the years, the server side scripting languages have become less and less important and follow a shadowy existence by now, as the client scripting side, namely JavaScript, was put in the spotlight with it's great promise: AJAX.
If you want to have a modern website it is infeasible not to use JavaScript, which increases the efforts by much more than it was 7 years ago.

We all follow the hidden obligation to re-implement 40 years of user interface design into every common browser, without breaking compatibility to older browsers or technologies (like the Browsers Back button).
That not only requires a big set of expertise and will of learning but also endless nights of experimenting and trying out which configuration works for which browser.

Gladly, many many excellent tools and libraries have been written, available for the greater public on which I stumble upon from time to time.
I'm particularly astonished about all the existing JavaScript Libararies like Prototype, jQuery, DoJo, Mootools, etc. serving Multipurpose functionality to the mass. They seem to have a big establishment in Web2.0 Websites by now.
Frankly, I was never a big fan of bulky libraries when you have the chance to put together or program the things you need yourself.

Saturday, October 17, 2009

How to make your PHP Website UTF8 ready

After many days of frustration I think, I hope, I finally figured out how to configure my server and php code the right way to enable bug free UTF-8 on my website, which certainly took me a day or two to achieve. Lets begin with the...

Browser
From what I have seen is that at least Firefox and IE listen just to the Line 'Content-Type: text/html;' charset=utf-8' in the HTTP header and simply ignore my meta tag on my websites:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
So the first thing I did is to add this line of php code before any text is printed out:
header('Content-type: text/html; charset=utf-8');
But its also possible to achieve the same using the AddDefaultCharSet directive in the apache config.

MySQL Database
MySQL allows collations to be set on each table and text/char field. As the MySQL manual already tells this setting won't concern you at all until you start searching with unicode characters. So you can leave that to whatever setting you want when you don't search for it.

PHP Code
I've ran into several difficulties when writing user input from a form into my database.
  • The first thing I had to change is to append the parameter accept-charset="UTF-8" to all my <form>'s otherwise you'll get some ISO encoded chars in your DB.
  • Secondly, I ran into a bug when using htmlentities() converting umlauts wrongly. I realized you also need to tell htmlentities() the charset in which you want to work on. I solved it with using htmlentities($mytext,ENT_COMPAT,'UTF-8');

AJAX
When I was in the process of getting UTF-8 working I always suspected that my AJAX code / XMLHttpRequest() was some of the cause of the problems. But the only point where you can do something with the charset is by setting the request header (myRequest.setRequestHeader) for the right content-type (just like with the browser http header) before sending your http request. And I guess when you don't explicitly specifiy your charset there the Browser uses the Content-Type charset given from the websites http header.
So no tweaks needed here.

If you got this all your done! Your Site should work for 99.5% of your users.

Wednesday, September 30, 2009

Why UTF-8 sucks

Because you can configure it at every goddamn place. Assuming I want to set up an ordinary website with php and mysql. Then you can configure it at:
  • Apache config
  • PHP config
  • PHP MySQL module config
  • MySQL general config
  • Each text/char/varchar field in the particular MySQL tables
  • When you process the Data in your PHP Script and when you receive/transport Data via GET/POST
  • In the metadata each HTML site
  • On each AJAX Request you make
  • On each browser visiting the site

Thats not only plain confusing for the admin but between each program/module you have the possibility to somehow screw up something with the conversion if not all of them is set to UTF-8
It's always been a pain in the ass to make my websites UTF-8; some users always had problems getting it displayer correctly.

Now i got the problem that normally submitted data works fine, but data containing umlauts submitted over AJAX are displayed wrongly. Hail utf-8 -.-