Okr – Story of a failure

Some projects become real, oth­ers never see the light of day. This one is more of an abortion.

Six month ago I’ve been con­tacted by an archi­tec­tural firm to pro­vide some con­sult­ing on a project of theirs (I’m not going to name names, you’ll under­stand why). The goal was to find ideas to make a building’s front more inter­est­ing. The build­ing being a place to help and pro­mote Hip-Hop culture.

So I started work­ing on it and came up with ideas and con­cepts. The archi­tect I was in con­tact with seemed pretty happy with it and every­thing was look­ing good.

Until I no longer received any answer to my e-mails… Our last inter­ac­tion is now 5 month old and I think time has come to mourn. What I came up with can be inter­est­ing and since it involves an Open­Source project, here are a few bits about it.

At that time I was dis­cov­er­ing  GML (Graf­fiti Markup Lan­guage) and Evan Roth’s work. Bor­deaux hosted Les Grandes Tra­ver­sées and all of this really inspired me. So I thought of a mash-up between GML’s #000000book (black book, open archive of GML tags), a player of my own (Okr), the build­ing itself and Twit­ter. Here’s the doc­u­ment I pre­sented to explain what I had in mind.

The steps are:

  1. Cre­at­ing and send­ing a graffiti;
  2. Receiv­ing data;
  3. Con­vert­ing it to an image;
  4. Pro­ject­ing it on the building’s front;
  5. Photo-shooting of the front;
  6. Send­ing to Twitter;
  7. Online con­sul­ta­tion.

After a few e-mails with Jamie Wilkin­son (heads up!) I started work­ing on the core classes writ­ing GMLPlayer and GML­Cre­ator. The goal was to pro­vide both a way to dis­play tags and to create/upload them. I then built a UI around all that (a Flex one, after notic­ing Min­i­mal Comps didn’t work the way I expected).

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

Note: you’ll also find the app on its ded­i­cated page. Try search­ing for “dasp” or “hello world” for exam­ple and play with the set­tings (the 3 top sliders).

Unfor­tu­nately it is only after cre­at­ing all this that I real­ized the project would never become real… So I sim­ply stopped work­ing on it. I am well aware that some parts of the code is a bit raw and could be opti­mized and I haven’t built the creation/upload fea­ture into the UI yet. Don’t know if I will, but the project is Open­Source so feel free to give it a spin! I also share my ini­tial attempt and a pixel ver­sion in case you’re interested.

Pretty happy that — even if not fea­ture com­plete — Okr made it to the GML project gallery, yay!

And just because a project will never see the light of day doesn’t mean it doesn’t need a proper logo, right?

SVG to RaphaelJS

While redesign­ing this blog I wanted to keep the “one color per post” con­cept I had in the pre­vi­ous ver­sion by chang­ing (tween­ing) the logo’s color accord­ingly to the arti­cle being viewed (or scrolled to). I rapidly real­ized I couldn’t achieve this with just HTML+CS+JS and I didn’t want to use Flash (mainly because of iOS devices but also to avoid load­ing a SWF file on every page).

I remem­bered hear­ing — a few months ear­lier — about Raphaël (a JS lib to ren­der vec­tor graph­ics). At that time I found the con­cept really inter­est­ing but couldn’t see where to use it.

OK, so I know what I want to do, I know the tools I’ll use, but how do we do that? Raphaël is cool, but its syn­tax looks a bit cryp­tic at first. It says it han­dles SVG, and — guess what — Illus­tra­tor can export to SVG. We’re get­ting closer…

SVG is XML, but Raphaël doesn’t eat XML, it eats a spe­cific syn­tax meant to be com­pat­i­ble with SVG and VML. Hum… This is when I fire Flash Builder and start writ­ing code. The goal: accept an SVG XML file as input and spit some “Raphaël-compatible script” out.

Boom (plus a lit­tle demo of an output).

I then sim­ply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the out­put, and wire all that to the scroll/color tween­ing logic. Pretty easy.

