
Show HN: A simple note-taking app built in React - ny2244111
https://notello.com
======
marknutter
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
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.

~~~
hackerboos
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
Frustrating. Not able to recreate. There are some unnecessary repaints but
can't see much other than that.

~~~
hackerboos
Fixed now - whatever you did worked.

------
tadfisher
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
Everyone loves pagespeed and github far more fun than view source!

Are you suggesting you dont want things minified?

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

~~~
DiThi
That's what source maps are for. I only enable them for development, though.

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

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

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

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

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

~~~
ny2244111
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
Works.

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

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

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

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

------
bshimmin
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
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
BTW, thanks for not going completely flat.

------
joelcollinsdc
also:
[http://todomvc.com/examples/react/#/](http://todomvc.com/examples/react/#/)

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

~~~
mbrock
The CSSTransitionGroup component that comes with the React "addons" is very
useful.

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

------
ttty
\- 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)

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

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

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

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

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

------
benologist
What is the size overhead react adds to an app?

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

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

------
shanecleveland
Love the password-less login!

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

------
wrd
Looks pretty slick! Nice job!

