joestump.net

Today I’m at the iPhone Tech Talk in San Francisco, CA today. The goal of the iPhone Tech Talk is to teach developers the differences and quirks of developing web applications for the iPhone version of Safari.

• iPhone ignores all CSS screen types besides @media (e.g. @media { p.foo { text-weight: bold; } }). Sorry, that’s referred to as a “media query”, which appears to be CSS namespaces.
• 10MB limit for text (HTML, JavaScript and CSS). 8MB for TIFF, PNG and GIF, 32MB for JPEG and 2MB for animated GIF’s.
• 5 second limit on JavaScript execution.
• window.open() and target="_new" open new windows with an 8 window max. Interestingly, you can open 8 windows, but they might get paged out of memory, which means that when the user switches back Safari will need to refresh this screen.
• alert(), confirm() and prompt() all work fine (and look quite nice)
• iPhone doesn’t support showModalDialog() or print()
• Natively supports Excel spreadsheets, PDF’s, Word documens (YMMV), TXT and QuickTime audio and video. Does not support Java, SVG or Flash. Interestingly enough, it does support the <canvas> element.
• Obviously, it doesn’t support a file system so people can’t download files to the phone.
• Window sized to 980 x 1091 and then scaled to fit 320 (I assume 480 if in landscape). They treat .mobi domains differently; they’re not scaled. They scale it down immediately to fit 320/480.
• Use <meta name="viewport" content="width=320" /> if you want fine grained control. Other options include initial-scale (1 is the default), minimum-scale, maximum-scale (which limits zooming in and out) and user-scalable (yes/no allows/prevents zooming).
• Override text scaling with -webkit-text-size-adjust:none (other values include auto, which is the default and percentages).
• You don’t get hover styles, but do get mouse events (click, etc.). Remember to leave room for a finger (Daniel Burka mentioned this in his notes about designing the Digg iPhone application).
• Remember to box content for fingers. They look at the box text is in when doing intelligent zooming. For instance do <div><p>some text</p><p>some more text</p></div> will double tap nicely.
• They send click, mousedown, mouseup, mousewheel (and one I just missed). Also, blur, focus, load, unload, reset, submit, change, and abor. You can’t call blur or focus, but they are called when it happens. You just can’t explicitly blur or focus because they don’t want a lot of jumping around going on when you’re working on a small device.
• EDGE 70-135 Kbit/sec and bursts up to 200Kbit/sec, while WiFi is 802.11b/g and goes up to 54 Mbit/sec. YMMV will vary of course.
  • Send compressed content as the iPhone supports it.
  • Match image size to <img> height and width and minimize image use altogether if possible (e.g. use CSS and <canvas> if possible). Use CSS border, border-radius or Cavnas.
  • Use QuickTime reference movies (e.g. pull one move for WiFi and another movie for EDGE).
• Do not redirect automatically to an iPhone specific site.
• When creating applications use familiar layouts. They have familiar patterns on the developer website.
• Use familiar animations.
• Leverage existing libraries; iUi (by Joe Hewitt, which we used the prototype of for the Digg iPhone application), YUI, dojo and prototype.
• Integrate with the built-in apps when possible.
  • Any maps.google.com URL loads the built-in Maps application.
  • You can explicitly use href="tel:+1 (800) 555-1212" to launch the telephone application.
  • Of course the mailto:foo@example.com?subject=subject+here&body=my+message. Also supports “cc”.
• Use -webkit-border-radius: 8px to get the native rounded record border listings you see elsewhere.
• Interesting that they use onclick events on the li’s (which have that -webkit-border-radius on them) instead of an anchor tag.
• Hide the address bar with window.scrollTo(0,1).
• Go to bugreporter.apple.com to report iPhone bugs. Do you guys provide any information on when you’ll fix a bug or add a feature? “Um, no.” (Duh)
• Interaction design tips
  • The mouse does not equal the finger. You don’t have multiple buttons, scroll wheels, etc. There’s no hover, rollover, scroll bars, etc.
  • Avoid an entirely interactive website; minimize animation, avoid distracting the user from the primary task, avoid hiding functionality behind rollovers.
  • Don’t require users to enter information; before something useful happens or something valuable happens.
  • Prevent zooming and constrain to vertical scrolling only.
  • Minimize text entry; use lists, pickers and use cookies for user information and where users where the last time they used the application.
