Altryne's Blog » Personal http://alexw.me Not everyday I get to learn "nothing" Sat, 28 May 2011 20:29:51 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to make webapps fullscreen again on iOS 4.3 – UPDATEDhttp://alexw.me/2011/05/quick-note-on-ios-web-apps/ http://alexw.me/2011/05/quick-note-on-ios-web-apps/#comments Sat, 28 May 2011 20:01:27 +0000 Altryne http://alexw.me/?p=313 When apple released iOS 4.3 they bragged about faster javascript engine and many blogs around the web cried wolf.

Many people have felt that apple intentionally bringing the web apps down, to make native apps the ones a user chooses.

When 4.3 was released I have also noticed then a lot of webapps I have had ‘installed’ on my homescreen seem to have become plain shortcuts.

They would open up in safari instead of on their own like before, they weren’t full screened and they would refresh on beginning.

Basically this mean  that saving a page to the homescreen just became a bookmark on the homescreen rather then a full “webapp” like before.

Many great  webapps I used on daily basis like thomas fuch’s everytimezone.com

Even in his screen shot fo the app you can see it’s fullscreened.

BUT THEN…

I read about a gamesforcats.com site and went there to install an app for my cat. Turns out  that it’s a web app. And it’s fullscreened. WTF right?

I went on to investigate.

Turns out apple added a new meta tag that specifies whether this app is webapp capable or not!

<meta name="apple-mobile-web-app-capable" content="yes" />

This was new and before adding a meta of

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

did the trick of making a website to a web app.

Sad that this was quetly done and broke all other webapps out there , apps that didn’t update or didn’t know about the new method.

But I’m glad my ability to make “webapps” is back!!

UPDATE :

Turns out this “webapp” mode is also discoverable by JS :)

window.navigator.standalone

So you can actually know if a user runs your app in fullscreen and if not bug him to do so by all sorts of pointy arrows and notifications ;)

]]> http://alexw.me/2011/05/quick-note-on-ios-web-apps/feed/ 5 New css3 3d demo inspired by portal.http://alexw.me/2011/04/new-css3-3d-demo-inspired-by-portal/ http://alexw.me/2011/04/new-css3-3d-demo-inspired-by-portal/#comments Sat, 23 Apr 2011 18:03:19 +0000 Altryne http://alexw.me/?p=296 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
]]> http://alexw.me/2011/04/new-css3-3d-demo-inspired-by-portal/feed/ 3 Style the <style> element ? mind = blownhttp://alexw.me/2011/03/style-the-style-element-mind-blown/ http://alexw.me/2011/03/style-the-style-element-mind-blown/#comments Mon, 21 Mar 2011 09:52:28 +0000 Altryne http://alexw.me/?p=295 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.


]]> http://alexw.me/2011/03/style-the-style-element-mind-blown/feed/ 2 iPad simulator in HTML and JShttp://alexw.me/2011/01/ipad-simulator-in-html-and-js/ http://alexw.me/2011/01/ipad-simulator-in-html-and-js/#comments Mon, 10 Jan 2011 18:55:12 +0000 Altryne http://alexw.me/?p=270 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.


]]> http://alexw.me/2011/01/ipad-simulator-in-html-and-js/feed/ 105 jQuery philosophical .is() extentionhttp://alexw.me/2010/12/jquery-philosophical-is-extention/ http://alexw.me/2010/12/jquery-philosophical-is-extention/#comments Sun, 12 Dec 2010 10:03:38 +0000 Altryne http://alexw.me/?p=248 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

]]> http://alexw.me/2010/12/jquery-philosophical-is-extention/feed/ 5 All you knew about javascript animation is wronghttp://alexw.me/2010/12/firefox-problems-with-javascript-animation/ http://alexw.me/2010/12/firefox-problems-with-javascript-animation/#comments Sun, 05 Dec 2010 22:02:39 +0000 Altryne http://alexw.me/?p=242 Ok, atleast all I knew. And it’s in firefox, IE8 and Opera. But still… bare with me :

A little history about browser rendering. The are 3 browser events that happen depending on stuff you change dynamically with JS in DOM.

  1. restyle – recalculation of style for affected DOM element.
  2. reflow – recalculation of flow and all the Elements that are affected by your change.
  3. repaint /redraw - re-rendering of the element in it’s new position, style, whatever you changed.

These “events” happend each time you change something. I’m going to talk about repaint/redraw today.

When you animate a div for instance, each step in the animation, each frame if you will, fires a repaint function in the browser, that makes sense,  as the browser has to show us the updated position/style/whatever of the element.

You would suspect that a browser only repaints the individual animated element, and maybe its surrounding and dependent elements. And you would be right.

So why does some of your animation on the more heavy sites stugger in firefox and IE and Opera when they work like a charm in webkit browsers? Faster browser? Faster Rendering Engine?

All these are a factor, but there’s a hidden factor that you didn’t know about.