Every­thing worked and looked nice on all browsers and OS’s but I real­ized the sole idea of hav­ing a logo chang­ing col­ors didn’t work that well. For purely visual rea­sons. So I dropped it from my theme and rolled back to the black PNG ver­sion you can see right now.

The good thing is, the tool works pretty well (at least with Illus­tra­tor SVGs) and is Open­Source. Either use it or mod­ify it, and tell me what you think. I did this in a hasty fash­ion and I prob­a­bly won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improv­ing it, please do so!

eduMedia’s eBox

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.

Buck 65–20 Odd Years

I talked about the logo here and there and now, here are the EPs! Grab them dig­i­tally or phys­i­cally.

Redesign

I’ve had this blog for 2 and a half years now, and it never really evolved visu­ally. So I decided to update it a bit, from scratch.

So that means a new theme?

Yay! Since the blog has been redesigned and you’re prob­a­bly read­ing this from your RSS reader you should defin­i­tively come by and see how it looks. And share some feed­back, if you feel like it.

Can’t remem­ber what it looked like before? I’ve archived screens over at Flickr.

A con­sis­tent look

Updat­ing the blog’s look is good, but a com­plete rewrite is bet­ter; for con­sis­tency, fool! I used to have a dif­fer­ent look for every sin­gle page: home, projects, blog and so on. No more.

Long story short:

Before: all dif­fer­ent. Now: all good.”

I’ve been into grids since the day I learned about Blue­pint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heav­ily relies on a grid struc­ture. For grid freaks out there, click here to tog­gle the columns and see what I mean. Of course if you’re on a small device (such as a phone) the UI is a bit dif­fer­ent, but we’ll get into that later.

Got a key­board? Like short­cuts? Press that key!

I imple­mented a few key­board short­cuts, from use­ful to use­less. For exam­ple, if you liked the grid tog­gle, just press G (for grid) or W (for InDe­sign users) and you’ll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next arti­cle by press­ing N (or the Down key)? And you guessed it already, P (or Up) will jump to the pre­vi­ous (inspired by AisleOne). You can also time-travel by press­ing Shift+P (for Past) or Shift+F (Future). Handy? Yep.

Feel like you’re stuck in the blog? Just press 1 to go to the Home page, or 2 for Projects. 3 is for the Blog and 4 is the About page.

My screen is smaller than yours

I dis­cov­ered that tech­nique on Hicks­de­sign and imme­di­ately thought I had to imple­ment that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then over­write some dec­la­ra­tions if the screen size matches some rules… I imple­mented 3 dif­fer­ent lay­outs so the site should look good on about any device. Just resize your browser win­dow and see things move. How cool is that?

My brother (and his iPhone 4) helped me test the retina-display-ready logo, too. Optional but cool.

More awe­some

  • I’ve always wanted to use Web­fonts but never really knew where. Here it is, you’ll find a nice OFL Sorts Mill Goudy TT on the home page. Thanks Google.
  • Another tiny thing is the “Sub­tle Prompt”. It hap­pens when you use a key­board short­cut or when you click the Con­tact link…
  • If you’re on a WebKit browser (Safari or Chrome) you should see cus­tom scroll­bars, styled with CSS. Yeah.
  • I kind of don’t sup­port Inter­net Explorer. Yes, this IS an awe­some feature!
  • Track­backs are now sep­a­rated from reg­u­lar comments.
  • A blog post’s author (my) com­ments appear dif­fer­ently, so you know who’s the boss out there.

Open­Source

I always try my best to share the use­ful and reusable bits. Here are some JavaScript (MooTools required) goodies:

  • LazyScroller: turns your key­board keys into a nav­i­ga­tion dashboard.
  • Sub­tlePrompt: nice and gen­tle prompt for your sen­si­tive users.
  • Lblr: form input in-context labeler.
  • ta-bg: allows a textarea’s back­ground image to scroll with its content.

