My Library Examples!

[David Mark]

Initial examples page has just been completed. Isn't even linked to the
site yet. There is a link to a new primer _from_ this page if you look
closely (something I get the feeling most visitors do not do).

http://www.cinsoft.net/mylib-examples.html

It's been available to readers of my forum for a couple of days, but I
think I am about ready to connect it up to the main site at this point.
As you might imagine, I'm quite pleased with it. I'll be expanding
it to demonstrate slide shows, setting HTML and query-based effects
shortly (among other things).

Would be interested in feedback. Specifically, from Stockton or
otherwise mathematically-inclined readers who can tell me which
implementations (IE vs. the others) are lying about their matrix
representations. When I first started on the new Transform add-on, I
tore my hair out for hours because one of the camps is making up
stories. They both claim to use (a, b, c, d) notation in their styles,
but in fact, one camp is actually using (a, c, b, d). The My Library
interface is currently siding with the quasi-standard camp and making
the necessary adjustment in the IE fork (which may be backwards). I
don't care to investigate as the only ones who would complain would be
mathematicians, but I thought it was interesting enough of a
contradiction to note.

I plan to expand on the code generator. I think that aspect has the
makings of a killer app. I don't imagine I'll be hearing any more
excuses about a lack of examples when my examples can virtually write
your app for you (more on that later).

 

[Thomas Allen]

I plan to expand on the code generator.

Are the generation forms intentionally disabled? It seems that the
only form on that page that functions is the one with the alert
button, so I can only comment on that.

Where is the API.alert function documented? I did not see it on
http://www.cinsoft.net/mylib-doc.asp?view=object

I'd suggest changing some of the alert defaults:

1. Display no window title unless one is provided (I assume one can be
provided)
2. Include only the close control in the title bar unless others are
specified.
3. Default to 'OK' for the close button text in the window itself.

Thomas

 

[David Mark]

Are the generation forms intentionally disabled?

Yes, if your browser does not support the features in question, the
controls are left disabled. In the case of most of the initial
examples, CSS3 transforms are involved, so you need to be using IE5.5+,
Opera 10.5+, Safari 4, Chrome 3+ or FF3.5+.

It seems that the
only form on that page that functions is the one with the alert
button, so I can only comment on that.

Fair enough!

Where is the API.alert function documented? I did not see it on
http://www.cinsoft.net/mylib-doc.asp?view=object

You are looking at it. I will be fleshing it out with some more
examples that will generate the code for you to use different effects,
do confirms, prompts, etc. Also, the alert is pretty ancient and never
intended for anything more than a demonstration (was written with the
test page in mind at the very start of the project) Also it is to be
displaced (at least as a first choice for an alert replacement) soon as
I have a new (and better thought out) widget that does
alert/confirm/prompt/indicator/wizard/property sheet stacks with
curtains and real modality (real meaning the curtain is just for show,
not the real barrier). Examples for the Modals add-on will be up in the
next few days. That one should put to rest any thoughts people have
about building on top of a rickety Dojo or jQuery because of "pretty
widgets". Mine may not have the prettiest graphics (supply your own of
course), but they will have the prettiest functionality. It will be
interesting to see if people can understand the difference. If not, I
know where to get pretty graphics too.

I'd suggest changing some of the alert defaults:

1. Display no window title unless one is provided (I assume one can be
provided)

I think that's how the new one works. Don't remember as the "new" one
is actually a year and half old (I wrote it for a project pitch and
never used it).

2. Include only the close control in the title bar unless others are
specified.

Yes, their presence is determined by the included modules (e.g. if Size
is not there, no max/min, resize handles, etc.) ISTM you can simply
style those buttons into oblivion (e.g. display:none), but don't quote
me on that. I know that sounds silly, but the alert is really just a
silly one-off example. I mean, who needs an alert with minize/maximize
buttons? I think I had it in my head to expand it into a dialog, but
then I wrote the new one, so the original will stay exactly as it is
until it is superseded by the Modals add-on. I will keep the original
around as an example and for the test page as it is good for what it was
designed to do there (demonstrate progressive enhancement and the
relative capabilities of partial builds).

3. Default to 'OK' for the close button text in the window itself.

I suppose that's a matter of taste. It can do OK/Cancel, Yes/No, etc.
and you can optionally add a help button, but I don't recall if I have
an option to change the text of the single button. I'll look into that
as I do need to post more examples for that one. My main focus for the
initial Examples page was the transform stuff. I added the alert and
scrolling anchors (which don't need an action to see--they are enabled
on load on that page) as afterthoughts.

If you look at the whole, a pattern should emerge as to how virtually
everything in My Library can be animated with a common interface (e.g.
you should see how to make the alert spin and fade rather than slide and
fade). I do need to explain the required feature testing a bit though.
For instance:-

var myEffects = [], myAlertOptions;

// Lots of browsers lack the features for this one

if (API.effects.spin) {
myEffects.push(API.effects.spin);
}

// Ancient browsers lack the features for this one

if (API.effects.fade) {
myEffects.push(API.effects.fade);
}

