Serving Static Files with Meteor and Spiderable

In short: To serve files which are not part of your project’s code (i.e. which are supposed to be served without being compiled), put them in the public folder. This folder will be served from /.

Some more background and details:
Tried to add a web-font to my project, thus, I put it in /client/webfonts/somefont.woff. But the font didn’t show up. I tested it with wget -O- http://localhost:3000/webfonts/somefont.woff … and *surprise* I got the HTML of the default page — not some binary gibberish that you would expect to find in a font file.

All file types unknown to meteor get stripped out during compile time. Instead you need to put them in a separate folder called public — in my case in /public/webfonts/somefont.woff. Rookie mistake I guess. 🙂

Callback Method for Twitter’s Typeahead

When you start using Twitter’s typeahead, e.g. because you switched from Bootstrap 2.3 to 3.0, you will notice that it is NOT a simple drop-in replacement for Bootstrap’s original typeahead!
Before, you generated the suggestions shown to the user by implementing a callback method while creating the typeahead like this:

$(field).typeahead({
  source: function(query, process) { 
    ... return a list of suggestions (see doc for details) 
  }
});

Since version 3, Bootstrap does not provide its own typeahead any more, instead it is using Twitter’s own implementation which seems to be a good choice at least on the long run. But it does not provide any mean for defining a callback method to provide the suggestions — no clue why.
Instead you can provide a predefined array locally, a predefined array that will be loaded on start-up, or a remote service defined by a URL.
You will find several good examples of why you need a callback method sometimes.

  • You want/have to use a Javascript library to access the service.
  • There is no database for the suggestions, they a generated on the fly, e.g.if you want to suggest sentence completion while the user types.
  • You are using Meteor’s collections holding your suggestions, thus, there is no URL you could point to.

But taking a look into the internals revealed following solution: completely by-pass the internal suggestion aggregation of Twitter’s typeahead by replacing the getSuggestions(query, callback) method of the first dataset, which we defined by local: [];.

(t = $("field")).typeahead({ local: [] });
t.data("ttView").datasets[0].getSuggestions = function(query, callback) {
  var suggestions = ... gather your suggestions here ...
  var data = [];
  for (suggestion in suggestions) { data.push(this._transformDatum(suggestion)); }
  callback(data)
}

(Translated from Coffeescript on-the-fly – consider as a draft than an out-of-the-box solution.)

Happy hacking. 🙂

p.s. for Meteor users: The callback breaks each time the template gets re-rendered – despite that you use the package preserve-inputs or <#constant> due to a bug. Somehow, constant areas and that particular package do not get along with each other. Solution: removed the package and use constant areas around typeahead input fields works. This should be fixed as soon as the new template engine gets rolled out.

Dev Tools Collection

Design Grid

The famous 960 grid is a great basic for any kind of web design. Especially the 12 column grid is used often on eye-pleasing websites.
Features: fully customizable and the CSS code will be generated automatically.
Editor: grids.heroku.com.
More info about the grid itself: 960.gs.
Alternatively, use Bootstrap’s integrated layout grid: http://getbootstrap.com/css/#grid.

Animated Busy Indicator Graphic

Generate busy indicators aka animated graphics to visualize when a system is loading data or is busy doing something in general.
Lots of different animations are provided to choose from, colors are completely customizable, and the generated graphics are free to use wherever you like!
ajaxload.info

Embed Graphics into CSS

A tool to convert graphic files (e.g. a busy indicator) into a Base64 that can be embedded into CSS as data. Though the size is slightly bigger (which does not matter a lot with such small files) but it saves another, potentially blocking request to the server (as the amount of parallel requests is limited to two).
You have to upload the file (Reference by URL is not supported unfortunately) to get the data format in return.
websemantics.co.uk/online_tools

CSS Gradient Generator

Gradients (used wisely) can help to create subtle 3D-effects without the need of extra payload in terms of DOM nodes or graphic files. Of cause you can also go wild and create crazy rainbow gradients… This editor generates the CSS code for you with a very easy to use UI.
colorzilla.com/gradient-editor/

Live RegEx Tester

Building regular expressions is always a bit tricky IMO. The tool below comes in handy because you can test your drafts instantly and there are explained examples, too.
gskinner.com/RegExr

If you need something simpler and smaller:
regular-expressions.info

Matching color combinations

Most of the tools I saw online produce the same sequences using well known procedures (monocromatic, complement, triad, tetrad, analogic, and accented analogic). They are good and useful, but color blender does something different (I did not yet check out in detail what and how) so it’s a good way to find an alternative set of colors, also for comparison.
colorblender.com/

