Fixing Web Font Padding Issues on Linux/Mac/Android Browsers

Recently I came across an annoying issue with web font (@font-face) in which the text does not appear vertically center within buttons or inputs (see image). Google around, I found that not all web fonts are affected, this defect seem to occur only on Mac/Linux and may vary in different browsers and is commonly referred to as "web font padding issue".

It's interesting enough that although the issue is quite common and has been reported several times but there seem to be no absolute solutions. Most suggested the workaround to set uneven padding to compensate for the shift. I have struggled so much with workarounds for this especially the padding didn't help to correct the alignment across browsers and devices (I preview my app in Chrome/OSX but it runs on iOS Safari and Android browser) so I decided to look into the issue again and thought about typography metrics problems.

Honestly, I know very little about typography and font metrics. I used FontForge (which happens to be easily installed on Ubuntu) to tinker with the troubling font file. After a few hours, I have discovered the problem when I tried to replicate the settings of another good font on the defective one. It was one of my Eureka moments!

Google App Engine for static websites

Nowadays, there are many options to host a static website (portfolios, generated weblogs, front-end demos, etc.) for free. One of the best ways is to push your static files to a Github's repo and publish them through Github Page.

A lesser known solution is to make use of Google App Engine (GAE). Actually, GAE is designed for building and publishing high-performance, highly scalable web applications written in Python, Java or the newly-introduced Go language. However, by tinkering with the set up and deployment process, I figured out that it is also great for hosting static website with no server side coding at all. Like Github Page, your static website will be served through http://[your-app].appspot.com or you can customize it with a (sub)domain.

The advantages of GAE over Github Page are: higher static files quota (known in GAE as blobstore, known in Github as repository size); allowed SSL; better performance (since GAE app is hosted with reserved thread and bandwidth); possible to supplement data and dynamic server-side scripting later.

Geany: open-source SublimeText for front-end developer

When I started doing JavaScript, I kept searching for an ideal JS code editor that is free, lightweight and fast just like FlashDevelop, my favorite ActionScript counter part. (In case you're wondering, I have made a Wine mod of FD4 and been able to run it on Linux). Most JS editors I tried were Java-based, heavy and code assistance is as not good as I expected.

Then I discovered SublimeText 2 and Geany. The former is commercial and the latter is opensource. Both of them are cross platform, lightweight, fast and has syntax highlighting for quite a number languages. For JavaScript and front-end stuff in particular, they both have some support for code hinting and auto completion but fairly limited.

Geany interface

Playing with Wallaby

This is my attempt to convert an old Flash animation (my old animated signature when I was young ;) )  to HTML5 using Adobe's Wallaby tool.

Because of the nature of this animation, a lot of SVG files were generated. The total size of the HTML5 animation is 1.1MB compared to 21.6KB of the Flash counterpart. (OMG, way to much less efficient). I had to edit some JavaScript to add a preloader for it. Another side note is that Wallaby only works with Flash CS5's fla. (The tool failed to open my old animation in CS3 format).

Tips on encoding videos for Android using Adobe Media Encoder

As a Flash Professional user, you probably have Adobe Media Encoder installed on your computer. This is a great tool to encode videos not only for Flash video player but also for other H.264-enabled devices like iPhone and Android. However, when I tried to encode a video using a random H.264 preset, my phone (a Milestone 2) could not play the video. This means that not every export settings is compatible with the phone’s internal video encoder.

So which preset should we choose for the export settings?

Using Flash Builder 4 on Ubuntu

So, Adobe has discontinued its Linux version of Flex Builder. That’s sad news for us. Anyway, it doesn’t change much since Linux users already have alternatives long before, e.g. FDT, IDEA. Besides, I have been able to run Flash Builder 4 on my Ubuntu (via Wine) for a while to take advantage of its mxml coding hinting and the unique design view. Let me share some of my experiences of using Flash Builer on Ubuntu so far.

Quick AS3 Language Reference Search with Google Chrome’s custom search engine

ActionScript 3 language reference document is any Flash developer’s bible. Whenever you implement something with Flash, you’ll find yourself checking this document regularly. There are plenty of ways to access this document:

1. Open Flash CS* and press F1 to open it’s internal help panel. (Some of my friends do this even when they don’t have any fla to edit).
2. In FlashDevelop, place the caret on a Flash built-in class name and press F1. FD will open the default browser with Google search results within AS3 language reference’s site. (This requires you to open FlashDevelop anyway).
3. Bookmark this site: http://www.adobe.com/livedocs/flash/9.0/actionscriptlangrefv3/ (Flash Player 9 AS3 & Flash CS3 components) or this: http://help.adobe.com/en_US/AS3LCR/Flash_10.0/ (Flash Player 10 AS3 & Flash CS4 components) and open it with your favorite browser. Then you’ll need to browse through the classes list.
4. Download this offline FlashCS4 help document and open the index.html file locally with your favorite browser. You’ll also need to browse through the classes list.
   You can also bookmark this local document for quick access.

Now, if you’re using Google Chrome, let me propose another way not only help access the online document quickly but also allow to search for a specific term or class with lightning speed!

How to run Flash CS5 on Ubuntu (with Wine)

Updated on 2011-05-24

After a couple of days testing and examining, finally, I have managed to run Adobe Flash CS5 on my Ubuntu machine. As I say "run", I mean that I did not succeed installing the application but I had to copy the installed files from Windows. However, it is worth noting that this is the first Adobe Flash version that runs with workable quality since Macromedia Flash 8. The last 2 versions (CS3 & CS4) is known to be useless when trying to run with Wine.

No more wandering, let's me show you the how to first and then comments later.

Dark color scheme for FDT & FlashDevelop

Here’s my (dark) color scheme for FDT 3.5:

To install, follow these steps:

1. Save my eclipse preference file (.epf) to your computer. (Don’t worry, this preference file only contains color settings for FDT, your own settings will not be affected)
2. In FDT/Eclipse go to File > Import… > expand General > select Preferences > click Next
3. At “From preference file” box, browse to the preference file > Check “Import all” > click Finished and there you go.

If you want to know how to make these preference files, read this tutorial.

Besides, the black background of the editor is set at global setting. Therefore, other editors (.txt, .xml, .java…) must also be changed to dark theme or they are very difficult to read.