[ideas] Massive new note features

[peterwilli]

I've seen this application and I really like it, I was thinking about some update for using it's functionality even better!
What I really like is it's sort of inspirational vibe this application has around itself. It's hard to describe.

I just got some inspiration on how we can mix it with more functionality while keeping it still, really really simple!

I want to use this application for managing a small project and I do need the following features: Photos, Check marks (e.g for completing a list) and templates.

I go trough this how I would implement this step by step.

Photos

So what I was thinking is we could let users drag a picture into a corkboard, and a note containing that picture is automatically made.
The photos itself gets uploaded by a third-party upload service, or a upload backend on your own server. This is done by a backend script that will return a link (direct link preferred) which is then inserted in the note. Trough some embed-like scanning (could be done on the client-side for keeping extra speed on the server) we can replace the link by a photo. This also allows easy photo inclusion for photos that are already uploaded online. Optionally, when the note only contains a photo link, we could replace the note graphic by a polaroid-like photo print for instance.

If there is more than just a link, we can just embed the photo with the text in a regular note

Checkmarks

Just as photos, we keep a embed like format.
Say you type this in a note:

Features for v2:

[] Keep aliens away
[] Allow users to buy a revolver    
[] Keep clouds from crying

It becomes a note where the [] is replaced by a actual check mark. Toggling the checkmark to check (say the aliens part) it becomes this:

Features for v2:

[x] Keep aliens away
[] Allow users to buy a revolver    
[] Keep clouds from crying

Advantages

We keep the text-only format what makes this app really special. We only allow some syntactic sugar, we can later create more features like this and build on this!

• Remains compatible with any other app that uses text-only
• No need for fancy backend stuff for adding pictures (except uploading mechanism)
• No need for a separate database or something for keeping track on what's checked and what not
• It is automatically compatible with Socket.io and thus is automatically updated

As for the templates, we can just let the user mark a certain note as template, and offer a nice way to duplicate it from the top bar.

[peterwilli]

First demo right here for check boxes: http://cl.ly/image/1K0F1Z0g2p2q
If you want to try this yourself, check out the smart note branch on my fork: https://github.com/CodeBuffet/pinitto.me/tree/smartnote

[lloydwatkin]

Hi @peterwilli, sorry I haven't got back to you on this yet...

Photos

Ideally we need to come up with the data format that will hold the image, and a mechanism by which they can be added.

Originally I'd planned to allow for just externally hosted images. The problem here is that if someone links to a http image then the browser is going to complain.

On the other hand if we add an upload mechanism then costs for running the service go up and we need some way of protecting these images if the board is password protected (either way not big issues).

Checkboxes

I like this, very much like github's todo list (https://github.com/blog/1375%0A-task-lists-in-gfm-issues-pulls-comments).

I'm happy to use markdown syntax but want to stay clear of insisting that non-developers know how to use it. It also moves pinitto.me away from simplicity.

With version 2 I was planning on using just regular div rather than a textarea, it makes more sense. It means in this case we'd have to parse on focus, build on unfocus, and do something clever when the card is focussed an inline updates come in. Maybe look at an OT library for it.

Also be aware that unlike any of the similar applications pinitto.me renders card content as HTML to it can be read by search engines, and parses on load with javascript.

[lloydwatkin]

Nice demo BTW. Might be worth removing the use of textarea's in the current application to save what I can imagine would be a lot of effort to match the two styles.

[peterwilli]

@lloydwatkin I think that's a good idea to do, however we do need some way to let users edit the unformatted text, so I think we might have to store that somewhere else

[lloydwatkin]

@peterwilli text should always be stored as unformatted :)

I'd suggest that we need a library that will parse/build HTML to and from plain text. That way on initial load we can deliver HTMLified content and parse to unformatted text on focus of the card.

[peterwilli]

@lloydwatkin I mean storing the text unformatted for the UI :) Like, now there is a textarea holding the unformatted text (this is what the user edits and the server saves and updates) as far as I've seen the source. In my branch there is a div that is used to temporarily display the formatted text when the user is done editing. This doesnt have to be exposed to the server in any way (that's why I did it this way in the first place).

If we're moving to a single view to edit the text (which makes sense because styling 2 different elements the same way can be a pain across browsers like you said) we need to store the unformatted text so that if the user clicks the note we can replace the formatted text with the unformatted one, what's what I meant ;)

[peterwilli]

@lloydwatkin "I'd suggest that we need a library that will parse/build HTML to and from plain text. That way on initial load we can deliver HTMLified content and parse to unformatted text on focus of the card."

• I started on a part of this library, I'm not sure if there's already something out there doing the same thing. I've made a class called BaseFormatter that can be extended upon.

See smartnote-formatter.js in my branch to see how it's working. Basically all it takes to make new formatters is just to add a new instance of BaseFormatter to the array over there and off you go ;)

There is already 1 formatter for the check boxes. The reason I build a class-system for this is so that if you are going to make a new ui it's pretty easy to implement this again, in case it won't get merged into the project or for any other reason.

[lloydwatkin]

Then using your smartnote-formatter reversibly depending on incoming events and whether the user has the card focussed would seem ideal? i.e. never "store" different versions of the text just parse and build on demand. That would seem most sensible to me?

[peterwilli]

That's exactly what it does, or what it should do (I havent finished it fully yet)
The idea is that a lot of features should be possible, whenether it's pictures or check boxes, but in the end, it's just text-based. All of it. The formatter is just a different way to display the text in the notes.

[lloydwatkin]

👍

[peterwilli]

I'll continue somewhere in the weekend with elliminating the text area so we can have a similar style for both editing and displaying. I dont know exactly how to make a div act like a textarea, but I know it can be done.

[lloydwatkin]

contenteditable="true" hope it goes well, if you need help just ask

[peterwilli]

Thanks man, great simple project by the way!

[lloydwatkin]

Thanks, it needs some love but I use it on a daily basis myself.