ricardocabellov5.5

So I'm sure you've done a website that needed to be on 1,238 different languages. And every time you reached Chinese, Japanese, Korean... you got surprised that just the embeded font made your swf 9,000kbytes big.

For this project we're working on I'm mainly doing little tools with PHP. One of them is a translations manager, so you have a little SQL database with all the keywords and languages and someone fills it with data. At any point you can export it as .xml ready to be used in the website.

Having this set up, Theo came up with the idea that, as we had control on the text that was going to be needed for each language, we could do a script to output the list of characters needed for each font.

The PHP script goes down to this:

// In this case $lines is a associative array that comes from MySQL.

$list = array();

foreach($lines as $line)
{
	$string = $line["text"];
	$string = strip_tags($string);
	$string = str_replace('\n','',$string);

	preg_match_all('/./u', $string, $chars);

	foreach($chars[0] as $char)
	{
		$found = false;

		foreach($list as $listchar)
			if ($listchar == $char)
				$found = true;

		if ($found == false)
			$list[] = $char;
	}
}

foreach($list as $item)
{
	echo "U+" . zeropad( strtoupper( dechex( substr( mb_encode_numericentity ( $item, array (0x0, 0xffff, 0, 0xffff), 'UTF-8'), 2, -1 ) ) ), 4 ) . ",";
}

You'll also need this:

function zeropad($num, $lim)
{
   return (strlen($num) >= $lim) ? $num : zeropad("0" . $num, $lim);
}

What this code does (properly setted up in yours) is split the whole string into characters and check one by one if has been added to the list of characters used, if it's a new it just adds it. Then it writes a unicode list formated as U+XXXX. The output looks something like this:

U+0043, U+0048, U+0041, U+004E, U+0045, U+004C, U+002E, U+004F, U+004D, U+0052, U+0044, U+0049, U+0054, U+0053, U+5168, U+5C4F, U+89C2, U+770B, U+5176, U+5B83, U+8BED, U+8A00, U+6CD5, U+5F8B, U+58F0, U+660E, U+97F3, U+91CF, U+5E55, U+540E, U+82B1, U+7D6E, U+5965, U+9EDB, U+4E3D, U+2022, U+5854, U+56FE, U+0020, U+4E0E, U+8BA9, U+002D, U+76AE, U+8036, U+5C14, U+70ED, U+5185, U+62CD, U+6444, U+8BB0, U+5F55, U+73B0, U+573A, U+5F71, U+7247, U+0032, U+5206, U+0030, U+79D2, U+0036, U+00B0, U+0035, U+4F20, U+5947, U+4E3A, U+4EC0, U+4E48, U+9009, U+5851, U+9020, U+5973, U+795E, U+642D, U+4E58, U+591C, U+95F4, U+5217, U+8F66, U+7684, U+4EBA, U+6027, U+611F, U+8BF1, U+60D1, U+4F60, U+6700, U+559C, U+7231, U+955C, U+5934, U+7B2C, U+4E00, U+6B21, U+7EED, U+5199, U+8F89, U+714C, U+4EE3, U+00BA, U+9999, U+6C34, U+6C1B, U+5FC6, U+6211, U+53F7, U+2014, U+79D8, U+6570, U+5B57, U+0039, U+5948, U+513F, U+4E4B, U+5E74, U+7537, U+4E3B, U+89D2, U+5D14, U+7EF4, U+65AF, U+0660, U+8FBE, U+6587, U+6CE2, U+7279, U+8FC7, U+7A0B, U+4E2D, U+7F8E, U+597D, U+56DE, U+5609, U+4F2F, U+8389, U+5212, U+65F6, U+521B, U+4F5C, U+73CD, U+8D35, U+6735, U+539F, U+6599, U+5999, U+8C03, U+548C, U+5242, U+7A7F, U+8D8A, U+5149, U+7ECF, U+5178, U+56DB, U+79CD, U+6F14, U+7ECE

What's this for you'll ask. Well, just look at this:

