Sport-Tooltip is a super fast and clean Tooltip class I developed with the Haxe community in mind, and is aimed at Haxe/Flash. It is :

• Extremely simple to use
• Very compact
• Using a clean and transparent approach (not messing with your Flash like some other libs!)
• Stylish & easily customizable
• Released in Public domain (you can do whatever you want with it)

(Note: it will probably be converted to ActionScript 3 soon).

Kick-off

This demo will illustrate most of the features provided by Sport-Tooltip.

Notice the three different white, red and black areas on the right. Those show the 3 different overflow styles you can get in Sport-Tooltip. Also the yellow area is using a callback for the tooltip text instead of a String. As a result, it returns a random animal from the Chinese zodiac everytime.

Move mouse over the coloured areas to get some tooltips to appear:

This demo’s code is available at the end of this post.

How to use it?

Like so:

This will create tooltips containing “My name is Super Mario!” when hovering the sprite.

But what if my tooltip content is not static?

Provide a callback instead

Use Tooltip.attachF() to attach some callback instead of a String:

You can also refer to functions and static methods with their name:

What about styling?

Sport-Tooltip uses the following typedef for defining styles:

Overflow defines what happens when a tooltip content overflows out of stage. It can have 3 values, as defined by the enum OverflowStyle:

• Lock: tooltip will be locked on the border, forbidden to cross it,
• Serious: tooltip will go in the opposite direction,
• None: tooltip will be let overflowing off-stage.

For an illustration of overflow, you can have a look at the demo, especially the 3 white, red and black areas.

The other parameters you’re going to be dealing with if restyling the tooltip are easy to figure out:

• fg is the text color (eg. 0xffffff for white)
• bg is the background color (eg. 0×000000 for black)
• bgAlpha is the alpha opacity for the background only (eg. 0.5 for semi-opaque)
• fontFamily is a string defining the font(s) to use, separated by comas (eg. “Arial, sans-serif”)
• fontSize is the font size in pixels (eg. 15)

This is nice, but how to actually use it?

Overwriting the default style

The default style is defined in Tooltip.FACTORYSTYLE. But usually you’ll want to change it dynamically at the beginning of your program, like so:

What about those cases where I want a specific style for a tooltip?

Attaching a specific style to a tooltip

Tooltip.attach() admits an optionnal third argument, of the type TooltipStyle. You can write something like this:

Is that it?

That’s about it!! Two other public methods actually exist: unattach() and unattachF().

They are used in those cases where you dynamically create and delete a lot of elements that have tooltips attached to them, so the listeners can get properly unregistered. It’s normally good practice to always call unattach() and unattachF() every time you destroy an element having previously been attached a tooltip.

public API

They are only 5 methods publicly available. Also I haven’t written the returns for the sake of simplicity, all of those 5 methods actually return the class Tooltip, so they can be chained if you want:

• static function setDefaultStyle(s:TooltipStyle);
• static function attach(d:DisplayObject, s:String, st:TooltipStyle=null);
• static function attachF(d:DisplayObject, f:Void->String, st:TooltipStyle=null);
• static function unattach(d:DisplayObject, s:String, st:TooltipStyle=null);
• static function unattachD(d:DisplayObject, f:Void->String, st:TooltipStyle=null);

Source code

The source code can be get here:

• Source code
• Demo code

Enjoy!

A force-driven simulation used to calculate relatively stable positions of any undirected graph, with or without cycles.

Primary usage for this is to calculate constellations in my game Mandolin, as every constellation is randomly generated and we want beautiful constellations (ie. avoid path crossing, concave cycles and cumbersome layouts), however I made it into a generic class package.

Principle

• Repulsion: between vertices (particules);
• Attraction: between edges (springs);
• Some damping helps prevent the simulation running for an infinite time.

Above: The graph shown in this special example has 7 vertices and the following edges: [0, 1], [1, 2], [2, 0], [3, 4], [4, 5], [5, 6], [6, 3], [3, 0]. The successive pink dots indicate the lowest kinetic positions, to date.

Credits

Written in Haxe and w/ my DungeonEngine. Exponential thanks to Pierre Hebrard, a pure math guru I met tonight here in Hong Kong, International Travel Hotel @ Chungking Mansion, who helped me figure out the last problem with my springs. I hope your job interview will go smooth!

