Exactly one year ago today (although late at night) I started this blog up. Since that point I’ve managed to make a post almost every week. I decided that since my original theme was just a basic modification of a generic online one I would make my own custom theme for the site. This new theme is completely custom, and while it’s not done yet and missing some features I would like, it is mostly working and I think it looks better than the old boring white and blue one. Any opinion? Leave it in the comments.
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:
|
1 2 3 4 |
$('*').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.
Better flexible site layout with resize detection.
This is an update to a previous post located here: Flexible site layout with resize detection.
A while back I posted an article about a simple and quick javascript that would add or remove styles to whatever elements you want based on window width. This is a great way to make a single site compatible with multiple display types, everything from a phone to a desktop with an unreasonable large screen if you’d like. That code used an if statement, and was rather ineffective, I have since rewritten it to be easier to deploy to new themes and came up with this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var sizeable = 'body,#master,#content,#posts,#sidebar,#footer,#comments'; var sizes = {'450':'phone','750':'tablet','1000':'desktop'}; $(document).ready(function(){ $(window).resize(); }); $(window).resize(function(classes){ $.each(sizes,function(k,v){ var w = parseInt($(window).width()); if(w>=k){ $(sizeable).removeClass().addClass(v); } }); }); |
Snipplr: http://snipplr.com/view/60562/flexible-site-layout-with-resize-detection-now-improved/
Short, more concise, and easier to implement all you do is create an object with a simple {width: ‘style name’} format and the script will do the rest. It’s then up to you do add all the appropriate styles to your CSS document. This can of course all be done with CSS and the @media tag, but I prefer this method because it simple to deploy and it’s switches are much faster. As always leave a comment with any question or problems and I’ll get back to you as soon as I can.