
Show HN: Real-time notes app built with Vue.js, inspired by Notational Velocity - meagher
https://notational.co/
======
cwilson
I'm a tad confused by a few things.

Is this meant to be a cool tech demo, or a real product? I noticed the author
mentioned adding new features and a premium version in another comment. This
leads me to believe it's intended to be a real product.

With that in mind, I have a few questions:

1\. If this is inspired by Notational Velocity, a very popular and real
product, why is this also named Notational? I understand if you're doing a
cool tech demo that it's not a big deal, but if you plan to charge money for
this you probably shouldn't copy their name.

2\. Was "Notational Velocity but real-time" your hypothesis of what would make
this something people want to use/buy? If so, what about all the other very
standard features that note-taking and thought storage apps have? Do you plan
to hit baseline with those?

3\. How do you compete with the larger companies who offer these apps for free
to their users? Google Keep, Apple Notes, etc.

4\. Is the real-time feature the only way you plan to make this
different/better than the others?

I'm not trying to be a downer here, but I feel like I see "X app but real-
time" posted to HN on a weekly basis now, like it being real-time is going to
be the differentiator that makes it wildly popular. Those products then go on
to ignore half the reasons why the others have users. Even if they reach
feature parity, their one differentiator is "well, it's real-time". I'm not
sure that's enough.

If this is just meant to be a cool demo of Vue.js (with an awesome homepage),
well done, ignore my comments =)

~~~
sotojuan
> Is the real-time feature the only way you plan to make this different/better
> than the others?

If so, Simplenote already does this and has apps for almost all platforms.

~~~
meagher
Nope, it's not the main feature. The main feature is to keep it simple so you
can create/retrieve notes really quickly.

This is the site you go to when you need to get something out quickly.

------
max0563
Vue.js is awesome! I am glad to see so many more people adopting it for
serious projects.

~~~
niho
I have been required to use Vue.js in a current project (a semi complex app
with lots of forms). It's the perfect way for clueless js fanboys to write
unmaintainable spaghetti code. It's nothing less than a poorly designed view
layer with no kind of architecture or tooling. It's naive and harmful (because
of the way it is being marketed). It's a hobby project by someone that think
they know what they are doing, but are really just mindlessly copying features
that sound cool from real projects without understanding the underlying
complexities or real world challanges. I've worked on large code bases on many
different projects, both front-end and backend, with many different frameworks
and architectures (including most of the popular js frameworks). Vue.js is the
single most stupid and pointless "application framework" I have ever used.

~~~
jeppebemad
Every framework enables spaghetti code, why should Vue be any different? Heck,
any beginner programmer is bound to make spaghetti code.

I'm not going to go into details why Vue is awesome (see all the other
comments for that.), but I don't see you bringing any valid arguments for your
statements. Sounds like a new framework has been pushed down your throat, and
that hurts. I get it :)

~~~
niho
Vue.js is basically just a js object wrapping a DOM node. It's claiming to be
the equivalent to a full fledged MVC framework (or similar). But it only
supplies the V and completely ignores the C and M. Leaving it up to you to
invent your own framework on top of it. The parts that Vue.js do supply are
not well thought out (Vuex is a nightmare). The parts that do work and are
nice are simply straight out copied from other frameworks like Angular. When
you give an average developer Vue.js as the only tool you end up with the same
kind of code you get when trying to write a complex SPA with jquery: a Single-
Pile-of-shit-App.

