6 ms·

Show HN: A simple note-taking app built in React

100 points by ny2244111 12y ago

JosephRedfern 12y ago
Might be worth-while making the search case-insensitive - looks good, though! EDIT: Hmm. I tried logging in with the token emailed to me using Safari - that worked. I then tried logging in using Chrome with the same token, and got this error: http://i.imgur.com/D4j45c3.jpg http://i.imgur.com/D4j45c3.jpg. I then tried going back to notello.com, but seem to constantly get re-directed back to the error page.
- ny2244111 12y ago
  Hmm, yea I made it so that each password token can only be used once in case someone gets a hold of your email. I can see how that can be annoying. I'll work on a solution to that. Thanks for the feedback.
  - JosephRedfern 12y ago
    Yeah, that makes sense - the problem was the resulting lock-out.
  - shanecleveland 12y ago
    If someone gets a hold of your email, they could easily request another login token anyway. I think it's fine if it doesn't expire.
    - ny2244111 12y ago
      Now I remember why I made it expire and/or only usable once. Consider public places or caching. Since the temporary authentication token is exposed in the URL there is a risk that someone else can reuse it. Whereas if it's a one time temporary token then you should be OK. I think I need to be more explicit in that this is a one time token. The whole passwordless thing is new so there are some pain points.
danesparza 12y ago
One of the things I'd like to learn next in React is animations / transitions. Got any tips on how you did yours?
- ny2244111 12y ago
  I just used CSS3 tbh. Some of the animation stuff was painful due to timing issues. There's also some jQuery fadeIn/fadeOut stuff but I'm trying to get rid of that.
- mbrock 12y ago
  The CSSTransitionGroup component that comes with the React "addons" is very useful.
pc86 12y ago
React is currently #1 on my list of things to learn. Any chance this is open source?
- ny2244111 12y ago
  I was developing it on assembly and therefore there's this repo: https://github.com/asm-products/notello https://github.com/asm-products/notello. It's quite a few commits behind so there's probably tons of bugs but at least it's a start. I'm still learning this stuff myself.
ttty 12y ago
- Click on the top left icon to see some animations. UX issues: - I couldn't exit a box; (is done by pressing the x in the box)
- ny2244111 12y ago
  Thx, will fix.
- leviathan 12y ago
  After you open that bar, click on the title area, drag up while still holding and release outside the wooden desk. Now you can continue typing the title with the view in perspective, and see it update live in the title of the file.
jsprogrammer 12y ago
Doesn't seem to work on android. Can't even type a title.
- ny2244111 12y ago
  +1. Thx.
- ny2244111 12y ago
  Can you hold the title box instead of tapping to see if that allows you to type? Not sure why that is the case.
  - jsprogrammer 12y ago
    Works.
wrd 12y ago
Looks pretty slick! Nice job!
krat0sprakhar 12y ago
This is great! Also, much thanks for making the source available. Quick question - I can see that you're using Facebook flux as a data flow library in your app. Is there a particular reason you chose not to try the, albeitly simpler, Reflux / Alt etc? I'm working on a decent sized React app myself and would love to know your thoughts on this. Thanks and great work!
- ny2244111 12y ago
  I honestly just wanted to try flux. I ran into some problems with my architecture however and maybe reflux would of helped me simplify it. I think you made a fine choice.
marknutter 12y ago
Is there a reason why typing is so slow? It seems like it's really chugging away on something as I type. I would guess there's a 500ms or so delay between hitting a key and it ending up on the notepad. Same goes for clicking to change the cursor placement.
- ny2244111 12y ago
  If you could tell me some of the specs of your system so I can check why it is so laggy that would be great. One thing that is hacky/a problem with the app is that I wanted to be able to hash tag notes and have the hashtags a different color. Also very soon i'd like to add the ability to highlight text. It's pretty hard to do that smoothly even with the contenteditable attribute. I decided on a transparent textarea over a div and I sync and transform the content. It is a bit clunky as you say but I anticipate it will get better.
  - noir_lord 12y ago
    Input is noticeably slow for me as well. i5 3570K, 16GB DDR3, FF36 and Chrome 41, Xubuntu 14.04 input speed seems to be equally slow on both, very noticeable if you press and hold a key.
  - inglor 12y ago
    Slow for me too - i7 3770k, 16gb ram, win 8
  - hackerboos 12y ago
    Slow for me Mac Pro 2.6Ghz i5, 16GB ram, SSD. Run a JS profile on your code, I think there's some performance bugs.
    - ny2244111 12y ago
      Frustrating. Not able to recreate. There are some unnecessary repaints but can't see much other than that.
      - 12y ago
