New css3 3d demo inspired by portal.

Portal 2. have you played it? if yo haven’t go and buy it from steam then come back here.

If you have, then you might have noticed the awesome effect from the main menu, the rotating cubes.

I was so impressed by it that I had to try and replicate it. (click on image to see the demo)

Couple of things I learned :

  • You can bind a handler to “webkitTransitionEnd” and execute code when the transition on that element finishes.
  • It’s very hard to “reset” transitioned elements  back to their original state, if you don’t want that reset to be animated. You have to manually override -webkit-transition-porperty , reset the stage (for example rotate(0) ) and then set the transition property back to what it was.
  • Facebook caches the shared pages, so if you put a facebook “like” button, and then change the page’s title, of meta, you have to  ”reset” the link. the best/only way to do that without changing the url is facebook url lint.
  • Css3 3d is fun! go experiment with it, it’s gpu accelerated where ever it’s avaliable be it mobile or ipad or mac, and it’s looking super smooth! go crazy

Style the <style> element ? mind = blown

This has got to be the weirdest thing I’ve seen this week! (it’s very cool nonetheless)

Turns out, that you can style almost any element.

Be it <head>, <style> , <title> , whatever.

DEMO

You then can add the html5 “contenteditable” attribute, to make these blocks editable.

And what you get is a live updating <style> and <title> blocks.

I’m starting of thinking about creative uses for this, there have got to be some!!

If you have an creative Idea on how to use this, feel free to share in comments.


IE9 is better then firefox and chrome

To some of you who follow my blog, the title of this post may sound familiar. 2 years ago I posted with a similar title, only it was about ie8.

Microsoft PR dpt. has done it again. They’ve released a comparison chart, between their brand new IE9, and other browsers such as firefox and chrome.

And for one think it has to stop. Their comparison is full will half-truths and whole lies, and coming from a company that made web-developers suffer and scream in rage, it’s absurd.

IE9 is a better browser then all other IEs. It’s faster, more standard driven and all in all a decent browser. BUT (and it’s a big but) it’s not a modern browser and it’s not by far, better then Firefox or Chrome.

This recent post made me create this :

The truth behind IE9 comparison chart

Yes it may sound whiny to some, but there’s no denial that somebody at Microsoft has failed to check all the fact before posting this.

iPad simulator in HTML and JS

Let me tell you what a crazy week it’s been regarding my iPad Simulator

A little background

I’ve thought about creating the iPad simulator shortly after I bought my iPad. I was fascinated by the UI and wanted to see if I can recreate it.

This isn’t the first online simulator I’ve built, before this, was a Nokia n97 simulator, also built with JS + CSS  (http://nokian97.co.il)

I’ve uploaded the iPad simulator a while ago, started playing with it, adding apps  (google maps, safari, photos etc’) , and I was getting 5 hits daily (most of them me from work)

iPad Simulator with html + css + javascript (jQuery)

Forrst

I joined Forrst and decided to share it with the forrsters , and I got amazing feedback. And people there told me they want to hack on it, so I’ve released the code on github.

W3c Israel

Some weeks after, I went to a W3C Israel meeting on web app development and after a short hackaton (results of which you can see  here and fork on github ) I’ve showed the guys there the iPad simulator among other things. They told me I have to publish it somewhere. I’ve sent an email to ajaxians@ajaxian.com and went to sleep.

Morning After

I wake up, and I see that someone mentioned me on twitter (I’m @altryne) and he talked about my iPad simulator. I went and checked google analytics and I was amazed to see that while I was sleeping more then 2000 unique hits arrived at my site.

Twitter

Turns out my site was a hit on twitter, with guys like Dylan Schiemann (@dylans), Jesse Newhart (@JesseNewhart),Dion Almaer (@dalmaer),Cameron Moll (@cameronmoll) and a lot more – thanx a lot guys :) I’m glad you like it.

Websites and blogs

Like I said, I never expected this kind of embrace by the community, and I certainly was surprised to see my link in the guardian tech blog and on Developer.Yahoo.com tech blog and I was proud.

Also I was featured on habrahabr.ru , techweb.com.cn, Ycombinator, macmagazine.com.br and event 1 youtube video!

What’s next?

Well I read all the comments I could find, including the trolling and I have a ton of stuff to do.

One thing I was thinking about, is showing a web demo of some iPad applications, and ask developers to provides those demo’s, because screenshots are too static :)

If your’e an iPad app developer and want to see your app in the simulator, contact me : alex [at]  alexw.me

I’m also gonna finish my photos app and it’s gonna be awesome! Stay tuned.


jQuery philosophical .is() extention

Love little snipplets that make your life better.

This snipplet by @doublerebel on github, extends the .is() function in jQuery, so that if it’s used without parameters inside, will return if the DOM has been found on page

Consider the following

if($('#somediv').is()) {
$('#somediv').ajax....
} else{
console.log('no ajax placeholder')
}

The script itself is pretty straightforward, so straightforward in fact, that one want’s this implemented in jQuery core

(function($) { $.fn.extend({ _is: $.fn.is, is: function(s) { return s ? this._is(s) : !!this.length; } }); })(jQuery);

You can fork this on github