~~~
sizimon
I'm curious about where you saw claims of Vue.js being a fully fledged MVC
framework. Asking because I've always thought that Vue did a decent job of
being forward about exactly what it is. Just reading the first paragraph of
the guide ([https://vuejs.org/v2/guide/](https://vuejs.org/v2/guide/)):

"The core library is focused on the view layer only"

It seems to be pretty clear that it's meant to be a simple, easy to deploy,
view layer only. I think it accomplishes that purpose pretty well. There are
additional libraries (Vuex, VueRouter) which extend this core library into
something coming close to a full MVVM framework, but those libraries are all
maintained separately and not part of the core.

~~~
juandazapata
I agree. It's just an uninformed comment. Literally "Vue" means "view" in
French.

------
galfarragem
The landing page is great: it shows exactly what the product does/is and all
of this without having to scroll down.

~~~
meagher
Thanks! The goal was:

1\. Show the product

2\. Show the product

3\. Let someone sign up

------
pmilla1606
Firebase DB has reached maximum connections. Keep an eye on your usage:
[https://news.ycombinator.com/item?id=14356409](https://news.ycombinator.com/item?id=14356409)

~~~
marknadal
I work on an Open Source alternative, which isn't capped (and has an easy 1
click deploy to Heroku), hopefully this will be helpful for people maxing out
connections: [https://github.com/amark/gun](https://github.com/amark/gun) .

------
0xCMP
I never used Notational Velocity, but this seems like an awesome UI to use for
Notes. As long as you have powerful search you can always find your notes by
their content and create new ones when the ones you find aren't relevant.

How many times I've created a new note related to something I wrote about
before, but didn't want to search for. Now I'd basically be forced to search
for it when I tried to create the new note and I'd assume this would help keep
all those thoughts and ideas at least somewhat related to each other.

~~~
robgough
It really is great, I've been using it for years -- and all my notes are
stored as plain-text (markdown) files. Only downside is images really. If you
want to try it, check out this more-recently-updated fork. The creator of the
fork is apparently working on a replacement that I'm rather looking forward to
trying.

[http://brettterpstra.com/projects/nvalt/](http://brettterpstra.com/projects/nvalt/)

~~~
leemailll
Any recommendation for a companion iOS app to sync with NValt?

~~~
kwouk
1Writer[1] is the best I've tried, assuming you're using Dropbox for sync.

[1]: [https://itunes.apple.com/us/app/1writer-note-taking-
writing-...](https://itunes.apple.com/us/app/1writer-note-taking-writing-
app/id680469088?mt=8)

~~~
leejoramo
And Brett Terpstra -- the programmer of nvAlt -- uses 1Writer as well. He
reviewed 1Writer in 2015 and continues to recommend it.

[http://brettterpstra.com/2015/01/28/my-pick-for-best-ios-
nva...](http://brettterpstra.com/2015/01/28/my-pick-for-best-ios-nvalt-
companion/)

------
enraged_camel
Semi-related: I've been using Vue along with Phoenix on the server, and the
stack is simply incredible in terms of productivity and ease-of-use. I'm
tentatively planning on writing a book that teaches how to use the two
together (I call the stack "Vuenix"). Would people here be interested in that?

~~~
faitswulff
I love Vue and I'm interested in learning Phoenix. What's particularly
compelling about the stack?

~~~
enraged_camel
Phoenix is great because it gives you the same productivity benefits that
Rails does, but it doesn't have any of the crazy "magic", which makes it both
fast and also easy to understand. When you want to learn about how something
works you can pop the hood and read the source code, and it's both well-
documented and easy to understand. Elixir is also functional as opposed to
object-oriented, which means no leaky abstractions!

I like Vue because it's easy to pick up and it gets out of your way. It's not
as complex as React, but still very powerful and extensible. Vue's browser
extension is also top-notch.

I like working with them as a stack because they are both very transparent,
which makes it easy to reason about when you're passing data back and forth
between the server and the client. The only way I can describe it is that it
feels very "natural".

~~~
atom-morgan
How much time would you recommend spending with Elixir before moving into a
Phoenix app?

~~~
enraged_camel
Time-wise, it's hard to say. I went through Saša Jurić's _Elixir in Action_
[1] before diving into Phoenix. But that's because I was coming from an
object-oriented background (Ruby, some C#) and wanted a bit more exposure to
functional programming.

Elixir is a fairly deep language, but you don't need to know it inside out to
become productive with Phoenix. Obviously it depends on what type of app you
want to develop, but you can probably piece together a simple CRUD app just by
reading the official Phoenix guides. Everyone has a different style of
learning though so it's hard to say beyond that. Ultimately, just like with
Rails, knowing the language itself (i.e. Ruby) will be very helpful once you
get beyond the basics.

Specifically, there were a few things that took a while for me to fully wrap
my mind around. For example, data is immutable, so loops are written
differently. Instead of a traditional for loop to loop over a collection, you
would instead use recursion. So if you're like me and are used to reaching for
a for loop or a while loop to iterate over collections, you'll need a bit of
time to get used to some of Elixir's mechanisms.

[1][https://www.amazon.com/Elixir-Action-scaron-Juri-
cacute/dp/1...](https://www.amazon.com/Elixir-Action-scaron-Juri-
cacute/dp/161729201X)

~~~
atom-morgan
Awesome. Thanks for the reply. I'm comfortable with full-stack development
when I'm on MEAN but I've definitely been looking to branch out. I think you
convinced me to try Phoenix.

------
yev
Nice! Vue is <3.

I am actually also working on notes editor in my spare time. Using vue.js and
codemirror, keeping notes in local storage.

[http://notes.yev.io](http://notes.yev.io)

Was thinking of making the project public but not sure if anyone will be
interested.

~~~
dejawu
I've been making my own too! Used it for notes in class for the past two
years.

[https://nanote.co](https://nanote.co)

I really love the look of yours, by the way. It's super clean.

~~~
yev
Thanks!

------
danyim
The app looks really well put together. I went as far as creating an account
until I realized it unusable on mobile--I need to hit control + enter to
create a note.

~~~
meagher
Yeah, open to suggestions! The point is to use the keyboard for everything so
mobile is tricky.

Also, all the code is on GitHub
([https://github.com/tmm/notational](https://github.com/tmm/notational)).

~~~
icefo
You could add a + button on the left of the "search or create" field. No risk
of accidentally touching the search icon that way.

~~~
meagher
Great idea! That will definitely make it's way in.

------
mobitar
Also recommend checking out Standard Notes if you're looking for a cross
platform encrypted notes app. It's built with Angular and open-source.

[https://standardnotes.org](https://standardnotes.org)

------
JohnKacz
Very quick, nice work. I'm assuming more information and features are coming.
Do you have a place to follow along? (Twitter, blog, Github, etc.)

I'm interested in things like a feature road map, privacy policy, business
model.

Edit: OP posted below
([https://github.com/tmm/notational](https://github.com/tmm/notational))

~~~
meagher
Thanks! Yes, more features coming (and a pro version). Feel free to request
features or dig into the code
([https://github.com/tmm/notational](https://github.com/tmm/notational)).

You can follow along on GitHub, Twitter
([https://twitter.com/tomfme](https://twitter.com/tomfme)), and I'll send
email updates out to signed up users.

------
lol768
Nitpick: pressing up and down on the preview page scrolls the page _as well_
as stepping through the results in the top pane.

------
KaoruAoiShiho
The only reason I'm not using vue yet is because of react-native. Is the vue
equivalent of that going to finish soon?

~~~
meagher
Haven't tried it out yet, but Weex
([https://weex.apache.org/](https://weex.apache.org/)) looks really promising.
I think this will be table stakes for most frameworks moving forward.

------
taphangum
Love seeing examples like this. If anyone is interested in more in-depth Vue
examples and back and forth, check out the VueJS subreddit here:
[https://www.reddit.com/r/vuejs/](https://www.reddit.com/r/vuejs/).

------
adamcccc
NV is an awesome app, glad to see it now as a webapp too. The only thing I'd
ask for is the short key for creating a new note to be cmd + enter for us mac
people.

~~~
cdubzzz
I don't think this comment should be dead - adamcccc's confusion illustrates
the interesting naming used for this product and how it can cause confusion.
Looks like NV[0] has seen and approved of it, but it still seems like an odd
choice.

[0]
[https://github.com/tmm/notational/issues/2](https://github.com/tmm/notational/issues/2)

~~~
jscott313
Author's response to the Issue you linked:

"Also, will add the same text to the top of the README.md and the footer of
the home page, along with a link to notational.net."

He hasn't done those things yet, which is probably why people are confused
about it.

------
stefanwlb
That's awesome ! Would you be able to explain what frameworks, etc you used to
create it. I'm just learning to program. As in front end, back end etc.

~~~
meagher
High-level details: Notational runs on Firebase (serverless) and uses Vue.js
(along with Vuex and vue-router).

For more details, email me at tom@meagher.co. I'm happy to help anyone
learning to code/build apps.

~~~
catskull
Did you use some kind of UI framework? Is it just bootstrap? This design is
awesome. I _love_ the minimal direction we're heading.

~~~
meagher
Thanks! No UI framework just custom SCSS. Thinking about turning it into a
micro-framework if I have time.

~~~
wkirby
Your `palette` function is super dope. I'm gonna use that.

~~~
meagher
Thanks! I picked that up after reading a lot of SCSS on GitHub.

------
pritambarhate
Off topic, since this site uses firebase:

For firebase one has to include the API keys and other info in the JS itself.

I think that this is just another mongo DB like hack waiting to happen.
Becuase a lot of developers might not know how to configure firebase read,
write access rules properly. So as far as I understand anybody determined
enough should be able to read the JS and read and write(!!) to other people's
data.

Is there something I am missing here?

~~~
aaomidi
I've used firebase before, the default settings have proper read and write
settings per user.

------
owens99
Forgive me for asking, but I can't find a clear answer anywhere. What is the
business benefit to using Vuejs and what is the closest alternative?

~~~
noir_lord
If you are moving onto an old jquery style codebase (via inheriting/changing
job) Vue.js can be used as a straight drop in library via a script tag and you
can start unsouping that jquery mess.

It also reminds me a lot of a spiritual successor to KnockoutJS (which was/is
my favourite JS clientside tool still).

~~~
WhitneyLand
Interesting. That's a nice feature that sounds boring on paper but very
practical.

~~~
Can_Not
I'm using it with nuxtjs to achieve server side rendering, the benefits of
that being faster pageloads on first arrival and faster pageloads for SEO
ranking.

------
franole
>keep your hands on the keyboard

It is probably a question of generation, but young people do not want to use
the keyboard and do not value the agility that can be achieved. Not so long
ago, I spent some time adding keyboard shortcuts to an ERP written in Angular,
just to realize that only ~ 30% of users (those who had used the old DOS-based
ERP) saw value in that requirement.

~~~
cat199
While I get you on the under-appreciation of keyboard shortcuts, I think in
this case there is some overlap as a selling feature with both user types
since the actual application itself (vs navigation) is a text note-taking
application...

------
andreareina
Not working for me, I'm guessing it's due to this?

    
    
        FIREBASE WARNING: The Firebase database you are trying to 
        use has reached its peak connections limit. If you are the 
        Firebase owner, consider upgrading. (https://notational-
        velocity.firebaseio.com)
    

FF 53.0.2 on macOS, uBlock Origin isn't showing anything as blocked

~~~
skocznymroczny
why does it say notational-velocity in the URL if OP claims it's inspired by
it? Is it used its database for backend?

------
dhruvkar
Really Nice!

Small nitpick: Displays really well on mobile, however, creating a note
requires user to hit ctrl+enter, which is not easy to do on a phone.

~~~
meagher
Thanks for the feedback! Someone mentioned this earlier and I am going to add
something to make it easier.

~~~
dhruvkar
Great. Loving the clean design.

------
agnivade
Quick question - How are you using firebase for search ? I am building a forum
app using vuejs and firebase, and I dont have a elegant solution for search.

Btw - the codebase looks neat and very well-maintained !

~~~
meagher
Thanks! Search is currently client-side only
([https://github.com/joshaven/string_score](https://github.com/joshaven/string_score)).
This will need to change and I might move everything to Elasticsearch.

~~~
agnivade
So are you downloading everything from firebase and then doing the search ?

~~~
meagher
Yup, which is why it needs to eventually change. For the first version, I was
okay with the trade-off.

------
jmuguy
Hey just wanted to say I really like the UI work. I thought "dang, what CSS
framework is this dude using". Check the github and its just all you, so kudos
:)

~~~
meagher
Thanks! I appreciate it. CSS is my favorite!

------
yawz
Looking great! Thanks for sharing.

I assume it's not open-sourced, but I wanted to ask about the code
nonetheless. I would have loved to see it to appreciate Vue.js better.

~~~
meagher
It is
([https://github.com/tmm/notational](https://github.com/tmm/notational))!
Star, fork, watch it!

~~~
swah
I could try to understand from the source, but since you're here: how are you
handling application state and non-parent child communication?

Also, is your search feature client side only?

Also, Ctrl+enter isn't working for me (Chrome, Linux)

~~~
meagher
Yup, using Vuex (thanks @kylestlb)!

Search is currently client-side only (using string_score
[https://github.com/joshaven/string_score](https://github.com/joshaven/string_score)).
Eventually it could move to the server. Thinking about something like
Elasticsearch.

Ctrl + Enter not working is strange. I tested on a variety of browsers and
OSs. Can you message me at tom@meagher.co?

~~~
swah
Oops - it only fails when I use my "Caps lock mapped to control" on Linux
mint. With the proper physical Left Ctrl it worked.

No idea why those two combinations are different for the browser.

------
virgil_disgr4ce
As a daily—more like every minute—user of NV (actually nvAlt), and a proto-fan
attracted to Vue.js, I love this. Great work.

------
rglover
Great UI. Nice work :) Love the keyboard flow between creating notes and
searching for existing ones. Works really well.

------
_pmf_
I would love to have this kind of interface for the notes that I currently
keep in my Pinboard instance.

------
chrshawkes
Have trolls taken over the comment forums here? This example is hardly
anything more than any other TODO example provided by React, Ember, Angular or
anything else for that matter. I must be missing something clearly an app such
as this couldn't cause such excitement among the HackerNews community?

~~~
meagher
Hey! I made the thing and am just as surprised as you!

It is simple, but contains more than just your average TODO example (also it's
for notes). There are share-able links, auto-save, dark/light modes, and
almost everything can be done with the keyboard.

------
hilyen
Shortcuts do not work at all for me on OSX, I'd try this once that is fixed.

~~~
meagher
It was built using macOS so not sure what the problem is. If you want to
message me more specifics at tom@meagher.co, I can start looking into it.

------
amitmerchant
It would be really cool if you can make it a progressive web app.

~~~
agnivade
IKR !

I am making a pwa built with vuejs and material design. Its a forum software
inspired from flarum and google inbox.

Its only 30% done, but its getting there ! -
[https://github.com/agnivade/adda](https://github.com/agnivade/adda)

------
Jonovono
This is website only? That kinda defeats the purpose of a Notational velocity
clone doesn't it?

~~~
yawz
The title says "inspired by" it, so I don't think it was meant to be a clone.

~~~
meagher
Yup, not meant to be a clone. I use a Mac at home and Windows at work so I
needed something I could use anywhere.

------
rimjeilly
pretty cool, but isnt this pretty much Google Keep? Or is it more just to
display uses of vue.js?

~~~
meagher
Hey! Never used Google Keep, but I'll check it out.

The goal was to build a product I could use every day. (Showcasing Vue is a
nice side effect.)

