<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>TOKI WOKI. Blog &#187; Dev</title>
	<atom:link href="http://toki-woki.net/blog/cat/dev/feed" rel="self" type="application/rss+xml" />
	<link>http://toki-woki.net/blog</link>
	<description>Visual, music, dev...</description>
	<lastBuildDate>Fri, 03 Feb 2012 17:14:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Generating a Windows installer for your AIR captive runtime application</title>
		<link>http://toki-woki.net/blog/p2768-generating-a-windows-installer-for-your-air-captive-runtime-application</link>
		<comments>http://toki-woki.net/blog/p2768-generating-a-windows-installer-for-your-air-captive-runtime-application#comments</comments>
		<pubDate>Fri, 03 Feb 2012 17:14:47 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[article]]></category>
		<category><![CDATA[flex]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2768</guid>
		<description><![CDATA[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, [...]]]></description>
			<content:encoded><![CDATA[<p>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 <a href="http://www.flex-tutorial.fr/2011/11/16/generer-une-application-air-avec-setup-et-independante-du-framework/">flex-tutorial.fr</a>.</p>
<p>I then contacted the fine folks at <a href="http://www.adobe.com/devnet.html">Adobe Developer Connection</a> and offered to translate it to English. They accepted, reviewed it, and boom: <a href="http://www.adobe.com/devnet/air/articles/customize-setup-for-AIR-app-with-captive-runtime.html">published it</a>.</p>
<p>Wether you’re a French or English reader, I got you covered. Tell me what you think.</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2768-generating-a-windows-installer-for-your-air-captive-runtime-application/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Shrink O’Matic 2</title>
		<link>http://toki-woki.net/blog/p2745-shrink-o-matic-2</link>
		<comments>http://toki-woki.net/blog/p2745-shrink-o-matic-2#comments</comments>
		<pubDate>Sat, 21 Jan 2012 11:36:22 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[photo]]></category>
		<category><![CDATA[yellow]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2745</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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 <a href="http://toki-woki.net/p/Shrink-O-Matic/">Shrink O’Matic</a>, now you know where the name comes from.</p>
<p>It quickly became successful. It now has been downloaded 168,000+ times, a best-seller of sorts. Except it’s free.</p>
<p>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.</p>
<p>Then AIR 2 came out, then I learnt Robotlegs… So I re-wrote it from scratch! Introducing <a href="http://toki-woki.net/p/Shrink-O-Matic/">Shrink O’Matic 2</a>, the same quick and simple app but with more features and a nicer theme.</p>
<p><a href="http://toki-woki.net/p/Shrink-O-Matic/"><img title="Shrink O’Matic 2" src="http://toki-woki.net/p/Shrink-O-Matic/screen-2.png" alt="" width="752" height="658" /></a></p>
<p>Here’s what’s fresh off the oven:</p>
<ul>
<li>Drop folders onto the app: every image in it (or in its sub-folders) will be shrinked.</li>
<li>New “Rotation” settings pane: either use a specific angle or let the app read your images’ EXIF data and decide what to do.</li>
<li>Custom name option: choose exactly what the output name will be using your own pattern and injecting the original file’s name (using $name) and/or its position in the queue (using $num).</li>
<li>PNG files now keep their transparency when shrinked.</li>
<li>Watermark: watermark your images, even choose where to place the overlay.</li>
<li>Drop files onto the app while it’s processing, no problemo!</li>
<li>No more dimension limits.</li>
<li>Shiny new theme!</li>
</ul>
<p>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!</p>
<p>That’s it, <a href="http://toki-woki.net/p/Shrink-O-Matic/">go get it</a>!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2745-shrink-o-matic-2/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>W-Architectures</title>
		<link>http://toki-woki.net/blog/p2696-w-architectures</link>
		<comments>http://toki-woki.net/blog/p2696-w-architectures#comments</comments>
		<pubDate>Mon, 05 Dec 2011 19:15:19 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[bordeaux]]></category>
		<category><![CDATA[fr]]></category>
		<category><![CDATA[gray]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2696</guid>
		<description><![CDATA[“W-Architectures is an architecture and urban-planning agency. The firm brings together a highly-qualified team of architects with international experience.” This is how they introduce themselves and I couldn’t have said it better myself. I recently published their brand new website, designed by Christelle Bonnet and developed by me. It’s been a pretty long process (they [...]]]></description>
			<content:encoded><![CDATA[<p>“W-Architectures is an architecture and urban-planning agency. The firm brings together a highly-qualified team of architects with international experience.” This is how they introduce themselves and I couldn’t have said it better myself.</p>
<p>I recently published their <a href="http://www.w-architectures.com/">brand new website</a>, designed by <a href="http://www.christelle-bonnet.com/">Christelle Bonnet</a> and developed by me. It’s been a pretty long process (they are very busy guys) but it’s here and I like it!</p>
<p><a href="http://www.w-architectures.com"><img class="alignnone size-full wp-image-2699" title="W-Architectures" src="http://toki-woki.net/blog/wp-content/uploads/2011/12/w-logo.gif" alt="" width="752" height="396" /></a></p>
<p>I used mostly WordPress and MooTools to develop it. Everything was designed to be light and subtle, I think I can safely say that it is.</p>
<p><a href="http://www.w-architectures.com"><img class="alignnone size-full wp-image-2703" title="W-Architectures" src="http://toki-woki.net/blog/wp-content/uploads/2011/12/w-browser.jpg" alt="" width="752" height="732" /></a></p>
<p><a href="http://www.w-architectures.com"><img class="alignnone size-full wp-image-2701" title="W-Architectures" src="http://toki-woki.net/blog/wp-content/uploads/2011/12/w-photo.jpg" alt="" width="752" height="396" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2696-w-architectures/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MSK view, for iOS and Android</title>
		<link>http://toki-woki.net/blog/p2648-msk-view-for-ios-and-android</link>
		<comments>http://toki-woki.net/blog/p2648-msk-view-for-ios-and-android#comments</comments>
		<pubDate>Wed, 28 Sep 2011 09:35:59 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[robotlegs]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2648</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>I’ve been working on an app for a <a href="http://www.image-echographie.net/">French sport hospital</a>, designed to browse its msk image library. It’s called “MSK view” and it is available for free in <a href="http://itunes.apple.com/us/app/msk-view/id464941704">iTunes</a> (iPhone and iPad version) and in the <a href="https://market.android.com/details?id=air.net.tw.MSKView">Android Market</a>.</p>
<p>Pretty technical stuff in it, not sure everyone will want to install it but hey, there may be some doctors out there!</p>
<p><img class="alignnone size-full wp-image-2649" title="MSK view on iPhone and Nexus S" src="http://toki-woki.net/blog/wp-content/uploads/2011/09/msk-view-iphone-android.png" alt="" width="752" height="915" /></p>
<p>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 <a href="http://www.jumomedia.com/">Jumo</a>.</p>
<p>Now go show off browsing images of “Scaphotrapezial Synostosis” or “Rectus Femoris intramuscular Haematoma”, whatever it may be!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2648-msk-view-for-ios-and-android/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Boks is now OpenSource</title>
		<link>http://toki-woki.net/blog/p2633-boks-is-now-opensource</link>
		<comments>http://toki-woki.net/blog/p2633-boks-is-now-opensource#comments</comments>
		<pubDate>Mon, 25 Jul 2011 08:33:41 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2633</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://toki-woki.net/p/Boks/">Boks</a> 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 <a href="http://toki-woki.net/blog/?p=547">more than 2 years ago</a> and it is still heavily downloaded.</p>
<p>The CSS community is really active and fast-moving. When I wrote Boks, <a href="http://www.blueprintcss.org/">Blueprint CSS</a> was one of the most watched and forked project <a href="https://github.com/joshuaclayton/blueprint-css/">on GitHub</a> which is mostly why I chose to base my UI and logic on it (it still is <a href="https://github.com/popular/watched">at the top</a>, 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.</p>
<p>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 <a href="http://code.google.com/p/air-boks/">here it is</a>. 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?</p>
<p>I’ve licensed Boks’ source under <a href="http://www.gnu.org/licenses/gpl.html">GNU GPL v3</a> in order for it to remain OpenSource, but if you have other suggestions, just tell me.</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2633-boks-is-now-opensource/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Signl – A Custom AS3 Signal File Generator</title>
		<link>http://toki-woki.net/blog/p2601-signl-a-custom-as3-signal-file-generator</link>
		<comments>http://toki-woki.net/blog/p2601-signl-a-custom-as3-signal-file-generator#comments</comments>
		<pubDate>Thu, 30 Jun 2011 11:00:46 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[signals]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2601</guid>
		<description><![CDATA[Remember Evnt, the quick and simple UI to generate AS3 Event subclasses? Well, it’s still here but I don’t use it much anymore, since I’m a big fan of Robert Penner’s Signals! So I wrote Signl. It’s basically the same thing, but for Signals. I know writing Signal classes is an easy task; but, why [...]]]></description>
			<content:encoded><![CDATA[<p>Remember <a title="Evnt — Custom AS3 Event File Generator" href="http://toki-woki.net/blog/p2029-evnt-custom-as3-event-file-generator">Evnt</a>, the quick and simple UI to generate AS3 Event subclasses?</p>
<p>Well, it’s still here but I don’t use it much anymore, since I’m a big fan of <a href="http://flashblog.robertpenner.com/">Robert Penner</a>’s <a href="https://github.com/robertpenner/as3-signals">Signals</a>! So I wrote <a href="http://toki-woki.net/p/Signl/">Signl</a>. It’s basically the same thing, but for Signals.</p>
<p><a href="http://toki-woki.net/p/Signl/"><img class="alignnone size-full wp-image-2624" title="Signl" src="http://toki-woki.net/blog/wp-content/uploads/2011/06/Signl.png" alt="" width="752" height="571" /></a></p>
<p>I know writing Signal classes is an easy task; but, why not make it easier? I hope this helps! Oh, and by the way, it’s <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/Signl/src/net/tw/app/signl/Signl.mxml">OpenSource</a>, just like Evnt was.</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2601-signl-a-custom-as3-signal-file-generator/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>La Classe Américaine – Android</title>
		<link>http://toki-woki.net/blog/p2599-la-classe-americaine-android</link>
		<comments>http://toki-woki.net/blog/p2599-la-classe-americaine-android#comments</comments>
		<pubDate>Wed, 29 Jun 2011 20:50:37 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[fr]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[robotlegs]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2599</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>Hey, fellow english-reading visitor, this post is going to be in French! Hope you don’t mind.</p>
<p>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”, <a href="https://market.android.com/details?id=air.net.tw.LaClasseAmericaine">cette application</a> est pour vous.</p>
<p>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 : <a href="http://www.imdb.com/title/tt0321715/">La Classe Américaine</a>. Je savais qu’un fou avait déjà fait <a href="http://cyclim.se/fullscript.html">tout le sale boulot</a> et qu’il ne me restait plus qu’à extraire ces données et créer l’interface pour les parcourir…</p>
<p><a href="https://market.android.com/details?id=air.net.tw.LaClasseAmericaine"><img class="alignnone size-full wp-image-2603" title="La Classe Américaine" src="http://toki-woki.net/blog/wp-content/uploads/2011/06/la-classe-americaine.jpg" alt="" width="752" height="501" /></a></p>
<p>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) :</p>
<pre class="javascript"><span style="color: #003366; font-weight: bold;">var</span> scriptNode = document.<span style="color: #006600;">createElement</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'SCRIPT'</span><span style="color: #66cc66;">&#41;</span>;
scriptNode.<span style="color: #006600;">type</span> = <span style="color: #3366CC;">'text/javascript'</span>;
scriptNode.<span style="color: #006600;">src</span> = <span style="color: #3366CC;">'https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'</span>;
<span style="color: #003366; font-weight: bold;">var</span> headNode = document.<span style="color: #006600;">getElementsByTagName</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'HEAD'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>headNode<span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span> != <span style="color: #003366; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> headNode<span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">&#40;</span>scriptNode<span style="color: #66cc66;">&#41;</span>;</pre>
<p>Après ça, quelques lignes pour extraire les données, les nettoyer et les stocker directement dans le presse-papier au format JSON :</p>
<pre class="javascript"><span style="color: #003366; font-weight: bold;">var</span> data=<span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>;
<span style="color: #003366; font-weight: bold;">var</span> images=$$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'table.script img'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i=<span style="color: #CC0000;">0</span>; i&lt;images.<span style="color: #006600;">length</span>; i++<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> tr=images<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #003366; font-weight: bold;">var</span> o=<span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span>;
    <span style="color: #003366; font-weight: bold;">var</span> scriptTag=tr.<span style="color: #006600;">getElements</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'td'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #66cc66;">&#93;</span>;
    scriptTag.<span style="color: #006600;">getElements</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">dispose</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
    data.<span style="color: #006600;">push</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
        ts:tr.<span style="color: #006600;">getElement</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'small'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">get</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #66cc66;">&#41;</span>,
        script:scriptTag.<span style="color: #006600;">get</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'html'</span><span style="color: #66cc66;">&#41;</span>
			.<span style="color: #006600;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'’'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">join</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">&quot;'&quot;</span><span style="color: #66cc66;">&#41;</span>
			.<span style="color: #006600;">replace</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066FF;">/\n/</span>, <span style="color: #3366CC;">''</span><span style="color: #66cc66;">&#41;</span>
			.<span style="color: #006600;">replace</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066FF;">/&lt;br&gt;\n$/</span>, <span style="color: #3366CC;">''</span><span style="color: #66cc66;">&#41;</span>
    <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
console.<span style="color: #006600;">log</span><span style="color: #66cc66;">&#40;</span>data.<span style="color: #006600;">length</span><span style="color: #66cc66;">&#41;</span>;
copy<span style="color: #66cc66;">&#40;</span>JSON.<span style="color: #006600;">encode</span><span style="color: #66cc66;">&#40;</span>data<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</pre>
<p>Un petit coup de Flash Builder, saupoudré de Robotlegs et hop, <a href="https://market.android.com/details?id=air.net.tw.LaClasseAmericaine">une appli Android</a> ! 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 !</p>
<p><em>Au revoir, Messieurs-Dames. C’est ça, la puissance intellectuelle. Bac + 2, les enfants.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2599-la-classe-americaine-android/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Unipasta, a Unicode browser</title>
		<link>http://toki-woki.net/blog/p2560-unipasta-a-unicode-browser</link>
		<comments>http://toki-woki.net/blog/p2560-unipasta-a-unicode-browser#comments</comments>
		<pubDate>Tue, 19 Apr 2011 13:46:09 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[typo]]></category>
		<category><![CDATA[white]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2560</guid>
		<description><![CDATA[When writing in French I’m always looking for characters that can’t be easily typed with a keyboard (like œ, for example). I used to go to copypastecharacter.com for its simplicity: just go to that page, click on a character and boom, it’s in your clipboard, ready to be pasted! But I wanted something more powerful/thorough that [...]]]></description>
			<content:encoded><![CDATA[<p>When writing in French I’m always looking for characters that can’t be easily typed with a keyboard (like œ, for example). I used to go to <a href="http://copypastecharacter.com/">copypastecharacter.com</a> for its simplicity: just go to that page, click on a character and boom, it’s in your clipboard, ready to be pasted!</p>
<p>But I wanted something more powerful/thorough that would remember my frequently used characters. So I wrote <a href="http://toki-woki.net/p/Unipasta/">Unipasta</a>!</p>
<p><a href="http://toki-woki.net/p/Unipasta/"><img class="alignnone size-full wp-image-2561" title="Unipasta" src="http://toki-woki.net/blog/wp-content/uploads/2011/04/Unipasta.png" alt="Unipasta" /></a></p>
<p>Here’s what you should know about it:</p>
<ol>
<li>Every input under the selected character (char, code and hex) can be edited and will update each other. Easily jump to any character!</li>
<li>The font metrics (baseline, x-height and cap-height) are auto-calculated and will help you know where the char lives;</li>
<li>Click on the “More Info” link to jump to <a rel="url" href="http://fileformat.info/">fileformat.info</a> and access a lot of details about the selected character;</li>
<li>Every character your click will be automatically copied to your clipboard, handy!</li>
<li>Use the “Recent characters” list to quickly access your favorite ones (latest used will always be listed first).</li>
</ol>
<p>If you think some missing <a href="http://www.fileformat.info/info/unicode/block/">Unicode blocks</a> are important to you or if you’d like to add a new character listing, just ask for it!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2560-unipasta-a-unicode-browser/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Shrink O’Mobile</title>
		<link>http://toki-woki.net/blog/p2547-shrink-o-mobile</link>
		<comments>http://toki-woki.net/blog/p2547-shrink-o-mobile#comments</comments>
		<pubDate>Sun, 10 Apr 2011 10:35:13 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[yellow]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2547</guid>
		<description><![CDATA[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, [...]]]></description>
			<content:encoded><![CDATA[<p><a href="https://market.android.com/details?id=air.net.tw.SOMobile"><img class="alignnone size-full wp-image-2548" title="Shrink O’Mobile" src="http://toki-woki.net/blog/wp-content/uploads/2011/04/somobile-blog-post.png" alt="" width="560" height="298" /></a></p>
<p>Remember <a href="http://toki-woki.net/p/Shrink-O-Matic/">Shrink O’Matic</a>, the “oh, so easy to use” image shrinker for Windows, Mac and Linux? Introducing <a href="https://market.android.com/details?id=air.net.tw.SOMobile">Shrink O’Mobile</a>, the “oh, so easy to use” image shrinker for Android!</p>
<p>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.</p>
<p><img class="alignnone size-full wp-image-2554" title="splash-main" src="http://toki-woki.net/blog/wp-content/uploads/2011/04/splash-main.png" alt="" width="752" height="620" /></p>
<p>And did I mention <a href="https://market.android.com/details?id=air.net.tw.SOMobile">the app</a> is free? It is.</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2547-shrink-o-mobile/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>le bureau baroque</title>
		<link>http://toki-woki.net/blog/p2471-le-bureau-baroque</link>
		<comments>http://toki-woki.net/blog/p2471-le-bureau-baroque#comments</comments>
		<pubDate>Fri, 18 Feb 2011 13:16:21 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[art]]></category>
		<category><![CDATA[bordeaux]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[link]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2471</guid>
		<description><![CDATA[As a freelancer I mostly work on AIR apps, but when friends asked me to develop their new website I happily jumped aboard! Le bureau baroque is an architecture agency in Bordeaux; playing with art, design and — of course — architecture. They’re the ones that set up the Pecha Kucha event in Bordeaux and [...]]]></description>
			<content:encoded><![CDATA[<p>As a freelancer I mostly work on AIR apps, but when friends asked me to develop their new website I happily jumped aboard!</p>
<p><img class="alignnone size-full wp-image-2492" title="le bureau baroque" src="http://toki-woki.net/blog/wp-content/uploads/2011/02/bb-site.jpg" alt="" width="560" height="314" /></p>
<p>Le <a href="http://bureaubaroque.fr/">bureau baroque</a> is an architecture agency in Bordeaux; playing with art, design and — of course — architecture. They’re the ones that set up the <a href="http://www.pecha-kucha.org/night/bordeaux/">Pecha Kucha event</a> in Bordeaux and who invited me to <a href="http://toki-woki.net/blog/p1794-tw-pk">show off a bit</a>! Of course they work on lots of other great projects so they needed a site to let the world know what’s up.</p>
<p>They wanted a highly visual site that would be easy to update, we considered a few options but quickly came to the conclusion that <a href="http://www.indexhibit.org/">Indexhibit</a> was exactly what we were looking for. But one thing that was really bugging us is how most (if not all) Indexhibit sites look the same. Indeed they’re a great way to show big images and the navigation is damn simple, but hey, why not keep these great qualities but in a more original layout?</p>
<p>Since we’re really keen on horizontal layouts we went for this. But something bothers me with this: you get a horizontal scrollbar at the bottom of the page; which is hard to see, because it sits at the bottom of your screen and we — dumb humans — are not really used to it. So I thought: why not have a horizontal layout scrolled by a vertical scrollbar? That seemed a bit tricky at first, for two reasons:</p>
<ol>
<li>Is that technically feasible?</li>
<li>Isn’t that too weird, for the end-user?</li>
</ol>
<p>Both questions could not be answered without trying, so I tried. And it looked cool!</p>
<p><img class="alignnone size-full wp-image-2494" title="le bureau baroque" src="http://toki-woki.net/blog/wp-content/uploads/2011/02/bb-browser.jpg" alt="" width="752" height="417" /></p>
<p>When the prototype was ready I started taking a look at Indexhibit’s guts; and although it looked a bit ugly to me, I realized pimping it was no big deal… A few e-mails and burger-meetings after we were happy with the newly created theme. <a href="http://www.christelle-bonnet.com/">Christelle Bonnet</a> helped out with her great typographic/balance eye and we were ready to go!</p>
<p>Go <a href="http://bureaubaroque.fr/">see the site live</a>, enjoy those nice projects, play with that side-scroll concept and tell me what you think!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2471-le-bureau-baroque/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Five years of Google Talk history</title>
		<link>http://toki-woki.net/blog/p2418-five-years-of-google-talk-history</link>
		<comments>http://toki-woki.net/blog/p2418-five-years-of-google-talk-history#comments</comments>
		<pubDate>Mon, 07 Feb 2011 11:00:17 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[art]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[InDesign]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[photo]]></category>
		<category><![CDATA[real-life]]></category>
		<category><![CDATA[typo]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2418</guid>
		<description><![CDATA[My “anniversary” intro 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 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2467" src="http://toki-woki.net/blog/wp-content/uploads/2011/02/IMG_4294.jpg" alt="" width="560" height="761" /></p>
<h3>My “anniversary” intro</h3>
<p>It’s been five years (this monday) since Google added the ability to simply chat inside Gmail and to <a href="http://mail.google.com/support/bin/answer.py?hl=en&amp;ctx=mail&amp;answer=29291">store your chat history</a>, 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.</p>
<h3>Let’s make history</h3>
<p>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.</p>
<p><img title="Gmail chat settings" src="http://toki-woki.net/blog/wp-content/uploads/2011/01/gmail-chat-settings.jpg" alt="" width="560" height="106" /></p>
<p>Here’s a copy of the announcement they made:</p>
<blockquote><p>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.</p></blockquote>
<p>So it’s been five years. And I’ve chatted quite a lot; mainly with one guy, my buddy <a href="https://picasaweb.google.com/renaud.mail/Paris">Renaud</a>. We chatted around 2,800 different discussions so I thought there might be some interesting data to dig in these archives… So I dug.</p>
<p>But digging thousands of discussions is not an easy task, so I had to take a look on the tech side of things.</p>
<h3>Join the tech side of the force</h3>
<p>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 “<a href="http://www.google.com/support/gears/bin/answer.py?hl=en&amp;answer=79850">Google Gears for Firefox</a>” directory.</p>
<p>Cool thing is, Google Gears stores data as SQLite databases, so I fired up <a href="http://www.dehats.com/drupal/?q=node/59">Lita</a> 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:</p>
<pre class="sql"><span style="color: #993333; font-weight: bold;">SELECT</span> c1Body <span style="color: #993333; font-weight: bold;">FROM</span> MessagesFT_content <span style="color: #993333; font-weight: bold;">WHERE</span> c0Subject <span style="color: #993333; font-weight: bold;">LIKE</span> <span style="color: #ff0000;">'%Chat%'</span></pre>
<p>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 <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/TalkPackager/src/TalkPackager.mxml">OpenSource</a>, by the way.</p>
<p>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 <a href="http://www.primitivezone.com/primitive-word-counter.html">Primitive Word Counter</a>, 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)…</p>
<p>Running it gave me the most used words and phrases, I only picked the most interesting (at least to me) and launched InDesign.</p>
<h3>A celebration poster</h3>
<p>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!</p>
<p><img class="alignnone size-full wp-image-2458" src="http://toki-woki.net/blog/wp-content/uploads/2011/02/IMG_4260.jpg" alt="" width="560" height="373" /></p>
<p><img class="alignnone size-full wp-image-2461" src="http://toki-woki.net/blog/wp-content/uploads/2011/02/IMG_4265.jpg" alt="" width="560" height="373" /></p>
<p><img class="alignnone size-full wp-image-2460" src="http://toki-woki.net/blog/wp-content/uploads/2011/02/IMG_4264.jpg" alt="" width="560" height="373" /></p>
<p><img class="alignnone size-full wp-image-2459" src="http://toki-woki.net/blog/wp-content/uploads/2011/02/IMG_4262.jpg" alt="" width="560" height="373" /></p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2418-five-years-of-google-talk-history/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Okr – Story of a failure</title>
		<link>http://toki-woki.net/blog/p2146-okr-story-of-a-failure</link>
		<comments>http://toki-woki.net/blog/p2146-okr-story-of-a-failure#comments</comments>
		<pubDate>Sun, 28 Nov 2010 15:34:50 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[art]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[bordeaux]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[illustrator]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[opensource]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2146</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>Some projects become real, others never see the light of day. This one is more of an abortion.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>At that time I was discovering  <a href="http://www.graffitimarkuplanguage.com/">GML</a> (Graffiti Markup Language) and <a href="http://evan-roth.com/">Evan Roth</a>’s work. Bordeaux hosted <a href="http://www.lesgrandestraversees.com/">Les Grandes Traversées</a> and all of this really inspired me. So I thought of a mash-up between GML’s <a href="http://www.000000book.com/">#000000book</a> (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.</p>
<p><img class="alignnone size-full wp-image-2347" title="Okr" src="http://toki-woki.net/blog/wp-content/uploads/2010/11/okr.gif" alt="" width="752" height="752" /></p>
<p>The steps are:</p>
<ol>
<li>Creating and sending a graffiti;</li>
<li>Receiving data;</li>
<li>Converting it to an image;</li>
<li>Projecting it on the building’s front;</li>
<li>Photo-shooting of the front;</li>
<li>Sending to Twitter;</li>
<li>Online consultation.</li>
</ol>
<p>After a few e-mails with <a href="http://twitter.com/jamiew">Jamie Wilkinson</a> (heads up!) I started working on the <a href="http://code.google.com/p/as3-bits/source/browse/trunk/bits/src/net/tw/gml">core classes</a> 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 <a href="http://minimalcomps.com/">Minimal Comps</a> didn’t work the way I expected).</p>
<p><iframe width='752' height='506' frameborder='0' src='http://toki-woki.net/p/Okr/'></iframe><noframes>iframe: <a href="http://toki-woki.net/p/Okr/">http://toki-woki.net/p/Okr/</a></noframes></p>
<p>Note: you’ll also find the app on its <a href="http://toki-woki.net/p/Okr/">dedicated page</a>. Try searching for “dasp” or “hello world” for example and play with the settings (the 3 top sliders).</p>
<p>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 <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/FlexOkr">OpenSource</a> so feel free to give it a spin! I also share my <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/Okr">initial attempt</a> and a <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/PixelOkr">pixel version</a> in case you’re interested.</p>
<p>Pretty happy that — even if not feature complete — Okr made it to the <a href="http://www.graffitimarkuplanguage.com/as3-flash-player/">GML project gallery</a>, yay!</p>
<p>And just because a project will never see the light of day doesn’t mean it doesn’t need a proper logo, right?</p>
<p><img class="alignnone size-full wp-image-2349" style="border: 0px initial initial;" title="Okr logo" src="http://toki-woki.net/blog/wp-content/uploads/2010/11/okr-logo.gif" alt="" width="180" height="180" /></p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2146-okr-story-of-a-failure/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>AIR Application Updater: switch to the 2.5 namespace</title>
		<link>http://toki-woki.net/blog/p2313-air-application-updater-switch-to-the-2-5-namespace</link>
		<comments>http://toki-woki.net/blog/p2313-air-application-updater-switch-to-the-2-5-namespace#comments</comments>
		<pubDate>Wed, 17 Nov 2010 11:28:58 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2313</guid>
		<description><![CDATA[I just wasted a few hours on understanding how to update an AIR app from the 2.0 namespace (or earlier) to the brand new 2.5 one. As you may know, two new tags have been introduced (“versionNumber” and “versionLabel”) to replace the old “version” one. To avoid breaking things you have to create an intermediary app [...]]]></description>
			<content:encoded><![CDATA[<p>I just wasted a few hours on understanding how to update an AIR app from the 2.0 namespace (or earlier) to the brand new 2.5 one. As you may know, two new tags have been introduced (“versionNumber” and “versionLabel”) to replace the old “version” one.</p>
<p>To avoid breaking things you have to create an intermediary app version that will smoothly switch from 2.0 to 2.5, here’s what you can read on the <a href="http://kb2.adobe.com/cps/868/cpsid_86822.html">release notes</a> page:</p>
<blockquote><p>In order to be able to update from version 1 to version 2, an intermediary update step must be added as follows: application version 1, packaged with AIR 2 and using the 2.0 namespace <em>gets updated to</em>: application version 1.5, packaged with AIR 2.5 and using the 2.0 namespace. This version of the application must include the version of the Application Updater SWC/SWF included with the AIR 2.5 SDK. <em>This gets updated to:</em> application version 2.0, packaged with AIR 2.5 and using the 2.5 namespace.</p></blockquote>
<p>Where “application 1.5″ is the intermediary step.</p>
<p>All of this looks quite simple but really it isn’t; or at least it wasn’t for me. To be really explicit here are my 3 application descriptors and the update descriptor (version numbers changed to match Adobe’s example).</p>
<p>Application descriptor – Version 1 (packaged with AIR 2.0):</p>
<pre class="xml"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span> <span style="color: #000066;">standalone</span>=<span style="color: #ff0000;">&quot;no&quot;</span> <span style="font-weight: bold; color: black;">?&gt;</span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;application</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/air/application/2.0&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>
	(...)<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;version<span style="font-weight: bold; color: black;">&gt;</span></span></span>1<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/version<span style="font-weight: bold; color: black;">&gt;</span></span></span>(...)
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/application<span style="font-weight: bold; color: black;">&gt;</span></span></span></pre>
<p>Application descriptor – Version 1.5 (packaged with AIR 2.5):</p>
<pre class="xml"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span> <span style="color: #000066;">standalone</span>=<span style="color: #ff0000;">&quot;no&quot;</span> <span style="font-weight: bold; color: black;">?&gt;</span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;application</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/air/application/2.0&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>
	(...)<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;version<span style="font-weight: bold; color: black;">&gt;</span></span></span>1.5<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/version<span style="font-weight: bold; color: black;">&gt;</span></span></span>(...)
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/application<span style="font-weight: bold; color: black;">&gt;</span></span></span></pre>
<p>Application descriptor – Version 2 (packaged with AIR 2.5):</p>
<pre class="xml"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span> <span style="color: #000066;">standalone</span>=<span style="color: #ff0000;">&quot;no&quot;</span> <span style="font-weight: bold; color: black;">?&gt;</span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;update</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/air/framework/update/description/2.5&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>
	(...)<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;versionNumber<span style="font-weight: bold; color: black;">&gt;</span></span></span>2<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/versionNumber<span style="font-weight: bold; color: black;">&gt;</span></span></span>(...)
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/update<span style="font-weight: bold; color: black;">&gt;</span></span></span></pre>
<p>Update descriptor (PHP script receiving the caller’s current version as “currentVersion” GET variable):</p>
<pre class="php"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<a href="http://www.php.net/header"><span style="color: #000066;">header</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Content-Type: text/xml; charset=utf-8&quot;</span><span style="color: #66cc66;">&#41;</span>;
<a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #ff0000;">'&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;'</span>;
<span style="color: #0000ff;">$currentVersion</span>=<a href="http://www.php.net/array_key_exists"><span style="color: #000066;">array_key_exists</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'currentVersion'</span>, <span style="color: #0000ff;">$_GET</span><span style="color: #66cc66;">&#41;</span> ? <span style="color: #66cc66;">&#40;</span>float<span style="color: #66cc66;">&#41;</span><span style="color: #0000ff;">$_GET</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'currentVersion'</span><span style="color: #66cc66;">&#93;</span> : <span style="color: #cc66cc;">1</span>;
<span style="color: #0000ff;">$isNewNamespace</span>=<span style="color: #0000ff;">$currentVersion</span>&gt;=<span style="color: #cc66cc;">2</span>;
<span style="color: #0000ff;">$ns</span>=<span style="color: #ff0000;">'http://ns.adobe.com/air/framework/update/description/'</span>.<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$isNewNamespace</span> ? <span style="color: #ff0000;">'2.5'</span> : <span style="color: #ff0000;">'1.0'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #0000ff;">$version</span>=<span style="color: #0000ff;">$currentVersion</span>&gt;=<span style="color: #cc66cc;">1.5</span> ? <span style="color: #cc66cc;">2</span> : <span style="color: #cc66cc;">1.5</span>;
<span style="color: #0000ff;">$versionTag</span>=<span style="color: #0000ff;">$isNewNamespace</span> ? <span style="color: #ff0000;">'versionNumber'</span> : <span style="color: #ff0000;">'version'</span>;
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;update xmlns=<span style="color: #ff0000;">&quot;&lt;?php echo $ns ?&gt;&quot;</span>&gt;
	&lt;&lt;?php <a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #0000ff;">$versionTag</span> ?&gt;&gt;&lt;?php <a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #0000ff;">$version</span> ?&gt;&lt;/<span style="color: #000000; font-weight: bold;">&lt;?php</span> <a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #0000ff;">$versionTag</span> ?&gt;&gt;
	&lt;url&gt;http:<span style="color: #808080; font-style: italic;">//www.your-site.com/update/your-app-&lt;?php echo $version ?&gt;.air&lt;/url&gt;</span>
&lt;/update&gt;</pre>
<p>Not that simple, right? And this is not only annoying to the developer, but also to the end user. He will be notified of an update from version 1 to 1.5 and when he’s done he’ll get prompted about the new-new version (2): bang, another update process.</p>
<p>If you’re curious of how I send the app’s version to the update descriptor, here it is:</p>
<pre class="actionscript">_appUpdater.<span style="color: #006600;">updateURL</span>=<span style="color: #ff0000;">'http://www.your-site.com/update/version.php?currentVersion='</span>+App.<span style="color: #0066CC;">getVersion</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</pre>
<p>The <a href="http://code.google.com/p/as3-bits/source/browse/trunk/bits/src/net/tw/util/air/App.as">App class</a> is available in my <a href="http://code.google.com/p/as3-bits/">as3bits</a> repository.</p>
<p>Some helpful links on the subject:</p>
<ul>
<li><a href="http://kb2.adobe.com/cps/873/cpsid_87300.html">Update AIR 2 or earlier to AIR 2.5 Application Updater framework</a></li>
<li><a href="http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff2.html">Updating AIR applications</a></li>
<li><a href="http://kb2.adobe.com/cps/868/cpsid_86822.html">Release notes for Adobe AIR developers 2.5</a></li>
</ul>
<p>I hope this helps!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2313-air-application-updater-switch-to-the-2-5-namespace/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Golden Ratio Tool</title>
		<link>http://toki-woki.net/blog/p2298-a-golden-ratio-tool</link>
		<comments>http://toki-woki.net/blog/p2298-a-golden-ratio-tool#comments</comments>
		<pubDate>Thu, 11 Nov 2010 11:41:28 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[typo]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2298</guid>
		<description><![CDATA[I wrote a quick and simple golden ratio tool (dedicated page). Basically it helps you find “golden ratio neighbors” for a given number: every number in the list divided/multiplied by its neighbor = φ. Pretty straightforward but could come in handy. I’m aware it could be improved; if you have suggestions…]]></description>
			<content:encoded><![CDATA[<p><iframe width='560' height='440' frameborder='0' src='http://toki-woki.net/p/golden-ratio/'></iframe><noframes>iframe: <a href="http://toki-woki.net/p/golden-ratio/">http://toki-woki.net/p/golden-ratio/</a></noframes></p>
<p>I wrote a <a href="http://toki-woki.net/p/golden-ratio/">quick and simple golden ratio tool</a> (dedicated page). Basically it helps you find “golden ratio neighbors” for a given number: every number in the list divided/multiplied by its neighbor = φ.</p>
<p>Pretty straightforward but could come in handy. I’m aware it could be improved; if you have suggestions…</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2298-a-golden-ratio-tool/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hey! – A Lego Table</title>
		<link>http://toki-woki.net/blog/p2242-hey-lego-table</link>
		<comments>http://toki-woki.net/blog/p2242-hey-lego-table#comments</comments>
		<pubDate>Mon, 01 Nov 2010 00:09:09 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[real-life]]></category>
		<category><![CDATA[typo]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2242</guid>
		<description><![CDATA[When I moved in I bought an IKEA Ramvik table and while travelling this summer I had an idea (don’t ask why): decorate its top with Lego bricks used as pixels. 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 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2246" title="Hey!" src="http://toki-woki.net/blog/wp-content/uploads/2010/10/IMG_3597-w560.jpg" alt="" width="560" height="840" /></p>
<p>When I moved in I bought an <a href="http://www.ikea.com/us/en/catalog/products/10103719">IKEA Ramvik</a> table and while travelling this summer I had an idea (don’t ask why): decorate its top with Lego bricks used as pixels. 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!</p>
<h3>Lego bricks</h3>
<p>First things first. What are the Lego brick sizes and colors available? Oddly enough this question is not that easily answered. Probably because Lego’s site is crappy, or because nobody really cares… I eventually found <a href="http://lego.wikia.com">Brickipedia</a> which happens to be a much richer resource than the official ones. Everything I was looking for was there: the Lego “unit” is <a href="http://lego.wikia.com/wiki/Brick">8 millimeters</a> and the color palette is <a href="http://lego.wikia.com/wiki/Color_Palette">pretty simple</a>.</p>
<h3>Table specs</h3>
<p>Knowing my table size I had various options, depending on the “pixel size” I’d choose. Of course the number of bricks (and the price) would also vary. So I created a dynamic spreadsheet on Google Docs that’d do the calculations for me… Here it is, with all the options possible (French, sorry).</p>
<p><iframe width='560' height='374' frameborder='0' src='https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc&amp;hl=en&amp;output=html&amp;widget=true'></iframe><noframes>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&amp;hl=en&amp;output=html&amp;widget=true</a></noframes></p>
<p>I chose the 4x4 option, quite cheap and still offering a cool number of pixels.</p>
<h3>Design</h3>
<p>36x16 pixels of freedom, that’s it. I tried lots of different designs, from lo-fi photos to pixel-art drawings. I decided to go for a Heavy Oblique Futura.</p>
<p>Actual size:</p>
<p><img class="size-full wp-image-2251 aligncenter" title="Hey!" src="http://toki-woki.net/blog/wp-content/uploads/2010/10/hey.gif" alt="" width="36" height="16" /></p>
<p>Looking good.</p>
<h3>The Lego palette</h3>
<p>I set my type to white, on a black background. The anti-aliasing process creates gray-scale pixels to smooth the curves, which is great, but Lego bricks aren’t available in all colors! To have a realistic preview of what it would look like I had to create a Photoshop Color Table matching Lego’s gray-scales (if you’re interested, just ping me [UPDATE: <a href="http://toki-woki.net/p/PaletteCounter/ACTs.zip">here they are</a>]). Here’s a comparison between Photoshop’s default gray-scales (left) and Lego’s palette (right):</p>
<p><img title="Gray comparison" src="http://toki-woki.net/blog/wp-content/uploads/2010/10/hey-b-comp.gif" alt="" width="560" height="124" /><br />
You may notice that Lego’s black is a little bit light and the grays are yellowish.</p>
<h3>Time to order bricks!</h3>
<p>Already? Nope, not that fast. Before ordering I had to know exactly what to order, that means counting the pixels. Well, I’m not this kind of guy. I’m a developer; I hate repetitive chores, you know.</p>
<p>So I fired up Flash Builder and came up with <a href="http://toki-woki.net/p/PaletteCounter/">PaletteCounter</a> a simple, <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/PaletteCounter/src/PaletteCounter.mxml">OpenSource</a>, app to count pixels of each color. I also added some kind of “assembly instructions generator” to help us build it. Handy.</p>
<p><img class="aligncenter size-full wp-image-2262" title="PaletteCounter" src="http://toki-woki.net/blog/wp-content/uploads/2010/10/PaletteCounter.png" alt="" width="560" height="370" /></p>
<h3>Time to order!</h3>
<p>Really? Yup. I placed an order on lego.com’s <a href="http://shop.lego.com/pab/">Pick A Brick</a> and received it a couple of weeks later. Yay!</p>
<h3>Let’s do this</h3>
<p>I’m not going to describe the process (that happened this saturday), just have a look at this time-lapse vid. 1020 pics shot in about an hour, yummy. Thanks to <a href="http://celine-roche.com/">Céline</a> and Julie for helping out!</p>
<p><object width="100%" height="374">
	<param name="allowfullscreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=16376065&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=ffffff&fullscreen=1" />
	<embed src="http://www.vimeo.com/moogaloop.swf?clip_id=16376065&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=ffffff&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="374"></embed>
</object></p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2242-hey-lego-table/feed</wfw:commentRss>
		<slash:comments>38</slash:comments>
		</item>
		<item>
		<title>SVG to RaphaelJS</title>
		<link>http://toki-woki.net/blog/p2148-svg-to-raphaeljs</link>
		<comments>http://toki-woki.net/blog/p2148-svg-to-raphaeljs#comments</comments>
		<pubDate>Fri, 29 Oct 2010 10:56:57 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[illustrator]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[opensource]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2148</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>While redesigning this blog I wanted to keep the “<a href="http://www.flickr.com/photos/quentin-t/5077332811/">one color per post</a>” 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).</p>
<p>I remembered hearing — <a href="http://twitter.com/#!/tokiwoki/status/15779949398">a few months earlier</a> — about <a href="http://raphaeljs.com/">Raphaël</a> (a JS lib to render vector graphics). At that time I found the concept really interesting but couldn’t see where to use it.</p>
<p>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 href="http://raphaeljs.com/icons/">a bit cryptic</a> at first. It says it handles SVG, and — guess what — Illustrator can export to SVG. We’re getting closer…</p>
<p>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.</p>
<p><a href="http://toki-woki.net/p/SVG2RaphaelJS/">Boom</a> (plus a <a href="http://toki-woki.net/p/SVG2RaphaelJS/demo/">little demo</a> of an output).</p>
<p>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.</p>
<p>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.</p>
<p>The good thing is, <a href="http://toki-woki.net/p/SVG2RaphaelJS/">the tool</a> works pretty well (at least with Illustrator SVGs) and is <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/SVG2RaphaelJS/src/SVG2RaphaelJS.mxml">OpenSource</a>. 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!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2148-svg-to-raphaeljs/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>eduMedia’s eBox</title>
		<link>http://toki-woki.net/blog/p1697-edumedia-ebox</link>
		<comments>http://toki-woki.net/blog/p1697-edumedia-ebox#comments</comments>
		<pubDate>Mon, 25 Oct 2010 16:29:33 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[illustrator]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[robotlegs]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=1697</guid>
		<description><![CDATA[Guess what? AIR app! This one’s for eduMedia. An intro 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 [...]]]></description>
			<content:encoded><![CDATA[<p>Guess what? AIR app! This one’s for <a href="http://www.edumedia-sciences.com">eduMedia</a>.</p>
<h3>An intro</h3>
<p>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!</p>
<h3>The eBox</h3>
<p>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.</p>
<p><img class="alignnone size-full wp-image-2222" title="eBox" src="http://toki-woki.net/blog/wp-content/uploads/2010/10/eBox.png" alt="" width="752" height="505" /></p>
<p>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.</p>
<p>You also have the ability to create directories to organize your library, and to reorder medias (via drag and drop). Pretty common, but cool.</p>
<h3>Let’s talk tech</h3>
<p>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.</p>
<p>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.</p>
<h3>So?</h3>
<p>I’m pretty happy with the final result (not that final, expect updates!), both on visual and technical points of view. Go <a href="http://www.edumedia-sciences.com/en/a98-tsunami">grab a free media</a> and tell me what you think! We also set up a <a href="http://www.edumedia-sciences.com/en/c16-our-products#/eBox">special page</a> with a nice presentation of how it works, in case you’re lost.</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p1697-edumedia-ebox/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Redesign</title>
		<link>http://toki-woki.net/blog/p2142-redesign</link>
		<comments>http://toki-woki.net/blog/p2142-redesign#comments</comments>
		<pubDate>Sat, 16 Oct 2010 10:56:06 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Visual]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[gray]]></category>
		<category><![CDATA[illustrator]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2142</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2164" title="Redesign" src="http://toki-woki.net/blog/wp-content/uploads/2010/10/redesign.jpg" alt="" width="560" height="340" /></p>
<p>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.</p>
<h3>So that means a new theme?</h3>
<p>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.</p>
<p>Can’t remember what it looked like before? I’ve archived screens over <a href="http://www.flickr.com/photos/quentin-t/tags/twv1archive/">at Flickr</a>.</p>
<h3>A consistent look</h3>
<p>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.</p>
<p>Long story short:</p>
<blockquote class="big"><p>“Before: all different. Now: all good.”</p></blockquote>
<p>I’ve been into grids since the day I learned about Bluepint CSS and Josef Müller-Brockmann, this is why I wrote <a href="http://toki-woki.net/p/Boks/">Boks</a>. And this is why this site now heavily relies on a grid structure. For grid freaks out there, <a href="javascript:gridSneak()">click here</a> 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.</p>
<h3>Got a keyboard? Like shortcuts? Press that key!</h3>
<p>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.</p>
<p>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 <a href="http://www.aisleone.net/">AisleOne</a>). You can also time-travel by pressing Shift+P (for Past) or Shift+F (Future). Handy? Yep.</p>
<p>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.</p>
<h3>My screen is smaller than yours</h3>
<p>I discovered that technique on <a href="http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign">Hicksdesign</a> 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?</p>
<p>My brother (and his iPhone 4) helped me test the retina-display-ready logo, too. Optional but cool.</p>
<h3>More awesome</h3>
<ul>
<li>I’ve always wanted to use Webfonts but never really knew where. Here it is, you’ll find a nice <a href="http://code.google.com/webfonts/family?family=OFL+Sorts+Mill+Goudy+TT&amp;subset=latin">OFL Sorts Mill Goudy TT</a> on the home page. Thanks <a href="http://code.google.com/webfonts">Google</a>.</li>
<li>Another tiny thing is the “Subtle Prompt”. It happens when you use a keyboard shortcut or when you click the <a href="javascript:contact()">Contact</a> link…</li>
<li>If you’re on a WebKit browser (Safari or Chrome) you should see custom scrollbars, styled <a href="http://almaer.com/scrollbar/debug.html">with CSS</a>. Yeah.</li>
<li>I kind of don’t support Internet Explorer. Yes, this IS an awesome feature!</li>
<li>Trackbacks are now separated from regular comments.</li>
<li>A blog post’s author (my) comments appear differently, so you know who’s the boss out there.</li>
</ul>
<h3>OpenSource</h3>
<p>I always try my best to share the useful and reusable bits. Here are some JavaScript (MooTools required) goodies:</p>
<ul>
<li><a href="http://toki-woki.net/theme/js/lazy-scroller.js">LazyScroller</a>: turns your keyboard keys into a navigation dashboard.</li>
<li><a href="http://toki-woki.net/theme/js/subtle-prompt.js">SubtlePrompt</a>: nice and gentle prompt for your sensitive users.</li>
<li><a href="http://toki-woki.net/theme/js/lblr.js">Lblr</a>: form input in-context labeler.</li>
<li><a href="http://toki-woki.net/theme/js/ta-bg.js">ta-bg</a>: allows a textarea’s background image to scroll with its content.</li>
</ul>
<p>I’ll try to post docs/demos soon, I know this is probably a little bit rough right now…</p>
<h3>What now?</h3>
<p>Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2142-redesign/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Evnt — Custom AS3 Event File Generator</title>
		<link>http://toki-woki.net/blog/p2029-evnt-custom-as3-event-file-generator</link>
		<comments>http://toki-woki.net/blog/p2029-evnt-custom-as3-event-file-generator#comments</comments>
		<pubDate>Tue, 27 Jul 2010 10:56:31 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[robotlegs]]></category>
		<category><![CDATA[white]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=2029</guid>
		<description><![CDATA[I recently started working with Robotlegs on a daily basis and I’ve never had to write that much custom event classes, so I felt like it was starting to be a little bit boring… That’s why I wrote a pretty basic/simple app that does hard part for you! Simply enter you custom event’s class name [...]]]></description>
			<content:encoded><![CDATA[<p>I recently started working with <a href="http://www.robotlegs.org/">Robotlegs</a> on a daily basis and I’ve never had to write that much custom event classes, so I felt like it was starting to be a little bit boring… That’s why I wrote a pretty basic/simple app that does hard part for you!</p>
<p><a href="http://toki-woki.net/p/Evnt/"><img class="aligncenter size-full wp-image-2030" title="Evnt" src="http://toki-woki.net/blog/wp-content/uploads/2010/07/Evnt.gif" alt="" width="560" height="100" /></a></p>
<p>Simply enter you custom event’s class name and package, drop in some constants and properties: you’re all set!</p>
<p><span id="more-2029"></span>Pro-tips:</p>
<ol>
<li>Reorder the constants and properties by dragging and dropping them</li>
<li>Use custom types for the properties, imports will be taken care of for you</li>
<li>Hit “Copy to Clipboard” or “Save As…” for a quick export!</li>
</ol>
<p>Project is brand new so it might require some fixes or improvements… If you have ideas, please share!</p>
<p>And before you ask: no, it wasn’t written with Robotlegs… But it’s <a href="http://code.google.com/p/as3-bits/source/browse/trunk/apps/Evnt/src/net/tw/app/evnt/Evnt.mxml">OpenSource</a> so if you want to take a spin and write the RL version of it, you’ll be able to do so!</p>
<p>Hope this helps!</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p2029-evnt-custom-as3-event-file-generator/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Fotolia Desktop</title>
		<link>http://toki-woki.net/blog/p1974-fotolia-desktop</link>
		<comments>http://toki-woki.net/blog/p1974-fotolia-desktop#comments</comments>
		<pubDate>Fri, 25 Jun 2010 10:04:51 +0000</pubDate>
		<dc:creator>Quentin</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[as]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[photo]]></category>
		<category><![CDATA[white]]></category>

		<guid isPermaLink="false">http://toki-woki.net/blog/?p=1974</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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 <a href="http://www.fotolia.com/">Fotolia</a>.</p>
<p style="text-align: center;"><a class="img" href="http://www.fotolia.com/desktop"><img class="aligncenter" title="Fotolia Desktop" src="http://toki-woki.net/blog/wp-content/uploads/2010/06/fotolia-main.jpg" alt="" width="560" height="373" /></a></p>
<p>I did all of the coding part (ActionScript 3, Flex 4) and <a href="http://www.steaw.com/">Steaw</a> is responsible for the UI and all graphics.  <span id="more-1974"></span>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.<br />
<img style="float: right; margin-left: 10px;" title="Fotolia Desktop - Log In" src="http://toki-woki.net/blog/wp-content/uploads/2010/06/fotolia-log.jpg" alt="" width="203" height="274" /><br />
This is my first multi-lingual app: to this day it provides 13 translations including Japanese, Chinese and other funny looking languages!</p>
<h3>Flex 4</h3>
<p>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!</p>
<h3>AIR 2.0</h3>
<p>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.</p>
<h3>OpenSource</h3>
<p>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: <a href="http://code.google.com/p/fotolia-as3-api/">fotolia-as3-api</a>. I implemented most of (if not all) features of <a href="http://www.fotolia.com/Services/API/Documentation">their official API</a> so building an AS3 app off of that should be pretty easy, do so!</p>
<h3>Go get it!</h3>
<p>Yeah, <a href="http://www.fotolia.com/desktop">go get it</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://toki-woki.net/blog/p1974-fotolia-desktop/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

