TOKI WOKI. 

Boks is one of my most suc­cess­ful apps and this is prob­a­bly not only because of its use­ful­ness, but also because it is free, too. I released it more than 2 years ago and it is still heav­ily downloaded.

The CSS com­mu­nity is really active and fast-moving. When I wrote Boks, Blue­print CSS was one of the most watched and forked project on GitHub which is mostly why I chose to base my UI and logic on it (it still is at the top, by the way). But with today’s CSS3 hype and because of the ever-growing list of CSS frame­works (not going to list them here) I started receiv­ing lots of fea­ture requests.

At first I thought I could wait and han­dle them later, but I quickly real­ized it would need a lot of time, and I defin­i­tively didn’t have it in my hands (or at least not for this project). The idea to Open­Source it seemed obvi­ous and I’ve been slow doing so, but here it is. If anyone’s will­ing to take a look at what I wrote and fix or improve it, do it! Don’t for­get that this has been writ­ten a while back and I wouldn’t re-write it this way (think Robot­legs); I know the code will look crappy to some but hey, we all learn and evolve, right?

I’ve licensed Boks’ source under GNU GPL v3 in order for it to remain Open­Source, but if you have other sug­ges­tions, just tell me.

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 neighbor = φ.

Pretty straight­for­ward but could come in handy. I’m aware it could be improved; if you have suggestions…

Guess what? AIR app! This one’s for edu­Me­dia.

An intro

We cre­ate and dis­trib­ute ped­a­gog­i­cal sim­u­la­tions and videos, and our school users can down­load them to pre­pare and illus­trate their lessons. Until now we offered server-side gen­er­ated ZIP files with an HTML, some CSS and the SWF, but users (who often are not com­puter geeks) wanted some­thing sim­pler and more pow­er­ful… So we designed the eBox!

The eBox

Basi­cally the eBox is an empty media library wait­ing to be filled. The first time you launch it, it installs itself (and the AIR run­time, if not already there) and then fills itself with the medias you chose. This hap­pens thanks to AIR’s Browser­In­voke logic and removes the “Save As” and “Uncom­press” steps.

You can also fill it with “local medias” (of any type) but drag­ging and drop­ping files on it, or by brows­ing and select­ing them. If these medias are SWFs they’ll be opened within the app, if not the OS will open them with their default app. Handy.

You also have the abil­ity to cre­ate direc­to­ries to orga­nize your library, and to reorder medias (via drag and drop). Pretty com­mon, but cool.

Let’s talk tech

Flex 4.1, local­ized with Lupo (now free and Open­Source!) and designed with Illus­tra­tor. Server-side com­mu­ni­ca­tion is made through AMFPHP. I used some tiny tech­niques that helped deploy two dif­fer­ent ver­sions with only one project (we have a school and an indi­vid­ual ver­sion), I might detail that in a next post.

This is my first real-life project with Robot­legs, it helped me learn how to use it and how to write really clean code; with view, medi­a­tors and all. I loved it and think I will con­tinue build­ing big projects with RLs, makes you feel pretty.

So?

I’m pretty happy with the final result (not that final, expect updates!), both on visual and tech­ni­cal points of view. Go grab a free media and tell me what you think! We also set up a spe­cial page with a nice pre­sen­ta­tion of how it works, in case you’re lost.

Meet Dok, my lat­est and nicest AIR app to this day!

Always look­ing for help when writ­ing AS3 for Flash, Flex and AIR? Think Adobe’s ref­er­ence is rich but brows­ing it sucks? Well, I did too. So I wrote this lit­tle thingy that loads, parses and caches help pages and then presents them in a slick and quick UI!

Since this app is only intended for devs and there­fore may not be very inter­est­ing to oth­ers, I decided it should look good. So I tried my best and worked hard on those pix­els and styles (col­ors and tex­tures inspired by that sweet clock)… Jump to the project page for life-size screenshot!

This project is absolutely Open­Source, from top to bot­tom. AS3 classes, MXML, Illus­tra­tor and Pho­to­shop files, PNGs and so on… Help your­self.

It’s an inter­est­ing thing to see how Google is work­ing on its Chrome OS, in an Open­Source fash­ion, let­ting every­one know where they are going and how all this will/may look like. As a UI nerd I find it absolutely lovely to be able to sneak a peek at what’s com­ing next, and have techy details on it, such as hexa­dec­i­mal val­ues and gra­di­ent stops…

Fire­fox also pro­vides sim­i­lar doc­u­ments on its Wiki, and Chro­matic Pixel tells you every­thing about it.