bshimmin 12y ago
I'm a bit conflicted - I actually quite like both the skeuomorphism and the 3D transitions separately, but the two in combination doesn't really make much sense to me!
- ny2244111 12y ago
  I hear you. It was actually supposed to be like you're looking down at a desk and then seem as if you were moving your head up at the bookshelf. The bookshelf doesn't move so it's a bit odd right now.
  - jamiesonbecker 12y ago
    BTW, thanks for not going completely flat.
joelcollinsdc 12y ago
also: http://todomvc.com/examples/react/#/ http://todomvc.com/examples/react/#/
jobvandervoort 12y ago
When I have a box open with a single file, I don't see my current file, which is out of the box, in the top bar. Upon closing the box, the file appeared. Felt confusing to me. Example: http://imgur.com/QKBr3lb http://imgur.com/QKBr3lb Looks fancy, but I think the animations are too much/long for frequent / intensive usage.
wigster 12y ago
looks pretty. how do you get something out of a box? drag and drop looks like box can be placed inside other box but it cant.
- ny2244111 12y ago
  I still have to implement that. Not sure how to represent that in the UI yet. Maybe drag it back to the open box. Not sure yet.
benologist 12y ago
What is the size overhead react adds to an app?
- baddox 12y ago
  React is 121 KB minified. Compare to JQuery at 84 KB, Angular at 125 KB, and Ember at an impressive 408 KB.
ElectricFeel 12y ago
came here to read comments.. I do not need this product so I'll pass
shanecleveland 12y ago
Love the password-less login!
- ny2244111 12y ago
  Thanks! I'm sticking to it. Why trust anyone with passwords these days. I may add social logins though.
jedanbik 12y ago
After editing the default note, I am unable to create a box. - Firefox 36.0.4, Windows 7. Let me know if you need additional information.
stoooooooooop 12y ago
FYI, this app just crashed Firefox 33 on Ubuntu 12.04.
- jamiesonbecker 12y ago
  What video card/drivers? Open source or closed binaries? It's working great for me on Debian 7 (wheezy), which is similar to Ubuntu 12.04, w/ non-standard Firefox 38.0a2 Dev Edition and nvidia/GL closed-source drivers.
tadfisher 12y ago
Does anyone else miss the days when you could right-click on any page and see what magical incantations drive what you see? I feel like modern Javascript pipelines and the drive for loading speed is endangering what used to be how we all learned Web technologies.
- chrisan 12y ago
  Everyone loves pagespeed and github far more fun than view source! Are you suggesting you dont want things minified?
  - jamiesonbecker 12y ago
    OP has a point.. Minification devolves to obfuscation for the most part once zlib compression enters the picture. The next version of Userify.com is not going to be minified, just gzipped.
  - tadfisher 12y ago
    I'm not suggesting the solution to this problem is to abandon compression. I'm suggesting that we make "View Source" do what it says on the tin. Perhaps a "readable-src" attribute on the <script> tag.
    - keda 12y ago
      there is sourcemap.
    - DiThi 12y ago
      That's what source maps are for. I only enable them for development, though.
joshuahutt 12y ago
Looks nice. You should add `-webkit-backface-visibility: hidden;` to the elements that have that weird shifting behavior, such as your `.modal-form-wrapper`. Pretty much anything you've done a non-3D transform on.
automathematics 12y ago
I really like your animations! What library is that? My only concern is that you call this a "simple note taking app". Taking a look here: https://github.com/asm-products/notello https://github.com/asm-products/notello it's anything but simple! Not only are you selling yourself short but to a user new to react, they might think "Great, I can learn from this!" and it's actually quite complicated! I've been doing JS for many years and you're the first project I've seen with a "gulp" folder for example! I still don't even know what that's for (vs a gulpfile.js). I think I would just say "Notello: A note taking app" :)
- ny2244111 12y ago
  Point taken. The animations are just pure CSS3 although the fades still use jQuery. I got the gulp folder idea from this blog post as a way to decouple gulp tasks from individual projects: http://viget.com/extend/gulp-browserify-starter-faq http://viget.com/extend/gulp-browserify-starter-faq
deleted 12y ago
[deleted]
BrianHutch 12y ago
Its fantastic. Simple on the one hand, but pretty sophisticated on the other. A UI suggestion: When I am "in" a box, there should be a clear indicator of how to go back to the top level. The "x" for closing the box is a little too subtle, and possibly overoaded with "delete". I'd rather see a back arrow utilized. Hovertips helped of course. I also think when your view is with the box open, then adding a note should by default add that new note to be a child of the box.
nicklo 12y ago
The note text box breaks iOS autocomplete support. It's doing something funky where the keyboard api can't recognize previous words. May want to consider just using a native text box instead of something custom and funky with JavaScript. Will probably resolve the typing performance issues others have mentioned.
deleted 12y ago
[deleted]

