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