« A cold day in hell | Main | Reunited with Paula, Lisa and Fat Angus »

Wednesday, January 19, 2005

Learning Curve

So, for the last seven days or so, I've been fully immersed in the world of javascript and the document object model. PHP seems like a distant memory and I've got the urge to use as many periods in one line of code as I can. Over the past few days I've finished our rich text editor (screenshot) (I can't stand typing WYSIWYG all the time) and a basic menu class for IP.Dynamic.

I must admit, prior to this intense javascript workout, my use of javascript was basic. I used it to test form fields, throw a bit of DHTML around the screen, basic text handling and the odd bit of trickery-pokery with cookies. I had flirted with DOM programming but never really into it. It's definitely been a great experience and I can see many ways in which to offload some low-key server side processing to client side processing (stuff that degrades nicely and doesn't require javascript turned on). That's not to say that I'm going to go DHTML mad, but there are some instances where it can be used to good effect.

It's been very handy having my newly acquired PC laptop next to me as the amount of inconsistency and bugs between browsers is shocking. With that in mind, here's my list of "Things I've learnt this week".

  • IE6 has a lot of browser bugs. My favourite is where select boxes and other widgets show over a DIV when the div is shown. This is interesting as there's nothing that says "cool" like a drop down box mysteriously floating over your menu. Thanks to Joe King's idea of adding an iFrame inbetween the widgets and the DIV as a shunt overcame that. Phew.
  • Mozilla crashes a lot when your programming is more DIM than DOM.
  • Programming for Opera is much like a real opera. You don't really understand the language but you get the gist of it and it's never really over until the fat lady sings.
  • Mozilla crashes a lot just (important enough to mention twice)
  • If Mozilla implements document.all, the world is in trouble.
  • If Konqueror or Opera introduce their own DOM based execCommand model, I'll cry.
  • Javascript loves hiding bugs. parseint() fails, parseInt() works. Hurrah!
  • 2100 lines of javascript code for a single RTE takes a long time to write
  • Microsoft's javascript debugger doesn't make any sense
  • Mozilla's javascript console is the best thing since - well, Mozilla.
  • If you leave Mozilla's javascript console open whilst browsing the web, it fills up with errors and warnings pretty fast.
  • I'm expecting a lot of bug reports from the RTE; such as "It uses <br> not <br />!" and "Why not use PX font sizes?" all of which will gleefully be filed under "Don't talk to me, talk to them!".

So there you have it. I'm off to PHP.net to see if I can remember how to code in it.

January 19, 2005 | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d83423035953ef00d8345ca52069e2

Listed below are links to weblogs that reference Learning Curve:

» Test Entry from Completely Dan
lalalalalalalalalala :D [Read More]

Tracked on Mar 18, 2005 10:23:55 PM

Comments

Hey that's that which is hard : javascriptS and not javascript ... like with the CSS. It's for that kind of things standards are good for : make people converging :)

Posted by: The Jedi | Jan 19, 2005 3:48:01 PM

Standards were the best thing ever thought of.

Apparently, other companies don't think so.

I decided not to touch on Javascript to much until I feel I have to... :P

Chad

Posted by: Chad | Jan 19, 2005 8:58:35 PM

How did you teach yourself javascript? Infact, how do you remember all these programming languages!

Ian

Posted by: Ian | Jan 19, 2005 9:58:57 PM

Standards have always been the strong point of the german technic.
Without that, they wouldn't have been so strong in this domain.

Unfortunately they didn't play a big role in computer science and programming languages, therfore it is a bit a mess...

Posted by: Mickey | Jan 19, 2005 11:31:47 PM

"How did you teach yourself javascript? Infact, how do you remember all these programming languages!"

That's the great thing about programming - they are all very similar it's just the syntax that's different.

Want to do regex? No problem!

Perl: $t =~ s/^(this)$/$1That/g;
PHP: $t = preg_replace( "/^(this)$/", "\\1That", $t );
JS: t = t.replace( /^(this)$/ig, "$1That" );

Once you've used one programming language, you can adapt to pretty much any language. The way you think about logic flow and how to approach a task is more important than mastering tricky syntax. All programming languages use variables, functions, arrays, hashes, etc and most of them are inspired from java or C.

Posted by: Matt | Jan 20, 2005 8:51:49 AM

"2100 lines of javascript code for a single RTE takes a long time to write"

