Wednesday, January 31st, 2007

Vitamins for Prototype

Category: Component, JavaScript, Library

>The new Devjax library is a collection of plugins based on prototype library to add more functionality for scriptaculous, RICO and extends the DOM library of prototype.

An example of the work is a WYSIWYG component:

javascript
< view plain text >
  1. editor = new Devjax.Editor('editor-example',
  2.     { width: '100%',height: '200px',
  3.     ImagesFolder: '/images/editor/',
  4.     LoadURL: 'EditorExample',
  5.     LoadVARS: 'file=examples/editor/files/index.html',
  6.     SaveURL: 'editorsave',
  7.     OnDemand: true,
  8.     TextColors: ['red','blue','black','yellow','brown','white','blue','black','yellow','brown'],
  9.     ToolBox:['save','bold','italic','underline',
  10.     'insertorderedlist','insertunorderedlist','justifyleft',
  11.     'justifycenter','justifyright','font-color','back-color','insertimage','createlink']
  12. });

Features

  • WYSIWYG Ajax Editor
  • Select input with CSS styles
  • In place editor for prototype
  • Image Ajax Fader for scriptaculous
  • DOM API extention
  • Rico draggables and droppables extension

The site itself is a single-page app that reloads the main content. This is frustrating as it doesn’t have bookmarkable pages.

Related Content:

Posted by Dion Almaer at 5:07 am
30 Comments

+++--
3.3 rating from 55 votes

30 Comments »

Comments feed TrackBack URI

You got to be kidding me, what the heck is that crap?

1. Their site is the best example on how to NOT use Ajax. Back button doesn’t work, can’t paste an url into the site etc etc.

2. The editor is worthless, is produces crap code, has no functionality, bad looking interface (looks like the buttons always are inactive) Dude… what about those color pickers? Someone should be fired.

3. Erase this article for the good of mankind.

Comment by Mark — January 31, 2007

Imho this site is a typicalexample of the way developers can use Ajax in the wrong way. If you go to the site, it’s a typical website with information in different pages. There is NO need to use Ajax for changing the pages like they do. It only helps to confuse. After checking out an example I wanted to go back, couldn’t do it… Why break the perfectly acceptable document based web in such a way. Probably because they can…

And what to think of the ‘select element with css style’? it is bad practice to restyle input elements. This is basic usability, lesson 1 (OK, maybe lesson 3).

Ajax can help us make better Web APPLICATIONS, don’t abuse the async request to change webSITES, there’s not much wrong with webSITES (such as this one). What happens if you do? You end up with a special JavaScript library for history and bookmark management in Ajax applications. Do Word, Outlook, Photoshop, WinZIP, Dreamweaver etc. have a back button? Of course they don’t.

And also, don’t use the new DHTML effects of libraries for messing with the user interface only because it’s pretty.

Comment by Mike — January 31, 2007

I have to agree, this is grotesc. I don’t want to reiterate the points above, no sense in beating a dead horse here.

But come on, the page loads are slow, no back button support? Users would never go back to the site after they got frustrated with it after the first time. This reminds me of the same problems we have with Flash only sites.

I am not really sure if any of their developers thought this one out very well.

Comment by Philip Plante — January 31, 2007

I didnt see the page but I dont like that code and thats enough for me to dont look a little more at this library.

What I mean is :

“ImagesFolder, “LoadUrl”, “LoadVars”, “SaveUrl”, “OnDemad” !!!

This seems so Microsoft, where do the conventions stay in front of this?

This all words seems like classes to me, not properties. Properties should been declared likeThis, not LikeThis.

As time goes on, i convince myself there is not rival for Dojo.

Comment by Diego Carrion — January 31, 2007

Thanks for your comments! But I have to clarify some points about the site and the library:
Site:
1: The site is still in beta and we are planning futures changes to make easier the navigation (including back button) although in normal application you don’t have that! By the way These functionalities are called “undo” and “redo” in a normal application.
2. The right and left menus that we already have are going to be loaded dynamically and independtly, this is why we are using Ajax to handle this part.
3: Our site allows to call pages remotely using ?page= and generate at the same time a map for the search engines so please skip the part about Ajax bad practices.

Editor:
About the editor really the advantage is that you can rebuild totally the editor interface modifying the parameters:
1. For example in the case that you want to create an editor with 3 functionalities (bold-italic-underline) options:

ToolBox:['bold','italic','underline']

Then the script only generates 3 icons.

2.You don’t like the default toolbar images!
Well maybe is a foolish subject because this is why you have another parameter called ImagesFolder allowing a new folder with the new images that you want!
For example if you want to replace the bold icon you just have to put into the new folder another picture called bold.png with the look that you want.
2. onDemand: this parameter turn on the edition on load.

Select input:
We are not restyling the select input we only are creating a bridge that represents the normal input that is still invisible there!

I don’t want continue beating around the bush please read the documentation and the features about the components.

Comment by devjax — January 31, 2007

