Activate your free membership today | Log-in

Friday, May 2nd, 2008

Homer in CSS

Category: Fun, CSS

There is the David. There is the Mona Lisa. And then, the artist has to create the Homer.

Román Cortés did just that with his Homer in CSS and Ned Batchelder shows it via animation.

Homer in CSS

Thank god for fun fridays.

Posted by Dion Almaer at 10:20 am
6 Comments

++++-
4.8 rating from 45 votes

XSketch: Pictionary with GWT

Category: Fun, Games, GWT

XSketch

XSketch is “a multiplayer word sketch game. It is programmed in Adobe Flash, Java, Ajax, and GWT. Gameplay is similar to Pictionary where you sketch a picture with the goal of having other players guess your word and vice versa.”

Ryan Dewsbury creator this game, which he adds to his collection of GPokr and KDice.

This one is particularly addicting!

Posted by Dion Almaer at 10:14 am
2 Comments

+++--
3.5 rating from 6 votes

Friday, April 18th, 2008

SEO Rapper Friday

Category: Fun


Oh man, even for a Friday this is pretty low… but what the hell, this is the Internet damn it!

It starts with:

The site design is the first thing that people see
It should be reflective of you in the industry
Easy to look at with a nice navigation
When they can't find what they want it causes frustration
A clear call to action to improve the temptation
Use appealing graphics that create motivation
If you have animation please use in moderation
Cause search engines can't index the information

and then my favourite part:

Do your layout with divs, make sure that they are aligned
Please don't use tables even though they work fine
when it comes to indexing it gives search a hard time

Posted by Dion Almaer at 4:58 am
12 Comments

++++-
4.8 rating from 33 votes

Friday, April 11th, 2008

Upside Down Text

Category: JavaScript, Fun

Yup, check the calendar, it's Friday!

John Dyer has implemented the much asked for upside down text JavaScript that lets you code this:

HTML:
  1.  
  2. <script type="text/javascript" src="upsidedown.js"></script>
  3.  
  4. <div class="upsidedowntext">I can be read in any orientation</div>
  5. <div>I can be read in any orientation</div>
  6.  
  7. <div class="upsidedowntext">This is Tom Cruise taking your picture</div>
  8. <div>This is a boring Russian Mig</div>
  9.  

to see this:

Upside Down

If you look at the source you will see that the magic is in a flip table that does the unicode thing.

I love the rationalization:

There is a huge need for upside down text on the web. With everyone "going mobile," developers cannot simply rely on users having their screens oriented the same way all the time.

Nice joshing :)

Posted by Dion Almaer at 12:23 pm
7 Comments

++---
2.6 rating from 19 votes

Wednesday, April 9th, 2008

Super Mario; 14KB of JavaScript

Category: JavaScript, Fun, Games, Canvas

Jacob Seidelin is doing great work, and for something fun, he build a piece of Super Mario in just 14KB of JavaScript:

Here's an experiment in keepings things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.

We also have MIDI music embedded as base64-encoded data: URI's. No music for IE, though, and it seems all the other browsers each have different, minor problems with it, but it sort of works.

Posted by Dion Almaer at 12:39 am
15 Comments

+++++
2.754661662493E+48 rating from 116 votes

Tuesday, April 8th, 2008

JavaScript has staying power; Used in Stargate

Category: Fun

This one is geeky. Someone watched the Stargate episode below and found JavaScript used in the console (above).


Interesting to see that JS1 is used in the future ;)

Posted by Dion Almaer at 1:21 am
16 Comments

+++++
5 rating from 30 votes

Sunday, March 30th, 2008

When rich websites go bad…

Category: Showcase, Fun

We love to showcase good uses of Ajax, but sometimes you have to show the anti-patterns too. Hema is a dutch company that recently tried to revamp their online site, but went a little too far.

Hema Online

Posted by Dion Almaer at 11:46 pm
18 Comments

+++--
3.9 rating from 50 votes

Friday, March 21st, 2008

Snake

Category: JavaScript, Fun, Games

Snake

Andreas Kalsch has created a simple version of Snake in JavaScript that eats your feeds instead of food.

The first time I ever played snake was on a BBC Micro. I was small.

Posted by Dion Almaer at 7:55 am
4 Comments

+++--
3.9 rating from 12 votes

Friday, March 14th, 2008

Asciify: ASCII art library

Category: Library, Fun

Asciify is a new library that draws ASCII art for you, so it had "Friday" written all over it:

There are trends on the web (as in real world) that last days or weeks and there are things that became a classic form of expression of the geek culture and are still interesting to explore after 20+ years.

Ascii Art is one of these things. If you don’t know what ascii art is you’re probably reading the wrong blog, however for the one or two that doesn’t know about it, here you can learn more about it: Ascii art on wikipedia.

I always had in mind the idea to create an actionscript class to render ascii art from pictures and now with as3 this is going to be possible at decent speed.

My class is called Asciify and it can actually “ascii-fy” every DisplayObject instance on the display list.

It is simple to use too:

JAVASCRIPT:
  1.  
  2. var asciifyInstance:Asciify=new Asciify(picture, textFormat, 16);
  3. addChild(asciifyInstance);
  4.  

Takes me back to my insanely cheesy .sig files from many years ago:

         \\|//
         (o o)
+----oOOo-(_)-oOOo--------------------------------------------------+
|   dionXalmaer.com   |               FREE TIBET *                  |
| www.almaer.com/dion | * with any tibet of equal or greater value  |
+-------------------------------------------------------------------+

Posted by Dion Almaer at 9:43 am
12 Comments

++++-
4.1 rating from 29 votes

Friday, February 22nd, 2008

Hello World: yesterday, today and tomorrow

Category: Fun

Vlad Shamgin sent in this little history on "Hello World" on the Web.

1998

HTML:
  1.  
  2. <font><b>Hello World</b></font>
  3.  

2000

JAVASCRIPT:
  1.  
  2. var myText = "Hello World";
  3. var _textNodeParent;
  4. var docNodes = document.childNodes[1].lastChild.childNodes;
  5. for(var j=0; j&lt;document .childNodes.length; j++){
  6.   if(document.childNodes[j].lastChild){
  7.     for(var i=0; i&lt;docNodes.length; i++){
  8.       if('div' == docNodes.item(i).nodeName.toLowerCase()){
  9.         if('layer_main' == docNodes.item(i).id.toLowerCase()){
  10.           if (null != document.getElementById('bparent')) {              document.getElementById('bparent').parentNode.removeChild(document.getElementById('bparent'));
  11.           }
  12.           _textNodeParent = document.createElementNS("http://www.w3.org/1999/xhtml", "html:b");
  13.           _textNodeParent.id = 'bparent';                   
  14.           docNodes.item(i).appendChild(_textNodeParent);
  15.           _textNodeParent.appendChild(document.createTextNode(myText));
  16.         }
  17.       }
  18.     }
  19.   }
  20. }
  21.  

2003

JAVASCRIPT:
  1.  
  2. var myText = "<b>Hello World</b>";
  3. document.getElementById('layer_main').innerHTML = myText;
  4.  

2008

JAVASCRIPT:
  1.  
  2. myVp = new Ext.Viewport({
  3.   layout:'fit',
  4.   autoHeight:true,
  5.   id:'myVPid',
  6.   items:[
  7.     new Ext.XTemplate('<tpl>',
  8.         '<span id="bparent" style="width:100%;font-weight:bold">{text1}{text2}{text3}</span>',
  9.         '</tpl>').overwrite(Ext.get('layer_main'),{text1:'Hello',text2:'&nbsp;',text3:'World'})
  10.   ]
  11. });
  12.  

What will 2010 be?

Posted by Dion Almaer at 6:30 am
20 Comments

++---
2.5 rating from 72 votes

Tuesday, February 5th, 2008

Super Tuesday: Ajax Endorsements

Category: Fun

Super Tuesday

TechCrunch got political and got into the endorsement business, apparently based on their tech policy.

So, surely Ajaxian needs to get in on this action. How better to do so than take a look at what toolkits are used by the top runners:

Barack Obama

Barack is trying to be inclusive by weilding Prototype, Scriptaculous, and jQuery in the same page. This is a risky approach as it adds weight, and could pit the rivals against each other.

Hillary Clinton

Hillary has also gone for Prototype and is using Ben Nolan's Behaviour library to add JavaScript unobtrusively, and is wrapping her Flash with SWFObject.

John McCain

