Check this article out: iPad HTTP Debugging with Charles
This approach is extremely useful and has saved me a lot of time. Also, the same tutorial works for the iPhone too. Once you have Charles set up to work with your device there are two main benefits that will help you debug your work.
Viewing HTTP traffic to your iPad site – Great for ensuring resources aren’t returning 404, checking that everything is being cached properly, and no extraneous calls are being made etc…
Mapping production files to your local environment - This is great because you can be viewing your production site, but have Charles point to a JS/CSS file on your desktop so you can test changes on the fly.
When I animate elements in jQuery I often find myself looking for a little something more than the default “swing” and “linear” values. So to spice things up, I usually download this jQuery easing plugin. Once you include it in your project you have many more options to choose from.
Some animations need playfulness while others need polish. I find the easiest way to pick the right easing algorithm is to temporarily create a selectbox that displays on the page, so you can tweak and test the value on the fly. This is also useful if you want a designer’s input, they can easily see what’s available and pick the one they like best.
To streamline the process I created a simple jQuery plugin that generates a selectbox based on the $.easing object. It just spits out all the potential values, and then you can test them out in your animation without having to constantly update your code. You can find the extension here.
And here’s an example of the plugin in action testing an animation.
After switching over to a MacBook Pro from a PC, one of the OS quirks that bothered me was the zoom button (+) on every window. My initial inclination was that it would maximize the window, however, instead it behaves drastically different from program to program.
I read up on the issue, since I’m sure I’m not the first person to get confused by it, and was a bit surprised by the community feedback. Many people on message boards proclaimed that maximizing windows is obsolete and that they don’t miss it. They claim OSX is truly a multitasking environment, and if you embrace that you’ll forget you ever even used maximize. But to me that’s a load of crap and it’s an OS flaw. Why would pressing (+) in one window turn iTunes into a mini player, and in Firefox it maximize the window, but then in the calculator reveal a scientific calculator? Having windows scattered all of the screen is great and all, but I especially need maximizing because I’m on a 13′ MacBook Pro so I don’t have a ton of real estate.
Anyhow, after some googling I found a fix, RightZoom. With RightZoom most my windows (+) button now works as expected, and I also set up a shortcut option+command+e to maximize a window.
I hit a mobile Safari limitation recently when building an AJAX-y site on the iPad. If you load a ton of images eventually mobile Safari cuts you off and will display a [?] instead of the image. After doing some tests it appears that this limit is around 6.5 MB. Here’s a test page I made that attempts to load 20 500kb images. When opening this page on an iPad, 7 of the images don’t appear, even though in Charles they are returning 200 – success. I’m assuming this is similar to the way autoplay is disabled for the video tag on iPad/iPhone. Apple probably wants to make sure users don’t get overloaded with downloads when browsing on 3G.
Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation. Here’s another test page using the canvas tag, all the images should load.
Posted in Mobile, canvas, html5, iPad, javascript
|
Tagged: canvas, hack, image, img, iPad, max images, mobile safari, workaround
|
Here’s an example of a fractal tree using javascript and the canvas tag. I tossed this together a while back and finally polished it up. It’s based on a tutorial here. If you want to grab the JS and tinker with it yourself, you can find the source code here.
This post is deprecated since this technique doesn’t work anymore! But here’s a blog post by Matthew Congrove that get’s it working. I tested his technique with iOS4 and it looks good.
I previously wrote a post mentioning how you can’t use autoplay on the iPad. After further investigation it turns out autoplay is in fact possible on the iPad AND iPhone. First, here’s the background. If you try to use the autoplay attribute for the video tag it won’t work in Mobile Safari. This was intentionally disabled by Apple (and for good reason). The Safari Reference Library states:
In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() method is triggered by user action.
So it turns out the trick to get around this is to make the browser “think” that the user initiated an event. To do this you need to create a fake link, bind the play to the click event, and then dispatch the link’s event. Here’s a link to an example of this technique in action (note, this example is only intended to work on Mobile Safari), view-source to see the JS:
http://www.roblaplaca.com/examples/html5AutoPlay/
And now for the disclaimer: Apple prevented autoplay for a reason so it’s best not to abuse this technique for your user’s sake. Also since this technique is a hack there’s always the possibility that this won’t work in future releases.
Posted in Mobile, html5, iPad, javascript, video tag
|
Tagged: autoplay, dispatchEvent, html5, iPad, iPhone, javscript, tricks, video
|
Typekit now supports SVG fonts. This is good news if you want to use their services for an iPad site (since SVG is the only format mobile Safari supports). They mention there are still some bugs to work out, but it’s nice to see that they are flexible and working hard to stay on top of things. Here’s the announcement.
CSS Kinetic Typography. You’ll need a webkit browser for it to work, but this is really cool.
Jason Grigsby posted a cool article about a CSS-only solution to updating styles based on iPad orientation: http://www.cloudfour.com/ipad-orientation-css/
In my project I used JavaScript to detect the “orientationchange” event. Then I test if Math.abs(window.orientation) == 90… then I know you’re in landscape mode, and if not, portrait. I then add class “landscape” or “portrait” to the body and it inherits it’s styles accordingly.
Anyways, Jason’s method looks a lot easier. I’d love to work it into my current project except I probably would have to make quite a few CSS tweaks moving all the .landscape / .portrait specific code into separate style sheets. There’s always next time.
Posted in iPad
|
Tagged: css, iPad, orientation
|
While developing an HTML 5 video player for the iPad I ran into a few inconvenient quirks. Here’s a rundown of the issues I came across.
There’s no auto-play. If you try to play the HTML5 video player purely in JS without any event tied to it, it won’t work. (UPDATE: There is no working video autoplay attribute, however I just wrote a post about a workaround) Apple mentions why in the Safari Reference Library.
“In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad play event does not.”
After injecting the video tag via javascript you can’t put anything on top of the video. I tried adjusting the z-index and all sorts of hackery, but for the life of me I couldn’t get my custom controls to sit on top of the player unless the player was on the page first. That was really annoying because I had my HTML5 video class all set up to just inject the player into a container. It was all nice and self contained. Since it had to start on the page by default that caused a big mess and I had to do a lot of re-engineering to get it to work. Yuck!
If you do put an element on top of video, the video tag will devour any click events that occur… For example, I placed a play button and an image (“poster”) on top of my video. I wanted the button and poster to disappear when you click the play button. However when I clicked play it’s click event didn’t fire, but the movie did play. If I moved the button off of the video and clicked it, it worked fine. I still have to test if I can preventDefault on the video tag’s click event, but for now I just did a workaround instead. I moved the video to the left until the user clicks play. Once play is clicked the poster gets hidden and moves the movie over and plays. That worked fine.
The poster attribute only shows up if the movie isn’t loaded. I was hoping it would show up as the default frame for the movie before it played, but instead it just showed the first frame of the movie.
Rework offers honest insight into the ways 37signals stays successful. The advice is practical and the writing style is clear and concise. You may not be able to completely remodel your business to adapt to their suggestions, but there are plenty of “Ah hah!” moments. The book is bursting with examples on how to save time, raise morale, and keep your business healthy. Here are some of my favorite takeaways:
Fire the Workaholic - This is a great example of “Work smart, not hard”. The authors mention how the hero is the person who is already home because they were smart enough to figure out a way to get all their work done, rather than the one frittering away hours burning the midnight oil. While some late nights are needed to get the job done, when done consistently it’s unhealthy.
Be a curator – As the authors state: “What makes a museum great is the stuff that’s not on the walls.” Without any sort of editing process a project just gets weighed down by complications. Stick to the essentials.
Résumés are ridiculous – So true. Résumés are very carefully crafted and don’t give the full picture of who the person really is or why they want to work for you. The best way to see through this is to just talk to the candidate and see what skills they really have.
While some ideas seem unconventional, as you read the explanations you can clearly see the value of their unique approaches to common problems businesses face. The book is a quick read and full of useful suggestions. Check it out!
