Show HN: A simple note-taking app built in React | Hacker News Reader

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

notello.com

100 pointsny224411159 comments

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.

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.

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.

Slow for me too - i7 3770k, 16gb ram, win 8

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.

Frustrating. Not able to recreate. There are some unnecessary repaints but can't see much other than that.

Fixed now - whatever you did worked.

Hmm, its fast for me on a way older machine than the siblings have:

Intel Core2 Duo T9600, 4G Ram, Debian 64bit, Chromium 35, adblock plus as the only extension.

I just checked at chrome://gpu/ and I don't have WebGL or any other hardware acceleration feature for CSS etc. enabled. Perhaps the others experience some hardware acceleration gone wrong?

i7 16GB ram, latest chrome/ff/ie all work fine.. realize that doesnt help the cause but at least you aren't alone!

As an extra data point, the typing speed is fine on my old 1.6 Ghz Athlon 2650e, 2G RAM (running FF 36.0.4 under Arch Linux)

If you need "machine specs" for a simple note-taking app something more fundamental seems to be wrong.

It's a note-taking app. It should run fine on a 1980s calculator

http://guysgirl.com/wp-content/uploads/2013/07/why-you-mad-t...

The reason could be that React always revisits the entire virtual dom tree whenever something changes (even if it is only a very small change).

Could it be that it is slow because localStorage is updated on every keypress?

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.

Everyone loves pagespeed and github far more fun than view source!

Are you suggesting you dont want things minified?

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.

there is sourcemap.

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

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.

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.

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. I then tried going back to notello.com, but seem to constantly get re-directed back to the error page.

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.

Yeah, that makes sense - the problem was the resulting lock-out.

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.

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.

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

Looks fancy, but I think the animations are too much/long for frequent / intensive usage.

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

+1. Thx.

Can you hold the title box instead of tapping to see if that allows you to type? Not sure why that is the case.

Works.

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 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" :)

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

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!

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.

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.

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.

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!

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.

BTW, thanks for not going completely flat.

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

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

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.

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

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.

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

Thx, will fix.

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.

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

I was developing it on assembly and therefore there's this repo: 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.

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

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.

What is the size overhead react adds to an app?

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

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.

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.

Love the password-less login!

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

Looks pretty slick! Nice job!

Reply on news.ycombinator.com