Unipasta, a Unicode browser

When writ­ing in French I’m always look­ing for char­ac­ters that can’t be eas­ily typed with a key­board (like œ, for exam­ple). I used to go to copypastecharacter.com for its sim­plic­ity: just go to that page, click on a char­ac­ter and boom, it’s in your clip­board, ready to be pasted!

But I wanted some­thing more powerful/thorough that would remem­ber my fre­quently used char­ac­ters. So I wrote Uni­pasta!

Unipasta

Here’s what you should know about it:

  1. Every input under the selected char­ac­ter (char, code and hex) can be edited and will update each other. Eas­ily jump to any character!
  2. The font met­rics (base­line, 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 char­ac­ter your click will be auto­mat­i­cally copied to your clip­board, handy!
  5. Use the “Recent char­ac­ters” list to quickly access your favorite ones (lat­est used will always be listed first).

If you think some miss­ing Uni­code blocks are impor­tant to you or if you’d like to add a new char­ac­ter list­ing, just ask for it!

Type Tip

I just launched a Tum­blr about the font cre­ation process I recently started. Should be inter­est­ing to any­one lov­ing 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 sim­ple golden ratio tool (ded­i­cated page). Basi­cally it helps you find “golden ratio neigh­bors” for a given num­ber: every num­ber in the list divided/multiplied by its neigh­bor = φ.

Pretty straight­for­ward 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 trav­el­ling this sum­mer I had an idea (don’t ask why): dec­o­rate its top with Lego bricks used as pix­els. 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 col­ors avail­able? Oddly enough this ques­tion is not that eas­ily answered. Prob­a­bly because Lego’s site is crappy, or because nobody really cares… I even­tu­ally found Brick­ipedia which hap­pens to be a much richer resource than the offi­cial ones. Every­thing I was look­ing for was there: the Lego “unit” is 8 mil­lime­ters and the color palette is pretty sim­ple.

Table specs

Know­ing my table size I had var­i­ous options, depend­ing on the “pixel size” I’d choose. Of course the num­ber of bricks (and the price) would also vary. So I cre­ated a dynamic spread­sheet on Google Docs that’d do the cal­cu­la­tions for me… Here it is, with all the options pos­si­ble (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<span class="amp">&amp;</span>hl=en<span class="amp">&amp;</span>output=html<span class="amp">&amp;</span>widget=true</a>

I chose the 4x4 option, quite cheap and still offer­ing a cool num­ber of pixels.

Design

36x16 pix­els of free­dom, that’s it. I tried lots of dif­fer­ent designs, from lo-fi pho­tos to pixel-art draw­ings. I decided to go for a Heavy Oblique Futura.

Actual size:

Look­ing good.

The Lego palette

I set my type to white, on a black back­ground. The anti-aliasing process cre­ates gray-scale pix­els to smooth the curves, which is great, but Lego bricks aren’t avail­able in all col­ors! To have a real­is­tic pre­view of what it would look like I had to cre­ate a Pho­to­shop Color Table match­ing Lego’s gray-scales (if you’re inter­ested, just ping me [UPDATE: here they are]). Here’s a com­par­i­son between Photoshop’s default gray-scales (left) and Lego’s palette (right):


You may notice that Lego’s black is a lit­tle bit light and the grays are yellowish.

Time to order bricks!

Already? Nope, not that fast. Before order­ing I had to know exactly what to order, that means count­ing the pix­els. Well, I’m not this kind of guy. I’m a devel­oper; I hate repet­i­tive chores, you know.

So I fired up Flash Builder and came up with Palet­te­Counter a sim­ple, Open­Source, app to count pix­els of each color. I also added some kind of “assem­bly instruc­tions gen­er­a­tor” 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 cou­ple of weeks later. Yay!

Let’s do this

I’m not going to describe the process (that hap­pened this sat­ur­day), just have a look at this time-lapse vid. 1020 pics shot in about an hour, yummy. Thanks to Céline and Julie for help­ing out!

Flex — GradientLabel

If you’ve ever won­dered whether it’s pos­si­ble to apply a gra­di­ent on a Flex Label, well it is ; but that’s not very straight for­ward… As I’m work­ing on a app that requires this kind of glit­ter I decided to try and see what could be done.

I started with a basic Action­Script project (no Flex involved) and came up with this. Quite func­tional, could prob­a­bly be opti­mized but my goal was actu­ally a Flex com­po­nent and I knew that was tech­ni­cally fea­si­ble. I then sim­ply extended Flex’s Label class and basi­cally copied/pasted the logic into it. Just had to fig­ure out which event to lis­ten to and I was good to go…

Here’s a demo app for your play­ing pleasure.

Go get Flash!

You may notice that in this exam­ple I embed the font so it looks nicer, but this is not mandatory…

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

As always, feed­back welcome.

Advanced Courses

I just found that, while tidy­ing up.

Advanced Courses

I remem­ber pick­ing 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 bet­ter than lower ones. And, many glyphs are missing…

Salif, G.A.P, Belek

Seen on the streets. Nice font work!

Cubik. Font preview

Cubik

Con­tin­ued.

Éronée

I found let­ters next to the train sta­tion, in a dumpster…

éroné 1

éroné 2