IRC 2007/02/01

(15:51:55) lewiscot: Salut. Ca va?
(15:55:23) jfh: Salut! ça va bien!
(15:55:28) jfh: Et toi?
(15:55:36) lewiscot: Tres bien.
(15:55:57) jfh: Cool! Voilà Daniel.
(15:55:57) daniel: hi
(15:56:06) lewiscot: Excellent.
(15:56:07) daniel: hello scott
(15:56:13) lewiscot: Hey Daniel.
(15:56:35) jfh: OK.
(15:56:35) jfh: Did you received my last e-mail?
(15:57:29) lewiscot: Yes. It seems we are thinking on the same lines.
(15:57:48) jfh: Indeed :)
(15:57:51) daniel: yes
(15:58:44) lewiscot: One thing I forgot to mention about my editor is that the installation is unbelievably easy. All you have to do is link the JS file and assign a class name of "bbeditor" to the textarea you want to be "editorized".
(15:59:03) lewiscot: Overall my editor is not that great but it has some nice features - I think.
(15:59:46) jfh: I like it - but I think it's too complex for a non-geek...
(15:59:46) lewiscot: The image selector is my favorite part.
(15:59:54) lewiscot: Yes, I would agree with that.
(16:00:19) lewiscot: When I first discovered WYMeditor I thought "Damn. Now this is how it is supposed to be done".
(16:00:26) daniel: :)
(16:00:32) jfh: Thanks
(16:00:39) lewiscot: Are both of you in Belgium?
(16:00:42) daniel: yes
(16:00:56) jfh: We share the same office
(16:00:59) lewiscot: Ok.
(16:01:18) jfh: We work at H.O.net
(16:01:38) lewiscot: Sorry, my knowledge of Belgium is limited although I did know about the 3 languages.
(16:02:03) lewiscot: I've read that all street signs are in 2 languages. Is that true?
(16:02:13) daniel: maybe in brussels
(16:02:21) lewiscot: Ah, ok.
(16:03:02) lewiscot: BTW, I will probably practice my French on you. I apologize for how bad it is. It has been about 9 years since I have spoken it so it is very rusty.
(16:03:25) jfh: I apologize for my bad English, too :)
(16:03:33) lewiscot: Mais, je le parle assez bien pour un American.
(16:03:35) daniel: me too hehe
(16:03:49) jfh: C'est sûr!
(16:03:49) lewiscot: Your English is very good. Much better than my French.
(16:04:09) jfh: Flowers!
(16:04:28) lewiscot: We are expecting our first snow today. Finally.
(16:04:34) daniel: :)
(16:04:45) lewiscot: Nice day to stay inside with a big cup of coffee.
(16:04:52) lewiscot: May I ask how old you both are?
(16:05:00) daniel: 27
(16:05:04) jfh: I'm 32
(16:05:16) jfh: And you?
(16:05:17) lewiscot: I'm 37. I was just curious.
(16:05:29) lewiscot: How long have you been programming?
(16:05:43) jfh: 22 years :)
(16:05:49) lewiscot: Wow!
(16:05:58) daniel: ... i won't define myself as a programmer
(16:06:04) lewiscot: I've been playing around with it for 8 but only seriously for 3.
(16:06:17) lewiscot: The first language I learned was Applescript. :-)
(16:06:38) daniel: but i know CSS/XHTML very well and i play with js and php
(16:06:38) lewiscot: I am learning C++ now but it is slow because it is a difficult language.
(16:06:48) jfh: I agree
(16:06:55) lewiscot: A whole different world than scripting languages.
(16:07:05) lewiscot: Daniel, are you a designer?
(16:07:08) daniel: yes
(16:07:23) lewiscot: My degree is in graphic design but I hated doing it as a job.
(16:07:31) daniel: ah
(16:07:35) lewiscot: Clients can be such a pain. "Make the logo bigger".
(16:07:52) daniel: I think i manage it not too bad
(16:08:02) lewiscot: I still design logos on the side because I enjoy that.
(16:08:08) jfh: (Daniel is very patient)
(16:08:10) daniel: i rather don't have much problems with clients
(16:08:23) lewiscot: It takes a patient person to work closely with clients. I tend to be a bit impatient.
(16:08:30) lewiscot: I admire the ability.
(16:08:57) lewiscot: Ok. I'll let one of you guys take over...
(16:09:19) jfh: OK.
(16:10:04) jfh: THE question: what would you like to do in WYMeditor?
(16:10:48) lewiscot: I am open to anything. I am thrilled to be able to contribute. As I said, I really like the product and I think it has the potential to be the next big editor.
(16:10:59) lewiscot: I can contribute as much or as little as you want.
(16:11:14) lewiscot: I use Mac so doing the Safari stuff makes sense.
(16:11:43) lewiscot: I would like to contribute to the overall architecture as much as possible but this is your show so I will follow your lead.
(16:11:53) daniel: thank you for your enthusiasm :)
(16:12:05) lewiscot: NP
(16:12:11) jfh: OK.
(16:12:11) jfh: So you use jQuery?
(16:12:23) lewiscot: I get very excited about things that interest me.
(16:12:25) lewiscot: Yes.
(16:13:05) lewiscot: I just started using it about a month ago but I am a very fast learner. I looked at other JS frameworks like Prototype, YUI, etc. but i think JQuery is the better choice.
(16:13:23) lewiscot: YUI has some very nice features but it is huge.
(16:13:34) lewiscot: JS code should be as lightweight as possible.
(16:13:40) lewiscot: JQuery is only 15k.
(16:13:49) lewiscot: And has a lot of very nice extensions.
(16:14:08) daniel: yes, we think like you
(16:14:27) lewiscot: If you have not used JQuery-DOM, I recommend it. Very nice and you do not need to imbed HTML in the JS.
(16:14:46) lewiscot: Example:
(16:15:08) lewiscot: $.DIV({class:"foo", id:"bar"},"Some text");
(16:15:42) lewiscot: $(document.body).append($.DIV({class:"foo", id:"bar"},"Some text"););
(16:15:57) jfh: ah, ok!
(16:16:19) jfh: I use jQuery in my tests
(16:16:26) lewiscot: Yes, I saw that.
(16:16:28) jfh: branches/jf.hovinne/test
(16:16:37) lewiscot: I looked at all of them.
(16:16:41) jfh: what do you think about them?
(16:17:23) lewiscot: Some of them look promising. Others were not finished so I could not tell what you were trying to do.
(16:17:57) lewiscot: You definitely have the right idea in writing WYMeditor as a JQuery extension. That is exactly what I was thinking of doing.
(16:18:14) lewiscot: Before I contacted you I was thinking about rewriting WYMeditor in JQuery.
(16:18:27) lewiscot: I'm glad I got in touch first - saved myself a lot of work.
(16:18:48) lewiscot: Something to consider:
(16:19:29) lewiscot: If WYMeditor is written as a JQuery plugin, you could use the popularity of JQuery to further build the awareness of WYMeditor.
(16:19:46) jfh: of course
(16:20:23) lewiscot: Also, if WYMeditor is also extensible (as you have already mentioned) then third-party developers can further build the appeal of the editor.
(16:20:54) lewiscot: In my experience though, whether or not *I* use a product comes down to 2 things:
(16:21:06) lewiscot: (1) How easy is it to implement
(16:21:14) lewiscot: (2) How easy is it to modify
(16:21:29) daniel: (3) how useful it is ... ;)
(16:21:42) lewiscot: LOL. Yes, that is a given.
(16:21:55) lewiscot: If it is not useful - what's the point? :-)
(16:22:09) daniel: hehe just kidding
(16:22:14) lewiscot: And of course (4) how much does it cost?
(16:22:31) jfh: (5) Is it Free Software?
(16:22:57) lewiscot: That always raises the appeal a bit.
(16:23:28) lewiscot: What is the "next step" you have planned for WYMeditor?
(16:24:03) jfh: 0.3 will be compatible with MSIE/FF/Opera/Safari
(16:24:14) lewiscot: Schedule?
(16:24:46) jfh: Well, if we start from test 013, 2 months I guess
(16:25:00) lewiscot: That sounds reasonable.
(16:25:10) jfh: to have basic features
(16:25:21) jfh: a working editor
(16:25:23) lewiscot: How much work has been done on the architecture?
(16:25:53) jfh: What do you mean?
(16:26:05) lewiscot: Have you thought through the design of the API?
(16:26:50) jfh: OK.
(16:26:50) jfh: 0.3 is in a very early stage
(16:26:59) jfh: The main question now is:
(16:27:15) jfh: Do we use contentEditable/designMode or not?
(16:27:31) lewiscot: I agree, that is the first big decision to make.
(16:27:41) lewiscot: What is your thinking on it?
(16:27:55) jfh: We need to make further tests
(16:28:21) lewiscot: I assume the testing is to see if contentEditable/designMode can be made to work with Safari.
(16:28:40) jfh: that's the first thing to do
(16:28:54) lewiscot: Daniel, your dynamic CSS article on your blog is awesome.
(16:29:15) daniel: the main problem lies in the fact contentEditable/designMode are horribly broken and difficult to work with
(16:29:18) daniel: thanks
(16:29:53) jfh: very difficult, especially in MSIE
(16:30:16) lewiscot: Yes, I discovered that the support is unreliable. However, one thing to consider is what the support will be in the future. Is it likely to be the method of choice after the feature matures a bit more.
(16:31:07) daniel: ... contentEditable/designMode's developments seem to be inactive
(16:31:23) daniel: so we can't rely on improvments
(16:31:49) lewiscot: that is useful information. Do you think DOM manipulation is the way the industry is going?
(16:32:28) daniel: what do you mean exactly ?
(16:33:30) lewiscot: I mean not using contentEdtiable/designMode. Actually manually manipulating the DOM with JS.
(16:33:38) daniel: ok
(16:33:46) jfh: This is easy with jQuery
(16:34:13) lewiscot: contentEditable/designMode is very convenient (when it works) but it does not seem to be the sort of thing the W3C would endorse as "standard".
(16:35:08) daniel: we have to experiment, designmode has the advantage to be very intuitive to use for the end-user, I don't know if it would be possible to achive the same level of interactivity with dom manipulation, or it would have to be done in an innovative way
(16:35:39) lewiscot: Agreed. I'm sure that is why editors like TinyMCE are so big.
(16:36:09) jfh: very intuitive, and UI problems are resolved
(16:36:18) daniel: I don't know any example a of DOM-manipulation based editor which would be really easy to use for our end-users
(16:37:02) lewiscot: I don't know of any either.
(16:37:06) jfh: I don't think it will be so easy to use as wysiwyg
(16:37:10) lewiscot: So I guess we will create the first.
(16:37:15) lewiscot: And become famous. :-)
(16:37:21) jfh: lol
(16:37:41) daniel: but we have talked with JF about different approaches which could be interesting, but some more research has to be done
(16:37:59) lewiscot: What approaches have you discussed?
(16:38:15) jfh: ie test 007
(16:38:23) lewiscot: Ok.
(16:38:37) lewiscot: let me open that one up...
(16:39:03) jfh: of course, this is a test
(16:39:10) jfh: very basic
(16:39:24) jfh: 26 lines of JS
(16:40:04) lewiscot: I see. So the textarea does not exist until an element is selected.
(16:40:17) jfh: Yes. The idea behind this: you click on an element, you edit in a textarea.
(16:40:59) jfh: no HTML code in the textarea, though
(16:41:06) lewiscot: I will put a demo online for you to check out. I had started creating a GUI similar to the way Adobe Illustrator works. Let me see if it is still online.
(16:41:15) jfh: ok
(16:43:24) lewiscot:  http://www.bright-crayon.com/demos/canvas/
(16:43:56) lewiscot:  http://www.bright-crayon.com/demos/canvas2
(16:44:07) lewiscot: I don't know how well they work in IE
(16:44:13) lewiscot: If at all
(16:44:55) lewiscot: They should work in FF
(16:45:03) jfh: how do you edit text?
(16:46:41) lewiscot: I have not gotten that far in the testing. The idea is to use the window.selection element and manipulate text that way.
(16:46:56) lewiscot: It will be very calculation-heavy so that concerns me.
(16:47:27) lewiscot: It seems to be the easiest method for support in all browsers though.
(16:48:10) lewiscot: The purpose of those two tests was to make sure I could manipulate any element in the DOM. the tests were all successful.
(16:49:43) daniel: it's interesting, but I am not sure to understand where you are going with this, could you expalin a little ?
(16:51:41) lewiscot: Sure. The idea was to allow non-programmers the ability to create site templates with simple drawing tools. They could also enter and manipulate text using buttons and keyboard commands. Sorry, I realize this is not very relevant to WYMeditor. I was thinking of another test I have somewhere that demonstrates capturing and manipulating text selections. I can't seem to find it at the moment.
(16:53:06) lewiscot: The only interesting part of those demos is the keyboard commands. If you draw a box, you can the arrow keys to move it around. If you place a background image, you can use alt + arrow keys to move the image within the box.
(16:53:06) jfh: ok, now I see :)
(16:53:24) lewiscot: shift + alt + arrows moves the image.
(16:53:31) lewiscot: alt + arrows resizes the box.
(16:54:05) daniel: "allow non-programmers the ability to create site templates with simple drawing tools" : that's interesting, i'm working on a similar project of a "CSS layout builder", I can show you my progress and we can talk about it later if you want
(16:54:08) lewiscot: It is just a demonstration that a web-based editor can be made to behave just like any other editing program (Illustrator, Quark, etc.).
(16:54:23) lewiscot: That sounds good.
(16:54:43) jfh: shift + alt + arrows moves the image: nice!
(16:55:29) lewiscot: Anyway, I think one way to overcome the editing hurdle is to write some robust algorithms for capturing selections within the DOM. With that done, I think actually manipulating the selection becomes the easy part.
(16:56:07) lewiscot: It would require an indirect approach, however:
(16:56:16) lewiscot: User selects text in the DOM.
(16:56:40) lewiscot: A "copy" of the selection is stored in memory and manipulations made to the copy.
(16:56:53) lewiscot: The copy is then rendered back in the DOM.
(16:57:04) lewiscot: Or rendered in the browser window.
(16:57:21) lewiscot: Right now my BBEditor works like this:
(16:57:34) lewiscot: The user enters some text in a text area.
(16:57:49) lewiscot: They can select some text then click a button to apply the tags.
(16:58:13) lewiscot: Then contents of the textarea are then parsed with Regex and rendered in the preview area.
(16:58:33) lewiscot: My thinking is that the process can be reversed to work like this:
(16:58:45) lewiscot: The user selects some text in the DIV (now the preview).
(16:59:05) lewiscot: Clicks a button to apply B, P, h2, etc.
(16:59:24) lewiscot: A "copy" of that is manipulated in memory
(16:59:31) lewiscot: rendered in the DIV
(16:59:40) lewiscot: then copied to the text area
(17:01:41) jfh: OK. I think we should avoid HTML code in the textarea
(17:01:56) lewiscot: Explain.
(17:02:47) jfh: Hmm... where will the user edit text (maybe I didn't understand what you mean) ?
(17:05:02) lewiscot: Actually, I think you are headed in the same direction I was thinking. Typing in the textarea auto-updates the selected element. So would it be possible to have the textarea hidden and just allow the user to type on-screen? This would require capturing every keystroke but that is doable.
(17:06:03) jfh: Yes, that is maybe doable, maybe tricky... needs some tests
(17:06:26) lewiscot: It seems that there will be two major challenges:
(17:06:30) jfh: It should be great, BTW
(17:06:56) lewiscot: (1) Keeping track of the current position in the DOM
(17:07:05) lewiscot: (2) keeping track of the current selection offset
(17:07:38) lewiscot: If a user selects some text and makes it bold, then a new element has been inserted into the DOM, so their position in the tree has changed.
(17:08:19) lewiscot: Also, if the user selects say characters 4 thru 17 of text in a P element, and makes it bold, then the selection offets have changed as well.
(17:08:20) jfh: right
(17:08:45) jfh: that's one of the problems resolved by designMode :)
(17:09:14) lewiscot: Yes. It just occurred to me that we would be emulating the behaviour of designMode in JS.
(17:09:19) daniel: If you edit directly on the page, you are in fact in a WYSIWYG mode. But we could add some "visual help" to the edited element, during its edition, to turn it to a "WYSYWYM" mode.
(17:09:41) lewiscot: Can you explain the difference?
(17:10:19) lewiscot: Quick comment: JQuery has very good XPath support. This is good news for us.
(17:10:40) lewiscot: brb, putting on a pot of coffee
(17:10:45) daniel: WYSIWYG is the cause of many problems. If you have used WYMeditor, you have experienced a more WYSIWYM approach: block elements are clearly visible and identifiable, and so on
(17:11:29) daniel: bu putting a WYSIWYG in the hands of a non-technical used, you can forget about clean-structured documents
(17:12:12) daniel: but using a WYSYWYM approach, it's a lot easier to make a non-technical user write "clean" documents.
(17:13:25) lewiscot: I see.
(17:13:35) daniel: What is important is to have the "edition mode" look really different from the online result, if you don't want to confuse the user
(17:13:52) daniel: that's WYMeditor approach
(17:14:33) jfh: so we don't need true WYSIWYG
(17:15:06) lewiscot: I'm not suggesting changing anything about how WYMeditor works. That is what I like about it most.
(17:15:23) daniel: WYMeditor is a visual editor but it's important to keep it far from WYSIWYG
(17:15:30) lewiscot: Agreed
(17:15:51) jfh: Well, I don't know what it will be, maybe really different than current version...
(17:16:22) daniel: yes, the important fact is that end-users find it eay to use
(17:16:25) jfh: Depends on tests, time, ideas, problems...
(17:16:44) jfh: developers, developers, developers, developers
(17:16:51) daniel: :)
(17:16:56) lewiscot: Why don't we do this: I will download all of your tests, then experiment with Safari and try some different approaches as well. Keeping in mind that we want a true WYSIWYM approach.
(17:17:36) jfh: OK. Does 007 works already?
(17:17:44) lewiscot: Also, my business parnter, George, is a seasoned programmer and has worked for HP, Boeing and the US department of defense. I will talk to him about how to approach the problem.
(17:18:11) lewiscot: We should set some "requirements parameters" though.
(17:18:11) daniel: ok
(17:18:27) lewiscot: Yes, 007 works.
(17:18:34) lewiscot: At least I think it does.
(17:18:41) jfh: that's a good start
(17:18:49) lewiscot: The only problem is the html in the textarea.
(17:18:55) jfh: yes
(17:18:58) daniel: yes
(17:19:27) jfh: needs maybe 26 more lines
(17:19:35) daniel: and the adding of new block elements
(17:19:46) lewiscot: As I understand it, you want these things to be parameters:
(17:19:55) lewiscot: (1) WYSIWYM not WYSIWYG
(17:20:04) lewiscot: (2) lightweight with minimal JS code
(17:20:14) lewiscot: (3) all HTML hidden from the user
(17:20:37) lewiscot: (4) support for IE, FF, Safari and Opera
(17:23:10) lewiscot: Does that sound right?
(17:23:37) jfh: Yes, plus:
(17:23:37) jfh: - easy integration, as my tests
(17:23:37) jfh: - easily extensible
(17:23:37) jfh: OK, what I propose is:
(17:23:37) jfh: - make an archive of this session
(17:23:37) jfh: - create an account for you on the Trac and the repository
(17:23:37) jfh: - create a page on the wiki, describing next version, sharing our ideas with the community
(17:23:37) jfh: - asking for comments in the forum
(17:24:21) lewiscot: I plan to do my testing in FF on Mac because it is standards compliant and faster to develop for. After we agree on the right approach, I can port to Safari.
(17:25:11) lewiscot: That sounds good. Should we get together again in a week?
(17:25:57) lewiscot: Next Thursday is no good for me but any other day works fine.
(17:26:04) jfh: Well, the IRC server is online 24/24 so you're welcome
(17:26:04) jfh: The wiki is editable 24/24 also
(17:26:19) jfh: and e-mails
(17:27:51) jfh: BTW, maybe you already know this document:  http://www.quirksmode.org/js/selected.html
(17:28:12) lewiscot: Yes, I am a regular on quirksmode.
(17:28:29) lewiscot: PPK is the best JS programmer I have ever seen - by far.
(17:29:17) jfh: So, it would be a good way to start
(17:30:10) lewiscot: Yes
(17:30:21) jfh: In current wym.js: function getCaretPos()
(17:30:35) jfh: I found that hack on msdn IIRC
(17:31:49) lewiscot: Ok, I need to go now. When should we meet again?
(17:32:51) jfh: OK - on Wednesday at 15PM GMT?
(17:33:30) lewiscot: Ok. Sounds good. See you then.
(17:33:41) lewiscot: au revoir
(17:34:01) jfh: Ce fut un plaisir!
(17:34:01) jfh: A bientôt!
(17:34:06) daniel: ok, bye bye
(17:34:10) lewiscot: bye
(17:34:11) daniel: à bientôt