355
edits
Labs/Bespin/FAQ: Difference between revisions
→Why did you use Canvas?
| (12 intermediate revisions by 4 users not shown) | |||
| Line 22: | Line 22: | ||
Not only do we believe that the Web is the platform of now and the future, but we strongly believe in empowering the community | Not only do we believe that the Web is the platform of now and the future, but we strongly believe in empowering the community | ||
to take ownership of their | to take ownership of their tools. As Web developers, it made sense to us to have a malleable tool we could change to fit our needs using the skills we have. | ||
==== Why did you use Canvas? ==== | ==== Why did you use Canvas? ==== | ||
One of the main goals of Bespin is to see if we can build a responsive example, and one that can handle large files. We have seen great examples of Web based coding areas that normally enhance a textarea, use contentEditable, or do their work with the DOM (e.g. each line is a div). However, they often fall down with large files and the ingenious hacks that people use to get it working cause pain. This lead us to rolling our own editor in Canvas, giving us full control over the experience. Since we have the full control, it enables us to do interesting visualizations in the tool itself. | One of the main goals of Bespin is to see if we can build a responsive example, and one that can handle large files. We have seen great examples of Web based coding areas that normally enhance a textarea, use contentEditable, or do their work with the DOM (e.g. each line is a div). However, they often fall down with large files and the ingenious hacks that people use to get it working cause pain. This lead us to rolling our own editor in Canvas, giving us full control over the experience. Since we have the full control, it enables us to do interesting visualizations in the tool itself. | ||
Ben goes into more detail [http://benzilla.galbraiths.org/2009/02/17/bespin-and-canvas/ in this blog post] | |||
==== Is Bespin working with other Labs projects? ==== | ==== Is Bespin working with other Labs projects? ==== | ||
| Line 51: | Line 53: | ||
==== What are the pieces of Bespin? ==== | ==== What are the pieces of Bespin? ==== | ||
The initial Bespin prototype actually contains a few pieces. The major portion is the editor itself. The canvas editor is meant to be modular, and of course this is all Open Source. If you have the need for an editing experience in your projects, you could choose to use the Bespin editor. | The initial Bespin prototype actually contains a few pieces. The major portion is the editor itself. The canvas editor is meant to be modular, and of course this is all Open Source. If you have the need for an editing experience in your projects, you could choose to use the Bespin editor. | ||
==== How does the server work? ==== | ==== How does the server work? ==== | ||
| Line 84: | Line 86: | ||
Although we require that support, we have played with the notion of bitmap rendered fonts. Hopefully browsers catch up quickly so we don't have to do this ;) | Although we require that support, we have played with the notion of bitmap rendered fonts. Hopefully browsers catch up quickly so we don't have to do this ;) | ||
As of February 2009, Firefox 3.x and WebKit nightly builds have the proper Canvas support. Chrome also works, but is not fast enough with the particular operations that Bespin is performing. | |||
==== Is there an easy way to jump between the editor and the command line? ==== | ==== Is there an easy way to jump between the editor and the command line? ==== | ||
Yes there is! Simply type <code>Control-J</code> and you will flip between. You will notice that when the editor is out of focus the cursor will turn into a red block. In the command line the ">" prompt will turn orange when focus is applied. | Yes there is! Simply type <code>Control-J</code> and you will flip between. You will notice that when the editor is out of focus the cursor will turn into a red block. In the command line the ">" prompt will turn orange when focus is applied. | ||
==== Why did you decide to use Canvas and not contentEditable / DOM approaches ==== | |||
This project started as a challenge to see if we could create something fast and scale up to large files. We have tried to do this via the DOM in the past and always ran into bottlenecks and pain. The Canvas approach got us out from under the DOM and we thought it was an interesting path to go on. We wanted to share this with the community to see if it is interesting. We are game for people to try to do this using contentEditable / DOM / other techniques and would love to see those side by side. This was just our approach. | |||
==== Why did you choose Prototype? ==== | |||
This can become a religious war. There isn't a huge method to the reasoning on us choosing Prototype. There are a couple of things: | |||
* We did some jQuery work, but since the app doesn't actually use the DOM a lot, it didn't feel like the best choice for us. We love jQuery, but it lacked some of the helpers that we enjoy with Prototype (array stuff, OO stuff etc). | |||
* We use Prototype now, but this will probably change. We want components such as the editor to play nice, and adding global objects makes us a bit concerned. Also, with the comet work, and other pieces, it may make sense for us to actually turn to Dojo which has all of this already. Still working this all out. | |||
==== How can I get other languages support for syntax highlighting? ==== | |||
You have a couple of choices: | |||
* Wait for someone to do it. | |||
* Give it a go yourself! | |||
It isn't as hard as you think. Check out the [https://bespin.mozilla.com/docs/#code/syntax/javascript.js JavaScript Syntax Highligher] to see. | |||
We also have a plan for syntax highlighter plugins that will grok vim syntax files, emacs, or textmate so we don't have to reinvent the wheel. Want to help with that too? | |||
==== Why do you tell me my browser isn't supported? ==== | |||
We have seen some folks talking about the pop-up that we show when we detect that the browser in question won't support Bespin. | |||
It is important to note that we aren't doing a user agent check. We actually check for the functionality that is required for this to work: Canvas and a subset of Canvas (drawing text) | |||
You can see what we need in the following | |||
[http://hg.mozilla.org/labs/bespin/file/299bfe0abcfe/frontend/js/registration.js JavaScript Code]: | |||
function checkBrowserAbility() { | |||
if (typeof $('testcanvas').getContext != "function") return false; | |||
var ctx = $('testcanvas').getContext("2d"); | |||
if (ctx.fillText || ctx.mozDrawText) | |||
return true; // you need text support my friend | |||
else | |||
return false; | |||
} | |||
So, it isn't that we don't love your browser. It just won't work. | |||
==== Do you have a roadmap for Bespin? ==== | |||
We are hoping that the open community that is "the Bespin project" will make a roadmap very fluid. We have already seen people giving code drops with amazing experiments. However, to give a guide, here are some of the high level thoughts and items that we feel are worth investigating as a [[Labs/Bespin/Roadmap]]. | |||
==== Can I host Bespin on my own server? ==== | |||
Absolutely! We want this to happen. Currently there are implementations of a Python and Java server. The easiest to run is the Python server and [http://hg.mozilla.org/labs/bespin/file/14ae0b4af625/backend/python/README.txt here are directions] | |||
==== Why doesn't Bespin support i18n well? ==== | |||
Covered on [[Labs/Bespin/KnownIssues]]: | |||
[https://wiki.mozilla.org/Labs/Bespin/KnownIssues#Why_doesn.27t_Bespin_support_i18n_well.3F Why doesn't Bespin support i18n well?] | |||
==== I am having strange issues with my key bindings ==== | |||
Covered on [[Labs/Bespin/KnownIssues]]: | |||
[https://wiki.mozilla.org/Labs/Bespin/KnownIssues#I_am_having_strange_issues_with_my_key_bindings I am having strange issues with my key bindings] | |||
==== Why is copy and paste not working with the system clipboard? ==== | |||
Covered on [[Labs/Bespin/KnownIssues]]: | |||
[https://wiki.mozilla.org/Labs/Bespin/KnownIssues#Why_is_copy_and_paste_not_working_with_the_system_clipboard.3F Why is copy and paste not working with the system clipboard?] | |||
==== Why does it seem slow on Linux? ==== | |||
Covered on [[Labs/Bespin/KnownIssues]]: | |||
[https://wiki.mozilla.org/Labs/Bespin/KnownIssues#Why_does_it_seem_slow_on_Linux.3F Why does it seem slow on Linux?] | |||
==== Why does it seem slow on Chrome? ==== | |||
Covered on [[Labs/Bespin/KnownIssues]]: | |||
[https://wiki.mozilla.org/Labs/Bespin/KnownIssues#Why_does_it_seem_slow_on_Chrome.3F Why does it seem slow on Chrome?] | |||