[Embed(source="yourfont.ttf", fontFamily="YourFont", fontWeight= "bold", fontStyle = "normal",advancedAntiAliasing="true", mimeType="application/x-font-truetype", 
unicodeRange="U+0043, U+0048, U+0041, U+004E, U+0045, U+004C, U+002E, U+004F, U+004D, U+0052, U+0044, U+0049, U+0054, U+0053, U+5168, U+5C4F, U+89C2, U+770B, U+5176, U+5B83, U+8BED, U+8A00, U+6CD5, U+5F8B, U+58F0, U+660E, U+97F3, U+91CF, U+5E55, U+540E, U+82B1, U+7D6E, U+5965, U+9EDB, U+4E3D, U+2022, U+5854, U+56FE, U+0020, U+4E0E, U+8BA9, U+002D, U+76AE, U+8036, U+5C14, U+70ED, U+5185, U+62CD, U+6444, U+8BB0, U+5F55, U+73B0, U+573A, U+5F71, U+7247, U+0032, U+5206, U+0030, U+79D2, U+0036, U+00B0, U+0035, U+4F20, U+5947, U+4E3A, U+4EC0, U+4E48, U+9009, U+5851, U+9020, U+5973, U+795E, U+642D, U+4E58, U+591C, U+95F4, U+5217, U+8F66, U+7684, U+4EBA, U+6027, U+611F, U+8BF1, U+60D1, U+4F60, U+6700, U+559C, U+7231, U+955C, U+5934, U+7B2C, U+4E00, U+6B21, U+7EED, U+5199, U+8F89, U+714C, U+4EE3, U+00BA, U+9999, U+6C34, U+6C1B, U+5FC6, U+6211, U+53F7, U+2014, U+79D8, U+6570, U+5B57, U+0039, U+5948, U+513F, U+4E4B, U+5E74, U+7537, U+4E3B, U+89D2, U+5D14, U+7EF4, U+65AF, U+0660, U+8FBE, U+6587, U+6CE2, U+7279, U+8FC7, U+7A0B, U+4E2D, U+7F8E, U+597D, U+56DE, U+5609, U+4F2F, U+8389, U+5212, U+65F6, U+521B, U+4F5C, U+73CD, U+8D35, U+6735, U+539F, U+6599, U+5999, U+8C03, U+548C, U+5242, U+7A7F, U+8D8A, U+5149, U+7ECF, U+5178, U+56DB, U+79CD, U+6F14, U+7ECE")]
public var FontClass:Class;

In this way, you're going to import on the .swf only the characters you're using from the .ttf.

In our case, Chinese went down from 9,554kbytes to 45kbytes. That's a 99.6% reduction. Pretty cool!.

Hopefully this will save some sleepless nights to someone.

Following the "a speech per year" tradition, here are the details for this year's one. It'll be open for anyone, so feel free to come around if you happen to be in town.

IED Master Madrid
May 13th, 2009 - 19.00h.

c/ Larra nº14, Madrid. [Metro Tribunal]

This is what russian kids do when they get bored.

Back in 2006, when I was a real noob coding wise (now I'm just below average), I did this plasma effect with AS2.



3 years later, in 2009, the effect with flash 10 looks like this.



Get the sources here. (It's VERY simple)

Thanks to Steve Ferrigno for indirectly pushing myself on coding the effect with Pixel Bender just by asking for the .fla of the 2006 effect :)

Moving to Linux was quite a decision back in the day. If you really want to move you should be ready to miss many things, in my case: 3D Studio MAX, Photoshop, gaming, ... Although for most of the things you have alternatives: Blender, Gimp, no gaming... When I moved it was even worst because the suspend didn't work so I had to close/start my computer every time. It's been fixed now.

That's ok, but there are those little issues that would make the whole experience just perfect, this is the current list (I'll be updating it whenever I find more issues or solutions):

.psd support on the default image viewer
right now it will get open by Gimp, but this is annoying if you just wanted to preview it. I miss irfanview.

XnViewMP can display .psd's, .ai's and anything you can imagine. Thanks Jull


vpn working out of the box
I had to connect to a Microsoft VPN and at first it didn't work. Months later I googled for the issue and found this which made it work. Tried to connect to the about-to-be-released 9.04 and it didn't work again, neither with that sites tips. On Windows it just works...

vpn to a Microsoft vpn now works flawlessly with Ubuntu 9.04 RC.


nice and consistent design
Mark recently said that in 2 years they were going to outpretty MacOS. Well, I can't see this happening that easily. 9.04 design additions aren't exactly on the right path. But hey, he also said that on Ubuntu 9.04 was going to load damn fast, and it does. We'll see.


webcam on flash player
Anytime I use the webcam in a browser, the second page I visit that tries to use the webcam breaks the webcam image input. I need to restart the browser if I want to use the webcam again.


