Hacker News new | comments | show | ask | jobs | submit login
Show HN: I made a Web-based Todo App - used: CSS3 3D transforms, Node.js, love (tomorrow.do)
237 points by alexbosworth 2285 days ago | hide | past | web | 106 comments | favorite



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.


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.


Local would defeat the purpose of a web app, as I'd have three different copies on my iPad, iPhone, and laptop.

He's already storing login info, so associating a few hundred bytes of text with that shouldn't be too difficult.


I suggested local storage only for the case where a new user (not logged in) has added some tasks and then decides to sign up. The tasks in local storage would then be added to the user once it is created. The local storage acts as a temporary storage location while the user is created. Having this work across platforms is not necessary.


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.


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.


In the future, could you just put a small warning, instead of blocking page completely?

I don't mind if I get page without some 3D transition, but a complete block gives an "F*U" impression, even if you are just working on making it perfect.


Thanks for including the Opera browser!


It seems like your server(s) have gone down: I'm getting an '502 Bad Gateway' from nginx.

Would love to try it out!


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.


My favorite part is the "I am a new user" button - very slick!


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!


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.


Must check it out. First thing to try would be to link its configuration folder from my Dropbox folder to get cross-PC syncing.


Yeah - this works well and there are no catches. The data is in a few human readable files and there's a path in the config file (.taskrc) pointing to the directory where they live.

So you just move the data folder to your dropbox and edit your .rctask file accordingly. Of course you need to do this for every computer, so it makes sense for the few machines that you usually use but you don't really get the available-anywhereness of an online app.


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


Very svelte! Maybe I'm being an idiot - but how do you turn the pages? I can only see today and tomorrow.


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


Yeah the way I do it I have two todo lists- one for Today, and one for This Week. Each night I move stuff from my This Week list into my Today list to be done the next day. That's how I will use this.


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.


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.


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.


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 ?


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.


Obligatory 'this is a first release' disclaimer :D


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.


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.


Can you do a full breakdown of how this was built? Love the page flipping transition!


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...


Just curious, but why'd you decide to use nginx instead of a node-based web server (i.e. serving stuff up via Express)?


I only use nginx because it is a proven component and I don't think node can improve on that much there


Awesome, There is also knox:

https://github.com/LearnBoost/knox

Both look similar. Any quick commentary on where you plan on taking your s3 lib (features etc..) ?


It's made to copy the JQuery 1.5 "Deferreds", and to copy JQuery's model that easy/common things should be easy, uncommon things should be possible but may be more complicated to write.

As for 'bonus features', the only thing I have that most S3 libs don't is support for the S3 feature of uploading very large files in parallel chunks.


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...


Thanks - Watch for an update that will fix this on the Android App


Yes, wouldn't want someone else to do my tasks for me!


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.


(shameless plug) I wrote a simple to-do app (weekly planner) for my own use (now has a few thousand users): http://weekis.com


Wow, promoting your own similar app in someone else's Show HN is pretty stale.


"Show HN" isn't a promise of free advertising. The point is to get feedback (and to show off, of course) and pointing to competing products can be great feedback and add to the discussion in here.


One to-do app doesn't fit all. Everyone has their own working style and schedule flexibility, so it makes sense to try out as many options. You can read more about the intention behind my to-do app at http://apps.ycombinator.com/item?id=1466775


Yep, not a right gesture to do, considering your app is kind of rival to op's initiative.


Both are free apps and and its kind of cool to compare them. I think this is relevant.


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.


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


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 !


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.


>let people flip a few pages ahead

Apparently, the concept is that you only have two queues/stacks, "now" and "later." I do agree that this isn't very intuitive from the design.


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


Have a look at http://swapped.cc/font-smoothing to see what you are getting into with webfonts.


If you scroll down, you will see links to iOS and Android apps.


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!


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.)


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?


I didn't say stop improving on solutions that miss the mark. I just think there is a lot of unexplored territory for software developers. People like to solve problems they have and understand. To do list apps are the classic example for developers. I'm just saying there's a lot of opportunity out there if you step outside your comfort zone.

All I know about this app is that it's a web based todo app. I was clear on this so to pick me up on it is a bit out of line. A better response would be to point out how it improves on what's already available.


>> A better response would be to point out how it improves on what's already available.

For starters, the UI is something that I haven't really seen before and its pretty neat.

Second, I do like the concept of today/tomorrow - think that's a nice way to encourage planning and doing


>>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.


Sometimes what people don't already have is the right solution to a problem that has already been "solved".


Yeah, fair comment. The art is deciding if there is sufficient room for improvement or if a novel approach will work. If I were splitting hairs I'd say we agree in that if the "right" solution isn't there then we don't have a solution.


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.


Very nice design and implementation. I could not resist to see your JS code. In http://tomorrow.do/dit.js line 676, why the spinner image is in this file as a data URI?


Thanks - There is no real reason for that :/


Perhaps add a clear button for both days, pressing the (-) button isn't fast enough. Also, when adding a task while in edit mode the button doesn't show up until going out and into edit mode.