float:left;

“OMG? WTF? float? what’s float has to do with animation ??? Alex stop beating around and explain this to me” you must be saying.

It turns out that whenever you animate a div on a page, even if it’s position:relative, that if one of it’s ancestors has a floating (left or right), firefox/opera/ie8 fire a repaint function on ALL THE ANCESTORS content. Not Only the animated div.

So if for instance you have a tiny div that animates every 2 seconds, for every frame of that animation, firefox/opera/ie8 repaint the entire DOM tree up until the floated ancestor.

I don’t know wheather it’s a bug, or this is just how it’s suppose to be. But facts are facts.

I’ve created a small jsfiddle in order to test this.

http://fiddle.jshell.net/JeGKR/10/show/light/

The css3 stuff is there only to make the content heavy so you really notice the animation changes.

Run the animation with task manger open. Then click “add float:left” and see the difference. If you have a fast computer, click on “add content” a couple of times.

Workarounds :

There’s one workaround I’ve read about and it’s just disabling float:left on the ancestors up until the body Element. This won’t be applicable in many many cases I’m afraid.

I’ve yet to find another solution beside putting all the animated elements in a non floated container and positioning them accordingly.

Notes : if you want to see the redraw regions in firefox by yourself, you can download and install  firebug paint events

Credits : This post is a partial translation/adoption from Sergey Chikuyonok – all credits on this find go to him.

https://addons.mozilla.org/en-US/firefox/addon/9620/Fire
]]> http://alexw.me/2010/12/firefox-problems-with-javascript-animation/feed/ 2 Garbage collecting in IE with ajax heavy applicaitonshttp://alexw.me/2010/12/garbage-collecting-in-ie-with-ajax-heavy-applicaitons/ http://alexw.me/2010/12/garbage-collecting-in-ie-with-ajax-heavy-applicaitons/#comments Sun, 05 Dec 2010 16:44:09 +0000 Altryne http://alexw.me/?p=233

We have a very heavy Ajax application on one of our sites. It reloads block of html on the site every 5 seconds or every user click, so obviously it’s intense.

I was approached by our QA and he told me that he’s computer freezes after some time the site is running.

And I started to investigate. Turns out we haven’t been collecting our garbage ourselves, and the “good” browsers took care of that for us.

Not IE though. IE was stuck after some 5-6 requests, and would just come to a halt on page.unload()

Manual garbage collecting to the rescue.

_temp = $.ajax(/* get loads of html data from ajax here*/);
_temp = _temp.replace(/*apply needed transformations before outputing code to the page*/)
$('#updated_div').html(_temp);
//garbage collecting - very important
delete _temp;

As you can see, one small line of code can help so much to your heavy Ajax application in browsers like IE.

]]> http://alexw.me/2010/12/garbage-collecting-in-ie-with-ajax-heavy-applicaitons/feed/ 7 Photoshop cs5 content aware scaling Horsiehttp://alexw.me/2010/05/photoshop-cs5-content-aware-scaling-horsie/ http://alexw.me/2010/05/photoshop-cs5-content-aware-scaling-horsie/#comments Tue, 04 May 2010 11:44:57 +0000 Altryne http://alexw.me/?p=201 Apparently,  photoshop cs5 is awesome at genetics, this happend today (was testing content aware scale)

The horse, by cs5 content aware

Original picture, before “content aware scale” after the jump

Original Horse Image (from google search)


]]> http://alexw.me/2010/05/photoshop-cs5-content-aware-scaling-horsie/feed/ 2 Jquery animation effects make flash flickerhttp://alexw.me/2010/03/jquery-animation-effects-make-flash-flicker/ http://alexw.me/2010/03/jquery-animation-effects-make-flash-flicker/#comments Mon, 01 Mar 2010 15:22:55 +0000 Altryne http://alexw.me/?p=196 Had this problem at work.
Pissed me off, until I found a solution thanx to http://joesong.com
Just add overflow:hidden to the element animating and your’e done.

Read the full solution HERE

]]> http://alexw.me/2010/03/jquery-animation-effects-make-flash-flicker/feed/ 2 Cosmos perspective – earth is tinyhttp://alexw.me/2010/02/cosmos-perspective-earth-is-tiny/ http://alexw.me/2010/02/cosmos-perspective-earth-is-tiny/#comments Sat, 20 Feb 2010 18:02:19 +0000 Altryne http://alexw.me/?p=165 Following my previous post, there was one image that cought my attention,

and I decided to make a interactive presentation with it.
Just click play, or go to “more” and click “autoplay”
enjoy.

Some Perspective on Prezi


I’ve cut all the planets and stars in photoshop to place them in the amazing “prezi” surface and create an interactive showcase on star perspective
On perspective, following this image :

Some perspective for you

Some perspective for you

]]> http://alexw.me/2010/02/cosmos-perspective-earth-is-tiny/feed/ 2