One of the disadvantages of writing a blog post on little sleep late at night in a hotel room while watching a movie and talking with Dion and doing your email is that you inevitably forget to write something you meant to.
In this case, one of the big drivers for writing the previous Bespin and Canvas post was to discuss accessibility–which I then neglected entirely to mention. Let me rectify that here and add a few other miscellaneous bits.
Accessibility
Rendering all of our content to a giant bitmap is obviously not the best way to integrate with all kinds of technologies designed to make content more accessible in various ways. But getting past that initial observation, we’re actually really interested in finding ways to make Bespin very accessible.
One of our initial ideas is to embed semantic content inside of the <canvas> element itself, as in:
<canvas> The content inside the Bespin editor could be embedded inside here as text nodes </canvas>
It might not be expensive (in UI latency terms) to keep these text nodes synchronized with the canvas editor since the UI thread doesn’t need to re-render anything as a result of the constant updates. If this approach were to incur a performance penalty, Bespin could have an “accessibility mode” that would optionally turn this on.
The Bespin dashboard also uses canvas, but for components instead of just text. We’re actually thinking of killing two birds with this one and having the hierarchy of the components defined inside of the <canvas> element:
<canvas>
<splitPanel>
<list/>
<horizontalTree/>
</splitPanel>
</canvas>
We could then build the UI using this hierarchy rather than by using the entirely programmatic approach we have in place now:
// this is pseudo-code not pulled directly from Bespin, but // Bespin's dashboard code looks similar var splitPanel = new SplitPanel(); var list = new List(); var tree = new HorizontalTree(); splitPanel.add([ list, tree]); ...
You would style and layout these components using separate artifacts (CSS and a layout-specific artifact).
We’ll talk more in a future blog post about this concept of using canvas to render components; it’s really more about supplementing DOM-rendered components with canvas-rendered components and laying out the combination with JavaScript (rather than CSS / HTML)–this is what we briefly mentioned as “Thunderhead” in the announcement video.
An advantage to this approach for accessibility is that we can provide a clean, fully-semantic hierarchy of the content, rather than status quo of HTML which runs the spectrum from style-and-content-mashed-together-seamlessly on one end to almost-pure-semantic-content-with-a-few-compromises-to-deal-with-CSS-realities on the other.
Let me again emphasize that Thunderhead is an experiment at what this kind of thing would look like; we’re not sure if we like it and we may scrap it entirely at some future point.
SVG?
We’re frequently asked why we didn’t use SVG for the editor. To be honest, the biggest reason is that I have a lot of experience creating custom components with Java2D, and Java2D strongly resembles the canvas API. It was pretty natural to start hacking away with canvas and JS.
But there are a few reasons we felt good about going down that road to begin with. First, based on experimenting with DOM rendering, we felt we had good reason to suspect that SVG wouldn’t perform as quickly as the canvas implementation since SVG has its own DOM API and thus is likely to mirror all of the performance issues to be had with HTML’s DOM.
On top of that fundamental concern, we had another: while it’s straight-forward to implement our own painting optimizations in canvas (and we have), with SVG it’s much more subtle and involves understanding the implementation details of SVG run-times and whatever optimizations have been implemented under their covers (again, the same as with HTML DOM performance optimization).
Also, as a fairly large specification, we were concerned about compatibility headaches as differing subsets of SVG are implemented in the browsers that support it. We didn’t have the energy to fight DOM compatibility issues during the day and SVG compatibility headaches at night.
Having said that, we’d love to see an SVG version of the Bespin editor emerge at some point and compare its performance and codebases. There’s certainly a good chunk of JS code that could go away if an SVG version worked out.
Stand-alone Editor?
We’ve also been asked whether we’d like to make it easy for folks to embed Bespin’s canvas editor in their own non-Bespin projects. Absolutely we do. Bespin will eventually spin out three projects:
- The Bespin project: an on-line code editor (i.e., the project we’ve currently announced)
- Thunderhead: a canvas/JS GUI toolkit
- (To Be Named Editor): a stand-alone canvas editor that you can embed
To make it seem less like I’m making this up just now, here’s what the Thunderhead logo looks like:
Canvas versus Firefox
Some folks have also wondered why we didn’t just enhance Firefox to do the things that we achieved by using canvas and JavaScript. The answer to that is simple: we’re not interested in making Bespin only run on Firefox. We want as broad an audience as possible to use it.
However, we’re already talking with standards folks and browser folks about how best to pull some of these ideas back into the browsers. This isn’t canvas versus the browser, it’s about using canvas to experiment with new features ahead of the browser, and applying those “learnings” (is that really a word? WTF) back to the browsers.
More to come soon, thanks for reading.
Ben Galbraith 
Bespin looks really slick guys, and I too want it to be accessible. Let me know if I can help.
Are you familiar with the expression “eating your own dog food”?
On one hand, we have folks, at Mozilla and elsewhere, telling people that open standards like HTML5, CSS, SVG, the DOM etc. are the way to go for building advanced interfaces on the client side, instead of using proprietary solutions like Flash or Silverlight.
On the other hand, we have other folks, also at Mozilla, saying that none of that stuff was good enough for them, so they had to go straight to 2d drawing primitives and rebuild everything from scratch. At which point, there is no technical reason not to do it with Flash instead, and get the additional benefit of running on all browsers now, with no compatibility concerns.
It’s also a bit unsettling to hear that Firefox couldn’t fulfill the text layout and rendering needs of a text editor, considering that 90% of its job is to layout and render text-based content with advanced styling (ie web pages).
It seems to me that Mozilla is shooting itself in the foot with Bespin, from a PR point of view.
@LaC: Actually, canvas is an HTML 5 standard, not a proprietary solution. It’s a peer to any other feature of HTML.
One of the cool bits about not having Bespin in Flash is that we can run Bespin on the iPhone (if we implement bitmap font rendering, which we may).
I don’t think it may be all that surprising that HTML isn’t optimized for code editors; that’s not really the browser’s primary purpose, is it?
Finally, the great thing about Bespin being a Labs project is that we’re free to experiment and try crazy things. I’m not very surprised that some people think we’ve gone off the deep end with Bespin, but we do hope to get some conversations started and learn some lessons to apply to our efforts at making the web better.
LaC: there are huge differences between canvas and Flash: canvas IS an open standard (see HTML5) and there are multiple interoperable implementations, even multiple excellent open-source implementations.
But you’re also right that using canvas is a giant workaround for missing functionality and poor performance in the text editing built into browsers, and that’s something we should do something about, and I think we will.
In the meantime, the open Web also needs killer tools, and if canvas is the expedient way to build them, then go for it.
Some (hopefully constructive) criticism on your logos:
Firstly, the Bespin logo looks to me like curly braces sitting on a beanbag. I’m not sure quite how you could make it look more like a cloud and less like a beanbag.
Secondly, I’m not a big fan of using initials in a logo, as in Thunderhead. It reminds me of Adobe products – although at least you’ve put more effort in than just drawing a square with some letters in. 🙂 Instead of the letters could you have a page with code on it or something similar? Or perhaps some other code symbols, you can’t really use {} in both logos though.
I know it’s early days and these things change with time, but thought I’d get my 2c worth in. Hope it helps.
Hi folks, very nice!
However, I’d also like to toss in a vote for sticking to contentEditable. There are already several proofs of concepts for syntax highlighting using contentEditable and they don’t appear to have the performance problems you seem to be concerned about.
Heres the first result off Google I found, for example: http://cdolivet.net/editarea/editarea/exemples/exemple_full.html. You can paste in tens of thousands of lines and editing is just as speedy as with a few lines.
Implementing columnar highlighting might be tricky, but its doable I think. The selection API certainly allows discontinuous selections, so if you got some font metrics you could implement that. Its also a candidate for the browser to implement.
The infinite spaces at the end of each line could also be implemented with a simple hack I think. It might involve a bit of capturing mouse/keyboard events and redoing some functionality yourself, but its better than doing the whole stack yourself no?
Could you maybe go into a bit more detail about why contentEditable is insufficient? As someone who hacks with it fairly regularly for more complicated apps than a text editor, I’d love to see some of its problems improved by the presence of a nice killer app utilizing it, so it pains me to see it being given up on. 🙂
I think BeSpin is a great idea, but I have to admit that the choice of canvas+javascript worried me a little: it makes evangelising open semantic markup and against Flash-like opacity much more difficult. So I am glad to see you’re proposing to shift to more open markup.
BeSpin highlights the fact that we need to address HTML+CSS’s *appalling* layout capabilities ASAP. If this project inspires those changes, that would be a fantastic result.
Ben, thank you for this new post about accessibility. I think that including the text content in the canvas element is a good choice.
Bespin will become a very good tools 🙂
The standalone canvas editor project is very interesting, I can’t wait to see it!
I guess you’ve chosen the MPL license on purpose, but why didn’t you choose a tri-license? Won’t that be a problem to include the standalone canvas editor in Mozilla-based projects?
Are you thinking of “To Be Named Editor” as a code editor? Otherwise, another downside of canvas would be the lack of spell-checking. Of course, that could be implemented from scratch as well.
> There are already several proofs of concepts for syntax highlighting using contentEditable
Not just proofs of concept, also a mature editor: http://marijn.haverbeke.nl/codemirror
I understand why canvas is used for the editor component, but why use it for the rest of the interface? I’ve not heard the reasoning beind that. It seems like the file chooser and open sessions could much more easily be implemented with HTML and JS
“Actually, canvas is an HTML 5 standard, not a proprietary solution.”
um, no. There is no “HTML 5 standard”, not even an “HTML 5 recommendation”, although there is increasing consensus that there is an “HTML 5 trainwreck”. Time will tell.
CANVAS tag was a “proprietary Apple solution” (Apple being the most closed and non-transparent hardware company), embraced later as a “proprietary Google solution” (Google being the most closed and non-transparent audience-tracking company), both of them trying to railroad through to have it become a de jure standard, ‘way in advance of it being any de facto standard.
That swear-word, “proprietary”… if you could cut it out of your vocabulary, eliminate reliance on a prejudicial label, then you might find that you can say more.
(Where do I stand on Bespin? If you can create something useful, great. But it does undercut the rest of the rhetoric used to differentiate from useful realworld solutions that were “not invented here”.)
(And btw, sorry if I come across as snappy here, Ben, these allergies are killing me. 😉
jd/adobe
@John Dowdell: Hey, Dion and I have a lot of friends at Adobe, we love you guys, let’s not start a flame war, okay?
@Reggie Drake and Cyrus Omar: Hey, syntax highlighting was never a reason to avoid contentEditable. Performance was. To remind myself of just how bad performance can be, I followed Reggie’s link to one of the CodeMirror sites, created a file ~1000 lines large, and the browser proceeded to deadlock completely.
I think that has more to do with it having to process 1000 lines of new code to syntax highlight. That could be lifted to a worker thread, no?
Once the text is there, editing is fairly snappy regardless of how much text is around.
Its not a huge deal, you’re definitely pushing boundaries either way with Bespin so kudos!
Woah, way too much hating on . Remember, the internet was built on “rough consensus and running code”, the IETF approach, and pretty much most progress in the Web since 1993 has been vendors shipping extensions which are later harmonized and ratified as a “standard”. Javascript itself was a Netscape extension, later a “standard”.
Canvas runs in WebKit, FF, and Opera now. It’s basically a defacto standard except for IE, so it is not going away anytime soon. Methinks canvas is encroaching on some territory that Adobe thinks is theirs and it’s touching some raw nerves.
opps, I shoulda escaped the brackets, that was supposed to say “way too much hating on <canvas>
@Ben: Locking up on a big file would be considered a bug in CodeMirror. Could you tell me which highlighter, which browser, and which file you used, so that I can try to fix it?
Canvas must be a browser standard.
How do I know this? I know this because it’s implemented in Opera, Firefox, Safari, and Chrome, but not in IE. Isn’t that the very definition of a browser standard?
Good work, folks. I have high hopes for Thunderhead.
As for your use of markup within the <canvas> tag, allow me to suggest an alternative approach. If you embed a “little language” for layouts, you can have the advantages of both declarative markup and lack of intrusion into the document:
var myComponent = Builder.build(
“” +
” ” +
” ” +
“”);
You can now take the approach of E’s quasiliterals:
http://www.erights.org/elang/grammar/quasi-overview.html
to substitute actual program values into the expressions. Let’s say each widget has a “model” attribute. You can then:
var myListModel = /* something */;
var myTreeModel = /* something */;
var myComponent = Builder.build(
“” +
” ” +
” ” +
“”,
{ myListModel, myTreeModel });
where I’m using proposed ES-Harmony sugar in which this:
{ a, b }
is shorthand for this:
{ a: a, b: b }
Sorry! I forgot to escape my angle brackets! Here are my examples again:
var myComponent = Builder.build(
“<splitPanel>” +
“<list/>” +
“<horizontalTree/>” +
</splitPanel>”);
You can now take the approach of E’s quasiliterals:
var myListModel = /* something */;
var myTreeModel = /* something */;
var myComponent = Builder.build(
“<splitPanel>” +
“<list model=@myListModel/>” +
“<horizontalTree model=myTreeModel/>” +
</splitPanel>”,
{ myListModel, myTreeModel });
…
(Just to prevent misconceptions: The bug in CodeMirror that Ben was referring to has since been fixed. There’s nothing inherently slow in designMode-based editors.)
Just curious, by why not write a tool that can translate declarative tags to script during or prior to the page rendering. This is what ASP.NET does with HTML tags. I believe Silverlight renders XAML declarative tags to .NET object, and even Google is working on a declarative markup for GWT(uIBinder or something).
Given the success of this model, why not come up with something similar for the canvas
When will thunderhead be split from bespin? I see great potential in an Open Source thunderhead like product.
Apologies if this is already done, I’ve just been looking for a thunderhead project for a while and cannot find it.
PS, well done on the awesome products.
Guido
Hey Guido,
I’ve been preoccupied with other things of late, but I would love to see Thunderhead split out. I’ll see if I can find time to dive in and get it split out from Bespin.
Ben
Hi there very nice site!! Guy .. Beautiful .. Amazing ..
I will bookmark your web site and take the feeds also?
I am satisfied to seek out numerous useful info here in the publish, we need work out more techniques in this regard,
thanks for sharing. . . . . .
Way cool! Some very valid points! I appreciate you writing this article plus the rest of the site is very good.
You have just built an attached garage with a foundation in the Sims 3, but a few finishing touches are needed.
That is why many people look to add windows to their garage door.
If your garage door is old and worn out, a new one can do a lot to
improve the look of your home.
You have just built an attached garage with a foundation in the Sims 3, but a few
finishing touches are needed. Tilt up doors use fir,
spruce and other soft wood; roll up uses oak, redwood or plywood.
These tend to be the noisiest of doors so bear this in mind if
you have a bedroom above and need to use the door when people may
be sleeping.
I relish, lead to I found just what I was taking a look for.
You’ve ended my four day long hunt! God Bless you
man. Have a nice day. Bye
I love what you ǥuys tenԀ to be up too.
This kind of clever work and coveraǥe! Keep up the superb works guys I’ve addeɗ you guys
to my personal blogroll.
Pretty nice post. I just stumbled upon your blog and
wanted to say that I have really enjoyed browsing your blog posts.
In any case I will be subscribing to your rss feed and I
hope you write again soon!
Way cool! Some very valid points! I appreciate you penning this article and also the rest of the website is
extremely good.
Hello would you mind stating which blog platform you’re using?
I’m planning to start my own blog in the near future but I’m having a difficult time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your design and style
seems different then most blogs and I’m looking for something
completely unique. P.S Sorry for getting off-topic but I
had to ask!
Are you ready to try out one of the women free dating sites or
are you interested in finding a different type of dating site.
All the users need to do is login with the username and password in some cases and can
complete the transactions for online transactions.
There is a vintage free printable Christmas coupon
book offered here, the coupons also have pre-printed “gifts” on them.
WONDERFUL Post.thanks for share..more wait ..
I was extremely pleased to uncover this site. I wanted to thank
you for your time for this particularly wonderful read!! I definitely enjoyed every
bit of it and i also have you book-marked to look at new information in your blog.
clash of lords hack tool includes a large function in U .
s . Tradition. Many individuals is frequently noticed getting involved
in routines related to clash of lords hack. That is in part
mainly because individuals of most age groups is usually engaged along with households are brought collectively by simply this
specific. Normally an individual exactly who
exhibits the hate for clash of lords hack tool may be considered the outcast.
monster legends hack 2014 carries a substantial position with U .
s . Way of life. Many people is frequently seen involved in routines related to monster legends cheats.
This really is to a certain extent due to the fact folks
of all age range might be included and also people are usually delivered collectively simply by
this specific. Usually someone exactly who features their own don’t like
regarding monster legends hack tool could possibly be
regarded a good outcast.
Having read this I thought it was rather enlightening.
I appreciate you taking the time and effort to put this short article together.
I once again find myself spending way too much time
both reading and commenting. But so what, it was still worth it!
Get focused and devoted and locate a spot where
you can play daily, whether with peers or other footballers.
Fans and media members who think the football Bedlam Series is a
premiere rivalry. I guess a handful of suspensions was enough to satisfy the NCAA.
Excellent post. I was checking continuously this blog and I’m impressed!
Extremely useful info particularly the last part 🙂 I care for such information much.
I was looking for this particular information for a very long time.
Thank you and best of luck.
buy xanax افضل شركة مكافحة حشرات بالدمام افضل شركة
تسليك مجارى بالرياض افضل شركة نظافة
بالرياض buy xanax buy xanax افضل شركة تخرين عفش بالرياض buy xanax
buy xanax buy xanax افضل شركة مكافحة الصراصير
بالرياض buy xanax رش مبيدات قبل صبة
النظافة شركة نظافة بيوت buy xanax
افضل شركة تنظيف فلل بالرياض
buy xanax buy xanax buy xanax buy xanax buy xanax
افضل شركة مكافحة حشرات بالرياض buy xanax buy xanax
buy xanax افضل شركة تنظيف فلل بالرياض
افضل شركة جلى بلاط بالرياض
buy xanax افضل شركة مكافحة حشرات بالرياض افضل شركة تنظيف بيارات بالرياض buy xanax
buy xanax
buy xanax buy xanax buy xanax buy xanax buy xanax buy xanax
buy xanax رش مبيدات قبل صبة النظافة
افضل شركة رش دفان بالرياض buy xanax buy
xanax افضل شركة مكافحة حشرات بجدة buy xanax buy xanax افضل شركة تنظيف فلل بالرياض buy xanax
buy xanax {افضل شركة جلى بلاط بالرياض buy xanax buy xanax buy
xanax buy xanax buy xanax buy xanax
شركات تنظيف بالرياض buy xanax buy xanax buy xanax buy
xanax buy xanax buy xanax buy xanax
Spot on with this write-up, I honestly think this amazing site needs far more attention.
I’ll probably be back again to see more, thanks for the info!
I don’t even know how I ended up here, but I thought this post was great.
I do not know who you are but certainly you’re going to a
famous blogger if you are not already 😉 Cheers!
Wow! After all I got a webpage from where I be able to
actually obtain valuable information regarding my study and knowledge.
Thanks for providing such a sample. But in fact, I think these are ASP.NET tags. Right?
Hurrah! Finally I got a weblog from where I be capable of really obtain useful
facts regarding my study and knowledge.
Could you share the link to bespin canvas repo. Also you mentioned 3 different editors, are these live now?