

Show HN: My first significant project with Backbone.js - a simple online editor - jamesjyu
http://www.quietwrite.com/home

======
jashkenas
Beautifully done.

I've played around with a similar little app in the past, just to get familiar
with HTML5 SQL Databases ... long before Backbone ever came about. If you're
in a browser that supports 'em, you can take a peek here:

<http://internettypewriter.com/>

There are a couple little things you might want to steal. The ability to
switch the color scheme from light to dark is nice for writing in low-light
places. It would be great if there were a way to trash the current page. It
would be nice if the URL for "Your Writings" left off the trailing hash mark.
And, this is tiny -- but I'd love the option to choose a monospace font that's
a bit nicer than Courier, for full typewriter mode; say Monaco, or Menlo.

So, how'd Backbone work out for an app like this? Any trouble spots worth
mentioning?

~~~
jamesjyu
Nice app! Love the simplicity. I have some color scheming things in the works,
and a "night mode" is definitely on the list.

Backbone worked great. There were definitely some things that didn't jive well
with Rails. If I get some time, I'll write about it. My fork is here:
<https://github.com/jamesyu/backbone>

Though it's not quite ready yet for general use, as I haven't really polished
it up. But you can get the drift of what I'm after by looking at the commit
diffs.

------
Pewpewarrows
This is a really nice app, and I'm pretty excited to play around with it more.

But I'm even happier to see that more people are discovering Backbone.js.
After discovering it myself a few months back, it's felt equivalent to the
first time I discovered jQuery after having written just plain old javascript
for what seemed like an eternity. It was just a giant wake-up call to how
awfully hatched together my previous apps were, and even though it's
"overkill" for most of my sites I still use it anyway just to stay familiar.

For the uninformed, it's an extremely lightweight javascript front-end MVC
framework (it's less than 4 kb when minified and gzipped, and just a single
file to include). That immediately appealed to me. There's no complicated or
overengineered new directory structure or significant paradigm switch I have
adjust to, incorporate into my build system, etc. You basically just translate
your existing MVC methods to the browser. Your Models are structured data that
are aware of the RESTful URL where it can serialize itself to save or grab
updated versions of itself from. Your Views are two-way bindings of your
Models to any UI elements on the page that represent them. If your Models
should change because your long-polling revealed that they've been updated,
any UI elements that you've connected them to will automatically reflect those
changes. And if you interact with those UI elements, and it happens to change
the state or data of a Model, the connection still exists and the Model knows
the back-end's RESTful URL to send its update to. The Controller ties it all
together by routing deep-linkable hash URL fragments (like "#/book/1") to your
existing Collections of Models and Views.

It won't provide you with megabytes of UI libraries and widgets, or overwhelm
you with an insane amount of options or functionality. It's just an excellent
foundation that lets you really clean up your front-end logic from what would
otherwise be a chaotic soup of click bindings and callback functions over
thousands of lines of code. I really want to encourage others to try it out on
their next project: it's just fun to use.

~~~
exit
can you recommend an open source app developed using Backbone.js?

i was hoping the OP source would be available but it seems to be minified.

~~~
cdr
There's some nice annotated examples in the documentation itself:
<http://documentcloud.github.com/backbone/#examples>

------
Xk
If you're considering developing this app further, you might want to take a
look at the security of your app. A few minutes and I found quite a few XSS
attacks on it.

If you'd like, I can email you all of the attacks I've found so you can fix
them.

Edit: XSS isn't all there is to worry about.

~~~
jashkenas
jamesjyu: If you haven't seen Backbone.Model's "escape" method yet, it can
help sanitize your model attributes, without having to constantly re-escape
them at every use.

<http://documentcloud.github.com/backbone/#Model-escape>

~~~
bricestacey
Does rendering attributes using jQuery's text() method[1] properly sanitize
the model attributes too?