Speak­ing of UI design, here’s a nice arti­cle about craft­ing sub­tle and real­is­tic ones. You’ll find gems like this one in it, and how it is achieved…

Got sim­i­lar links to share? Do so!

Hey, did you notice I didn’t say any­thing about Flash and/or the iPad? Thank me.

Hop, je viens de payer des nou­veaux habits à Ébruiter (le blog qui parle de musique à ceux qui ont des oreilles) qui ne se plai­sait plus dans son pre­mier ensem­ble… Grid sys­tem, bien sûr. Tou­jours Word­Press, avec un thème mai­son (merci Boks et Greg) et des hacks par-ci par-là.

Et puisque finale­ment j’aime bien le con­cept, je vais essayer de repren­dre l’habitude de poster des trucs. Ça va être super.

Chope le flux, poto !

I wanted to try Flex 4 with a “real life” project so I wrote this lit­tle thing. Rough draft.

The app will allow you to mon­i­tor files changes: select a text file and you’ll be prompted when it’s updated. Basic. By the way, did I say “rough draft” before?

Every­thing in it is Open­Source, from the Illus­tra­tor files to the MXML and CSS stuff, so play with it! For those who only want the .air, here it is.

Now, why is it cool?

• Build with the brand new Flex 4 (Gumbo) framework
• Uses a home-brewed Icon­But­ton class, because Gumbo doesn’t pro­vide any
• Uses the new Spark cus­tom skins logic (on But­ton, Scroll­Bar and more…)
• Uses the new states’ logic and transitions
• Based on as3corelib’s File­Mon­i­tor class
• Shows you how to build a multi-instance AIR app
• Con­tains Illustrator/Photoshop UI files

And why is it not that cool?

• Prob­a­bly still buggy, wait for updates!
• Flex 4 is not done yet, so the code might break at any time
• No icons yet
• No or very few comments
• Pretty use­less app!

If you’re try­ing to learn Flex/Flex 4 or won­der­ing what’s new in it and how to use it you should defin­i­tively give it a go…

Have ques­tions? Drop’em!

Intro­duc­ing Boks, my lat­est and most ambi­tious AIR app to this day!

Do you design web pages? Do you write HTML and CSS? Ever heard about the Grid Sys­tem and Blue­print CSS? Thought it was a pain to imple­ment? Think again, fool!

Boks is some kind of WYSIWYG to help you setup a grid and base­line rhythm, build and fill your lay­out and export all this to HTML and CSS in no time.

Got your own CSS style already? No prob­lemo, Boks can use them and even­tu­ally merge and com­press them within a sin­gle “screen.css”. Your styles use images? Sim­ply point to your asset direc­tory and it will be included too! Afraid of break­ing the base­line rhythm with you ran­domly sized images? Just select the “Add JS to fix base­lines” option and you’re good to go!

Enough. Just go grab it (or just have a look at the lovely screen­shots) and send feedback!

Apr 01, 2009: Update! I’ve done some wacky video screen­casts that can help you under­stand every­thing about Boks, go and have a look! Yes, the sound is not perfect.

A new project is online! It’s called Kwot, and it allows you to share and store your favorite quotes.

The UI is quite min­i­mal­is­tic, with focus on sim­plic­ity. Nav­i­gate through quotes with your mouse wheel, your keyboard’s left and right arrow or the mini time­line at the bot­tom. Add a quote by click­ing on the plus but­ton at the bot­tom right hand cor­ner. If you don’t pick any color they’ll be auto­mat­i­cally cho­sen via a magic algo­rithm! Another magic algo­rithm will rotate your quote in 3D space. But don’t worry you will pre­view that in real-time, ha!

I might add user (login) sup­port, lan­guage tag­ging, an RSS feed and stuff like that but don’t expect that too soon, hol­i­days are coming!

If you don’t have the Flash plu­gin or if you visit the site on an iPhone the site will look quite dif­fer­ent but every­thing will remain!

A few things I used in case you won­der: swfad­dress (you will love deep-linking!), GTween, FlashDe­velop, AMFPHP, the view­port width attribute… Oh, and by the way, the font face is called Neu­tra.

Add some quotes and drop feedback!

I’m home, sick, so I’ve had time to do some­thing I should have done ear­lier: add an Apple Touch icon to the site. So here’s what it looks like!

Despite what the offi­cial docs say, I’ve fol­lowed Play­ground Blues’ advice. So my apple-touch-icon.png is 158x158 pixels.

Geeky post? True.