Psysoul

FRONTEND // DIGITAL PAINTING

2014-10-07
by Psysoul
0 comments

iOS 6 / 7 Safari (iPhone, iPad) is not loading images when using Server Sent Events (Long-Polling)

Update: It looks like iOS 8 (or latest Safari) fixes this issue.

If you’re developing something which uses keep-alive connection you might have met with the problem: iOS Safari not loading the images properly (also loading indicator is always shown).

Expected behavior:
Page is being loaded, long-polling connection is started, every image is loaded fine.

Actual behavior:
Page is being loaded, long-polling connection is started, some images are not loaded.

So what is happening in the background?
Browsers limit the maximum connection to any given domain, in case of iOS 6 Safari this limit is 5. There is no problem with the limit itself, as if items (typically scripts and images) are finished downloading, the browser will load the next items. However in case of iOS Safari, the items waiting to be downloaded are not being put in a single queue, but it looks like rather Safari uses the round robin algorithm to determine which resources on which download line (1 to 5) will be downloaded. So if we have 7 resources the 1st and 6th resource will be downloaded on line 1, 2nd and 7th will be downloaded on line 2. The problem is when the first download line is allocated to a keep-alive connection such as a keep-alive connection to the server (Server Sent Events, Long-polling or similar), as the sixth image (or resource) will not be downloaded until the connection is closed, and usually it is not closed for a long time.

Result:
This can cause simple problems: images not loading, or fatal problems: deadlock, if the blocked line would load a javascript.
Same thing could happen with multiple tabs as well.

Reproduce the bug (or feature)
The issue can be easily reproduced by the following link on mobile iOS Safari (Safari on mac has no issue)
iOS Test

Solutions:
There are a couple of solutions to choose from, but not all of them is suitable for every case.

1. Move resources to a subdomain
This might the best solution for the given problem as this solves the problem by avoiding the browser limitation on domains, and it will improve the overall performance as well. Typical implementation is to serve all images / scripts from a subdomain like static.mydomain.com.

2. Defer the script which initializes the keep-alive connection
This might or might not be easy to implement, but if the keep-alive connection is started only after all images have been loaded there should be no problem at all. As per jQuery documentation however (window).load() has multiple caveats, so it is not recommended by itself, however I’ve seen some scripts which might address this problem. Please refer to jQuery docs on load event.
Defer keyword in the script might as well do the trick, however it might not be the proper solution as scripts are usually minified in production environment etc.

3. iOS 8
It looks like iOS 8 Safari has changed the way it is loading resources, so the problem is fixed on iOS 8 devices. At least on an iPad with 8.0.2.

More information:
Apple discussion
Another description.

2013-11-23
by Psysoul
0 comments

Responsive web design

I’ve created a presentation about responsive web design (mostly about processes and key points which need to be taken into account).

Best viewed using keynote. Please check presenter notes for more information about the slides.

Download responsive webdesign presentation (keynote, pdf, powerpoint)

Recommended sources, tools, books:
http://www.lukew.com

Tools:

http://www.hongkiat.com/blog/rwd-tools
http://bradfrost.github.io/this-is-responsive/resources.html

Recommended books:
Luke Wroblewski – Mobile First
Ethan Marcotte – Responsive Web Design

Both from 2010, but they give a nice overview.
Aaron Gustafson – Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement (2011)

Tim Kadlec – Implementing Responsive design (2013)
This goes into technical details..

2013-08-10
by Psysoul
0 comments

Netbook vs Notebook vs Tablet, which one is the best for you?

netbook
Choosing the right device can be a really tough decison if you want to achieve different type of goals. It’s possbile that the best solution is to have multiple, similar devices.
I wanted to buy a portable device. After reading opinions, hardware reviews and blogs for weeks I came to a final decision: I’ll buy an 9.7″ android based tablet with an external keyboard, or a cover with a built in keyboard. But this is not the whole story, jump to the end, to hear the end of it.

Key factors:

– Portability
– Hardware power
– External connectivity
– Price
– Battery time
– Operating system

Continue Reading →

2013-06-29
by Psysoul
0 comments

Photoshop CC – Creative Cloud

Photoshop creative cloud

Adobe Creative Cloud takes applications to the cloud. This means you can access and download your Adobe software anywhere, and install use on two separate machines, regardless of OS as long as the individual using the software is the same. The most important new aspect of CC is that the software will not be sold for a standalone fee, but a monthly fee. For complete plan you’ll have to pay $49.99 / month, for Single-app the fee is $29.99.

Full plan currently contains:

Photoshop? CC
Illustrator? CC
InDesign? CC
Dreamweaver? CC
After Effects? CC
Adobe? Premiere? Pro CC
Adobe Muse? CC
Acrobat? XI Pro
Adobe Audition? CC
Bridge CC
Encore?
Fireworks?
Flash? Builder? Premium
Flash Professional CC
InCopy? CC
Lightroom?
Media Encoder CC
Prelude? CC
SpeedGrade? CC

 Photoshop news:

Photoshop CC contains all features of Photoshop CS6 extended version (3d features and such), it contains lightroom, and also some new features, such as:

– New sharpen algorithm

– New upscale algorithm

– Camera RAW 8 and layer support

– Editable rounded rectangles

– Camera Shake reduction

– Improved 3d painting.

A great thing is that if you don’t like the new feature, it’s possible to use the legacy mode of the same tool.

Adobe CC is also more social, plans include 20 GB of cloud storage for file sharing and collaboration.

Behance is integrated into CC apps, so after one-time account linking you’ll be able to easily share your newly created drawings and designs on Behance. CC plans also include a free  Behance ProSite subscription, which is a personal portfolio site builder. (An example portfolio: http://assembledinc.com)

Pros:

– Get all software for complete plan (as compared to CS6 pricing) for pretty low price

– Get instant updates

– Social, Behance

– Can be used offline (online license validation needed every 30 days or 99 days based on type of subscription)

Cons:

– Somewhat buggy software at first (this should not be a problem as new versions come out).

– Needs license validation from time to time

Conclusion:

While Adobe Creative Suit 6 will be with us for some time, soon companies will have to change to creative cloud, which preferably means that professionals will not just have one tool, but the whole creative cloud package at hand. This means you’ll have the best tools at hand, and you can choose which tools fits the best for the actual creative work..