The site is still in beta and we are planning futures changes to make easier the navigation (including back button) although in normal application you don’t have that! By the way These functionalities are called “undo” and “redo” in a normal application.

Yes… but this isn’t a “normal” application… it’s a website.

Comment by Tobie Langel — January 31, 2007

Remind me never to post anything on this blog. Hateful dev. buzzards. You guys even attacked his camel case (lack there of). At least it seems to work in Firefox, IE, and Opera which is further than most of the stuff posted here.

Comment by Mario — January 31, 2007

Hah, the “website” is in “beta”. Usually products are beta, not websites. There is still NO REASON AT ALL (ZERO, 0, NULL) to use Ajax on such a website.

And regarding the editor, I wouldn’t say it works if it at least doesn’t produce decent valid HTML code, anyone can whip up an editor with contentEditable/designMode.

The editor has nothing on other already more feature rich editors out there (FCKeditor, TinyMCE etc).

And what about that file browser? Download links that arent… linked. That’s like putting up a “Underconstruction” gif animation, you know, like they did back in the day (-90).

Btw… where is the… Wiki?

Comment by Mark — January 31, 2007

Our wiki has a private access to prevent spammers and twats :)
ASAP I shall update the rest of the demos and the patch to clean up HTML in the editor and by the way I dont want to replace really nice tools like FCKeditor, TinyMCE is just that in our expierence we had required these components and we want to share these with the community for free. ;)

Cheers,

Camilo

Comment by devjax — January 31, 2007

WTF are you guys talking about?? You are just scared because he is making stuff that will replace the old way of making websites.

How can you say that websites cannot be beta, I’m guessing you really have’nt built a REAL one.

Give me a break and go hide beneath the rock you came from, as the web changes before you.

Comment by Miguel — January 31, 2007

While I agree the buttons seem disabled, all in all I like the site and having this wrapped for me. And for the back button being disabled, that is actually something I personally like, it was never meant to be in the browser in the first place. If your users can not get around without it, then your navigation is flawed (which is why the back button is so overused, developers and designers rely on it for navigation). Great work, just polish it up a little.

Comment by Mike Benner — January 31, 2007

editor cleanup patched.
I’m also going to add another function to cleanup word 2003 on copy/paste

Comment by devjax — January 31, 2007

I like the site as well. Good work.

Comment by JD — January 31, 2007

The editor is useless in both IE and FF. Furthermore it performs poorly on FF. The font size/family portion produces the most unexpected results.

Comment by Diego — January 31, 2007

Can you send me a ticket with full description of the error and the version of FF tha you’re using through devjax’s page?

Comment by devjax — January 31, 2007

Editor font size/family error fixed! Check now the devjax examples

Thanks a lot for reporting errors:)

Comment by devjax — January 31, 2007

Ajaxian needs to post a tutorial on the difference between websites and webapplications.
It’s kind of sad that the devjax are working so hard to add normal browsing capabilities to their website. You could have saved a lot of time by using regular html documents and hyperlinks. It has been done before you know?
When you compare browsing back and forward in a document based medium to undo redo in applications, you should sign up for CS 101…

Comment by Mike — January 31, 2007

I think devjax is doing a good job on these javascript components. The previous posters don’t know what they are talking about. Yes, the buttons look ‘faded’ but it has nothing to do with the true value of this component. BTW, it works perfectly under IE7.

Comment by Lou — January 31, 2007

Some of these remarks remind me of the developers who scorned the use of JavaScript itself back in the mid-1990′s. They thought the web was fine as it was, and there was no need for anything as complicated as scripting for webSITES. The fact is, this medium is still in its infancy, and no one knows what SHOULD be done or what is NORMAL. We really should be much more tolerant of experimentation and not try to stamp out new ideas just because they aren’t “normal”. Seriously, guys, loosen up.

The back button isn’t forever, you know. It’s a convenience resulting from the fact that navigating badly designed websites is hard, and web publishers didn’t necessarily provide the necessary navigation links early on. Still, there’s a need to be able to see your browse history, so if you don’t provide a back button you should at least provide breadcrumbs of some kind. (There I go, saying SHOULD again…!)

One last point… it’s also incorrect to say that applications don’t use back buttons or similar navigation. Perhaps if you come from a Windows XP background, that’s true. But believe me, Microsoft added back buttons to Explorer in Vista because it had proved useful to Mac users in the OS X Finder. On the Mac, navigation buttons are turning up in all sorts of apps… from FTP browsers to PIM apps like DevonThink, RSS readers, and even Terminal apps. Regardless of the app, there’s the same need to be able to retrace your steps. Call it what you will, but it’s incorrect to deny there’s a parallel between the Undo/Redo function and the Back/Forward button. Similarly, the distinction between web apps and web sites is artificial and won’t be around forever. Presenting information as a set of static pages is just one way of doing it, especially if you have no database behind the info (as was the case in the early web years). Nowadays, a database lives behind most of the websites you visit, and where there’s a database, there’s an application, in my book.