// If found at least one usable effect

if (myEffects.length) {
myAlertOptions = {
effects: myEffects,
duration: 1000
};
}

API.alert('This is a test', myAlertOptions);


Damn. I tried that and it turned out so well, I went ahead and did
something similar on the Examples page:-

// Set up alert examples

var setupAlertExample = function(id, msg, effects) {
el = getEBI(id);
if (el) {
el.disabled = false;
attachListener(el, 'click', function() {
API.alert(msg, {
effects:effects,
duration:500,
ease:API.ease.sigmoid4
});
});
}
};

if (attachListener && getEBI && API.alert) {
if (API.effects.fade && API.effects.slide) {
setupAlertExample('testalert', 'This is a test!',
[API.effects.slide, API.effects.fade]);
}

if (API.effects.fade && API.effects.spin) {
setupAlertExample('testalert2', 'This is also a test!',
[API.effects.spin, API.effects.fade]);
}
}

That is positively spooky in Webkit and FF (even on my seven year plus
old test machine!) I've also had someone test these transform effects
on the iPhone and they said they were smooth as silk (same for the
scrolling effects). I see I will need to add overflow:visible during
the alert spin animation though as IE has some sort of a clipping issue.
Opera 10.5 showed a brief flash of scroll bars, which it definitely did
_not_ do for the spinning images in the Reveal example. Not sure what
is going on there, but all in all, I am thrilled with how this stuff is
turning out.

And yeah, the animation documentation needs some work. But the
Transform add-on (which is fairly small with very little of it dealing
with effects) should be enough for any programmer to see how to create
custom effects and augment methods (e.g. setElementTransform) to apply
those effects. At this point, you are still going to have to want to
learn. I'll get to the point where everything is spelled out for you
soon enough.

 

[Ethan B]

Initial examples page has just been completed.  Isn't even linked to the
site yet.  There is a link to a new primer _from_ this page if you look
closely (something I get the feeling most visitors do not do).

http://www.cinsoft.net/mylib-examples.html

It's been available to readers of my forum for a couple of days, but I
think I am about ready to connect it up to the main site at this point.
 As you might imagine, I'm quite pleased with it.    I'll be expanding
it to demonstrate slide shows, setting HTML and query-based effects
shortly (among other things).

Would be interested in feedback.

In my opinion, being able to toggle CSS and source code visibility
(default hidden) would make it easier to scroll through the demos.

And many more examples would be appreciated.


On a side note, I've been meaning to say that your my library build
tests are a little bit hidden... Maybe a link to a test of the full
build in the site's navigation?

Thanks,
Ethan B

 

[David Mark]

In my opinion, being able to toggle CSS and source code visibility
(default hidden) would make it easier to scroll through the demos.

Absolutely. That's coming.

And many more examples would be appreciated.

Many more are coming, including slide shows and setting HTML (with or
without effects). That territory was mined pretty heavily in the Test
page, of course, but not with the add-on effects. Transform by
mousewheel or drag, the more advanced transform effect, lots of
query-based operations (e.g. spin every nth element in) and much, much
more! Now that I've mastered my own monster, I can teach you to tame it
too.

On a side note, I've been meaning to say that your my library build
tests are a little bit hidden...

You are a 1000% correct, what held you back? That's been on my mind
too of late. That page has a lot of potential to learn with examples
and a monitoring console to boot. But I get the feeling that many
would-be developer's attention spans kept them from getting that far.
Mea culpa, but I never wanted to try to sell anything to anyone.

Maybe a link to a test of the full
build in the site's navigation?

I like it! I have to update the navigation for the Examples page and I
will throw that in (at no additional cost). Stay tuned...

 

[Ethan B]

Absolutely.  That's coming.




Many more are coming, including slide shows and setting HTML (with or
without effects).  That territory was mined pretty heavily in the Test
page, of course, but not with the add-on effects.    Transform by
mousewheel or drag, the more advanced transform effect, lots of
query-based operations (e.g. spin every nth element in) and much, much
more!  Now that I've mastered my own monster, I can teach you to tame it
too.  




You are a 1000% correct, what held you back?    That's been on my mind
too of late.  That page has a lot of potential to learn with examples
and a monitoring console to boot.  But I get the feeling that many
would-be developer's attention spans kept them from getting that far.
Mea culpa, but I never wanted to try to sell anything to anyone.


I like it!  I have to update the navigation for the Examples page and I
will throw that in (at no additional cost).  Stay tuned...

Staying tuned...

 

[slebetman]

Initial examples page has just been completed.  Isn't even linked to the
site yet.  There is a link to a new primer _from_ this page if you look
closely (something I get the feeling most visitors do not do).

http://www.cinsoft.net/mylib-examples.html

<snip>

A bit off topic but on my Firefox (3.5.7) + Firebug setup the
TaskSpeed tests keeps crashing every time it gets to Dojo 1.4 with a
"task.execute is not a function" error. Luckily clicking the start
test button resumes the test but that means I need to click on it for
each row of the test.

Maybe it's just my browser setup (not the first time Firebug caused
problems for me) but it would be nice if it works as advertised.

 