You should take a look at Kevin Roth's RTE ( http://www.kevinroth.com/rte/demo.php ) only 595 lines of code... maybe you can learn from it ;)

It works good in both IE and Firefox and my clients say it also works in Safari

Posted by: Franklin | Jan 20, 2005 8:59:44 AM

There's no way it works in Safari. Safari (and it's engine, Konqueror) do not support execCommand. Currently, only the IE and Gecko engines do.

Kevin's editor is a great base, but it lacks functionality. I've added much more to the RTE, such as context sensitive buttons and menus (the buttons change based on the caret position or ranged text, so if you highlight bold text, the bold button lights up and the correct font is picked from the menu). I've also implemented a remove format button, implemented the ability to add custom tags to ranged text, the ability to add tables and span / DIVs, full screen mode, cleaned up HTML source mode and so much more.

595 lines will get you a very basic non-skinnable RTE. 2100 lines will get you a skinnable and feature rich RTE. (Added screenshot to main post)

Posted by: Matt | Jan 20, 2005 10:15:44 AM

Safari: that's weird. I can't test it myself because I don't have my PMac yet.

The screenshot looks really cool. Do I see a 'draw div/layer' button there? :D I hope I have the money to buy your CMS..

Posted by: Franklin | Jan 20, 2005 11:45:09 AM

Thats great work Matt, most people would probably get scared of trying to create a RTE without a great JavaScript knowlege but it seems like your creating one of the best and as you learn the lanaguage more fully to.

Posted by: robbi | Jan 20, 2005 1:33:15 PM

Wow, the screenshot looks great!

Posted by: Logan | Jan 20, 2005 3:37:12 PM

Really great.

But I miss (only) one thing: "Horizontal line".

In my eyes, this needed !!

Posted by: | Jan 20, 2005 8:00:53 PM

Wow looks great. Its good you keep us informed on your progress. Good work!

Posted by: Wilko | Jan 20, 2005 11:24:25 PM

How about a PHP-GTK rich text editor? :P

Chad

Posted by: Chad | Jan 21, 2005 12:47:00 AM

"If Mozilla implements document.all, the world is in trouble."

Mozilla Adds Undetectable document.all Support, July 23rd, 2004
http://www.mozillazine.org/talkback.html?article=5063

It's very true that there's a lot on the web that upsets Mozilla's awesome Javascript Console.

Posted by: Chris Griego | Jan 22, 2005 1:29:52 AM

Matt: how did you get the editor to work in Mozilla?

When I was working on a website for an art company last year, I made them a mini rich-text thing so they could arrange the different works of art on their website as they would in an art gallery (rather than having them fixed in a table or grid layout). Essentially, I had images set to width 100% inside absolutely positioned divs, inside a rich text box, and the site admins could just grab the handles at the corner of the box and drag them across the screen and resize the images. A couple of regexes and a bit of GD magic later and the images appeared exactly where they wanted them, and at the right resolution - but the handles they dragged the images with would only appear on Internet Explorer. You couldn't move them at all with Mozilla. How do you fix that?

Posted by: Peter Hall | Jan 22, 2005 4:47:39 PM

I remember when I wrote my WYSIWYG editor, and that was when Midas support in Mozilla was new. Oh boy, that was fun. I never would have stopped it but I went insane. I look forward to seeing what you do with it. Hopefully your mind won't blow up like mine did.

Posted by: aent | Jan 23, 2005 6:25:15 PM


Perl: $t =~ s/^(this)$/$1That/g;
PHP: $t = preg_replace( "/^(this)$/", "\\1That", $t );
JS: t = t.replace( /^(this)$/ig, "$1That" );


And for ASP?

dim RegEx
dim DescStr
set RegEx = New RegExp
RegEx.Pattern = "\*\*\s(.*)\r"
DescStr = regEx.Replace(SpecsStr,"$1")

Good ol' Microsoft like to make things simple for us don't they :P.

Posted by: Chris Santry | Jan 23, 2005 11:14:38 PM

Peter,

The mozilla guys must have fixed that bug in their midas engine. Resizing images works just fine now (as of 1.5+).

Posted by: Matt | Jan 24, 2005 9:19:49 AM

Not images - divs.

Posted by: Peter Hall | Jan 28, 2005 3:18:12 PM

But now the Screenshot file is missing.

Posted by: backdream | Feb 24, 2005 7:33:25 AM

Post a comment