Unipasta, a Unicode browser

When writing in French I'm always looking for characters that can't be easily typed with a keyboard (like œ, for example). I used to go to copypastecharacter.com for its simplicity: just go to that page, click on a character and boom, it's in your clipboard, ready to be pasted!

But I wanted something more powerful/thorough that would remember my frequently used characters. So I wrote Unipasta!

Unipasta

Here's what you should know about it:

  1. Every input under the selected character (char, code and hex) can be edited and will update each other. Easily jump to any character!
  2. The font metrics (baseline, x-height and cap-height) are auto-calculated and will help you know where the char lives;
  3. Click on the "More Info" link to jump to fileformat.info and access a lot of details about the selected character;
  4. Every character your click will be automatically copied to your clipboard, handy!
  5. Use the "Recent characters" list to quickly access your favorite ones (latest used will always be listed first).

If you think some missing Unicode blocks are important to you or if you'd like to add a new character listing, just ask for it!

Type Tip

I just launched a Tumblr about the font creation process I recently started. Should be interesting to anyone loving fonts as I will study some of their aspects and be as visual as I can. Should be.

Here it is, folks: Type Tip. Learn more on the About page.

A Golden Ratio Tool

iframe: <a href="http://toki-woki.net/p/golden-ratio/">http://toki-woki.net/p/golden-ratio/</a>

I wrote a quick and simple golden ratio tool (dedicated page). Basically it helps you find "golden ratio neighbors" for a given number: every number in the list divided/multiplied by its neighbor = φ.

Pretty straightforward but could come in handy. I'm aware it could be improved; if you have suggestions...

Hey! – A Lego Table

When I moved in I bought an IKEA Ramvik table and while travelling this summer I had an idea (don't ask why): decorate its top with Lego bricks used as pixels. Here are the steps I went through. If you don't care about those steps and want to see a nice time-lapse video, scroll to the end of the article!

Lego bricks

First things first. What are the Lego brick sizes and colors available? Oddly enough this question is not that easily answered. Probably because Lego's site is crappy, or because nobody really cares... I eventually found Brickipedia which happens to be a much richer resource than the official ones. Everything I was looking for was there: the Lego "unit" is 8 millimeters and the color palette is pretty simple.

Table specs

Knowing my table size I had various options, depending on the "pixel size" I'd choose. Of course the number of bricks (and the price) would also vary. So I created a dynamic spreadsheet on Google Docs that'd do the calculations for me... Here it is, with all the options possible (French, sorry).

iframe: <a href="https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc&amp;hl=en&amp;output=html&amp;widget=true">https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc&amp;hl=en&amp;output=html&amp;widget=true</a>

I chose the 4x4 option, quite cheap and still offering a cool number of pixels.

Design

36x16 pixels of freedom, that's it. I tried lots of different designs, from lo-fi photos to pixel-art drawings. I decided to go for a Heavy Oblique Futura.

Actual size:

Looking good.

The Lego palette

I set my type to white, on a black background. The anti-aliasing process creates gray-scale pixels to smooth the curves, which is great, but Lego bricks aren't available in all colors! To have a realistic preview of what it would look like I had to create a Photoshop Color Table matching Lego's gray-scales (if you're interested, just ping me [UPDATE: here they are]). Here's a comparison between Photoshop's default gray-scales (left) and Lego's palette (right):


You may notice that Lego's black is a little bit light and the grays are yellowish.

Time to order bricks!

Already? Nope, not that fast. Before ordering I had to know exactly what to order, that means counting the pixels. Well, I'm not this kind of guy. I'm a developer; I hate repetitive chores, you know.

So I fired up Flash Builder and came up with PaletteCounter a simple, OpenSource, app to count pixels of each color. I also added some kind of "assembly instructions generator" to help us build it. Handy.

Time to order!

Really? Yup. I placed an order on lego.com's Pick A Brick and received it a couple of weeks later. Yay!

Let's do this

I'm not going to describe the process (that happened this saturday), just have a look at this time-lapse vid. 1020 pics shot in about an hour, yummy. Thanks to Céline and Julie for helping out!

This page has been translated in Russian by Karina.

Flex – GradientLabel

If you've ever wondered whether it's possible to apply a gradient on a Flex Label, well it is ; but that's not very straight forward... As I'm working on a app that requires this kind of glitter I decided to try and see what could be done.

I started with a basic ActionScript project (no Flex involved) and came up with this. Quite functional, could probably be optimized but my goal was actually a Flex component and I knew that was technically feasible. I then simply extended Flex's Label class and basically copied/pasted the logic into it. Just had to figure out which event to listen to and I was good to go...

Here's a demo app for your playing pleasure.

Go get Flash!

You may notice that in this example I embed the font so it looks nicer, but this is not mandatory...

All this is opensource (class+project) and you can grab it at my brand new Google Code dump: as3-bits. Help yourself.

As always, feedback welcome.

Advanced Courses

I just found that, while tidying up.

Advanced Courses

I remember picking it up in the streets of Ethiopia... Lovely.

Crash – Font

Keep it fresh.

My first, quick and wack font made with FontStruct. Go get it! As you'll notice, upper-cases look better than lower ones. And, many glyphs are missing...

Salif, G.A.P, Belek

Seen on the streets. Nice font work!

Cubik. Font preview

Cubik

Continued.

Éronée

I found letters next to the train station, in a dumpster...

éroné 1

éroné 2