Making a Morning Checklist out of HTML

toby ho — Fri, 25 Feb 2011 20:42:49 -0600

While Mark Frauenfelder’s morning checklist was inspiring and relevant for me, the solution didn’t work for me because

It does not save the trees!
An iPhone would work better for me best because I always have it with me.
It’s not made with HTML5.

So right. If you are an iOS hacker you’d probably reach for xcode right away, but for a task like this, it’s simply orders of magnitude faster to do using plain HTML. Let’s get started. First thing to do is fire up a text editor and type in your check list of a <ul> of <li>'s with <input type="checkbox">'s in each of them.

<!doctype html>
<html>
<head><title>Morning Checklist</title></head>
<body>
<h1>Morning Checklist</h1>
<ul>
<li><input type="checkbox"/><label>Change</label></li>
<li><input type="checkbox"/><label>Contacts</label></li>
<li><input type="checkbox"/><label>Potty</label></li>
<li><input type="checkbox"/><label>Rinse Mouth</label></li>
<li><input type="checkbox"/><label>Laptop, wallet and keys</label></li>
<li><input type="checkbox"/><label>Shoes & Coat</label></li>
<li><input type="checkbox"/><label>Backpack</label></li>
</ul>
</body>
</html>

Cool, this is functional, but will look like this

Okay, that doesn’t look great. You’ll need to pinch zoom in order to see anything. What we need to do is to format the web page specifically for the iPhone screen. To do that, add this line inside of your <head>

<meta name="viewport"
content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0" />

This will tell your iPhone to set the page’s viewport to exactly the same as the width of its screen, and also to disallow pinch to zoom. The result is this

Okay, nice! Now let’s make it look non-ugly with some CSS. First, change to the font to something san-serif. Take away the bullet points from the list items, remove the unnecessary margins and paddings. Make the font bigger and the checkboxes themselves bigger because we want them and each row to be big enough for Mr. Fatfinger. While we are at it, might as well stripe the rows, you can actually do it using just CSS in a non-crappy browser such as Mobile Safari. After some playing around, I added the following styles

<style>
body{
    font-family: Helvetica, Arial, Verdana, sans-serif;
    padding: 0px;
    margin: 0px;
}

ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

li{
    clear: left;
    font-size: 25px;
    padding: 3px 0px 3px 10px;
    margin: 0px;
}

li input{
    float: left;
    margin-right: 15px;
    width: 25px;
    height: 25px;
}

li:nth-child(even){
    background-color: #eee;
}

h1{
    font-size: 20px;
    padding: 0.2em 0.5em;
    border-bottom: solid 1px #aaa;
    background-color: #eee;
    margin: 0;
}
</style>

stick these inside the <head> and now it looks like

Great! Are we done? Well, there’s one usability problem: you have to click on the checkbox itself to check it. Id’d be nice if you could check it by click anywhere on the row. Let’s drop some Javascript on this

<script>
Array.prototype.slice.call(document.getElementsByTagName('li'))
    .forEach(function(li){
        var cb = li.childNodes[0]
        cb.addEventListener('click', function(e){
            e.stopPropagation()
        })
        li.addEventListener('click', function(){
            cb.checked = !cb.checked
        }, false)
    })
</script>

Note: if you see me writing some non-IE-compatible code that’s because I am only writing for the iPhone. Nice, now you can click anywhere on a row to check or uncheck the box. Are we done? Now let’s add it as a shortcut on your Home Screen. To do that, click on the + sign on the bottom middle of the screen, and tap on Add to Home Screen. Edit the name of the button if you need to (I called it Checklist), and tap Add. Now you’ll get

If you tap on it, the checklist opens right up. But, it’d be nice to get rid of the browser chrome and buttons, that way we have less clutter and it also looks more like a real app. To do this, stick this

<meta name="apple-mobile-web-app-capable" content="yes" />

into your <head>. Unfortunately, you’ll have to re-create your Home Screen button, so delete it and go back and create again. Now, when you tab on it you’ll get

Great, we are almost done! One more thing though. Now that we are serving the checklist from a web server, if it goes down or we lose our internet connection, we won’t be able to access it. Granted this will be rare since I’ll be at home when using this, but it can happen. So we use HTML5’s applicationCache to make this page offline capable. To do this, we’ll make a cache manifest file and point our HTML page to it. First, in the <html> tag of the file add the manifest attribute like so

<html manifest="/cache.manifest">

Next, create the cache.manifest file in the same directory. With the following content.

CACHE MANIFEST
index.html
# version 1

