Saturday, July 3, 2010

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...

Wednesday, June 2, 2010

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