Archive for December, 2010

I've overhauled my site during the recent monts. The things I've done:

• Migrated every MediaWiki page to WordPress and shut down MediaWiki.
• Migrated every image to Flickr.
• Moved every useful project to the cloud, primarily to Google Code due to its simplicity.
• Cleaned up my project page and included my smaller projects.
• Overhauled the main page.
• Updated the categories.
• Moved my CV to LinkedIn.
• Made every page 100% XHTML Transitional complicant.

It's been a major update that I wanted do to a long time ago but never had the time.  I also have some small plans regarding improving the performance of my site.  I wanna use a PHP opcode cache, make an image sprite from the theme images and serve static content using lighty from a separate subdomain.  None of these is urgent but I want my site to be lightning fast eventually.

Update (2011-04-27): You may wanna take a look at my Ultimate Flash XHTMLizer WordPress plugin which implements the algorithm below.

Many web developers were there: you wanna embed Flash in an XHTML compliant way. "It shouldn't be hard" - you may think first. Most of us finally conclude that it's nowhere near obvious. But first, a word about the importance of XHTML compliance...

I'm fully aware that most "web developers" don't give a shit about XHTML compliance and I can understand them to a degree. Try to validate your favorite sites and you'll quickly realize that there are hardly any sites that are completely valid. There are many browser quirks that make our lives very hard and we may don't have enough time to try to comply to every single rule. Hell, XHTML Strict is out of control!

On the other hand, I still think that being XHTML compliant is important. I'm not actually concerned about the minor, but rather the major errors. Missing the alt attribute of an image is no big deal but failing to close tags can be. "The browser will correct such errors" - you may say and you may be right but browsers handle such issues differently and you cannot tell what will happen in which browser. To summarize this paragraph, the way I see it is this: even if there are some minor validation errors, those can be disturbing enough to not notice the major errors so your best bet is to be 100% XHTML compliant.

After I hopefully persuaded you about the importance of XHTML compliance, let's get back to the solution. Once upon a time A List Apart wrote a fascinating article about the topic back in 2002. I've tested their method with the help of some of my friends and guess what: it didn't work consistently. It might have worked back then but 8 years have passed by and it failed in many of the browsers we tested with. I've also tried out validifier.com which is a very interesting tool. It generally worked with YouTube videos but failed with Flickr slideshow embeds in many browsers. I've tested everything under the sun and nothing worked. I had to devise a solution that worked predictably all the time.

After tinkering for a while I came up with a pretty clear solution that involves using JavaScript and seems to work in all browsers all the time. The necessity of using JavaScript is definitely the most ineloquent aspect of my solution but I don't consider it such a big deal in this web2.0ish age. Also, I'd like to note that there are some articles on the web about non-JavaScript based "solutions". Every such articles revolves around transforming the embed code in a way to be XHTML compliant and they are XHTML compliant but they do not work across every major browser. It's simply not possible to do without JavaScript. If you say it is then you didn't test in every major browser using every major OS.

My method involves htmlspecialchars'ing the Flash embed code, putting it between divs, hiding it with CSS and un-htmlspecialchars'ing it using JavaScript. That's it, but let's see it in detail.

1) The CSS

0

.flash {color: #fff; }  /* Make the color the same as your background color. */

2) The HTML

htmlspecialchars'ify the code and put it between <div class="flash"> and </div> tags and finally insert it to your page. I've made a handy conversion tool just for you!

3) The JavaScript

0
1
2
3
4

$(document).ready(function() {
   $('.flash').each(function(index) {
       $(this).html($(this).text())
   });
});

Ok, this uses jQuery instead of pure JavaScript but I won't work around the getElementsByClassName() bug of IE for sure.

Be aware that if you use this method in a CMS that generates a feed from a page then your feed will contain the embed code in plaintext format which you surely don't want. As for me, I'm only concerned about WordPress. My beloved readers who are on my feed are currently screwed in this respect but I'm thinking about writing a WordPress plugin that automatically does the above conversion process without affecting the feed.

Let's test it!

Check out the original link for this YouTube video for testing purposes.

Check out the original link for this Flickr slideshow for testing purposes.

Thanks!

I'd like to thank to CsLaci, Dömi, Eszter, Gyula, JoE, Luigi and Tenta for testing this embed method in about two dozens of browsers on every major OS.

I've faced a number of times with this scenario: I have some scripts and I wanna log their output in a way to timestamp every lines but I don't wanna write any additional code to achieve the outcome.

Meet timestamper.

0
1
2
3
4
5

#!/usr/bin/env php5
< ?php
while (($line = readline('')) !== false) {
    print strftime('%Y-%m-%d %H:%M:%S  ') . "$line\n";
}
?>

Save it as "timestamper" to a directory in your $PATH and make it executable. Using it is a no brainer:

0

./myscript 2>&1 | timestamper >> myscript.log

Could it be any simpler? I don't think so.

2010-10-09 was an interesting day for me because on that day (and on the following day) the very first retro computer exhibition was held in Szeged. The collector is Gábor "SakmaN" Szakács who is surely a maniac considering the vast number of comptuters, video games and quartz games featured at the event.

I've taken some pictures:

Also, I've made some videos. The first part features Schneider Euro PC, Enterprise One Two Eight, Videoton TV-Computer, Videoton TV-Computer 64k, School-Computer HT 1080Z/64, Texas Instruments TI-99, Atari Falcon 030, Atari 520ST, Atari 800XL, Atari 1029, Commodore CDTV, Commodore Amiga A-500 Plus, Commodore 128, Seikosha GP-100VC, Commodore plus/4, Commodore 1551 floppy disk drive, Commodore 16, Commodore SFD 100I floppy disk drive, Commodore 1541-II floppy disk drive, Commodore 1530 datassette unit model C2N, Commodore VC-20, ZX Spectrum+, ZX Spectrum, Timex Sinclair 1000, Sinclair ZX81 and lots of peripherials, games and mini videogames

