This is a 2010-to-2013 archive of toki-woki.net. Here's how it looks now.
I recently wrote a pretty big tutorial about Adobe AIR, its captive runtime mode, and how to generate a Windows installer on top of that. It was written in French and published on flex-tutorial.fr.
I then contacted the fine folks at Adobe Developer Connection and offered to translate it to English. They accepted, reviewed it, and boom: published it.
Wether you’re a French or English reader, I got you covered. Tell me what you think.
Back in 2008 I would spend some of my Saturday afternoons sitting in a Laundromat, waiting for my clothes to smell good. I quickly realized these moments were perfect to bring my laptop with me and code. One of the first AIR apps I wrote was Shrink O’Matic, now you know where the name comes from.
It quickly became successful. It now has been downloaded 168,000+ times, a best-seller of sorts. Except it’s free.
But with success comes feedback, and with feedback comes feature suggestions. Most of them were included through updates, some of them didn’t make the cut. Probably because of me being lazy or because of AIR’s limitations.
Then AIR 2 came out, then I learnt Robotlegs… So I re-wrote it from scratch! Introducing Shrink O’Matic 2, the same quick and simple app but with more features and a nicer theme.
Here’s what’s fresh off the oven:
But! I decided some features had to go. I removed the “name preview” that used to be in the status bar. I also removed the ability to drop images from web pages. If you need these features and want them back, make sure to drop a comment and let me know!
That’s it, go get it!
I’ve been working on an app for a French sport hospital, designed to browse its msk image library. It’s called “MSK view” and it is available for free in iTunes (iPhone and iPad version) and in the Android Market.
Pretty technical stuff in it, not sure everyone will want to install it but hey, there may be some doctors out there!
The hospital is French but the app is both in French and English. Built in Flash Builder with Flex Mobile, Robotlegs and AMFPHP, UI design by Jumo.
Now go show off browsing images of “Scaphotrapezial Synostosis” or “Rectus Femoris intramuscular Haematoma”, whatever it may be!
Boks is one of my most successful apps and this is probably not only because of its usefulness, but also because it is free, too. I released it more than 2 years ago and it is still heavily downloaded.
The CSS community is really active and fast-moving. When I wrote Boks, Blueprint 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 frameworks (not going to list them here) I started receiving lots of feature requests.
At first I thought I could wait and handle them later, but I quickly realized it would need a lot of time, and I definitively didn’t have it in my hands (or at least not for this project). The idea to OpenSource it seemed obvious and I’ve been slow doing so, but here it is. If anyone’s willing to take a look at what I wrote and fix or improve it, do it! Don’t forget that this has been written a while back and I wouldn’t re-write it this way (think Robotlegs); 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 OpenSource, but if you have other suggestions, just tell me.
Hey, fellow english-reading visitor, this post is going to be in French! Hope you don’t mind.
Si comme moi vous ne pouvez pas vous empêcher de dire “flim”, “ouiche” ou encore “un pour l’argent, deux pour le spectacle et trois pour le caillou”, cette application est pour vous.
Après une semaine de vacances avec une personne touchée par cette maladie et sans avoir accès à Internet j’ai vite réalisé qu’il me fallait une application contenant tout le script de ce magnifique flim : La Classe Américaine. Je savais qu’un fou avait déjà fait tout le sale boulot et qu’il ne me restait plus qu’à extraire ces données et créer l’interface pour les parcourir…
Grâce à Google Chrome et ses Outils de développement j’ai pu injecter MooTools dans la page. Petite astuce très simple et très pratique (script à copier/coller dans la console) :
var scriptNode = document.createElement('SCRIPT');
scriptNode.type = 'text/javascript';
scriptNode.src = 'https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js';
var headNode = document.getElementsByTagName('HEAD');
if (headNode[0] != null) headNode[0].appendChild(scriptNode);
Après ça, quelques lignes pour extraire les données, les nettoyer et les stocker directement dans le presse-papier au format JSON :
var data=[];
var images=$$('table.script img');
for (var i=0; i\n$/, '')
});
}
console.log(data.length);
copy(JSON.encode(data));
Un petit coup de Flash Builder, saupoudré de Robotlegs et hop, une appli Android ! Pas de version iPhone pour l’instant, mais si quelqu’on m’offre de quoi me payer un certificat de développeur, je ne dis pas non !
Au revoir, Messieurs-Dames. C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Remember Shrink O’Matic, the “oh, so easy to use” image shrinker for Windows, Mac and Linux? Introducing Shrink O’Mobile, the “oh, so easy to use” image shrinker for Android!
Because cameras on phones take big pictures and because you might want to send smaller/lighter versions, Shrink O’Mobile is here to help out. Just launch the app, choose the way you want your image to be shrunk, pick your image and BOOM! Your fresh, smaller, new version is instantly stored in your camera roll. Easy as pie.
And did I mention the app is free? It is.
It’s been five years (this monday) since Google added the ability to simply chat inside Gmail and to store your chat history, just like your regular e-mail discussions. This poster is a celebration of that, plus a big high-five to my “chat pal” (who hopefully received my package on time), plus a technical and aesthetical look at what we wrote during these years.
Back to the chat history thing… I remember being pretty happy when Google announced it, mainly because I knew I’d use it for later reference, archiving links and thoughts had become much easier.
Here’s a copy of the announcement they made:
Chat with your friends from right inside Gmail. There’s no need to load a separate program or look up new addresses. It’s just one click to chat with the people you already email, as well as anyone on the Google Talk network. And now you can even save and search for chats in your Gmail account.
So it’s been five years. And I’ve chatted quite a lot; mainly with one guy, my buddy Renaud. We chatted around 2,800 different discussions so I thought there might be some interesting data to dig in these archives… So I dug.
But digging thousands of discussions is not an easy task, so I had to take a look on the tech side of things.
Before digging, I had to retrieve all the discussions we had, in an easy-to-analyse format. I used Gmail’s offline feature: applying a new label to our conversations and locally syncing this label. For some unknown reason it would crash on Google Chrome so I had to use Mozilla Firefox. When syncing was done I got a pretty big file in my “Google Gears for Firefox” directory.
Cool thing is, Google Gears stores data as SQLite databases, so I fired up Lita in order to understand what the structure was like… Things looked a bit messy but I eventually found everything that would interest me; and it was in the “MessagesFT_content” table. Here’s the query I ran:
SELECT c1Body FROM MessagesFT_content WHERE c0Subject LIKE '%Chat%'
Almost cool. The query still returned a bunch of HTML code, our names, and other useless crap. So I fired up Flash Builder, imported the SQLite file and wrote a few AS3 lines, in order to grab the results and filter them with regular expressions. Bang: plain text! Oh, this useless AIR app is OpenSource, by the way.
Now that the data was clean and ready to be analyzed I had to find a cheap or free way to do it. I chose Primitive Word Counter, not because it’s perfect but rather because it’s very simple and could handle the large amount of data I was going to feed it (some other apps simply crashed)…
Running it gave me the most used words and phrases, I only picked the most interesting (at least to me) and launched InDesign.
I decided to go for an A1 poster, mostly focused on those words and phrases but with a tech twist to it. I kept it all secret, got it printed, and sent it to my pal… Happy fifth Google-talk-history-enabled anniversary to him; and to all of you out there that use it on a daily basis!
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.
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.
Hey! Another free AIR app! This time that ain’t no side project I made on my free time for some obscure users, but rather a big thingy for a big company. Namely Fotolia.
I did all of the coding part (ActionScript 3, Flex 4) and Steaw is responsible for the UI and all graphics. The app is basically a solution for power-users, providing most of the functionnalities of the website and adding some more (such as direct download and local library). Allowing you to search, browse preview and buy all types of medias, including video and vectors. You can also log into your account and store your favorites in a lightbox or create and fill galleries.
This is my first multi-lingual app: to this day it provides 13 translations including Japanese, Chinese and other funny looking languages!
This is also my first big real-life project with Flex 4 and I have to say it’s way better/easier than Flex 3. Really. What changed my life is the way it handles states and component customization via skins… Oh boy, this is easy!
Yep, using the brand new AIR 2.0.2, buddy. What for? Mainly for global error handling and the almighty openWithDefaultApplication (for both folder and medias). I’ve also heard this version of the runtime is faster and lighter, and we all like that.
As for every project I work on, I try to have some OpenSource bits so that anyone can benefit from the work and time I spent on it. I asked Fotolia if the AS3 API I was going to write could be OpenSource’d and guess what, they accepted. So here it is, based on the as3-rpclib and on the as3 Signals logic: fotolia-as3-api. I implemented most of (if not all) features of their official API so building an AS3 app off of that should be pretty easy, do so!
Yeah, go get it.
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.