• Optimize for bandwidth; design light-weight pages, minimize the use of large graphics.
• Optimize for user’s time; keep things clean, use standard iPhone paradigms, get users to primary content as quickly as possible.
• Oohhhh “Managing Content and Synced Data for iPhone”. My interest? It be piqued. Leveraging current content on iPhone, producing iPhone friendly video and managing portable user data.
  • *sigh* This hs pretty much nothing to do with managing any kind of data as one might expect. I was hoping for something about Google Gears maybe or accesing content on the phone? No idea, but something more interesting than this. Instead I’ve been reading about a guy who got 10 years for selling grow lamps.

I won’t spend a lot of time covering the things I like about the iPhone as they’re echoed just about everywhere else on the internet. I’ll briefly cover what I like, cover what I don’t like in a bit more detail and sum up my feelings at the end.

• The screen is jaw droppingly gorgeous.
• This is hands down the best iPod Apple has produced yet.
• The multi-touch screen is absolutely a revolutionary input device that cannot be described, but must be experienced.
• The mail application and web browser are fully functional and work great. For example, my designer sent me a PDF mockup via email, which I opened on my iPhone without issue (multi-touch zooming worked on the large PDF, which was sweet).
• Clicking on a link to a YouTube video launches the YouTube application and starts playing the video.
• EDGE isn’t as slow as people make it out to be. Stocks, weather, maps and iPhone optimized websites load up in a respectable manner. Forget about watching a YouTube video though.
• When moving the text cursor around it zooms in just above your finger because you’d never be able to see where the text cursor is otherwise. Additionally, it auto-capitalizes after punctuation.

There are quite a few things that I don’t like about the phone, which is typical for first generation Apple hardware. It’s clear that the operating system was rushed and that there are bugs, but I fully expect updates to be pushed out in short order.

• My biggest complaint is that the keyboard is corrective rather than predictive. In other words if I type “tomo” it might suggest “tomb”, but wouldn’t predict I was typing “tomorrow”. I can’t stress how annoying this was coming from a predictive text phone.
• The software is buggy. I’ve had to even go so far as to reboot it to get things back on track. Again, this will be fixed soon I’m sure.
• No landscape keyboard sucks for people with big meaty fingers like me.
• No IM application is jaw droppingly retarded. Another thing I expect to be pushed in an update in short order.
• EDGE is slow. I know I just said it was acceptable, but it’s only acceptable for some things. I’ll upgrade immediately after a 3G version is available.
• I dearly miss my scroll wheel from the regular iPod. Sure flicking stuff is fun to look at, but the navigation aspect of the scroll wheel blows the gestures away. For instance, I flick down to an artist, click play and then have to hit a tiny little arrow to go back.
• Navigation to commonly used tasks is tedius. Just getting to the phone’s keypad takes 3-4 taps. I have no idea what they could do to fix this, but it seems cumbersome to switch around between apps. What would be hot (maybe) is to have a Alt+Tab type feature similar to switching windows in Safari on the iPhone.
• You can’t open links in new windows in Safari.
• If Safari is this great platform for developing iPhone applications why the hell didn’t they include some sort of basic JavaScript framework, CSS, images, etc. as an SDK for creating said applications to look, feel and act like regular iPhone applications? Either release it publicly or, better yet, build it directly into the version of Safari on the iPhone.
• No games. Seriously? This will be best user interface for solitair anyone has ever seen.
• The SMS utility isn’t very snappy to load.

I think that just about covers it. Overall, it’s better than any phone I’ve ever used. I fully expect the software kinks to be fixed periodically over the coming months and 3G phones within a year. Post any questions in the comments and I’ll besure to reply.

I’ve been putting together a new file server for personal use that I plan on hosting on my DSL at home (7mbit/896kbit). I have Gig-E inside my condo and just shy of 1mbit from outside my condo over a static IP address. More than enough bandwidth to serve my personal email, my website along with a few friends’ sites and email. The next question, of course, is what to do with the hundreds of gigabytes laying vacant on the server.

Being that I run OS X 10.4 and so do my other friends the obvious solution was WebDAV over SSL. I wanted to be able to mount my $HOME/public_html over SSL using PAM for authentication. Surprisingly, this actually works with a few hacks.

List of Ingredients

1. An installation of Debian GNU/Linux running Apache2 (specifically apache2, apache2-common, apache2-utils, and libapache2-mod-auth-pam)
2. Everyone’s favorite scheduler, cron
3. A text editor

Enabling/Disabling the appropriate Apache2 modules

