Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

tomorrow.do

Post reply on HN
Print view View original

11–20 of 108 posts

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

#11

Post by alexbosworth »

frankdenbow wrote: post #4

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

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

#13

Post by dmbass »

cfontes wrote: post #5

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…

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

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

#14

Post by alexbosworth »

cfontes wrote: post #5

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…

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

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

#16

Post by Agustus »

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.

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

#17

Post by alexbosworth »

Agustus wrote: post #16

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…

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.

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

#18

Post by alexbosworth »

thricedotted wrote: post #7

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 t…

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

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

#19

Post by huhtenberg »

alexbosworth wrote: post #14
cfontes wrote: post #5

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…

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.
Post reply on HN