*New* KickPost
We are working on a new way to discover tech news in real-time. It's called KickPost.
Get Invite

Ajaxian

Cleaning up the web with Ajax


Rotating maps with CSS3 and jQueryToday

One of the things I always want to do with online maps is rotate them – I am used to that with real, physical maps. As physical maps become a lot more clever these days (for example have you seen the zoomable map?) it is time we can do this with the online ones, too.

Whilst Google supports this in the satellite and hybrid maps, the basic ones still can’t be turned. Which is why I took CSS3 transformations (wrapped in a very useful jQuery plugin) and voila – rotating is possible:

Rotating a map with CSS3 and jQuery by  you.

Read more about the implementation and some of the things that need fixing in the original blog post about map rotation.

ajaxian?d=yIl2AUoC8zA ajaxian?d=7Q72WNTAKBA
Faye: Bayeaux protocol Comet server for Node.jsToday

James Coglan has ported a Ruby/EventMachine Comet server to offer a new Node.js server on the Bayeux protocol. The project is Faye and you can check out the code on GitHub.

On the client side:

PLAIN TEXT
HTML:
  1.  
  2. <script type="text/javascript" src="/comet.js"></script>
  3.  
  4. <script type="text/javascript">
  5.     CometClient = new Faye.Client('/comet');
  6.     CometClient.connect();
  7. </script>
  8.  
PLAIN TEXT
JAVASCRIPT:
  1.  
  2.   CometClient.subscribe('/path/to/channel', function(message) {
  3.     // process received message object
Think You Know Javascript? Try this Quiz!Today

If you know you think you know your objects from your arrays and your null from your undefined, here's a quiz for you from Perfection Kills.

I was recently reminded about Dmitry Baranovsky’s Javascript test, when N. Zakas answered and explained it in a blog post. First time I saw those questions explained was by Richard Cornford in comp.lang.javascript, although not as thoroughly as by Nicholas.

I decided to come up with my own little quiz. I wanted to keep question not very obscure, practical, yet challenging. They would also cover wider range of topics.

There are fourteen questions in all, starting here:

(function(){ return typeof arguments; })();

“object” “array” “arguments” “undefined”
ajaxian?d=yIl2AUoC8zA
Javascript ePub ReadersToday

republish2

eBooks have gone mainstream, and right now the open ePub format is getting a lot of attention, being the iPad's book format of choice. Often overlooked in gadget-centric media is the fact that ePub is based on web standards, and therefore amenable to being rendered in the browser, sans plugins. Pure Javascript ePub readers are starting to crop up, and Keith Fahlgren has written about several of them:

Just in the last few days, details emerged of two new JavaScript ePub readers, rePublish from Blaine Cook (@blaine) and JSEpub (screenshot) from August Lilleaas (@augustl). These two new readers join @liza’s epubjs, which will be a year old on Tuesday. An improved version of epubjs powers the ePub Zen Garden, which helps “dispel

Pseudo 3D tricks from old computer games for all your Canvas needsYesterday

It is quite interesting to see how technology moves in circles. With canvas being the new fun toy to play with for creating browser-based games we have to find solutions to fake a 3D environment to be really fast (sure there is Canvas 3D but it is overkill for most games). The trick is to dig into the tricks arsenal of old-school game development on machines full of win like the Commodore 64 or Amiga.

Louis Gorenfeld some very detailed explanations on how to fake 3D including some of the formulas used in the days of 8 bit.

He is also working on some demo code which you can help him with by providing some JS/Canvas demos:

Fake 3D

PLAIN TEXT
CODE:
  1. current_x = 160 // Half of a 320 width screen
  2. dx = 0 // Curve amount, constant per segment
  3. ddx = 0 // Curve amount, changes per line
  4.  
  5. for each line of the screen from the bottom to the top:
  6.   if line of screen's Z Map position is below segment.position:
  7.     dx = bottom_segment.dx
  8.   else if line of screen's Z Map posi