This is a bit of a party foul. A view source on McCain's website shows you Dreamweaver all over. There are more MM_* functions than you can swing a monkey at.

Mitt Romney

Mitt has gone for a different approach. He is hoping that an army of Mootools lovers will pull him through.

Conclusion

I will have to go for Barack with a slight edge. His website is very nicely designed, and I loved how it used to start off just with a video of his message.

Posted by Dion Almaer at 12:22 am
16 Comments

+++--
3.4 rating from 16 votes

Friday, January 25th, 2008

YUI ready to celebrate 2nd Birthday

Category: Fun, Yahoo!, Announcements

The Yahoo User Interface library is now almost 2 years old and the team is getting ready to celebrate with a party on the Yahoo! campus in Sunnyvale, California.

If you're around on 26th of February, why not drop by for the celebrations, meeting the people behind and get some inside information about what the future holds for the YUI. Apart from that, there'll be the obligatory food and beers and of course some schwag to take away. Space is currently limited to 150 people, so be quick if you want to come.

You can find out more about the party on the YUI blog and sign up for the party on upcoming.

Posted by Chris Heilmann at 5:46 am
Comment here

+++--
3.8 rating from 12 votes

Wednesday, January 16th, 2008

Winter Holiday Christmas Lights

Category: Showcase, Fun, Sound

Scott Schiller redesigned his site for the holidays and I somehow missed it. He tends to experiment with JavaScript in this way, and this year is a great example:

Move your mouse over the christmas lights (with headphones), and blow off some holiday stress! Smash -all- of the lights, and you will be.. rewarded. ;) This uses SoundManager 2 for the effects, and YUI for DOM, Animation and the Slider widget. The site's time-sensitive (night/day) and you can control the "lighting" and other effects via a slider, but I'll leave it for you to check out if interested. ;)

I was also pleased to note that the YUI worked nearly flawlessly when the site is rendered in proper XML/standards mode (XHTML sent with the "application/xhtml+xml" MIME type), which also makes JavaScript a little more "strict" - ie., you can't reference document.body any more, and so on.

The design is intentionally experimental, and uses a lot of alpha-transparent PNGs, animation and CSS opacity (there is an "enhanced FX" checkbox in the UI which enables/disables the fancy stuff), and will put a pretty good load on any modern system. The point was to see how the different browsers would perform; Safari 3 and Firefox 3 (beta) both handle things quite well, Opera and IE 7 do a decent job as well. (Unfortunately I had to degrade IE 6, it couldn't handle all the PNGs + opacity.)

Xmas Lights

Posted by Dion Almaer at 8:28 am
1 Comment

+++--
3.4 rating from 22 votes

Tuesday, November 20th, 2007

Kevin Lynch unmasked (or masked) as The Flash!

Category: Flash, Fun

Ben and I are in London, enjoying the rain, as we participate in the @media Ajax conference in Westminster. We got to give our morning address next to Westminster Abbey at the same time that the Queen and all of the royalty were celebrating her 60th wedding anniversary. Awwww.

As per usual, we were working on the slides a little at the last minute as we got together and at 4 a.m. we somehow got sidetracked as we went through a set of slides on the people behind the ECMAScript 4 debate. We ended up having a little fun with our slide on Kevin Lynch, and ended up with this:


Posted by Dion Almaer at 6:34 am
4 Comments

+----
1.9 rating from 60 votes

Saturday, November 17th, 2007

“A fast guy in tights and a movie about Coffee”

Category: Fun

Dilbert on Ajax

Posted by Dion Almaer at 12:23 pm
22 Comments

+++--
3.5 rating from 65 votes

Monday, October 15th, 2007

KDice - GWT-based strategy game

Category: Ajax, Fun, Games, GWT

Ryan Dewsbury, creator of gpokr is no stranger to Ajaxian as we did a writeup about his Ajax poker app last year. Ryan has since released another Ajax-based game called Kdice. Kdice is an online strategy game built using the Google Web Toolkit.

The goal of the KDice is to win all territories. At the end of each turn the number of new dice randomly distributed is based on the largest number connected territories for that player.

I've never played Kdice but considering that there are over 30,000 registered players on the site, this game must be a blast!

Posted by Rey Bango at 7:30 am
3 Comments

++++-
4.2 rating from 21 votes

Next Page »