I ask because I'm making a backbone app and I'm following the same process
found in Ben Nolan's mobile app [2] where he does something like

    
    
      this.el.find('h1').text("Editing " + (this.model.getName()));
    
      [1] http://api.jquery.com/text/
      [2] https://github.com/bnolan/Backbone-Mobile/blob/master/application.js

~~~
jashkenas
Yes. jQuery's text() method will properly escape HTML fragments.

It's just a bit more verbose and a bit slower than using .escape("attribute")
within a template.

------
mrchess
Cool! FYI there is something wrong with the fadeIn/fadeOut of the header (try
editing the doc name and moving the mouse). Looks like whatever event you are
listening to may need an extra conditional.

------
armandososa
Very cool! I've been wanting to play with backbone.js for a long time but I
can't make time for it. Hopefully next weekend I'll have time.

Are you planning to make a tutorial or something?

~~~
jamesjyu
I might if I get some time, there are definitely some tips and tricks.
Backbone is wonderful -- much kudos to the DocumentCloud guys. They gave us a
great framework, and they're actively developing it too.

------
bewildergeist
Very cool. Rather than supporting a subset of html tags, why not just do
Markdown formatting of the text when it is published?

------
jorangreef
Well done. Great to see support for tabs. Only thing with this however is that
canceling a key event in Safari breaks native textarea undo. Maybe you can let
the tab event run through, which would focus another input element, and then
have an event handler (or timeout) to set focus back to the textarea at the
right position.

------
kajecounterhack
Love it! It's like writeroom / pyroom for the web. Except that I like your
colors better, because they make me feel all peaceful inside.

It's not saving correctly right now though?

------
listic
The heading ("QuietWrite", "Untitled") keeps flashing for me.

~~~
jamesjyu
What browser and version are you using? Does the whole top bar flash?

~~~
listic
Firefox 3.6.13. Yes, the whole top bar. It fades out after a timeout, and
fades back in on the slightest move of a mouse. So, if you are mousing around,
it fades out/in ("flashes") from time to time.

~~~
jamesjyu
Ah, gotcha. Will fix that.

------
dmvaldman
Great work. A full-screen option would be cool. As well as background/text
color options.

I'd also like to know your thoughts on backbone.js

~~~
jamesjyu
When you say full-screen, do you mean just maximizing the browser window? I
don't think there's a way to do real fullscreen using javascript, without
resorting to flash.

~~~
sirclueless
Hitting F11 works beautifully for me. The UI is very clean. I like that it
isn't too wide. If that's what the original poster meant, then I'm not sure
that it's necessary.

I would make at least one UI change though: make the page scroll smoothly and
earlier than it currently does. Right now the box you write in extends down as
you type long passages, until the text you are writing is literally pixels
away from the bottom edge. At this point, each line is written at the very
bottom of the screen, which is somewhat awkward, at least on my laptop. In
addition, where in a typical text editor or word processor one can scroll
until this text is at the top of the screen and then continue, because the
text you are writing is at the bottom of a html document, the best you can do
is scroll an inch or two down before you reach a blocking point.

It might be very nice to coerce the cursor position to between, say, 20% and
70% of the way down the screen so that you never have to type at the far edges
above and below, just as you leave space on the sides.

------
js4all
Great project and a nice demonstration of Backbone.js. I second the Markdown
idea. That would be very useful.

------
Detrus
That feedback button on the left is very distracting. I love the irony.

~~~
jamesjyu
Just changed this so that it fades out too. Yes, you could cut the irony with
a butter knife :)

~~~
davidradcliffe
You should disable the fadeout when the feedback dialog is open. It's a bit
weird to have a modal dialog suddenly disappear when it is open.

------
baggachipz
Typo on the home page: "Easily share YOU writings with everyone."

------
apl
Very _tasteful_.

------
Void_
I'm wondering, what are you using for backend? Rails?

~~~
jamesjyu
Rails.

------
johnnyg
This is really elegant. Well done!

