top | item 2781866

Show HN: I made a Web-based Todo App - used: CSS3 3D transforms, Node.js, love

237 points| alexbosworth | 14 years ago |tomorrow.do | reply

106 comments

order
[+] redthrowaway|14 years ago|reply
Awesome. One minor complaint: I added some tasks, thought, "man this is cool", and signed up--at which point you erased my tasks. Not a huge complaint, but they really should be transfered over to your newly-created account.
[+] thetimbanks|14 years ago|reply
This could easily be done using local storage. I'm guessing the author has already run into this problem and is working on it though.
[+] Agustus|14 years ago|reply
Very good "Your browser is not compliant page." The Opera browser is CSS3, 3D Transform, Node.js capable. If you are doing certification using a browser check, do the following: Tell the user their website is not optimized for their browser, suggest the browsers as you have it on your site, then provide the user with the option to continue ahead with their current browser.

Here is a link to the logo so you can add it: (http://media.opera.com/media/images/icon/Opera_512x512.png)

Edited to be more constructive and helpful in addressing the issue.

[+] alexbosworth|14 years ago|reply
I am working on Opera, I tested it half-way but it has some issues I will have to work out before it will work perfectly.
[+] smunz|14 years ago|reply
It seems like your server(s) have gone down: I'm getting an '502 Bad Gateway' from nginx.

Would love to try it out!

[+] josegonzalez|14 years ago|reply
It's at times like these where I wonder if the Node.js community overhypes their "webscale" framework. Evented or not, if your server doesn't have the resources to serve up the requests, things are going to break in fun ways.
[+] jasonz|14 years ago|reply
My favorite part is the "I am a new user" button - very slick!
[+] etruong42|14 years ago|reply
It's very cool. It takes the "don't make me think" principle to the next level by forgoing "options" like "Register a new user" or "Create a new account" and instead makes the action a simple fact. I am a new user!
[+] parallel|14 years ago|reply
I'm a big fan of taskwarrior, a CLI todo list for linux. I find I use it more than web based ones as I'm always in the console so there's little mental mode switching to use it. Basically not having to go to a browser or touch the mouse makes all the difference.

I'd love it if someone made a todo web app that could sync with taskwarrior. You then get the online slick interface of the web app with the low friction accessibility of the console interface when in the zone at work.

[+] mise|14 years ago|reply
Must check it out. First thing to try would be to link its configuration folder from my Dropbox folder to get cross-PC syncing.
[+] dorian-graph|14 years ago|reply
I use Taskwarrior on Linux and Mac and that's a pretty awesome idea. Where/how does task store the todo list data? I'll have to do some research.

Edit: So, it stores it in text files and apparently there are web interface/Android versions in the works.

https://github.com/sullivant/taskwarrior-web

[+] speg|14 years ago|reply
Very svelte! Maybe I'm being an idiot - but how do you turn the pages? I can only see today and tomorrow.
[+] alexbosworth|14 years ago|reply
Do It (Tomorrow) is based on a simple concept where you can just look at what you have to do today and push less important things to later.

The "days" aren't literal dates, add todos to today - they will stay on that page forever until you cross them off or delete them. The pages are more like 'now' and 'later', at least that's how I use it.

Boing Boing did a nice review of the iPhone App and they explained the concept better than I probably can http://boingboing.net/2011/03/08/of-the-many-many-fac.html

[+] nc|14 years ago|reply
Wow... love the design & the UI realism. I would iterate on the font for the actual to-do though. It's very hard to read.
[+] ConceitedCode|14 years ago|reply
Wow! Everything looks amazing. You really did a good job trying to make it look good. Unfortunately, it's not something I would really use.
[+] jessep|14 years ago|reply
This is cool. I'm one of the guys who makes WorkFlowy.com, so I always check out new to-do/list making apps. I'm almost always like, "This is super lame," but not this time. This app actually seems quite nice. I'd like to be able to flip forward/backward in the planner, as that aligns with the metaphor nicely.

Anyway, nice work.

[+] div|14 years ago|reply
At first I wanted to be able to flip forward / backward as well, but on second thought, maybe only being able to add todo's for today and tomorrow is a plus ?
[+] badhairday|14 years ago|reply
Obviously you are shooting for a realistic UI. I don't think the current strikethrough image is very realistic since I do not draw the same line every time I cross an item out in real life. I suggest you make use of a sprite image to implement multiple lines.
[+] alexbosworth|14 years ago|reply
Obligatory 'this is a first release' disclaimer :D
[+] libria|14 years ago|reply
Nice, very cutting-edge. Thought you would like to know, though, that it almost brought my browser down (locked up all tabs solid for 8 seconds straight). Using Chrome 14.0.825.0 canary.
[+] jws|14 years ago|reply
The "I love this app" quote has a space between the period and the closing quotation mark which allows it to typeset the quotation mark by itself on the last line.

Yep, that was all I found to complain about. Well, that and my iPad is all the way downstairs so I have to fetch it before I can buy the app.

Update: you might also add the extra attributes to the email login field to prevent spelling correction in Mobile Safari.

[+] frankdenbow|14 years ago|reply
Can you do a full breakdown of how this was built? Love the page flipping transition!
[+] alexbosworth|14 years ago|reply
The Page Flip is in Chrome and Safari, but when I started it was going to just be a perk for Safari as Chrome didn't support 3d perspectives.

I noticed one day that the beta channel of Chrome had started to support 3d perspectives, but to my distress their support was buggy and left graphical artifacts. I submitted bug reports and luckily in the latest Chromes it works just as nicely as Safari.

The big thing I got into on this project is CSS animations. They look a bit scary at first but in practice they are not too complicated. I did a mixture of JQuery animation and CSS transitions on this and both have their strengths.

The Node.js code is very simple, it's a small sync script that sits behind nginx. Todos are stored on S3, I used my in-progress S3 library for node.js - can see this here - https://github.com/alexbosworth/Node-S3/blob/master/aws-s3.j...

[+] thricedotted|14 years ago|reply
Wow, slick and simple interface. As somebody who was always better at carrying a new paper list each day than dealing with things like RTM or Google Tasks, but also doesn't always have something to write down new things to do, I think this just might be the app I never knew I wanted. I'll be trying it out over the next few days.

One question -- why is the password input in plaintext on the Android app? I don't like the thought that somebody could get hold of my device and see my password just sitting there in plaintext if they just went to settings...

[+] alexbosworth|14 years ago|reply
Thanks - Watch for an update that will fix this on the Android App
[+] Cyph0n|14 years ago|reply
Wow. Just wow. When I clicked the link on HN I never expected something that good. I was especially amused at the login/signup trick. Frankly, the whole thing caught me off guard.

Hats-off to you sir.

[+] nreece|14 years ago|reply
(shameless plug) I wrote a simple to-do app (weekly planner) for my own use (now has a few thousand users): http://weekis.com
[+] packetslave|14 years ago|reply
Wow, promoting your own similar app in someone else's Show HN is pretty stale.
[+] p3rs3us|14 years ago|reply
Yep, not a right gesture to do, considering your app is kind of rival to op's initiative.
[+] cmwright|14 years ago|reply
There's a bug in Chrome 12.0.742.122 where when you logout an extra book shows up on the bottom right of the original book.

This looks great, I love the page turn animation.

[+] alexbosworth|14 years ago|reply
The Logout extra book bug is a Chrome bug, but they have fixed it in the beta channel and this problem should go away when they roll out Chrome 13
[+] cfontes|14 years ago|reply
Nice design...

The fonts are a bit rough, i think cannot read them well and I got 28 and 0 eye problems so people with more age and eye problems will have a hard time reading it. maybe making it a little bigger and getting some better fonts try www.typekit.com or something.

Anyway great design, the app in itself is not useful for me as ConceitedCode6 pointed I like portable todo lists, maybe an Iphone app ?

Congrats !

[+] ollerac|14 years ago|reply
Ya, awesome design.

I'd change the default font to something more readable, remove the coffee stain from the page, let people flip a few pages ahead (otherwise, why use the notebook paradigm?), and change the "i'm a new user" flow -- the form field animation is pretty and ingenious, but it's also confusing, so I don't think it's worth it.

[+] alexbosworth|14 years ago|reply
I have noticed that on different screens the font is appearing differently, this is something that I didn't anticipate and I guess is a pitfall of using a custom-created font.

This is on my to-do list, adding another font ;)