Nice tools using the before mentioned "known procedures":
colorschemedesigner.com/

Beautiful color sets and patterns:
colourlovers.com

Fonts and Icons

Adobe’s Edge Web Fonts.
In my opinion the best icons font there is: Font Awesome.

JSON Validator and formatter

Quickly format output of a webservice into something much more human readable and check validity in the same time: http://jsonlint.com/

(to be continued…)

GWTBridge Not Found in GWT2.5

Just updated the GWT SDK and ended up with a broken app:

java.lang.NoClassDefFoundError: com/google/gwt/core/client/GWTBridge
	at java.lang.Class.forName0(Native Method)
	at java.lang.Class.forName(Class.java:169)
	at com.google.appengine.tools.development.agent.runtime.RuntimeHelper.checkRestricted(RuntimeHelper.java:70)
	at com.google.appengine.tools.development.agent.runtime.Runtime.checkRestricted(Runtime.java:64)

After some searching/experimenting and a cup of coffee it finally occurred to me: the package name says client! So all the time I have been using a client-package class in my server-side code. Kinda surprising that it did work nicely all the while.

Solution: replace all com.google.gwt.core.client.GWT with com.google.gwt.core.shared.GWT in shared and server-side code.

Using GWT’s DateTimeFormat in Server-Side Code

I was working on some utility class to format dates. As the formatting is the same on server and client the same class should be used on both, server and client. Within the GWT framework there is the DateTimeFormat class which seems to be supposed to do exactly that.

But despite being in the shared package (com.google.gwt.i18n.shared.DateTimeFormat) using it in the server-side code causes

java.lang.UnsupportedOperationException: ERROR: GWT.create() is only usable in client code!  It cannot be called, for example, from server code. If you are running a unit test, check that your test case extends GWTTestCase and that GWT.create() is not called from within an initializer or constructor.

Having a look into the code of the DateTimeFormat class (which is part of the shared package of the GWT framework, thus can be used on server and client) reveals there is an import of com.google.gwt.i18n.client.LocaleInfo. But this class is part of the client package – thus, it can not be used in the server-side code. It’s unclear to me why this was done like that because it simply can not work by definition…

Going down a bit further in the code of the DateTimeFormat class shows that the client package class LocaleInfo is used only once like this:

private static DateTimeFormatInfo getDefaultDateTimeFormatInfo() {
  // MUSTFIX(jat): implement
  return LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
}

The line is marked as “MUSTFIX” but for some reason it has not been fixed yet.
There is a way to fix this issue that worked for me:

  • Copy the content of DateTimeFormat to a new file in your own code
  • Remove the import of LocaleInfo
  • Changing the following method (starting in line 656) like this:
private static DateTimeFormatInfo getDefaultDateTimeFormatInfo() {
  return new DefaultDateTimeFormatInfo();
}
  • And use this newly created class from now on in all your code.

The fix does not seem to cause any major harm, but as John A. Tamplin (cf. his comment below) clearly pointed out, applying this fix will render all dates using the default locale instead of using the user’s locale. Thus, this fix should be considered a hack rather than a patch – but it does the trick until the bug has been fixed officially.

The hack can be applied quickly – or simply download the fixed class here.

p.s. Unfortunately, it is not possible to just overwrite the method in a derived class because it’s a static method and private anyway.
p.p.s. As suggested in the comments, you might also initialize the DateTimeFormat with a new DefaultDateTimeFormatInfo() as the second paramenter. (Please note that I did not verify this suggestion) In general, both ways of fixing this issue will cause that the date and time to be formated using the default locale rather than the user’s current locale, unfortunately.

Papercite Crashes WordPress

Just updated WordPress as well as all the plugins and suddenly my résumé page is blank. And just in case someone else experiences a similar issue, I took notes of all the steps to fix the issue below.

Turning off likely plugins revealed that papercite (a plugin used to render publications in the BIB format as HTML) was the reason.

To understanding the problem I turned on error messages to actually see what was going on by
editing index.php in wp-content/themes// and added following line to the beginning of the file:

<?php ini_set('display_errors',1); error_reporting(E_ALL); ?>

From that I could understand that papercite was unable to load a PEAR module due to the strong restrictions that my web space provider had set up (which is also why I can not edit the php.ini file directly to turn on error messages).

Solution: Go to Settings -> papercite plugin and change the parser to OSBiB parser (which does not depend on PEAR), et voilà my résumé with publications is back! 🙂

Finally, let’s remove the PHP line I added in the beginning from the index.php file.

How to Use JQuery in GWT