Hey, This is really cool. I am sure you are going to move some of the procrastination from the world, away. I am going to use this over any "To Do" app. Thanks for building this...


Love it. Great design.

Some thoughts:

- I tried to drag some tasks from "today" to "tomorrow" and couldn't. Ended up marking a task as done instead.

- The animation when you click the arrows is a little confusing and hard to follow.


Seconded. The design is just great.

I also tried drag and drop. Both between today and tomorrow and a way to change the ordering. It'd be great to see that functionality.

Really nice work, guys!


Also, in chrome on windows 7 the text-shadow on the explanation paragraph renders as white because you forgot to add the blur pixel. This looks nice:

text-shadow: black -1px -1px 1px;


Looks great. teuxdeux.com is similar in pushing incomplete to-do's from the past into the future. This one is nice, really simple, and fun.


Gorgeous design! I don't know how practical it is.


Veeeeeeeeeeeery class! I was about to send you an email to help you build an android app for this but you already done this. Wow.


Very simple and great idea! I would use this if it would do landscape view on my Android tablet. Any plans on doing that?


Landscape on android phone as well. Many slide out keyboards are to the side.

Getting a 502 bad gateway from nginx on the web version at the moment.


I like the font-face feature of CSS3. I just whipped up a font based on my handwriting, and now it's on my blog.


You will take http://thn.gs from my cold, dead hands.


Wow, I love the UI but I found it a bit buggy (show new task when I click on tag)


Has been working great for years here, no bugs to speak of across 3 browsers and 3 OSes. Notifo notifications are amazing. UI is second to none. Flawless local/offline sync, so no downtime ever. Tagging system works great, and it's how I know what to do next all day.

My only gripes are

1) no mobile version (it works on my iPhone, but it's not the optimal experience to have to drag left and right. a dedicated app would be better imo)

2) there's no faqs/documentation/getting started guide/features/nada. No help desk if you're stuck or having problems. Despite all this, it has lots of users still apparently. Contacting the developer valentin shergin (yandex guy) is a shoot and miss. Development seems to have slowed down a lot, but there's some new features popping up here and there. Mostly active in Russian community.


This is awesome. User Interface is pretty cool as if to write a memo on paper.


I have to commend you, to are the mobile apps also built using html5 and css3.


Thanks! The mobile Apps are written native to their respective platforms


I never knew all this was possible with CSS. Amazing! Good work :)


Bug: Email address is case-sensitive for login.


like it. login isn't persisent with a cookie or something, so everytime i'm getting the same welcome msg.


Login stickiness is using localStorage and no cookies are used, but that seems to be causing problems for some people :(

I am trying to get this one sorted


Can I ask what provider are you using?


Looks to be EC2.

IP: 184.73.182.11

Whois: Amazon.com, Inc. AMAZON-EC2-7 (NET-184-72-0-0-1) 184.72.0.0 - 184.73.255.255


Does not render properly on webOS. =(


How long did this take you to do?


This is insane. Well done.


why do i get logged out every time i refresh the page?


I'm curious too, I have heard about the remember me not sticking, but can't pin it down :(


This is beautiful.


Love the UI!


very cool!!!..keep it up guys!!


Well done.


So, 502. Can you please (seriously) write a post about what your server setup is and what its like to be deal with the rush of traffic. I'll be doing it one day soon and all the info I can get would really help!


The issue was pretty mundane, the server script is very simple - so I assumed it wouldn't need to have a lot of monitoring overhead to deal with traffic spikes.

Even though it's a very simple script the volume of traffic used up all the memory on the machine leading to server death, then my restart script turned out to be wrong :(


Check out cluster for node.js. It will automatically create worker processes and restart them as needed. The use upstart, monit, etc to keep the master node process running.


Ummmm, he may not be the best person to ask...


Failure is the best way to learn! I know because I do so much of it!

And bonus if it's someone else's failure.


Sorry I'm not sure what happened - it seems like screen died?


Launching a product that's running in a screen session. I don't think it's a good idea, but I can't help but feel impressed in some way I don't understand.


Google "node.js upstart" - there are a lot of good examples on how to get your app to respawn after crashes, run on startup, etc.


Slick. Two suggestions:

1) On Android, remove the delete confirmation. Undo bar would be better than pressing that ugly OK button.

2) Keep it at Today/Tomorrow only. It's a great anti-feature.


Mm... I love the look and design of your web app. Just wondering, were you the only person worked on that app? or did someone else provide the design (i.e. graphics, CSS styling)?

Personally, I applaud you for coming up such a great app. I can only wish I can achieve the level of work that you do, but I think I care too much about Internet Explorer users to come up with something that require Firefox/Chrome/Safari... it is definitely a fine balance or choice you make.


I coded it and did participate in the design, but I definitely didn't make the App alone!

Do It (Tomorrow) is an Adylitica production - you can read about my company here: http://adylitica.com/ - our team: http://adylitica.com/team.

IE support may come in the future, but it is very labor intensive as IE is really far behind, even in IE9.


This shit ROCKS Truly the ultimate procrastination app




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: