Maven: unmappable character for encoding UTF8

If maven keeps complaining about "unmappable character for encoding UTF8" you are most probably having some special characters within your source code like ä or á. Since your editor is not using UTF-8 as file encoding - like eclipse does not in default settings under windows (it uses platform-specific encoding Cp1252) - this will cause problems with the maven-compiler-plugin.

For quick-fixing this problem you might want to add the following to your pom.xml:

Set the encoding to whatever your source files are using. Anyway I would recommend to remove all the characters causing those problems and also change the default encoding to UTF-8 to be consistent with the maven defaults and not having to set this explicitly.

Generally not using special characters in source code should prevent those problems completely that might occur quickly again introduced by developers who for any reason do not use UTF-8 as default encoding again and the trouble will start anew.

Escaping Strings using org.apache.commons.lang.StringEscapeUtils

You often run into the problem of escaping Strings from certain characters that need to be encoded as entitys in the format you use.

Apache has a great library in its commons-lang repository willing to do all that nasty and time-consuming work for you. Simply add this dependency to your pom.xml and start using it:

The class to go for when wanting to escape Strings is StringEscapeUtils.

Escaping html strings is as easy as

Have fun!

Obscure Your Searches And Spam Google

I know that it's kind of ironic to use blogspot for posting about being careful with giving data to google but I have the strong hope that others can resist :)

If you are a Firefox user there is a new helpful plugin with the accurate name Track Me Not. That plugin continously sends random search requests to major search engines and thereby hides your personal search requests for Viagra, Penis Enlargements and Porn :)

Enjoy your new anonymity without being worried if the plugin sends search requests like "taliban" or "terror camp" as long as you don't want to travel to the US :)

Thanks for following.

freak

Qooxdoo: Splitting I18N Into Parts

Normally qooxdoo is used as a Widget Toolkit resp. as a framework to build Rich Internet Applications which indicates having a lot of text to be distributed with your - yet too big - JavaScript code. The more languages you support the more text and kilobytes are added to your application code.

Because most of the clients are satisfied by using an application in that one language they halfway understand there is no need to send all that other non-sense to them as well.

Part Loading: Split the I18N load

You might know qooxdoos part loading mechanism yet. This mechanism can be used to split I18N into parts/packages that can be loaded dedicated at runtime. Therefore use the following configuration in your config.json. The important thing is - as you might have expected - the "i18n-with-boot" key.

Specify the languages you support withing the let key LOCALES which takes an array. For every locale a package named ${APPLICATION}-${locale}.js will be created into your build directory.

Load the language package you need with qx.io.PartLoader.require(["en"]).

Completely Remove I18N Information In Low-Level Applications

There might be cases where you use qx as a low-level framework for e.g. DOM manipulation, as Ajax Layer or whatever. In that cases where you do not use any LocalizedString or any qooxdoo widget that needs LocalizedStrings (e.g. the DateField) you can use the above mechanism to save some kBs.

That is because the qooxdoo generator ALWAYS includes the LocalizedStrings for all qooxdoo widgets even if you dont use a single widget and/or your application is via definition a BOM application. To get rid of that unnecessary stuff we "defer" the I18N loading into a package that we will simply never load. That will save about 10kB unzipped.

Add "let" : { "LOCALES" : [] } to your config.json so that only the default language package (${APPLICATION}-C.js) will be created.

Thanks for following.

freak

Eclipse Hot Code Replacement Is Not Working

Why the §$%& hell is Eclipses hot-code replacement not working?!? May be it's just that you are as stupid as me and didn't activate Build Automatically...

CSS 3: Replace Images With CSS3

With CSS 3 getting in shape and gaining more attention and popularity there will be a time - in the far future - when every major browser supports the standard. Lately I started dreaming a bit and this is what I found:

Working Around CSS Limitations With Images

Currently building web applications with challenging design and even websites with relatively simple design are a pain in the ass because of the limitations of HTML and mainly CSS. You need to work around that using images even for trivial optical effects like rounded corners or gradients.

The (heavy) usage of images of course comes at a cost (especially when not being aware of how to avoid some of the extra load): Additional HTTP requests are needed to load those images which require more DOM nodes to be all in the right place. A simple box with rounded corners may need at least four slices to display correctly - upper left, upper right, lower left, lower right. Faking those behaviour with dozens of nested divs is an even uglier option which additionally blows the DOM without any need.

So what can we do about that?!

CSS 3 Is The Answer

CSS 3 allows you to do a lot of that fancy stuff by just adding CSS rules. The browser engine will do all the work for you without the price of any extra images or even additional DOM-nodes.

So far, so good. But we still need to figure out where such a replacement could be helpful and how the CSS rules should exactly look like.

CSS 3 Image Replacement Example

I gave it a try with the iphones ipod icon which was quite tricky. The following example will only work properly in FF.

Original Icon As PNG	CSS 3 Icon

I didn't find a solution for the ipod shape in the middle of the icon. It seems that there is currently no solution for masking or filtering layers as you do it in Photoshop. So I created a PNG-24 image with the white ipod shape and simply put it on top. That is of course not the desirable result. May be someone can help me out here or can point to other examples?

Tool-Based Recreation Of Images As CSS 3 Rules

At this point I had the vision of a tool in which you can throw in your images. The tool should analyse the image and look if the same effects can be reached with CSS3. If so it simply prints out the rules.

What do you think? Could this be done? Where are the problems? Which tools and libs might build a foundation for such a tool?

Thanks for following

freak

CSS 3: Cross-Browser Rule Generation Tools

Recently I found a post about some very helpful tools for developing cross-browser css3.

There is CSS3 Please and even cooler with an exact declaration which rule works in which browser CSS3 Generator.

Another fine tool for playing around with border-images and creating the corresponding CSS 3 rules is border-image.com.

Find the CSS3 specifications at W3C

Thanks for following

freak

Deploy Maven Artifact As Zip Package Only

I was trying to package a maven artifact as a zip archive lately and found out that it's not as easy as it seems because zip is no native packaging to maven.

I finally found a solution using the maven-assembly-plugin. You have to choose "pom" as packaging because maven would otherwise (try to) build a jar archive which you don't want here. Furthermore you have to set the assembly-plugins configuration key "appendAssemblyId" to false so that the resulting zip package has no classifier you would have to specifiy when using it as dependency later on. Thats my resulting pom.xml:

And thats the assembly descriptor:

There is an easier solution? Damn it and let me know!

Thanks for following

freak

Easy Ways To Test Multiple Browsers

As a frontend developer you are often developing with your favourite browser which normally is NOT an Internet Explorer. So from time to time you open your web application in an IE and start screaming.

Here are some ways to easily test multiple browsers in different versions:

Spoon Browser Sandbox

A great and very easy way to test against multiple browsers in different version is the Spoon Browser Sandbox. You just have to install the plugin and you can run all browsers you see on the site through the spoon plugin. Sadly the spoon plugin is only available for IEs.

The browsers you run through the plugin behave like native installations but I sometimes got the IE notification bar asking me to install the MSMXML plugin or extension for no reason. Thats the only difference I've noticed to native installations for so far.

Advantages

• All major browsers in some different versions
• free

Disadvantages

• Only available for windows machines (run from IE)
• Validity of browser performance (?)

Virtual PC

Microsofts Virtual PC helps you test multiple Versions of IE on the same windows machine. There are free downloads of Virtual PC Images for IE 6, 7 and 8 on win XP SP 3 as well as IE 7 and 8 on Vista.

Disadvantages

• Only windows machines
• Only IEs
• Free images are expiring
• Validity of browser performance (?)

---

Screenshot Tools

The following tools are just screenshot based and thereby not suitable for a large number of pages, functional testing of clientside behaviour and some of them even not for authenticated pages. However those tools are cool for a fast layout test executed in a large amount of os/browser combinations.

Browsershots

A great tool for testing the layout of a single (publicly available) site in multiple browsers is browserhots.org. Unfortunately it's not very helpful for testing functionality or big amounts of (high dynamic) sites.

Advantages

• Dozens of different browser versions on win, linux, bsd

Disadvantages

• Only publicly available sites
• Only screenshots, no functional or breadth testing
• Long queue time (not in paid version)

Browsercam

Unfortunately my free trial of www.browsercam.com didn't work at all. But as far as you can trust the demo its

Advantages

• Dozens of different browser versions on win (xp, vista, 2000), linux, mac os
• Testing with/without flash

Adobe Browserlab

Advantages

• free
• All major browsers in different versions on win and mac os
• Overlay of different browser screenshots for direct comparison

Microsoft Expression Web SuperPreview

---

Summary

That's it for my first blog post. I hope somebody liked it resp. got something out of it. Please leave a comment if I got something wrong, you think I missed something or you got any other feedback for me.

Thanks for following

freak