After adding the JQuery script to your project HTML file’s header section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

You will be able to use JQuery in native (JSNI) methods by prepending $wnd., e.g.:

private native void someMethod() /*-{
	$wnd.$(function() {
		$wnd.$('#somediv').doSomething();
	});
}-*/;

Without $wnd. you will end up with following error: com.google.gwt.core.client.JavaScriptException: (ReferenceError): $ is not defined

JUnit-Testing and GAE APIs

Some issues I encountered when testing a new Java library for loading multiple URLs in parallel on the Google Apps Engine (GAE) (more about that library in another post).

Here are some of the typical errors you might encounter:

Missing timeout class

java.lang.NoSuchMethodError: org.mortbay.thread.Timeout

Context menu on project: Properties -> Build Path -> Order and Export: move GWT SDK *above* App Engine SDK (cf. here)

Compilation unit was not seen

com.google.gwt.junit.JUnitFatalLaunchException: The test class 'com.test.client.MyTest' was not found in module 'com.text.Module'; no compilation unit for that type was seen

  • The test class needs to be within a package that is configured in the module file (*.gwt.xml). You should create a new source folder (Context menu on project -> New -> Source Folder) and create the whole package structure you use within your project up to client, e.g. com.company.client, and put your GWT tests in it. This way you make sure that the tests are not going to be deployed to GAE later on.
  • If you are testing client-side code, your test class needs implement GWTUnit *and* be run as GWTUnitTest *not* as JUnitTest 😉

API package not found

java.util.concurrent.ExecutionException: com.google.apphosting.api.ApiProxy$CallNotFoundException: The API package 'urlfetch' or call 'Fetch()' was not found.

The GAE environment has not been initialized.

  • Set up the required libraries for testing:
    • Context menu on project -> Properties -> Build Path -> Libraries -> Add Variable -> Configure Variables -> New…: Set "SDK_ROOT" as name and search you disk for "appengine-api-stubs.jar" and copy the part before "/lib/impl" into the text box named "Path"
    • Select "SDK_ROOT" from the previous dialog, click "Extend…", unfold lib and impl and select "…labs.jar", "…stubs.jar", and "…api.jar"; unfold "lib/testing" and select "…testing.jar" — done, whew.
  • Add following lines to your test class:
    private final LocalServiceTestHelper helper = new LocalServiceTestHelper(new LocalURLFetchServiceTestConfig());
    @Before public void setUp() { helper.setUp(); }
    @After public void tearDown() { helper.tearDown(); }
  • Have a look in com.google.appengine.tools.development.testing to see all the services/APIs available for testing and replace LocalURLFetchServiceTestConfig with the one you need.

I tried to keep it as brief as possible, for more details have a look at this page.

Missing Digikam Themes w/t KDE

Digikam is a great tool to manage and work on photos — my personal favorite for some years already. But it’s made for KDE and uses a lot of KDE-related libs and stuff, therefore, installing it in Gnome, Xfce, Lxde and the like will cost about 1gb because of the depenedencies.
Nevertheless, worth it. But it comes with a bright default skin rendering it completely unusable for working seriously on light and color settings of photos.

To add themes, you will have to install an extra package (as decribed here) like this:
sudo apt-get install kde-workspace-data
Yes, this will add more data to your disk, but only 10mb this time. 😉

Happy photo-tweaking!

Improving Canvas Performance

1. Timeout instead of Scheduler

Surprisingly, using com.google.gwt.user.client.Timer seems much faster then relying on com.google.gwt.core.client.Scheduler. I did not yet evaluate the differences in detail but the lower CPU workload speaks for itself.

2. AnimationScheduler

I am not really sure if this helps a lot, but you will find a lot of online documentation explaining that you should use this:
com.google.gwt.animation.client.AnimationScheduler.get(). requestAnimationFrame(callback, element);. The element parameter is optional but said to improve performance as the browser can decide when to render optimally.
So whenever your timer kicks in, and you are ready to render the results, use the AnimationScheduler instead of calling your rendering routines right away. It will only take very few milliseconds (depending on the users screen frame rate—which is 60 Hz or more usually) for the callback to return to your code.

3. Caching

This parts requires much more effort and depends on your software architecture and requirements. The basic idea is not to redraw things that did not change. To do so we can draw each item on a hidden canvas once and then reuse this rendering during every drawing cycle.
As the process is a bit more complicated, I will dedicate it a separate post—comming soon!

4. Save on effects

Yes, effects is what the canvas is all about, but something like a shadow can cost quite some CPU power. So if you run into problems check if some of the effects can be achieved cheaper or even be removed.