100 points by ny2244111 12y ago

Might be worth-while making the search case-insensitive - looks good, though! EDIT: Hmm. I tried logging in with the token emailed to me using Safari - that worked. I then tried logging in using Chrome with the same token, and got this error: http://i.imgur.com/D4j45c3.jpg http://i.imgur.com/D4j45c3.jpg. I then tried going back to notello.com, but seem to constantly get re-directed back to the error page.

ny2244111 12y ago
Hmm, yea I made it so that each password token can only be used once in case someone gets a hold of your email. I can see how that can be annoying. I'll work on a solution to that. Thanks for the feedback.
- JosephRedfern 12y ago
  Yeah, that makes sense - the problem was the resulting lock-out.
- shanecleveland 12y ago
  If someone gets a hold of your email, they could easily request another login token anyway. I think it's fine if it doesn't expire.
  - ny2244111 12y ago
    Now I remember why I made it expire and/or only usable once. Consider public places or caching. Since the temporary authentication token is exposed in the URL there is a risk that someone else can reuse it. Whereas if it's a one time temporary token then you should be OK. I think I need to be more explicit in that this is a one time token. The whole passwordless thing is new so there are some pain points.

danesparza 12y ago

One of the things I'd like to learn next in React is animations / transitions. Got any tips on how you did yours?

ny2244111 12y ago
I just used CSS3 tbh. Some of the animation stuff was painful due to timing issues. There's also some jQuery fadeIn/fadeOut stuff but I'm trying to get rid of that.
mbrock 12y ago
The CSSTransitionGroup component that comes with the React "addons" is very useful.

pc86 12y ago

React is currently #1 on my list of things to learn. Any chance this is open source?

ny2244111 12y ago
I was developing it on assembly and therefore there's this repo: https://github.com/asm-products/notello https://github.com/asm-products/notello. It's quite a few commits behind so there's probably tons of bugs but at least it's a start. I'm still learning this stuff myself.

ttty 12y ago

- Click on the top left icon to see some animations. UX issues: - I couldn't exit a box; (is done by pressing the x in the box)

ny2244111 12y ago
Thx, will fix.
leviathan 12y ago
After you open that bar, click on the title area, drag up while still holding and release outside the wooden desk. Now you can continue typing the title with the view in perspective, and see it update live in the title of the file.

jsprogrammer 12y ago

Doesn't seem to work on android. Can't even type a title.

ny2244111 12y ago
+1. Thx.
ny2244111 12y ago
Can you hold the title box instead of tapping to see if that allows you to type? Not sure why that is the case.
- jsprogrammer 12y ago
  Works.

wrd 12y ago

Looks pretty slick! Nice job!

krat0sprakhar 12y ago

This is great! Also, much thanks for making the source available. Quick question - I can see that you're using Facebook flux as a data flow library in your app. Is there a particular reason you chose not to try the, albeitly simpler, Reflux / Alt etc? I'm working on a decent sized React app myself and would love to know your thoughts on this. Thanks and great work!

ny2244111 12y ago
I honestly just wanted to try flux. I ran into some problems with my architecture however and maybe reflux would of helped me simplify it. I think you made a fine choice.

marknutter 12y ago

Is there a reason why typing is so slow? It seems like it's really chugging away on something as I type. I would guess there's a 500ms or so delay between hitting a key and it ending up on the notepad. Same goes for clicking to change the cursor placement.

ny2244111 12y ago
If you could tell me some of the specs of your system so I can check why it is so laggy that would be great. One thing that is hacky/a problem with the app is that I wanted to be able to hash tag notes and have the hashtags a different color. Also very soon i'd like to add the ability to highlight text. It's pretty hard to do that smoothly even with the contenteditable attribute. I decided on a transparent textarea over a div and I sync and transform the content. It is a bit clunky as you say but I anticipate it will get better.
- noir_lord 12y ago
  Input is noticeably slow for me as well. i5 3570K, 16GB DDR3, FF36 and Chrome 41, Xubuntu 14.04 input speed seems to be equally slow on both, very noticeable if you press and hold a key.
- inglor 12y ago
  Slow for me too - i7 3770k, 16gb ram, win 8
- hackerboos 12y ago
  Slow for me Mac Pro 2.6Ghz i5, 16GB ram, SSD. Run a JS profile on your code, I think there's some performance bugs.
  - ny2244111 12y ago
    Frustrating. Not able to recreate. There are some unnecessary repaints but can't see much other than that.
    - 12y ago

bshimmin 12y ago

I'm a bit conflicted - I actually quite like both the skeuomorphism and the 3D transitions separately, but the two in combination doesn't really make much sense to me!