Using the script a2enmod you’ll want to enable auth_pam, dav_fs, dav and ssl. These are the basic modules required to get this setup going. You might also be interested in installing the php5 module, etc. I won’t be covering that in this section. You will actually want to disable the userdir module. I did this mainly to disable WebDAV from working under the non-SSL Apache2 instances. I now include these files directly from my SSL <VirtualHost> configuration.

Setting up the SSL <VirtualHost> in /etc/apache2/sites-available/default

NameVirtualHost *:443
<VirtualHost *:443>
    SSLEngine On
    SSLCertificateFile /etc/apache2/ssl/apache.pem
    DocumentRoot /var/www/
    Include /etc/apache2/mods-available/userdir.load
    Include /etc/apache2/mods-available/userdir.conf
</VirtualHost>

Setting up the WebDAV in /etc/apache2/mods-available/userdir.conf

<IfModule mod_userdir.c>
    UserDir public_html
    UserDir disabled root

    # Make sure to chown www-data:www-data this file
    DAVLockDB /var/lib/apache2/DAVLockDB
    <Directory /home/*/public_html>
        AllowOverride FileInfo AuthConfig Limit
        Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
        DAV On

        AuthPAM_Enabled On
        AuthPAM_FallThrough Off

        # This is so when you edit files over DAV they
        # aren't ran through pre-processors (ie. PHP)
        ForceType text/plain
    </Directory>
</IfModule>

Allow www-data to view /etc/shadow

By default only root and those in the group shadow can view /etc/shadow. Add the user www-data to the group shadow. Now is probably a good time to restart apache using /etc/init.d/apache2 force-reload if you haven’t already.

Setting up the $HOME/public_html

In your $HOME you’re going to want to create public_html and chown $USER:www-data public_html along with chmod 775 public_html. This allows both $USER and www-data to modify the contents of public_html.

Editing $HOME/public_html/.htaccess

After this cd into public_html and open up .htaccess and add the following lines to it (replace $USER with whomever’s $HOME you’re putting this in).

AuthPAM_Enabled on
AuthType Basic
AuthName "PAM"

# If the user you're creating this for is /home/jstump then
# replace $USER with jstump
require user $USER

This is pretty key as it allows you to keep authentication for your WebDAV and SSH tied together. It also specifies which user can log into this particular WebDAV share. If you don’t put require user $USER in there then anyone can log into anyone else’s share. That’s not good.

Fixing permissions

The problem with this setup as of now is that if you create a file from the mounted WebDAV folder in OS X it’s created as www-data and vice versus if you’re logged in via SSH.

#!/bin/sh

# Loop through all users and chmod/chown files and directories in $HOME/public_html
# I'm sure there is a better way of doing this.
for i in `ls /home`
do
    find /home/$i/public_html -type d -print -exec chown $i:www-data {} ;
    find /home/$i/public_html -type d -print -exec chmod 775 {} ;
    find /home/$i/public_html -type f -print -exec chown $i:www-data {} ;
    find /home/$i/public_html -type f -print -exec chmod 664 {} ;

    # I did this to keep users from editing their .htaccess
    chown root:root /home/$i/public_html/.htaccess
    chmod 644 /home/$i/public_html/.htaccess
done

Set this up to run in root’s cron every minute. This will fix permission problems so that, after sixty or so seconds, you can edit files via SSH or your WebDAV mount.

Connecting to your WebDAV share from OS X

1. Open a Finder window
2. Hit CMD+K
3. Type in https://my.server.com/~username for the location
4. Click “Connect”
5. Click “Continue” when it asks about the boned SSL certificate (install a valid SSL certificate to avoid this annoyance)
6. Enter your username/password when prompted

Known Issues/Problems

1. Apache can read/write to all files in $HOME/public_html
2. Apache can read /etc/shadow
3. Requires a cron job to fix permissions
4. You lose the ability to have publicly accessible http://www.mysite.com/~username URLs

Conclusion

I’ve added $HOME/www/www.joestump.net along with my other sites and can now edit them through Finder or Term from my Macs at work and home. It’s all done over SSL and authentication is done via PAM, which means it’s fairly secure and easy to use. Personally, the few sacrifices are worth it to me to have this kind of setup. It also allows me to, say, save media files from work to home and vice versus in a pinch. I could also use various backup software, such as rsync, to sync and back up my various applications and data from computer to computer. Overall, I’m pleased with the outcome.