Fat Folder Design | Programming

November 12, 2011July 31, 2014

Improve iOS application responsiveness

If you’ve been working on an application (either web based or wrapped on in a cocoa layer) and you’ve noticed that it just seems slower than a native app then your not alone. I was experiencing this a while ago and wanted a decent way to fix it. After reading up the iOS developer guidelines and playing around a bit I found the reason, and a fix.

The cause of the problem is simple, the system is waiting. When you tap the screen it fires off a series of events, but not back to back. The <code>onclick</code> event, the one that most the web uses, it delayed a bit. This is done so the system has a chance to check for various gestures, primarily double click which zooms. The firing order goes something like this:

touch start, as soon as your finger touches the screen.
touch end, as soon as your finger leaves the screen
mouse down, no less than 350 milliseconds after touchstart
mouse up, about 5 milliseconds after mouse down
click, 1 millisecond after mouseup

I’ve uploaded a page that shows the delays, you can check out the Fire Order Example here. There are two solutions to this, first is the overkill method, simple fake a click every time you touch the screen, something like this:

$('*').bind('touchstart',function(e){
	$(this).click();
	e.preventDefault();
});

$('*').bind('touchstart',function(e){

$(this).click();

e.preventDefault();

});

That should work just fine, but personally I think it’s a bit overkill, instead I usually declare each click area with an initial control init. If your building an app with a lot of different inputs and want to clare them on the button using the inline <code>onclick=””</code> trigger than that might just me your ticked if you want a bit of speed improvement. Now I havent’ tested that code but it should work, if not I can test a trigger function that will work, just leave a a note in the comments.

November 1, 2011July 31, 2014

rgbaColorPicker updated to version 1.2

Another update to my color picker that adds a few feature to flesh it out. Now, you can manually enter colors if you want (sometimes it’s just easier if you know the color’s code to type rather than poke around and find), and when you select a color (or one is selected automatically, like when the script is first loaded and it selects the inputs value as a color) the cursors move to the color positions. I also disabled the autorun as it was buggy at best and didn’t really add much to the picker anyways, and of course, as with any update that changes implementation I updated the example docs.

Like always I have uploaded the newest version to github, you can find it on the the rgba color picker github project page or, if you have no interest in forking it or, you can simple download a copy on the rgba color picker git hub download page.

This will probably be the last update for a while, as with these final features I can’t think of anything else I want to implement, of course suggestions are always welcome either here or on git hub.

October 22, 2011July 31, 2014

rgbaColorPicker Update – v1.1

Friday I went through and updated the color picker to version 1.0, then shortly after to version 1.1, to keep things simple I’ll just combine both updates into a single post. First a feature breakdown.

Picker now changes side to stay within widow.
Turned script into a proper jQuery plugin.
Consolidated single file and external stylesheet versions into one file.
Fixed CSS bug involving color display box.
Made index.html more useful.
Fixed a bug in the new read me formatting
Clicking outside color selector box now closes it.
Opening selector box no longer reflows document.
Fixed a bug causing selection mode to be “stuck” when you moved the mouse out of a selector area.
Moved colorbase datauri image into stylesheet.
Included the stylesheet into the plugin (single file now).
Included minified version of the script.
Updated index.html and stresstest.html as needed.

Quite a list there. The basics are that it’s now a jQuery plugin, as such it can be called different, and passed with certain options. Those options are for an external stylesheet, and a callback. The external stylesheet will load a linked file at that location instead of using the default built-in one, and the callback will fire every time the color is changed. The index.html makes use of this in the new rainbow boxes, they container box changes whenever to color changed.

Also some stuff that probably should have been in v0.8 were finally added, it acts like a real pop-up now, no document reflow, and when you click outside the box it closes, also an annoying bug that I finally diagnosed (and then promptly squashed).

The new, updated version is up on GitHub, you can go to the rgbaColorPicker GitHub Page if you want to fork it or the rgbaColor Picker GitHub Download page if you just want to download it. Alternatively you can check it out on the new rgbaColorPicker jQuery plugin page. If you just want to see it in action you can at the links below:

rgbaColorPicker Example

rgbaColorPicker Stress Test

If you find any bugs you can fork it, but if you don’t want to be bothered fixing them yourself you can post them here or on the rgbaColorPicker GitHub Issues section and I’ll take a look, same for if you have a feature request, I’ll see what I can do about incorporating them.