ny2244111 12y ago
I hear you. It was actually supposed to be like you're looking down at a desk and then seem as if you were moving your head up at the bookshelf. The bookshelf doesn't move so it's a bit odd right now.
- jamiesonbecker 12y ago
  BTW, thanks for not going completely flat.

joelcollinsdc 12y ago

also: http://todomvc.com/examples/react/#/ http://todomvc.com/examples/react/#/

jobvandervoort 12y ago

When I have a box open with a single file, I don't see my current file, which is out of the box, in the top bar. Upon closing the box, the file appeared. Felt confusing to me. Example: http://imgur.com/QKBr3lb http://imgur.com/QKBr3lb Looks fancy, but I think the animations are too much/long for frequent / intensive usage.

wigster 12y ago

looks pretty. how do you get something out of a box? drag and drop looks like box can be placed inside other box but it cant.

ny2244111 12y ago
I still have to implement that. Not sure how to represent that in the UI yet. Maybe drag it back to the open box. Not sure yet.

benologist 12y ago

What is the size overhead react adds to an app?

baddox 12y ago
React is 121 KB minified. Compare to JQuery at 84 KB, Angular at 125 KB, and Ember at an impressive 408 KB.

ElectricFeel 12y ago

came here to read comments.. I do not need this product so I'll pass

shanecleveland 12y ago

Love the password-less login!

ny2244111 12y ago
Thanks! I'm sticking to it. Why trust anyone with passwords these days. I may add social logins though.

jedanbik 12y ago

After editing the default note, I am unable to create a box. - Firefox 36.0.4, Windows 7. Let me know if you need additional information.

stoooooooooop 12y ago

FYI, this app just crashed Firefox 33 on Ubuntu 12.04.

jamiesonbecker 12y ago
What video card/drivers? Open source or closed binaries? It's working great for me on Debian 7 (wheezy), which is similar to Ubuntu 12.04, w/ non-standard Firefox 38.0a2 Dev Edition and nvidia/GL closed-source drivers.

tadfisher 12y ago

Does anyone else miss the days when you could right-click on any page and see what magical incantations drive what you see? I feel like modern Javascript pipelines and the drive for loading speed is endangering what used to be how we all learned Web technologies.

chrisan 12y ago
Everyone loves pagespeed and github far more fun than view source! Are you suggesting you dont want things minified?
- jamiesonbecker 12y ago
  OP has a point.. Minification devolves to obfuscation for the most part once zlib compression enters the picture. The next version of Userify.com is not going to be minified, just gzipped.
- tadfisher 12y ago
  I'm not suggesting the solution to this problem is to abandon compression. I'm suggesting that we make "View Source" do what it says on the tin. Perhaps a "readable-src" attribute on the <script> tag.
  - keda 12y ago
    there is sourcemap.
  - DiThi 12y ago
    That's what source maps are for. I only enable them for development, though.

joshuahutt 12y ago

Looks nice. You should add `-webkit-backface-visibility: hidden;` to the elements that have that weird shifting behavior, such as your `.modal-form-wrapper`. Pretty much anything you've done a non-3D transform on.

automathematics 12y ago

I really like your animations! What library is that? My only concern is that you call this a "simple note taking app". Taking a look here: https://github.com/asm-products/notello https://github.com/asm-products/notello it's anything but simple! Not only are you selling yourself short but to a user new to react, they might think "Great, I can learn from this!" and it's actually quite complicated! I've been doing JS for many years and you're the first project I've seen with a "gulp" folder for example! I still don't even know what that's for (vs a gulpfile.js). I think I would just say "Notello: A note taking app" :)

ny2244111 12y ago
Point taken. The animations are just pure CSS3 although the fades still use jQuery. I got the gulp folder idea from this blog post as a way to decouple gulp tasks from individual projects: http://viget.com/extend/gulp-browserify-starter-faq http://viget.com/extend/gulp-browserify-starter-faq

deleted 12y ago

[deleted]

BrianHutch 12y ago

Its fantastic. Simple on the one hand, but pretty sophisticated on the other. A UI suggestion: When I am "in" a box, there should be a clear indicator of how to go back to the top level. The "x" for closing the box is a little too subtle, and possibly overoaded with "delete". I'd rather see a back arrow utilized. Hovertips helped of course. I also think when your view is with the box open, then adding a note should by default add that new note to be a child of the box.

nicklo 12y ago

The note text box breaks iOS autocomplete support. It's doing something funky where the keyboard api can't recognize previous words. May want to consider just using a native text box instead of something custom and funky with JavaScript. Will probably resolve the typing performance issues others have mentioned.

deleted 12y ago

[deleted]