Skype 64-bit
This is Skype's fault obviously, and a clear example of why open source is going to dominate the world soon ^^


I believe it's all a matter of patience :)

It's a shame that doing a right click > properties in a folder doesn't tell you this (as Windows does) but well... Open the terminal, go to the folder you want to check a type this:

for t in files links directories; do echo `find . -type ${t:0:1} | wc -l` $t; done 2> /dev/null

Will output this:

655 files
6 links
213 directories

Found it here.

Download it from here:

http://www.adobe.com/support/flashplayer/downloads.html

Uncompress it and ignore the installer script, otherwise whenever you restart Firefox the previous plugin will be used instead.

The only way I managed to find was this:

9.10

sudo cp libflashplayer.so /usr/lib/flashplugin-installer/

8.10

sudo cp libflashplayer.so /usr/lib/adobe-flashplugin/

8.04

sudo cp libflashplayer.so /usr/lib/flashplugin-nonfree/

Ends up as a very simple line, but took a bit to figure it out.

var localMode : Boolean = loaderInfo.url.indexOf("file") == 0;

Earlier this week, the uber famous Sys-Con surprised everyone with a masterly attention technique.

Eral Belkan is a designer, developer, author, teacher, entrepreneur, and performer. Best known for being the first designer, developer, author, teacher, entrepreneur, and performer being defaced by Sys-Con on the history of humanity.

Mr.Belkan started a internet campaign against Sys-Con but the campaign made a unexpected u-turn giving Sys-Con a lot of exposure reaching sites such as Digg and Reddit, page-rank rise and most importantly income rise.

Following this technique they defaced Mr.doob over the night. This is how the page looked like:



Fortunately I spoke with my venture capitalists, lawyers and a quick visit to a Scotland yard friend and forced them to remove the malicious page from their site. Quick enough before the page got indexed.

Oh my... I couldn't wait any longer...





And many other cool ones here.

Now, if you want to know a bit of the background/making of...

Some months ago the guys at Instrument commissioned me for doing a experimental piece. This is the first time I get this kind of offer, I had total creative freedom (as long as the piece was cool :D). The experiment mainly had to demonstrate Google Chrome's performance.

First concept

The best thing to do here was to directly code it with Javascript. First needed to get a little framework done, a stats widget and then see where it could go. Then I started porting a super simple collision system in between circles I had in AS3, and mixed that with browser movement. So you could interact with a bunch of circles by shaking your browser. They liked the main concept so I continued developing it.

Google Gravity

At Hi-ReS! I was working on a experiment that consisted basically in the google homepage collapsing and you could play with the elements, throw them around and even search. It was done in flash with box2dflash and I did a custom editor for rebuilding the html layouts. Unfortunately I had to move to another project and the experiment development got stuck.

Back to this project, as I had a little physics engine going on they suggested using it for breaking elements of a site. At first I said that it couldn't be done because in html you can't rotate elements, then they replied with this link and I had to eat my words ;) Then I showed them the flash experiment and they seemed very excited about it. I was about to mention that still couldn't be done because I used Box2D and there wasn't a javascript version, but this time I googled first and, oh! surprise, a Japanese ported it! :D So it was all decided, it was the perfect chance to finish that experiment.

Javascript < Flash ?

It was all looking good then, it was all a matter of the browser being able to handle css rotations fast and at the same time use the box2d engine. And how surprised I was when I saw how fast it performed. Seriously, Javascript in Chrome almost reaches the speed of flash. (no, they didn't pay me to say this :P). Another good thing now was that it wasn't a flash hack anymore, meaning that in the original experiments I had images of the buttons, so in MacOS you would see the button using the Ubuntu skin. Not anymore as now uses directly the html elements \o/

Box2d-js improvements

Then it was time to do the usual process, the actual work, the hacks, refactoring, the addictiveness tests... Eventually faced the problem that box2d-js took a bit of time to load (5-10 seconds) because it loads many files... Well, not anymore! I managed to do a script to put all the files in one and also jsmined it, and I'll be sending the script to Yasushi later :D Glad to be able to contribute something back to box2d-js after all :)

Conclusion

Brilliant project, I may still submit another piece that it's half done, we'll see.

Now go and take a look at the code of each piece and feel free to reuse the code, in fact, I want to see a lot of websites "collapse". The code its really easy to reuse, just add the class "box2d" to any element you want to collapse, and the code will do the rest. If you do anything with it, post it on the comments down here please :)