Safari Rendering Issues

I’m compiling a list starting with these.

  1. Inserting SPAN tags via jQuery html method, might be jQuery issue but only happens in Safari (not Chrome, IE7+, Safari or Firefox). Solved by using a DIV.(display:block didn’t help either)
  2. Having overflow hidden elements shows up as a black box in next item
  3. ?wmode=transparent not added to YouTube video will have issues. This one is more common.

Targeting Safari (and Chrome) via css media query:

@media screen and (-webkit-min-device-pixel-ratio:0) {
....
}

For targeting Safari via JavaScript, check the user agent.

navigator.userAgent
Posted in Web Related | Tagged , , | Comments Off

Using jQuery Isotope to manage Social Input

I first came across the jQuery Isotope library in http://stackexchange.com/sites and was duely impressed.

This library was also utilised to manage all various social input via a single pag.

The CSS is fully customisable and works with jQuery 1.7+, a small fee of 7 bucks last I checked:
http://www.designchemical.com/blog/index.php/premium-jquery-plugins/jquery-social-stream-plugin-creating-a-network-wall/

Posted in Web Related | Tagged , | Comments Off

About IIS7 Compression and Performance Considerations

HOW:
http://blog.wassupy.com/2009/08/enabling-dynamic-http-compression-in.html

FAQ:
http://weblogs.asp.net/owscott/archive/2009/02/22/iis-7-compression-good-bad-how-much.aspx

Posted in Web Related | Tagged , , , , , | Comments Off

First Image to Finish Load Before Initialising Carousel

Using YepNope, which is optionally included in modernizr, task to avoid carousel starting up before first image finishes loading, creating a flashing image scenario.

yepnope.addPrefix('preload', function (resource) {
    resource.noexec = true;
    return resource;
});

var newCarousel = $('#carousel');
var preloadImg = 'preload!' + newCarousel.find('img:nth-child(1)').attr('src');

Modernizr.load({
   load: [preloadImg],
   complete: function () {
       newCarousel.tinycarousel({
           pager: true,
           interval: true
       });
   }
});
Posted in Web Related | Comments Off

Visiting WAI-ARIA (Web Accessibility Initiative, Accessible Rich Internet Applications)

Moving beyond the basic concepts such as good semantics and providing proper contrast on web pages (based on W3c checkpoints), I implemented different roles so that assistive technologies (such as screen-readers) can provide special treatment of regions marked with role application or document, prompted by this article and this.

Roles Reference:
http://www.w3.org/TR/wai-aria/roles#abstract_roles

Understanding state and properties (all aria-* attributes):
http://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def

Indicates that the element has a popup context menu or sub-level menu. (aria-haspopup):
http://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup

Identifies the element (or elements) whose contents or presence are controlled by the current element (aria-controls):
http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

Posted in Web Related | Tagged , , , , , | Comments Off

Enjoying the journey

There is nothing the busy man is less busied with than living; there is nothing harder to learn.

The rules and limits are those we set for ourselves. So be bold and don’t worry about what people think. They don’t do it that often anyway.

Slow Dance

Have you ever watched kids
on a merry-go-round?

Or listened to the rain
slapping on the ground?

Ever followed a butterfly’s erratic flight?
Or gazed at the sun into the fading night?

You better slow down
Don’t dance so fast

Time is short
The music won’t last

Do you run through each day
On the fly

When you ask “How are you?”
Do you hear the reply?

When the day is done,
do you lie in your bed

With the next hundred chores
running through your head?

You’d better slow down
Don’t dance so fast

Time is short
The music won’t last

Ever told your child,
We’ll do it tomorrow?

And in your haste,
not see his sorrow?

Ever lost touch,
Let a good friendship die

‘Cause you never had time
To call and say “Hi”?

You’d better slow down
Don’t dance so fast

Time is short
The music won’t last

When you run so fast to get somewhere
You miss half the fun of getting there.

When you worry and hurry through your day,
It is like an unopened gift….Thrown away…

Life is not a race.
Do take it slower

Hear the music
Before the song is over.

Posted in Random | Comments Off

Apple Mobile (iPad/iPhone/Safari) Limitations

Some readings for iPad/iPhone/SafariMobile limitations.

Avoid any image with dimensions more than 1024 x 1024 (not file size), as this will cause phone memory to tank.

Adhere to W3C (web open standards) as far as possible. (Some companies like FB/Google have proprietary properties which may not be recognised during validation, but this is not a major issue.) as well as other Technical Notes for preparing content for iPad.