[David Mark]

Staying tuned...

Site is updated to add the test page link you suggested, as well as the
Primer links. Thanks for your input!

 

[David Mark]

A bit off topic but on my Firefox (3.5.7) + Firebug setup the
TaskSpeed tests keeps crashing every time it gets to Dojo 1.4 with a
"task.execute is not a function" error.

LOL. I'm not surprised. That means that TaskSpeed's ineffectual
exception handling is failing to catch something. Not surprising as it
was written by a Dojo guy. Why Dojo 1.4 would be special in FF3.5.7
+ FireBug is anyone's guess (and isn't that the rub with Dojo?) I tried
it with FF3.6 just now and didn't have that problem. I did have to fix
TaskSpeed's exception handling for YUI a ways back (TaskSpeed did
something stupid in the catch clause that threw a second exception).
I'll look into this one...

Luckily clicking the start
test button resumes the test but that means I need to click on it for
each row of the test.

Yes, that's bad.

Maybe it's just my browser setup (not the first time Firebug caused
problems for me) but it would be nice if it works as advertised.

I'll see what the hell TaskSpeed is doing to allow an exception to crash
the test. No rest for the wicked.

 

[David Mark]

A bit off topic but on my Firefox (3.5.7) + Firebug setup the
TaskSpeed tests keeps crashing every time it gets to Dojo 1.4 with a
"task.execute is not a function" error.

test.execute?

 

[David Mark]

test.execute?

I'll assume that was the case. I can see what the bad assumption
(TaskSpeed is just full of them).

forEach(document.getElementsByTagName('iframe'), function(iframe){
frameworks[iframe.name] = {
'test': iframe.contentWindow.test,
'selectors': []
};
});

[...]

for (var name in frameworks){
var framework = frameworks[name];
var cell = row.getElementsByTagName('td')[frxi];
tests.push({
'execute': framework.test,
'selector': framework.selectors,
'name': name,
'row': row,
'cell' : cell
});
frxi++;
}

Can you spot the gaffe (or _a_ gaffe anyway?) Basically, God only knows
what the - test - property will be. Clearly in the case of Dojo 1.4 on
your setup, it is not a function. This could be for any number of
reasons. I see there is Firebug specific nonsense in the page loaded in
the Iframe:-

<div FirebugVersion="1.4.3" style="display: none;"
id="_firebugConsole"></div>

Also, Dojo itself uses _undeclared_ global variables (as documented,
they posted some nonsensical results that they misinterpreted to mean
that undeclared variables are "faster"). I tried to stop them.

So who knows? That's the problem with outrageously complicated mash-ups
tossed together by incompetents. We'll try this to gloss over the Dojo
1.4/TaskSpeed shortcomings:-

tests.push({
'execute': typeof framework.test == 'function' ? framework.test :
function() { return 0; },
'selector': framework.selectors,
'name': name,
'row': row,
'cell' : cell
});

As an aside, this guy sent me a message the other day asking that I stop
"trolling him". That doesn't translate into anything meaningful for me,
but I think I get the basic idea (stop pointing out that he doesn't have
a clue what he's doing, perhaps?) Where do these people come from?
Snark, troll, FUD... arrghhh! Nag, bitch, moan, whine, complain, point
but never ever learn. WTF? I don't know _anybody_ like that in real
life. Is there some other planet I'm not aware of? Perhaps this "real
world" I keep hearing about?

People ask me why I seem so angry about this sort of crap. Well, I am
angry as these weasels are _destroying_ an industry with their
incompetent code, illogical (and also incompetent) tests,
pseudo-intellectual arguments and (worst of all) a virtually universal
insistence on not criticizing each other (I'm okay, you're okay, we're
all great!). I say bullshit. It's not even close to okay (and none of
them are close to great).

Just re-tested in latest Opera (10.5)

PureDom* jQuery 1.2.6† jQuery 1.3.2† jQuery 1.4.0**† Prototype 1.6.0.3†
MooTools 1.2.2† MooTools 1.2.4† qooxdoo 0.8.2† Dojo 1.3.2**† Dojo
1.4.0**† YUI 2.7.0† YUI 3.0**† My Library 1.0 My Library 1.0 QSA**

1408 16993 7201 5556 6844 5400 5327 1164 1605 2431
2552 1897 756 785

So much for the jQuery vs. Dojo BS. How about PureDom vs. My Library?
Of course, this was a closer race than in Webkit where it is usually a
4:1 ratio (at least on my older test box, phones, etc. where it _counts_
the most.)

 

[David Mark]

Are the generation forms intentionally disabled? It seems that the
only form on that page that functions is the one with the alert
button, so I can only comment on that.

Where is the API.alert function documented? I did not see it on
http://www.cinsoft.net/mylib-doc.asp?view=object

See the Examples page now:-

http://www.cinsoft.net/mylib-examples.html

You should be able to see exactly how to use it now; and if not, it
writes the code for you.

I hooked it up to all of the effects now as well. The CSS3 stuff (and
IE equivalents) are out of this world (if I do say so myself).