the cache manifest is in a simple text format that lists all the resources that this page depends on. Our checklist only has one file. Also, we put a version number there in comments because the next time you’d want to change the checklist, in order for the browser to update the file in its cache, you’ll have to change the content of the cache manifest - so we’ll just update the version number when that happens. Next, there’s one more thing you have to do: in order for the browser to recognize the cache manifest as such, your web server must send with it a special header text/cache-manifest. If you or your web host is using Apache you can simply put the following line

AddType text/cache-manifest .manifest

inside the .htaccess file in the same directory - create it if it’s not there. There, try refreshing the page now. And then, to test offline mode, set your phone into Airplane mode, and then refresh the page again, it should still work.

There we have it. We built a checklist application for the iPhone using just HTML.

Tablets are the way of the future

toby ho — Thu, 07 Feb 2008 18:02:50 -0600

After watching some old Alan Kay videos, I started thinking about modeless interfaces and tablet PC's. I think that the tablet PC has been largely under-appreciated, but is a form factor that has a lot of potential. The reason that it was under-appreciated, in my opinion, is - at least partly - because of the software. The operating system on most of the tablet PCs in the market is windows, but the version of windows installed on the machines is not any different from any other windows. Aside from some duck-tape-like software to allow for hand writting recogition and a few other features, there's really very little work that's been put into making the software working great with the form factor. With the hype of multi-touch screens, I think conditions are ripe for a comeback for tablets if the right things happen. Apple has the best chance of making it work: doing with tablets what they did with mobile phones, plus they already have multitouch technology on their side, so it's a natural match.

Now, why tablets? How did I settle on that? I guess it started with a video Kay show of a modeless interactive system which uses a stylus. It was some sort of flow-chart editor. The main thing is that it was modeless. To create a box, you didn't have to go and select the box tool, no, you just draw a box in the shape of a rectangle. And to make a port on the box, you just draw it on the edge of the box. To write text in the box you just scribble it. To connect 2 boxes you just draw a line from the edge on one to a edge of another. Why don't we have more interfaces like this today? In photoshop, in order to do anything at all, you usually have to be aware of being in a combination of at least 3 different kinds of modes: your selection, your tool selection, and the current layer. Plus, with many of the actions you take, modal dialogs popup afterwards to asks you for parameters you want before anything actually happens. This is why doing anything in Photoshop feels like such a hassle. Well, okay, that's more of a user interface issue than about the tablet, but that's what inspired it. What's special about the tablet form factor, I think, is that the stylus gives you better control of fine movements than the mouse, and therefore allows you to draw more accurate shapes, which allows you to better articulate what you mean to the machine, with which programs can better detect gestures. That's why graphic artists prefer tablets to regular laptops, after all. You may have concerns that using a stylus freehand tires your wrist, but there's no reason why you cannot rest your palm on the surface: in fact I tried out the HP tablets at Fry's the other day and resting your palm while writting does not interfere at all. The second thing that's major about the tablet form factor is the emergence of multi-touch. There isn't a major multi-touch tablet in the market today, but Apple already has the iphone and the Macboox Air - which allows you to use iphone-like gestures on the touchpad. If you haven't played with the iphone, the multi-touch hand gestures like swipe, flick, pinch, and spread, are phenomnonal in terms of user-happiness. These gestures are intuitive, easy to use, immersive, and...modeless. Many iphone users have complained after going back to their macbook, that they can't use these gestures anymore. It's pretty obivious now that macbooks from now on will all have multi-touch enabled touch pads. Now, you might ask me, you like the stylus, and then you are talking about multi-touch, are we going to use the stylus or our fingers? I am just saying...we use both. In fact, one hand could be using the stylus while the other could be making gestures. Imagine, for example, editing a long document using the stylus like a pen, and swiping with the other hand to scroll the document. Now, you may object and say: you still need a keyboard. Well, I agree, and the reason is that you can type faster with a keyboard than you can write with a pen. But, with the asterisk that this is not the case with everyone, only people who can type well. If you can't type faster than you can write, then you don't need a keyboard at all! Wow! Then all you need is a giant size touch-screen. But for touch typists, yes, you will need a keyboard, otherwise you will be sacreficing a lot of speed. I don't know, will this be a slide out, or a fold up? Not really sure. What about one handed keyboard? I personally have a thing for one-handed keyboards.

Anyway, that's my vision of the future, and I think Apple obiviously stands the best chance of making it happen, but personally I don't really care who does it. Will it happen? Well, I was right about the iphone before, so...

Posts about Iphone

Making a Morning Checklist out of HTML

Tablets are the way of the future