4 ms·

Show HN: My first significant project with Backbone.js - a simple online editor

91 points by jamesjyu 16y ago

jashkenas 16y ago
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/ 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 16y ago
  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 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.
jorangreef 16y ago
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 16y ago
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?
armandososa 16y ago
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 16y ago
  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.
Xk 16y ago
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 16y ago
  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 http://documentcloud.github.com/backbone/#Model-escape
  - bricestacey 16y ago
    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 16y ago
      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.
- jamesjyu 16y ago
  Yes, please email at quietwriteapp@gmail.com -- Thanks!
  - Xk 16y ago
    You're really quite quick at fixing these things -- as I'm creating a demo page to email you, I'm noticing every time I refresh, one of the old attacks doesn't work any more.
dmvaldman 16y ago
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 16y ago
  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 16y ago
    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.
Void_ 16y ago
I'm wondering, what are you using for backend? Rails?
- jaekwon 16y ago
  backbone.js, so probably node.js
- jamesjyu 16y ago
  Rails.
Detrus 16y ago
That feedback button on the left is very distracting. I love the irony.
- jamesjyu 16y ago
  Just changed this so that it fades out too. Yes, you could cut the irony with a butter knife :)
  - listic 16y ago
    OTOH, feedback fades out even if you read it. I think, it'd better not.
  - davidradcliffe 16y ago
    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.
listic 16y ago
The heading ("QuietWrite", "Untitled") keeps flashing for me.
- jamesjyu 16y ago
  What browser and version are you using? Does the whole top bar flash?
  - listic 16y ago
    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 16y ago
      Ah, gotcha. Will fix that.
dsghrrtjrt 16y ago
Click on our website: ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== "Priority, my friend!! Christmas is coming, quick to our website shopping, our web site shopping there will be something different, unexpected things to you, let you have different sense, our website wholesale various fashion shoes, such as Nike, Jordan, prada, also includes the jeans, shirt, bags, hats and decoration. All these products are our free transport, prices are competitive, we can also accept paypal j, after the payment within short time, can ship. = New era cap $12; Air jordan(1-24)shoes $30; jordan air max oakland raiders $34a€“39; Ed Hardy AF JUICY POLO Bikini $25; Christan Audigier BIKINI JACKET $25; Tshirts (Polo ,ed hardy,lacoste) $15 coogi DG edhardy gucci t-shirts $18; gstar coogi evisu true jeans $35; coach chanel gucci LV handbags $36; Sunglasses(Oakey,coach,gucci,A r m a i n i) $15; ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ====
bewildergeist 16y ago
Very cool. Rather than supporting a subset of html tags, why not just do Markdown formatting of the text when it is published?
apl 16y ago
Very tasteful.
baggachipz 16y ago
Typo on the home page: "Easily share YOU writings with everyone."
Pewpewarrows 16y ago
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 16y ago
  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 16y ago
    There's some nice annotated examples in the documentation itself: http://documentcloud.github.com/backbone/#examples http://documentcloud.github.com/backbone/#examples
johnnyg 16y ago
This is really elegant. Well done!
mrchess 16y ago
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.
js4all 16y ago
Great project and a nice demonstration of Backbone.js. I second the Markdown idea. That would be very useful.

91 points by jamesjyu 16y ago

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/ 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 16y ago
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 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.

jorangreef 16y ago

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 16y ago

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?

armandososa 16y ago

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 16y ago
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.

Xk 16y ago

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 16y ago
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 http://documentcloud.github.com/backbone/#Model-escape
- bricestacey 16y ago
  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 16y ago
    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.
jamesjyu 16y ago
Yes, please email at quietwriteapp@gmail.com -- Thanks!
- Xk 16y ago
  You're really quite quick at fixing these things -- as I'm creating a demo page to email you, I'm noticing every time I refresh, one of the old attacks doesn't work any more.

dmvaldman 16y ago

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 16y ago
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 16y ago
  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.

Void_ 16y ago

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

jaekwon 16y ago
backbone.js, so probably node.js
jamesjyu 16y ago
Rails.

Detrus 16y ago

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

jamesjyu 16y ago
Just changed this so that it fades out too. Yes, you could cut the irony with a butter knife :)
- listic 16y ago
  OTOH, feedback fades out even if you read it. I think, it'd better not.
- davidradcliffe 16y ago
  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.

listic 16y ago

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

jamesjyu 16y ago
What browser and version are you using? Does the whole top bar flash?
- listic 16y ago
  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 16y ago
    Ah, gotcha. Will fix that.

dsghrrtjrt 16y ago

Click on our website: ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== "Priority, my friend!! Christmas is coming, quick to our website shopping, our web site shopping there will be something different, unexpected things to you, let you have different sense, our website wholesale various fashion shoes, such as Nike, Jordan, prada, also includes the jeans, shirt, bags, hats and decoration. All these products are our free transport, prices are competitive, we can also accept paypal j, after the payment within short time, can ship. = New era cap $12; Air jordan(1-24)shoes $30; jordan air max oakland raiders $34a€“39; Ed Hardy AF JUICY POLO Bikini $25; Christan Audigier BIKINI JACKET $25; Tshirts (Polo ,ed hardy,lacoste) $15 coogi DG edhardy gucci t-shirts $18; gstar coogi evisu true jeans $35; coach chanel gucci LV handbags $36; Sunglasses(Oakey,coach,gucci,A r m a i n i) $15; ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ==== ==== ( http://www.etradinglife.com http://www.etradinglife.com ) ====

bewildergeist 16y ago

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

apl 16y ago

Very tasteful.

baggachipz 16y ago

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

Pewpewarrows 16y ago

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 16y ago
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 16y ago
  There's some nice annotated examples in the documentation itself: http://documentcloud.github.com/backbone/#examples http://documentcloud.github.com/backbone/#examples

johnnyg 16y ago

This is really elegant. Well done!

mrchess 16y ago

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.

js4all 16y ago

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