That’s more than 2 cents, but I felt like I needed a little rant tonight. :-)

Comment by Leland Scott — January 31, 2007

Way to go Leland! Very insightful. I’m really not wild about the site myself…I think it uses the wrong paradigm at the wrong time for the wrong reasons. But hey, it’s not my site…it’s someone else’s site and that’s fine by me. Sometimes just the popularity of a thing eventually forces it into a more usable state. I wonder if Flash would have had the same influence over the years if a million hacks hadn’t put little goofy Flash intros all over the web. It’s improper use sparked a years long debate over the real usefulness of Flash in the web community and, I think, ultimately contributed to it becoming much more than simply vector animation software.

Comment by Jeff Denton — January 31, 2007

By the way the post is about the components not about sites.

Comment by devjax — January 31, 2007

The first examples Leland posted are what: Explorer and Finder. Those are not ‘just’ applications, they are file system _browsers_. Navigation, from point A to point B. Sometimes you might need to retrace your steps, so do you do a CTRL-Z? No of course not.
The browser hasn’t changed in 15 years. That’s not young at all for computer technology. If you think I’m mistaken, then so are Adobe, Sun and Microsoft. Apollo, Flex, Java applets, WPF/E, they all need a sandboxed runtime for apps. All they use is HTTP for RPC.
To restate the point: devjax site would be much better served by a normal document based website. They could have saved the time to work on their components.
So anyway, good luck with all the backbutton and bookmark hacks. My sites are bookmarkable without a hack.

Comment by Mike — February 1, 2007

I’m still trying to wrap my mind around the statement that the back button is “not forever”; or the one about how it was never meant to be, or some such. Does anyone having made these statements have some form of documentation that they can link that supports such?

Comment by Shelley — February 1, 2007

Oh look: I just returned to this page from the devjax site using the back button. I feel so antiquated.

Comment by Shelley — February 1, 2007

Good Shelly, that’s what is what made for. Now did you notice that nobody had to do anything to enable this _browsing_ experience? No one ever said it was antiquated, it’s perfect, for navigating. Has been for years, needs no documentation, just makes sense.

No go and re-read what devjax said, they are not finished with their website because they need to add backbutton and bookmark support. They could have been done with it had they not misused ajax for complete page transitions. But that’s apparently how they want to use their time.

So yeah, backbutton: good for browsing, not so good for webapps. Hope I made some understand my point. If not, I’ll be looking forward to your code on thedailyajaxian.com

Comment by Mike — February 1, 2007

I’ve added back/forward navigation dedicated for the author of this article :)
Now I’d like to be concentrated on the components and software that I’m bringing for free and not in critics without place.

Comment by devjax — February 2, 2007

Only managed to visit it today, and it has quite a nice touch.
Good thing you now honour the back and forward buttons. While I agree with Mike that the back button is something that doesn’t work well in most web applications (e.g. after a post), this site isn’t one from the user’s perspective: it works just as a regular web site with plenty of eye candy (not that I have anything against that, on the contrary). As a consequence, visitors will expect the back button to work: and that’s really what matters. They’ll eventually try it and be frustrated.
Also, the back button is incredibly useful not just as a replacement for badly written navigation, but because it allows you to explore a link knowing that you are only one click away from going back to where you were. I don’t believe it is going away any time soon… or even late.
One last note: Ajaxian has always been a site with a low rate of bitching, and I hope it stays that way. Even if a link is not up to the standards we expect, there’s no need to be harsh.

Comment by Andrea — February 5, 2007

I don’t know about anyone else, but some of my reaction was to reading that the back button was somehow driven out by bad design. And, in my opinion, a client-side driven site is not a good way to promote the use of Ajax. Turn off scripting and then visit the site. Its not an application that’s not longer accessible: it’s the entire site.

It is this type of use that helped lead to a push-back against scripting in the 1990′s and probably will now. That and the fact that such work will always be particularly vulnerable to browser differences.

More than that: it begs the question of why? I could see a tabbed interface, or a word like application, or any number of things where scripting is an essential element and then the implementation of the back and forward button would lead to, “Good coverage of navigation” and lots of positive comments.

But to do something that’s done so well without scripting, just because you can..I saw that cost a dot-com 1.2 million dollars in 1999, resulting in a useless, though very pretty, DHTML driven navigation system that had to be completely scrapped the first time one of the company’s major customers, A BLIND GUY who worked for Boeing, tried it.

Comment by Shelley — February 5, 2007

To remind everybody, this post is about:

“Devjax library is a collection of plugins based on prototype library to add more functionality for scriptaculous, RICO and extends the DOM library of prototype.”

And NOT about the website, if he wants to build the website that way, let him, what harm does it do to you? If you don’t like don’t go there, but I think he is doing a GREAT job on his FREE library, which I bet its more than what you guys have done in your life.

Comment by Miguel — February 7, 2007

Please take a look of the first stable version of the WYSWYG editor includes also safari support

Comment by camilo — March 25, 2007

Leave a comment

You must be logged in to post a comment.