Controls

The remote-control has the following buttons:

1. Orange: manual iteration, will pause if running
2. Bright blue: continue
3. Navy: pause
4. White: zoom in
5. Black: zoom out
6. Truncated purple: reset!
7. Light gray: increase damping
8. Dark gray: decrease damping
9. Truncated yellow: increase repulsion factor
10. Dark yellow: decrease repulsion factor.

(see also at http://alex.moutonking.com/graph.html).

Here is my own RLE compressor (run-length encoding) for HaXe, it has some improvements over the one provided by the Polygonal framework. Also, my version is released in the Public domain.

It is possible to introduce an optimization to the plain RLE compression: assuming sequence of data sometimes offer some ever-changing bytes, we can conventionally imply negative counters introduce verbatim sequences whose length is the two’s-complement of their hexadecimal value.

In short, a counter n can belong to one of those two ranges:

• 0×01–0x7F (positive): repeat, n times, the following byte (eg: 7x -> xxxxxxx).
• 0×80-0xFF (negative): transcribe the next -n bytes, verbatim (eg:-3abc -> abc).

Haxe

Haxe is a cross-target language (Javascript, Flash, PHP, Neko, C++, iPhone etc). Another Haxe implementation of RLE-codec is provided with the Polygonal framework. As it didn’t have the verbatim optimization, here is my own implementation:

Here is a simple test tile:

French keyboards use AZERTY layout instead of QWERTY. I usually work in english, but I often type Cmd–Q instead of Cmd–A on the Mac, thus quitting Photoshop/Textmate instead of selecting everything, and losing the whole history/open files… The same kind of misadventure regularly happens too with W and Z which are swapped; closing the document when a mere undo was wanted…

So, how to write french accented characters on the Mac, with an english keyboard, without having to use international input methods (which are error prone as recounted before)?

US keyboard has no accented characters

Explanations

Typing accented characters involves producing the accent first (using ALT–<something>), and then typing the letter supposed to be written underneath. For example to type ‘é’ in the word café, you would issue the following sequence:

<ALT–e> <e>    —>  é

Similarly to produce a ‘û‘ – like in the french word flûte (pipe) – you would type:

<ALT–i> <u>    —> û

The list

Here is a list of the sequences I found for the french. If you experiment a bit, you’ll probably find it easier to remember and use than you first expected:

How to remember them

Most sequences are using vowels (e, i, and u, respectively for ´, ˆ, and ¨). Only the ` is using a non-vowel; but the key being the backquote, it’s trivial to remember (producing for example à, è, and ù). The accent ´ is quite often associated with the e (é), which makes it easy too. As for the ˆ and ¨ (ALT–i and ALT–u), they are rarer, and still using vowels. Finally, ç is simply ALT–c.

Other benefits

You also get other characters this way: the german ß (ALT–s), some greek letters, spanish punctuation such as‘¡ hola !’(ALT–1)… Icing on the cake: you can also write capitalized accented letters such as ‘É’, which is not so easy with a true french keyboard.

Simply hold the SHIFT key while typing your character, and it will appear upper-cased.

Developing for all platforms using HTML5, then wrapping the app using a framework such as PhoneGap is a new emerging way of developing. It’s an interesting alternative to the costlier approach of developing a specific version for each targeted platform.

Now you can develop a single HTML5 application and release it on the Apple Store, the Android Market and even other platform such as Blackberry or Palm.

Unificating platforms

At some point, the future of HTML did not seem so bright. But it managed to largely dominate the whole past decade. It transcended the differences between computer’s hardware, network configuration, OS, CPU speed and screen resolutions in a simple but standardized and open fashion.

In some ways the situation ahead is comparable since we have different hardwares and screen resolutions, and two irreconcilable platform: iOS and Android.

Let’s look at a concrete example of how to develop using HTML5 on a given platform. Then we will see how to simply deploy it on several platforms and you can make your own opinion on the subject.

Writing a Tetris application in HTML5 for iPhone

Three weeks ago, Alex Kissinger wrote a good article about how to write a Tetris application for iPhone, using HTML5, not Objective-C. This is a good start for us. You can see it here: http://sixrevisions.com/web-development/html5-iphone-app/.

Tetris app in HTML5 on the iPhone

In the current form presented by the article, the application can not yet be shared on the App Store. We’ll see in the next chapter how we can easily deploy it to a multitude of targets, using PhoneGap.

Deploying your application using PhoneGap

PhoneGap allows you to wrap a HTML5 in a native app that you’ll then be able to deploy to Android phones, iPhones, iPad, Blackberry and many more… Write your web 2.0 app,  wrap it, and deploy it.

PhoneGap explanations (taken from its website)

If you’d like to use another product, other similar solutions are presented in the last chapter.

Manage different screen resolutions

Almost every platform uses a different resolution.

The following article presents strategies using MVC (model, view, controller) to elegantly overcome this universal problem: http://blog.gameclosure.com/?p=59.

A word about HTML5 apps in desktop browsers

HTML5 specifications are not finished yet, and while most mobile/tablet platforms fairly support HTML5 features, this is not the same for visitors using Firefox or Internet Explorer. I  compiled the following table yesterday, and although it concerns the Internet users from France (http://gs.statcounter.com), the results are eloquent.

HTML5 support in major browers, march 2011 (France)

The strong warning coming from this: most smartphones and tablets already support HTML5, but almost 75% of Internet users’ browsers do not support HTML5.

Although Firefox 4 and IE9 are supporting it, they hardly represent more than 3% (while Firefox and IE together represent about 77% of the market share). Obviously some inertia is to be expected there.

What this means in the context of this article you shouldn’t use too modern features if your app is intended to run on a website as well. However it’s possible to write portable applications in HTML4+CSS2+JS.

Other mobile tools

As Zeeshan Siddiqui pointed out on his blog (http://helium.com/items/2119797-how-html5-is-aiding-in-cross-platform-development), a number of mobile tools to get us started are already available:

Those are taken from his article:

• RhoMobile: open source framework, using Ruby, for smartphone development
• Appcelerator: Zeeshan writes it’s the most favorite amongst developers and allows to create apps for smartphones, tablets and desktops. It can use Javascript, PHP, Python and Ruby.
• WidgetPad: an online IDE to create webapps, by Satoshi Nakajima
• PhoneGap: we already talked about it, it has a cross-platform simulator created in Adobe AIR, allows dev for iPhone, iPad Android, Palm, Symbian and Blackberry.

I’d also cite Monkey Coder which translates Monkey code so that it can run on many platforms by translating the code, but its price is $ 120 and it’s not really a HTML5 solution. Other platforms you may want to consider include J2ME Polish (embedded Java solution), Grapple and Open Plug.

Conclusion

Native development will always provide more features and is probably a better experience for the user when done properly, though not all of them might notice. But sometimes it’s not what you want. Since those techniques are fairly new, it remains to see whether it’s possible for an application to become a killer app using an HTML5 approach.

This 11 minutes trip hop/jungle tune was written about 10 years ago, and was a major shift from my previous styles. Original title was Engelpulver. As the song goes on, it gets a gloomier and gloomier atmosphere, a presupposed consequence of the title’s advice being not followed.

Direct download link (mp3)

A Captcha is an annoying box widely used in this beginning of century to ensure a website’s user qualifies as a human (as opposed to a script or ‘bot’). Some sort of Turing test.

These days it seems harder and harder to use. For human beings, that is.

It’s becoming quite common that people now actually need to enter the text twice, or even three times ; recent forum readings have highlighted this and I don’t expect it will improve over time.

\retrospective/

Back a few years ago, this kind of captcha was already quite advanced. Nevertheless it showed numerous problems:

System used by IPB forums (2004)

• Simplistic and static grid
• almost regular noise [sic]
• black text while nothing else is black
• using only one and same font
• no variable text angle
• no text disformation

Using an adapted Optical Character Recognition (OCR) algorithm, this captcha is probably trivial enough to decipher: 1) filter out non black pixels, 2) launch OCR.

A slightly more difficult is this one, used at Yahoo! for some time and generated with the EZ-Gimpy program. It combined some black-on-white characters with a vortex effect:

Generated by the EZ-Gimpy program, previously used on Yahoo, now is abandoned.

Cracking this one probably involves some topological break-down. What is topology? In short,

Topology (from the Greek τόπος, “place”, and λόγος, “study”) is a major area of mathematics concerned with spatial properties that are preserved under continuous deformations of objects, for example, deformations that involve stretching, but no tearing or gluing. It emerged through the development of concepts from geometry and set theory, such as space, dimension, and transformation. – Wikipedia.

Now there would be three steps, the first one being the most difficult to achieve:

1. write an algorithm that requires a letter-like shape as input and returns a topological graph describing the spatial relationships between the letter-like shape’s components: paws, loops, bridges, relative lengths and basic orientation; for example ‘b’ has a loop whereas ‘s’ doesn’t have one, ‘n’ has one bridge whereas ‘m’ has two, ‘w’ remotely looks like a ‘m’ so you also need to consider orientation;
2. generate a topology graph for each possible character (a-z, 0-9…) and build a collection that will be used for later comparison,
3. isolate captcha’s characters and for each character: process topological graph, compare to the collection built in step 2, retain the closest match.

Now even this CAPTCHA had to be massively abandoned because in January 2008 Network Security Research released a program to recognize this CAPTCHA. According to Wikipedia, ”Windows Live Hotmail and Gmail, the other two major free email providers, were cracked shortly after.”

Ouch! Nowadays (2011) ReCAPTCHA seems the champion. It’s available as a webservice, it’s free, it’s cool and of course and it was acquired by Google in 2009 to help scanning its books.

But sometimes it’s getting difficult:

What? ReCAPTCHA, screenshot by Marat

And the machines’ OCR capabilities are still actively developed: ReCAPTCHA has been reportedly cracked with 30% success rate in august 2010.

Now this brings questions.

Debate future:

1. As the captchas get harder and harder to read, will the humans soon need some OCR robots to assist them?
2. When will robots get better than us at deciphering captchas?
3. What do you think will massively replace captchas say ten years from now: animated problems? abstract logic tests?

By the way, does anybody have Sarah Connors’ phone number?

Update: one I just got 2 minutes ago

Suppose we want to list all functions in a project.

We’re going to use the egrep command for this purpose. Egrep is the same command as grep but with -e option, for regular expression search. egrep installed by default on Linux and OSX (Windows users might want to install Cygwin).

The command-line will look like this:

1	egrep -Ri "patternToSearch" *

Explanations:

• -R: recursive
• -i: case-insensitive
• “patternToSearch”: what you want to search, it can have spaces and can be a regular expression
• *: a wildcard to treat all entries in the current working directory

Here’s a way to display all functions’ definitions in files sitting under the current directory:

Command-line recursive regex search

Another example: look for long hexadecimal strings

Suppose you’re maintaining a Facebook application developed by someone else and at some point you don’t know where the public/secret app keys were stored. This can be troublesome if they are many files.

Well using egrep with a simple a regular expression can give you results in a matter of seconds:

Find hexadecimal string of length >= 10

The regex [a-f0-9]{10,} simply means an uninterrupted string of at least 10-characters belonging to the range 0-f.

Conclusion

It’s probably a matter of personal preference but for me the benefits of the command-line project search outweight the IDE-based search, here are my reasons:

• results are displayed very quickly
• you can instantly kill an ongoing command using CTRL+C (for example if you notice the regex is too loose)
• you have all the grep options: for example -B3 will display the three lines before every match, -A5 will display the match and the five lines after (grep man page for more)
• finally, since you are already using the shell, it potentially leaves room for further creative solutions, using stream redirection and pipes (e.g.: grep -R social * | mail -s “here you are” jeanjacques@gmail.com).

It is a well-known fact that People’s Republic of China is regarding the taiwanese question with firmness, if not rigidness. Quoting Wikipedia:

The People’s Republic of China until the 1990s had made it clear that “there is only one China in the world”, “Taiwan is an inalienable part of China” and “the Government of the People’s Republic of China is the sole legal government of China” – Wikipedia

Today while spending the afternoon in a bookstore I found this book about Countries and Continents:

Interestingly the index had white out on some asian country:

It appeared pp. 125 and 126 were stuck together.

A further examination in the book revealed another white out area, probably concealing the name Taiwan as a country:

Now I can’t say I feel like the hero of 1984. But still. Isn’t this actually counterproductive?

Watch this. By subBlue.

Surface detail from subBlue on Vimeo.