It actually started life as an iPhone app, you can download it for free for Android/iPhone

[+] dmbass|14 years ago|reply
If you scroll down, you will see links to iOS and Android apps.
[+] Groxx|14 years ago|reply
Very nice job. Only two problems jumped at me, and mostly because everything else is so smooth:

1) switching a task's date should make the other side slide to make room, rather than jump.

2) finishing / unfinishing a task doesn't always respond to clicks, especially after a minor drag. Not sure what's going on to cause this.

Beautiful and live demos are the best :) Fantastic work!

[+] parallel|14 years ago|reply
My plea to the HN community; stop solving the same problems. If you really want to make something that people want then find something that people don't already have. This may be outside you area of immediate experience.

(Note - this comment was made without seeing the app - getting 502.)

[+] duck|14 years ago|reply
stop solving the same problems

Eh... what? If we didn't stop solving the same problems we would still be using WordPerfect and Google wouldn't exist. And without seeing it how do you know what it is even doing?

[+] johnmorris|14 years ago|reply
>>find something that people don't already have

Not so fast. Yes, there are to do apps out there, but none that I've seen as easy to use and so beautifully designed. This is one of the most useful show HN apps I've used.

HN community: please continue innovating and creating better products. There is a ton of crap out there. hint: project management applications.

[+] gemenon|14 years ago|reply
Sometimes what people don't already have is the right solution to a problem that has already been "solved".
[+] grantjgordon|14 years ago|reply
Super slick! The concept of just limiting people to today and tomorrow should keep us from descending into the swirling always-planning-but-never-doing-vortex-of-doom. Only complain: the handwritten font you chose, while cool, renders very jaggily in chrome on windows.