Safari developer library article below. (more relaxed limits for image dimensions, but I would try to stick to the guidelines given in iOS Developer Library)

JavaScript execution time is limited to 10 seconds for each top-level entry point.
If your script executes for more than 10 seconds, Safari on iOS stops executing the script at a random place in your code, so unintended consequences may result
.
Other useful notes from Safari Developer Library.

CSS properties like opacity, gradient, text shadows affect performance adversely since they chew up memory for processing, something I’ve not used extensively enough to feel the adverse effects. Gradients are effectively converted into images so the advantage of saving bandwidth is offset with memory used for this operation. To reduce memory usage and prevent iPad choking up in general, I would reduce the dimensions of my sprites as far as possible and use progressive JPGs rather than PNGs as preferred image type. Some iPad HTML5 app experience shared here.

I’ve read many posts indicating background images not scaling properly but I’ve yet to encounter this (since I don’t use really large sprites)… the issue I’ve seen is far more random and wierd… the occassional swapping of background image for any other (seperate and random) image on the website! Impossible to replicate and problem clears up after a single refresh. This probably happens 1/1000th times but enough to piss the person viewing the site >1000 times a day (ye dats right… de boss). My only guess is that the iPad/iPhone doing funky stuff related to (low) phone memory. If you have other clue as to how this might occur, do comment. Not to mention… it’s kinda hard to submit a ticket for this to the apple guys since it can’t be replicated in a consistent or even low frequency level.

Update
More information from VGTech who wrote about the same image swapping issue for mobile Safari and other mobile browsers. Apparently this problem is much more easily replicable for iPhone, and less so for other mobile browsers.

Posted in Web Related | Tagged , , , , , , | Comments Off

CSS properties that can potentially be used to replace images

Three of the most useful CSS properties I found in replacing (background) images, reducing page load size.

1. Gradient

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffc703′,endColorstr=’#fe9c00′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffc703), to(#fe9c00)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ffc703,  #fe9c00); /* for firefox 3.6+ */

2. Shadow

-moz-box-shadow:    1px 1px 2px 1px #aaa;
-webkit-box-shadow: 1px 1px 2px 1px #aaa;
box-shadow:         1px 1px 2px 1px #aaa;

3. Text Shadow (Inner shadow imitation)

There is no true inner shadow property for text, so this is an imation, setting 2 ‘shadows’ 1px above and 1px below the text.

text-shadow: #888 0 -1px 0, #ccc 0 1px 0;

 

Posted in Web Related | Tagged , | Comments Off

iPad orientation script

<link rel='stylesheet' media='screen and (max-width: 1024px) and (orientation:portrait)' href='@Url.Content("~/Styles/cudo_tablet.css")' />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script>!function (doc) { var addEvent = 'addEventListener', type = 'gesturestart', qsa = 'querySelectorAll', scales = [1, 1], meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; function fix() { meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; doc.removeEventListener(type, fix, !0); } if ((meta = meta[meta.length - 1]) && addEvent in doc) { fix(); scales = [.25, 1.6]; doc[addEvent](type, fix, !0); } } (document);</script>

Requirements:
- Different styling when page is loaded in portrait or landscape, and the page should scale nicely in both scenarios.
- When user switches between landscape or portrait view on the tablet device, styling and scaling should change accordingly.

Posted in Web Related | Tagged , , | Comments Off

Windows 8 Application Development Reference

Get started link for developers.
http://msdn.microsoft.com/en-us/library/windows/apps/br211386.aspx

If you have the hardware for Windows8, here is the preview install
http://windows.microsoft.com/en-AU/windows-8/consumer-preview
ISO: (http://windows.microsoft.com/en-US/windows-8/iso?ocid=W_OFF_W8P_TechCenter_ISO_EN-US)

The tools  (VS 11 Beta)
http://msdn.microsoft.com/en-us/library/windows/apps/br211384.aspx

“WinJS” will be quite important in Windows JS development, but jQuery is allowed. I think most practical flow would be to develop for web first, since WinJS calls WinRT which cannot work on websites.
http://stackoverflow.com/questions/7437508/winjs-in-the-browser

Design guide to follow for submitting Metro-style applications to the store:
http://msdn.microsoft.com/library/windows/apps/hh779072

Downloading the PS assets here may give a better idea:
http://msdn.microsoft.com/en-us/library/windows/apps/hh700403.aspx

Posted in Web Related | Comments Off