The second part features APF TV Fun, Palladium Tele-match, Universum TV-Spiel 1004, Poppy 9012, ASAKI TVG 209, Dava-tronic video sport, Videoton elektronikus játék, Coleco Telestar, Odyssey 2001, Audio Sonic PP-920, Programmable TV Game, Hanimex TVG 8610C, Ameprod, Philips Tele-Spiel ES2201, Programmable color video game, Vectrex, Video computer system, Atari 2600, Gemini video game system, Philips G7000 videopac computer, creatiVision, CBS Coleco Vision, Mattel Electronics IntelliVision, Sega Master System, Sega Light Phaser, Sega Master System II, Sega Mega Drive, Sega Genesys, Sega Mega Drive II, Nintendo Entertainment System, Nintendo Zapper, Super Nintendo Entertainment System, Amiga CD 32, Nintendo 64, Atari Jaguar, Panasonic Real FZ-1, Panasonic Real FZ-10, Sega Saturn,

The third part features Sony PlayStation, Sega Dreamcast, Sega Sniper Lightgun

As you may suspect I'm not the only one who shoot pictures and videos. There are others, too.

It all started about two years ago when I saw all those crazy hardware projects all over the Internet which made me became interested in hardware. Before that, I could only see hardware as ready-made equipment. Not anymore. Since my first glimpse into this universe I learned tons of things and the time has come to build something... Something very cool!

Enter the world of Adafuit Industries who I consider the leading force behind the Open Hardware revolution. Unlike most of the companies, they share everything about their projects and operations, they are extremely community friendly and not only they don't make you sign any NDAs, they outright hate NDAs. Seeing their philosophy, their cool projects and the level of passion they put into everything they do I immediately felt that warm and fuzzy feeling.

POV projects were always incredibly interesting to me as I'm very visual (which probably shows even on the streets when I check out da ladies, but that's another story). Maybe the fact that most people don't have the slightest clue what these gadgets do until they start moving is the most exciting part about them. They stimulate our senses and make our mind work to figure out how it's possible to do what these things do. I'm not quite sure what's so magical about them, but they fascinate me every time I see them in action.

SpokePOV is one of the most interesting POV projects in my opinion. Who doesn't want to be a badass daredevil biking in the city, showing off something that probably nobody has ever seen? Nah, don't be shy, you can hold up your hands!

The build instructions are crystal clear and the perfect setup is given so let's rock and roll!

Let's zoom on a little bit.

That's lots of LEDs, a fair amount of shift registers, resistor arrays and some other stuff.

SpokePOV is mounted into the vise, nothing can stop me!

Halfway through the work it's time to take a little pause and drink some water before I fall off my chair.

Zooming in. The sheer beauty of the soldered shift registers gotta make your inner geek joyfully sing.

We're almost there.

Ladies and gentlemen, after making almost 400 solder joints this baby is ready to fly... I mean spin.

I asked my buddy from the neighborhood to help me test SpokePOV on the bike in action. Reluctantly though, he said yes but we've had such a fun time that I hardly think he regret his decision. POVing with one SpokePOV is pretty challenging unless you're an athlete. I guess I should have bought three of them. The desired result didn't come easy with one piece.

Let's see the first try.

And the second.

The third.

And lastly, but not leastly, the fourth try came with the sweet smell of success!

It's hard to describe the feeling of building and riding SpokePOV but one thing is sure: it's addictive. It's a feeling that everyone should experience. As for open hardware, I'm probably addicted for life. What to do now? I'm not sure but I wanna move to soldering SMDs and I have a couple cool projects on my mind.

A girlfriend of a friend of mine asked me to repair her mouse because the wire has been chewed by her rabbit.

Her rabbit... Can you believe that?

Anyways, I was on a mission to fix this (rather unergonomic) mouse. I cannot blame the designers because it's clearly a promotional product so it's main purpose is marketing, not a product for everyday use. Despite of this, the girl in question is crazy enough to use it everyday. (Which is not so much of a surprise given the computer savviness of girls, except the much respected Jeri Ellsworth).

The repair procedure was a no brainer, except looking up the pins of the OM21PS USB+PS/2 MCU+Sensor 2-in-1 optical mouse IC to find out how the USB cable wire colors relate to their function. The existence of such multi-function ASICs is one of the main reasons why electronics is so damn small nowadays.

This question puzzled me for a while. It turned out that the WordPress RSS widget uses the link element of the atom feed it gets to link the header of the widget. The problem is that the Google Reader atom feed doesn't have such an element.

I originally wanted to use Yahoo Pipes which failed to solve this problem so I've written a handy little script.

0
1
2
3
4
5
6
7

$shared_items_feed_url = 'http://www.google.com/reader/public/atom/user/04674577121720532529/state/com.google/broadcast';
$shared_items_page_url = 'http://www.google.com/reader/shared/mondalaci';
 
$source_atom_feed = file_get_contents($shared_items_feed_url);
$insert_pos = strpos($source_atom_feed, '<generator ');
$link_element = "<link href=\"$shared_items_page_url\" />";
$linked_atom_feed = substr($source_atom_feed, 0, $insert_pos) . $link_element . substr($source_atom_feed, $insert_pos);
print $linked_atom_feed;