Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #9113 > unrolled thread

MS Excel mashup

Back to article view | Back to comp.lang.javascript

Contents

  MS Excel mashup Andrew Poulos <ap_prog@hotmail.com> - 2011-12-11 11:14 +1100
    Re: MS Excel mashup Matt McDonald <matt@fortybelow.ca> - 2011-12-10 20:27 -0700
      Re: MS Excel mashup Andrew Poulos <ap_prog@hotmail.com> - 2011-12-11 16:57 +1100
        Re: MS Excel mashup Jake Verbaten <raynos2@gmail.com> - 2011-12-11 10:25 -0800
          Re: MS Excel mashup Andrew Poulos <ap_prog@hotmail.com> - 2011-12-12 08:24 +1100
            Re: MS Excel mashup David Mark <dmark.cinsoft@gmail.com> - 2011-12-11 14:16 -0800
          Re: MS Excel mashup David Mark <dmark.cinsoft@gmail.com> - 2011-12-11 14:07 -0800
    Re: MS Excel mashup David Mark <dmark.cinsoft@gmail.com> - 2011-12-11 14:01 -0800

#9113 — MS Excel mashup

I just checked out Microsoft's "new" Excel "mashup"
<http://www.excelmashup.com/>
and the examples use jquery.

Is this
   $("#Meal").hide();
really better than
   document.getElementById("Meal").style.visibility = "hidden";
? Yes, the former is shorter but I know exactly what the later should do 
- not so with the former. (By "hide" I'm assuming that jquery is 
referring to style.visibility and not style.display nor style.opacity.)

Andrew Poulos

[toc] | [next] | [standalone]

#9114

On 12/10/2011 5:14 PM, Andrew Poulos wrote:
> I just checked out Microsoft's "new" Excel "mashup"
> <http://www.excelmashup.com/>
> and the examples use jquery.

Unsurprising. I see Microsoft has taken to using an
in-browser "text editor" ("CodeMirror"). When will people
learn that such projects are tremendous wastes of time?

If you can recall, Microsoft made a "native" HTML 5
"demo"[0] with some drag/drop pieces. The name of one
of the script files used was "FeatureDetection"(.js)[1].
It was ironically—of course—rife with user-agent sniffing.
In one word, it was spaghetti. To wit, it doesn't work in
Opera 11.60 and the drag "target" disappears while "dragging"
in Chrome 15. What's truly astonishing is whomever wrote that
script botched Opera "sniffing". How hard is it to "sniff" for 
`global.opera`? That's child's play.

> Is this
> $("#Meal").hide();
> really better than
> document.getElementById("Meal").style.visibility = "hidden";

Neither are preferable. Try to keep style out of JavaScript.
Let CSS (classes) dictate style.

For example, a class such as the following is an idea:

.invisible
{
	visibility: hidden;
}

Even so, the class name is dictated by style. That goes against
advice given by Garrett Smith in the CLJ FAQ[2] and surely
others. Without knowing the purpose for such code, the class
name *should* be representative of a feature. This nomenclature
is optimal:

.animating
{
	position: relative;
}

Instead of labeling it "relative", the class has been named
after a feature. There's no need for a polar opposite as
removing a class from an element will remove the corresponding
style as well. This is a very powerful technique. By utilizing
it, one can leave style out of JavaScript (aside from dynamic 
calculations such as animation).

> [...](By "hide" I'm assuming that jquery is
> referring to style.visibility and not style.display nor style.opacity.)

Per James Padolsey's "jsapi.info" website[3], my suspicions
are confirmed. `hide()` is a wrapper for `display: none;`.

I took to breaking up one of jQuery's infamously long lines
of code into something sensible. Here, you can see more
inane binding of the `this` value. If you search the entire
source, `apply` and `call` will probably be the most popular
methods (in fact, ".apply(" has 30 matches in jQuery 1.7.1
while ".call(" has *60* matches). It's one of the many reasons
jQuery blows up in older browsers (aside from general myopia).

Code below:

var elem, display,
     i = 0,
     j = this.length;
