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.
I’m big, now.
Blog is three, wee!
Some projects become real, others never see the light of day. This one is more of an abortion.
Six month ago I’ve been contacted by an architectural firm to provide some consulting on a project of theirs (I’m not going to name names, you’ll understand why). The goal was to find ideas to make a building’s front more interesting. The building being a place to help and promote Hip-Hop culture.
So I started working on it and came up with ideas and concepts. The architect I was in contact with seemed pretty happy with it and everything was looking good.
Until I no longer received any answer to my e-mails… Our last interaction is now 5 month old and I think time has come to mourn. What I came up with can be interesting and since it involves an OpenSource project, here are a few bits about it.
At that time I was discovering GML (Graffiti Markup Language) and Evan Roth’s work. Bordeaux hosted Les Grandes Traversé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 building itself and Twitter. Here’s the document I presented to explain what I had in mind.
The steps are:
- Creating and sending a graffiti;
- Receiving data;
- Converting it to an image;
- Projecting it on the building’s front;
- Photo-shooting of the front;
- Sending to Twitter;
- Online consultation.
After a few e-mails with Jamie Wilkinson (heads up!) I started working on the core classes writing GMLPlayer and GMLCreator. The goal was to provide both a way to display tags and to create/upload them. I then built a UI around all that (a Flex one, after noticing Minimal Comps didn’t work the way I expected).
Note: you’ll also find the app on its dedicated page. Try searching for “dasp” or “hello world” for example and play with the settings (the 3 top sliders).
Unfortunately it is only after creating all this that I realized the project would never become real… So I simply stopped working on it. I am well aware that some parts of the code is a bit raw and could be optimized and I haven’t built the creation/upload feature into the UI yet. Don’t know if I will, but the project is OpenSource so feel free to give it a spin! I also share my initial attempt and a pixel version in case you’re interested.
Pretty happy that — even if not feature complete — 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?
While redesigning this blog I wanted to keep the “one color per post” concept I had in the previous version by changing (tweening) the logo’s color accordingly to the article being viewed (or scrolled to). I rapidly realized 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 loading a SWF file on every page).
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 syntax looks a bit cryptic at first. It says it handles SVG, and — guess what — Illustrator can export to SVG. We’re getting closer…
SVG is XML, but Raphaël doesn’t eat XML, it eats a specific syntax meant to be compatible with SVG and VML. Hum… This is when I fire Flash Builder and start writing code. The goal: accept an SVG XML file as input and spit some “Raphaël-compatible script” out.
I then simply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the output, and wire all that to the scroll/color tweening logic. Pretty easy.
Everything worked and looked nice on all browsers and OS’s but I realized the sole idea of having a logo changing colors didn’t work that well. For purely visual reasons. So I dropped it from my theme and rolled back to the black PNG version you can see right now.
The good thing is, the tool works pretty well (at least with Illustrator SVGs) and is OpenSource. Either use it or modify it, and tell me what you think. I did this in a hasty fashion and I probably won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improving it, please do so!
Guess what? AIR app! This one’s for eduMedia.
We create and distribute pedagogical simulations and videos, and our school users can download them to prepare and illustrate their lessons. Until now we offered server-side generated ZIP files with an HTML, some CSS and the SWF, but users (who often are not computer geeks) wanted something simpler and more powerful… So we designed the eBox!
Basically the eBox is an empty media library waiting to be filled. The first time you launch it, it installs itself (and the AIR runtime, if not already there) and then fills itself with the medias you chose. This happens thanks to AIR’s BrowserInvoke logic and removes the “Save As” and “Uncompress” steps.
You can also fill it with “local medias” (of any type) but dragging and dropping files on it, or by browsing and selecting 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 ability to create directories to organize your library, and to reorder medias (via drag and drop). Pretty common, but cool.
Let’s talk tech
Flex 4.1, localized with Lupo (now free and OpenSource!) and designed with Illustrator. Server-side communication is made through AMFPHP. I used some tiny techniques that helped deploy two different versions with only one project (we have a school and an individual version), I might detail that in a next post.
This is my first real-life project with Robotlegs, it helped me learn how to use it and how to write really clean code; with view, mediators and all. I loved it and think I will continue building big projects with RLs, makes you feel pretty.
I’m pretty happy with the final result (not that final, expect updates!), both on visual and technical points of view. Go grab a free media and tell me what you think! We also set up a special page with a nice presentation of how it works, in case you’re lost.
I’ve had this blog for 2 and a half years now, and it never really evolved visually. 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 probably reading this from your RSS reader you should definitively come by and see how it looks. And share some feedback, if you feel like it.
Can’t remember what it looked like before? I’ve archived screens over at Flickr.
A consistent look
Updating the blog’s look is good, but a complete rewrite is better; for consistency, fool! I used to have a different look for every single page: home, projects, blog and so on. No more.
Long story short:
“Before: all different. Now: all good.”
I’ve been into grids since the day I learned about Bluepint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heavily relies on a grid structure. For grid freaks out there, click here to toggle 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 different, but we’ll get into that later.
Got a keyboard? Like shortcuts? Press that key!
I implemented a few keyboard shortcuts, from useful to useless. For example, if you liked the grid toggle, just press G (for grid) or W (for InDesign users) and you’ll get the same effect. OK, that one is pretty useless.
But what about scrolling to the next article by pressing N (or the Down key)? And you guessed it already, P (or Up) will jump to the previous (inspired by AisleOne). You can also time-travel by pressing 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 discovered that technique on Hicksdesign and immediately thought I had to implement that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then overwrite some declarations if the screen size matches some rules… I implemented 3 different layouts so the site should look good on about any device. Just resize your browser window 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.
- I’ve always wanted to use Webfonts 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 “Subtle Prompt”. It happens when you use a keyboard shortcut or when you click the Contact link…
- If you’re on a WebKit browser (Safari or Chrome) you should see custom scrollbars, styled with CSS. Yeah.
- I kind of don’t support Internet Explorer. Yes, this IS an awesome feature!
- Trackbacks are now separated from regular comments.
- A blog post’s author (my) comments appear differently, so you know who’s the boss out there.
- LazyScroller: turns your keyboard keys into a navigation dashboard.
- SubtlePrompt: nice and gentle prompt for your sensitive users.
- Lblr: form input in-context labeler.
- ta-bg: allows a textarea’s background image to scroll with its content.
I’ll try to post docs/demos soon, I know this is probably a little bit rough right now…
Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!
I’m still having a hard time believing what I’m about to write, but hopefully you will.
That was my intro, buddy.
A little bit of context
I listen to music, I try as hard as I can to be eclectic but let me confess 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 Canadian, he’s weird (proof: he’s worn a platypus shirt, once), he’s probably the most subtle 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 Twitter status. Mine started with this one:
I kinda need a logo-thing made of the numbers 65 and 20. Anyone 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 numbers? Plus, lots of fans will answer that”.
Some friendly advice
A few days later as I was chatting with a good friend of mine (and discreetly sent him the link to that tweet) he reacted something like: “You bitch-ass cunt, you could try something and see! Stupid-ass jerk”. “Hum, well yeah, you know. Just sayin’…” I kind of replied.
So I fired Illustrator and tried a few things out. A “65”, a “20”, and 15 minutes later I had something.
Not quite ready for prime-time, but the concept was there. A few iterations later I was kind of happy with this:
So I tweeted back.
Who knows what might happen
And got an answer, a private one. Saying he was liking it… Oh boy.
A few days later I received another private message asking me if I could add a “th” to the logo, letting me know the mysterious 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 dynamite and shot it with a gun a few times” and that was it.
I made Buck 65’s 20th “year in the game” logo, which is up on his new website.
Call me a happy fan. Yup.
Meet Dok, my latest and nicest AIR app to this day!
Always looking for help when writing AS3 for Flash, Flex and AIR? Think Adobe’s reference is rich but browsing it sucks? Well, I did too. So I wrote this little 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 therefore may not be very interesting to others, I decided it should look good. So I tried my best and worked hard on those pixels and styles (colors and textures inspired by that sweet clock)… Jump to the project page for life-size screenshot!
This project is absolutely OpenSource, from top to bottom. AS3 classes, MXML, Illustrator and Photoshop files, PNGs and so on… Help yourself.
WordPress’ Shortcode API is a really cool thing, and since I’m working on a Drupal site these days I’ve been looking for something similar. Unfortunately I couldn’t find anything… There are some implementations out there but the ones I found and tested always come pre-bundled with specific tags and don’t always provide an extensible and stable logic.
So I made mine!
Most of my work simply consisted in copying/pasting the code in WordPress’ shortcodes.php and binding it into a Drupal filter. Easy enough.
Now if you want to use it, you have to:
- Get the module
- Add it to your “modules” directory
- Enable it
- Add it to one of your setup’s filter bundle
- Write your own module where you’d implement one or more Shortcodes (via add_shortcode) and make sure you add “dependencies = shortcodes” in your .info file
You might experience a nasty “Call to undefined function add_shortcode”. If so, you have to change you module implementation’s weight, either directly in your database, or thanks to the cool Utility module. Set it to 10 and you’re set!