I’ll try to post docs/demos soon, I know this is prob­a­bly a lit­tle bit rough right now…

What now?

Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!

Buck 65/20th

I’m still hav­ing a hard time believ­ing what I’m about to write, but hope­fully you will.

That was my intro, buddy.

A lit­tle bit of context

I lis­ten to music, I try as hard as I can to be eclec­tic but let me con­fess that: I’ve always loved Hip-Hop. Of course my Hip-Hop heroes have changed through the years, but there’s one that never left my inner podium… He’s Cana­dian, he’s weird (proof: he’s worn a platy­pus shirt, once), he’s prob­a­bly the most sub­tle writer I know (OK, with Yoni Wolf) and he’s evolving.

He’s Buck 65.

An ounce of Twitter

As in every web tale, it all starts with a Twit­ter sta­tus. Mine started with this one:

I kinda need a logo-thing made of the num­bers 65 and 20. Any­one wanna take a crack? Who knows what might happen?!

I read this and thought “Well yes, but I’m kind of busy you know. And what the hell could I do with those damn num­bers? Plus, lots of fans will answer that”.

Some friendly advice

A few days later as I was chat­ting with a good friend of mine (and dis­creetly sent him the link to that tweet) he reacted some­thing like: “You bitch-ass cunt, you could try some­thing and see! Stupid-ass jerk”. “Hum, well yeah, you know. Just sayin’…” I kind of replied.

So I fired Illus­tra­tor and tried a few things out. A “65”, a “20”, and 15 min­utes later I had something.

Not quite ready for prime-time, but the con­cept was there. A few iter­a­tions later I was kind of happy with this:

So I tweeted back.

Who knows what might happen

And got an answer, a pri­vate one. Say­ing he was lik­ing it… Oh boy.

A few days later I received another pri­vate mes­sage ask­ing me if I could add a “th” to the logo, let­ting me know the mys­te­ri­ous logo was in fact for his “20 years as a rap weirdo”. Which I (of course) did.

We then e-mailed back and forth and “sorted out the details”, he “blew [the logo] up with dyna­mite and shot it with a gun a few times” and that was it.

Oh boy

I made Buck 65’s 20th “year in the game” logo, which is up on his new web­site.

Call me a happy fan. Yup.

Shortcodes for Drupal

Word­Press’ Short­code API is a really cool thing, and since I’m work­ing on a Dru­pal site these days I’ve been look­ing for some­thing sim­i­lar. Unfor­tu­nately I couldn’t find any­thing… There are some imple­men­ta­tions out there but the ones I found and tested always come pre-bundled with spe­cific tags and don’t always pro­vide an exten­si­ble and sta­ble logic.

So I made mine!

Most of my work sim­ply con­sisted in copying/pasting the code in Word­Press’ shortcodes.php and bind­ing it into a Dru­pal fil­ter. Easy enough.

Now if you want to use it, you have to:

  1. Get the module
  2. Add it to your “mod­ules” directory
  3. Enable it
  4. Add it to one of your setup’s fil­ter bundle
  5. Write your own mod­ule where you’d imple­ment one or more Short­codes (via add_shortcode) and make sure you add “depen­den­cies[] = short­codes” in your .info file

You might expe­ri­ence a nasty “Call to unde­fined func­tion add_shortcode”. If so, you have to change you mod­ule implementation’s weight, either directly in your data­base, or thanks to the cool Util­ity mod­ule. Set it to 10 and you’re set!

Boks–A Visual Grid Editor

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.

Two thousand and nine, y’all!

Hi there folks, this is sim­ply a quick post to wish you a happy 2009!

I’ve updated WebKut, Shrink O’Matic and Kwot (that hope­fully will not get spammed any­more). I’ve also refreshed the home­page and blog header… Sub­tle changes, for sure!

Doubts? Here’s a before/after:

2008-2009

For you player haters, here are the 2008 and 2009 home­page images so you can compare.

Kwot

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!