for ( ; i < j; i++ ) {
     elem = this[i];
     if ( elem.style ) {
	display = jQuery.css( elem, "display" );

	if ( display !== "none" &&
	!jQuery._data( elem, "olddisplay" ) ) {
	    jQuery._data( elem, "olddisplay", display );
	}
     }
}

// Set the display of the elements in a second loop
// to avoid the constant reflow
for ( i = 0; i < j; i++ ) {
     if ( this[i].style ) {
	this[i].style.display = "none";
     }
}

The full snippet[4] is accessible through "jsapi".

Links:

[0]: http://ie.microsoft.com/testdrive/Graphics/MagneticPoetry/Default.html
[1]: http://ie.microsoft.com/testdrive/Includes/Script/FeatureDetection.js
[2]: 
http://www.fortybelow.ca/hosted/comp-lang-javascript/faq/notes/code-guidelines/
[3]: http://jsapi.info
[4]: http://jsapi.info/jquery/1.7/jQuery.fn.hide/

Notes:

[*]: Regarding links[2], the "CSS" section is being referred to.

-- 
Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada

[toc] | [prev] | [next] | [standalone]

#9115

On 11/12/2011 2:27 PM, Matt McDonald wrote:
> On 12/10/2011 5:14 PM, Andrew Poulos wrote:

>> Is this
>> $("#Meal").hide();
>> really better than
>> document.getElementById("Meal").style.visibility = "hidden";
>
> Neither are preferable. Try to keep style out of JavaScript.
> Let CSS (classes) dictate style.
>
> For example, a class such as the following is an idea:
>
> .invisible
> {
> visibility: hidden;
> }
>
> Even so, the class name is dictated by style. That goes against
> advice given by Garrett Smith in the CLJ FAQ[2] and surely
> others. Without knowing the purpose for such code, the class
> name *should* be representative of a feature. This nomenclature
> is optimal:

Are you saying that its better to write lots of separate style selectors 
for each "effect" that might be applied to an element? I think not.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#9118

Yes that is correct.

Use CSS(3) for animating.

Avoid touching `elem.style`

The only use-case for touching `elem.style` is emulating CSS3 animations using javascript.

As for which is more readable, the javascript community seems to assume everyone uses and knows jQuery. So these days it's popular to write all your code in jQuery. 

Yes its ambiguous as to `.hide` sets display or visibility, in this case it sets display.

[toc] | [prev] | [next] | [standalone]

#9119

On 12/12/2011 5:25 AM, Jake Verbaten wrote:
> Yes that is correct.
>
> Use CSS(3) for animating.
>
> Avoid touching `elem.style`

Why?

> The only use-case for touching `elem.style` is emulating CSS3
> animations using javascript.
>
> As for which is more readable, the javascript community seems to
> assume everyone uses and knows jQuery. So these days it's popular to
> write all your code in jQuery.

I don't use jquery. So to have to guess what some code is doing is not 
something I'm comfortable with especially when it could've easily been 
written unambiguously in the first place.

> Yes its ambiguous as to `.hide` sets display or visibility, in this
> case it sets display.

What's the point of using CSS3 when IE, particularly older versions of
IE, doesn't support much of it? I have a client that is a major 
corporation that is still using IE 6 on Win XP and will be for the 
foreseeable future.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#9122

On Dec 11, 4:24 pm, Andrew Poulos <ap_p...@hotmail.com> wrote:
> On 12/12/2011 5:25 AM, Jake Verbaten wrote:
>
> > Yes that is correct.
>
> > Use CSS(3) for animating.
>
> > Avoid touching `elem.style`
>
> Why?

Using CSS classes often leads to cleaner JS, though the code is still
inexorably coupled with the style sheets.

>
> > The only use-case for touching `elem.style` is emulating CSS3
> > animations using javascript.
>
> > As for which is more readable, the javascript community seems to
> > assume everyone uses and knows jQuery. So these days it's popular to
> > write all your code in jQuery.
>
> I don't use jquery. So to have to guess what some code is doing is not
> something I'm comfortable with especially when it could've easily been
> written unambiguously in the first place.
>
> > Yes its ambiguous as to `.hide` sets display or visibility, in this
> > case it sets display.
>
> What's the point of using CSS3 when IE, particularly older versions of
> IE, doesn't support much of it? I have a client that is a major
> corporation that is still using IE 6 on Win XP and will be for the
> foreseeable future.

Using it for what? I use it to add rounded corners, effects and other
optional enhancements. The old IE users are blissfully unaware of what
they are missing. And won't they be in for a nice surprise when they
finally upgrade? Of course, if you have to have animations and such in
IE 6, you should put the scripts inside conditional comments as
virtually all of the major browsers support the new CSS3 "standards".
Nobody ever got into trouble leaving FF 3.5 and Opera 9 users out of
the "fun".

There's a lot of confusion out there though. I recall a recent
conversation with Web developers regarding progressive enhancement and
the example offered was that "their jQuery UI" took care of all that
"rounded corner stuff". Of course, CSS has graceful degradation built
right in, but these guys were sure that jQuery was somehow saving the
day for them.  If they only knew... :)

[toc] | [prev] | [next] | [standalone]

#9121

On Dec 11, 1:25 pm, Jake Verbaten <rayn...@gmail.com> wrote:
> Yes that is correct.

What is correct?

>
> Use CSS(3) for animating.

Uh, okay.

>
> Avoid touching `elem.style`

Often good advice, but not always.

>
> The only use-case for touching `elem.style` is emulating CSS3 animations using javascript.

Nonsense. And such "emulation" is highly ill advised. Beware of geeks
bearing scripts. ;)

>
> As for which is more readable, the javascript community seems to assume everyone uses and knows jQuery.

The what community? Do you mean bloggers who blather about JS with no
clue as to what they are talking about? They not only assume that, but
repeat it endlessly. The truth is that nobody "knows" jQuery, not even
its authors.

> So these days it's popular to write all your code in jQuery.

It's popular because most Websites are created by designers. The
developers in IT are given a week to turn their mixed-up mash-ups into
"working sites" and therefore test it in three additional browsers
(adding to the one tested by the designers) and pronounce it "cross-
browser" and ready for public consumption. Popular among misguided,
out-of-time developers, but a real crock for their users.

>
> Yes its ambiguous as to `.hide` sets display or visibility, in this case it sets display.

Oh, it does one *or* the other? That I did not expect. :(

[toc] | [prev] | [next] | [standalone]

#9123

On Dec 10, 7:14 pm, Andrew Poulos <ap_p...@hotmail.com> wrote:
> I just checked out Microsoft's "new" Excel "mashup"
> <http://www.excelmashup.com/>
> and the examples use jquery.
>
> Is this
>    $("#Meal").hide();
> really better than
>    document.getElementById("Meal").style.visibility = "hidden";

Depends on what you mean by better? Certainly it's much slower,
creating and discarding a huge jQuery object, making dozens of
function calls (compared to one host method call), etc.

Certainly it's not more readable as you can't tell just what that
"hide" method is going to do, without delving into the bizarre and
poorly commented jQuery code.

Certainly the jQuery pattern makes debugging more difficult as it will
fail *silently* when the "Meal" element is missing. Makes you wonder
what the next "chain" does. I mean, won't the next line of code assume
that "Meal" was hidden (in some way).

On the "plus" side, the jQuery line has fewer characters. Of course,
you could just write a wrapper for gEBI with a similarly obscure/
ambiguous name. Better yet, you could give it a longer, easily-
understood-at-a-glance name and then "minify" the script. If worried
about keystrokes, either get a better editor or learn to use the
clipboard, macros, etc. Worrying about how many characters you have to
type in browser scripting is like worrying how many blades of grass
you have to cut in lawn mowing.

> ? Yes, the former is shorter but I know exactly what the later should do
> - not so with the former. (By "hide" I'm assuming that jquery is
> referring to style.visibility and not style.display nor style.opacity.)
>

Right, it's shorter (plus 70K of baggage, of course), slower and more
obscure. MS is just trying to be popular. They've always been known
for their marketing savvy and there are a whole lot more desperate
designers out there than competent developers.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web