On presentational Javascript

[gu]

Hi there. Dispite some people (cit. needed ) claiming there's no
future for semantic web, when i design a page i try to make it
semantically meaningful.

I like working on a clean html (a la csszengarden, thought it is not the
best example of semantic design) and then shape its presentation via CSS.

There are things, as you may well know, that are not easy (or
impossible) to accomplish via CSS only if you tight to a semantic
layout. Think at a simple box div ( <div class="box">i'm a box</div> )
where you want to add rounded corners or some nice extra effect. Most
solutions are based on extra divs addend within (or around) the main
div, but, needless to say this is not semantically correct as
"toprightcorner" does not carry any information that is not merely
presentational.

My solution (used in a couple of upcoming files) has been using
"presentational javascript". Taking advantage of jQuery, i write a
clean, semantic-consistent page, then, with a js script, i add the extra
stuff (like those said extra-div for every .box div), and i cook
everything with CSS.

Does this make any sense?

 

[Chaddy2222]

Hi there. Dispite some people (cit. needed ) claiming there's no
future for semantic web, when i design a page i try to make it
semantically meaningful.

I like working on a clean html (a la csszengarden, thought it is not the
best example of semantic design) and then shape its presentation via CSS.

There are things, as you may well know, that are not easy (or
impossible) to accomplish via CSS only if you tight to a semantic
layout. Think at a simple box div ( <div class="box">i'm a box</div> )
where you want to add rounded corners or some nice extra effect. Most
solutions are based on extra divs addend within (or around) the main
div, but, needless to say this is not semantically correct as
"toprightcorner" does not carry any information that is not merely
presentational.

My solution (used in a couple of upcoming files) has been using
"presentational javascript". Taking advantage of jQuery, i write a
clean, semantic-consistent page, then, with a js script, i add the extra
stuff (like those said extra-div for every .box div), and i cook
everything with CSS.

Does this make any sense?

Yes, that is probably the best way to do it. As the rounded corners
are an extra effect anyway (used for visual styleing).

 

[rf]

Hi there. Dispite some people (cit. needed ) claiming there's no future
for semantic web, when i design a page i try to make it semantically
meaningful.

I like working on a clean html (a la csszengarden, thought it is not the
best example of semantic design) and then shape its presentation via CSS.

There are things, as you may well know, that are not easy (or impossible)
to accomplish via CSS only if you tight to a semantic layout. Think at a
simple box div ( <div class="box">i'm a box</div> ) where you want to add
rounded corners or some nice extra effect. Most solutions are based on
extra divs addend within (or around) the main div, but, needless to say
this is not semantically correct as "toprightcorner" does not carry any
information that is not merely presentational.

My solution (used in a couple of upcoming files) has been using
"presentational javascript". Taking advantage of jQuery, i write a clean,
semantic-consistent page, then, with a js script, i add the extra stuff
(like those said extra-div for every .box div), and i cook everything with
CSS.

Does this make any sense?

Absolutely bloody none.

JQuery is a load of rubbish which only works a small subset of browsers.

Javascript is turned off for a percentage of your audience, 10% or so.

And how exactly do you think your magical JQuery does these round corners of
yours? I don't know but I suspect very very badly.

Lets see one of these upcoming pages. It will be pulled completely apart.

 

[Sherm Pendley]

My solution (used in a couple of upcoming files) has been using
"presentational javascript". Taking advantage of jQuery, i write a
clean, semantic-consistent page, then, with a js script, i add the
extra stuff (like those said extra-div for every .box div), and i cook
everything with CSS.

Does this make any sense?

Makes sense to me. Search engines and other bots that are looking for
the symantic markup won't run the JS, so they'll get the clean markup.

sherm--

 

[RW]

gu schreef:

Hi there. Dispite some people (cit. needed ) claiming there's no
future for semantic web, when i design a page i try to make it
semantically meaningful.

For web-data to be semantically meaningful, clean markup is probably a
necessity

but I get the impression that you are confusing the two
or think that they are the same.

Reading the rest of your post, I think we're talking about clean markup
here.

I like working on a clean html (a la csszengarden, thought it is not the
best example of semantic design) and then shape its presentation via CSS.

There are things, as you may well know, that are not easy (or
impossible) to accomplish via CSS only if you tight to a semantic
layout.

"...tight to a semantic layout..." ??????
I don't understand that first word
and I don't understand what you mean by semantic layout.

Think at a simple box div ( <div class="box">i'm a box</div> )
where you want to add rounded corners or some nice extra effect.

"I'm a box" looks like it should be between paragraph tags.

Most solutions are based on extra divs addend within (or around) the main
div, but, needless to say this is not semantically correct as
"toprightcorner" does not carry any information that is not merely
presentational.

Wrong.
If you add 'class=toprightcorner' to the start-tag then that can
function as a hook for an applied css-style.
It doesn't reduce the cleanliness of the markup.

My solution (used in a couple of upcoming files) has been using
"presentational javascript". Taking advantage of jQuery, i write a
clean, semantic-consistent page, then, with a js script, i add the extra
stuff (like those said extra-div for every .box div), and i cook
everything with CSS.

Does this make any sense?

Adding markup with javascript doesn't make sense if you ask me.

 

[dorayme]

gu schreef: ....


"...tight to a semantic layout..." ??????
I don't understand that first word

OP means "stick tight to"

and I don't understand what you mean by semantic layout.

OP means to make the HTML as semantic as possible. Just enough to
present the content as distinguished from any extra pretty look beyond
the call of duty. The call of duty is the basic default presentation.

"I'm a box" looks like it should be between paragraph tags.

It was just a place holder for the content and so you cannot reasonably
predict that it should be between something else.

Wrong.
If you add 'class=toprightcorner' to the start-tag then that can
function as a hook for an applied css-style.
It doesn't reduce the cleanliness of the markup.

It reduces the cleanliness of the mark up by having extra things that
are not strictly needed to convey information in a basic manner. Yes, it
is true that a house that is jam packed with stuff can be clean in the
sense that it has no real organic crap around it. But it can also be
said to have a lot of crap in the sense of unnecessary objects,
notwithstanding the absence of organic or smelly material.

"A clean look" is an expression and will not be understood without
seeing it being used repeatedly, you cannot glean its meaning from
simple inspection of "clean".

I was walking along the passageway of a home for the elderly recently
(visiting a relative) when I passed a door and heard an exasperated
voice scream out:

"Suck, Mildred, Suck! 'Blow' is just an expression"

 

[Nik Coughlin]

JQuery is a load of rubbish which only works a small subset of browsers.

Au contraire. It's great, and it works in almost all browsers:

Javascript is turned off for a percentage of your audience, 10% or so.

So what? A responsible developer makes sure that whatever they're doing
works without JavaScript anyway.

Losing little visual touches like rounded corners if the user has JavaScript
turned off is hardly the end of the world.

And how exactly do you think your magical JQuery does these round corners
of yours? I don't know but I suspect very very badly.

What's with all the hostility? Did the jQuery developers burn down your
house and kill your family?

Lets see one of these upcoming pages. It will be pulled completely apart.

Not the OP, but:
http://nrkn.com/jQueryRound/

 

[rf]

Au contraire. It's great, and it works in almost all browsers:

Almost is not all.

I can only assume that you do not audit either AWW or CLJ. Mention JQuery
over there and you will be told in no uncertain terms that it, along with
other such things as Prototype, are basically junk. Riddled with browser
sniffing. Full of bugs and basically incorrect coding. Requiring an entire
development team per each just to keep up with browser changes.

Why would any sane developer include a hundred K of buggy Javascript just to
add a couple of round corners to a div or something?

Why not just write your own Javascript. You get lean mean stuff that does
exactly and only what you want and, if you do it correctly, will be totally
independant of the browser it runs on.

 

[dorayme]

Almost is not all.

Nick was querying your

"... only works a small subset of browsers"

Nobody claims it works on all browsers.

A subset of browsers is usually meant to include a smaller number of
browsers than the total (it is not necessarily the case). A "small
subset" indicates something like that it is quite the minority of
browsers.

And we could be talking major browsers or simply every browser that is
used at least once in the world in a one year period.

All this is quite independent of your other criticism, about bad and/or
unnecessarily big code.

 

[rf]

Nick was querying your

"... only works a small subset of browsers"

Nobody claims it works on all browsers.

A subset of browsers is usually meant to include a smaller number of
browsers than the total (it is not necessarily the case). A "small
subset" indicates something like that it is quite the minority of
browsers.

Why don't we go to the Authority and see:

http://jquery.com/

Hover over "cross browser". You will see, listed quite clearly (providing
JQuery supports your browser), exactly four browsers: IE, FF, Safari and
Opera.

Four browsers is, IMHO, *not* "almost all browsers". Hell, even I have at
least eight of them installed on my systems and I only dabble in this stuff.

It may well work *by mistake* in other browsers but the author is not
confident enough to state so.

All this is quite independent of your other criticism, about bad and/or
unnecessarily big code.

Indeed. And this, pasted directly from the JQuery code, should make you very
very scared:

<quote>
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test(
userAgent )
};
</quote>

Do I see your beloved MAC IE5.5 in there?

 

[Jonathan N. Little]

All this is quite independent of your other criticism, about bad and/or
unnecessarily big code.

And that is the real killer point. These 'libraries' are big, buggy, and
rely on bad browser sniffing to function. Also to reduce size and|or
obfuscate to 'protect' their source code they are tokenized making
debugging a b*tch!

Roll your own. Create functions that *only* do what you wish and you
will be far more satisfied with the results...

 

[Nik Coughlin]

And that is the real killer point. These 'libraries'

See, you're bundling them all together. I felt exactly the same way about
JavaScript libraries until I started looking further into jQuery. So, you
can actually assume that for the most part I agree with you regarding the
other libraries. But all the arguments I've been reading against it just
sound like people who don't know anything about it. I've looked through the
source, not in detail, but enough to feel good about it.

are big,

Core jQuery is 17KB gzipped - a single medium sized medium quality photo is
bigger than that

buggy,

Have had no problems with core jQuery, admittedly I haven't used a lot of
the plugins. Of course, it's not bug-free, no piece of non-trivial software
is, including the code that you or I or anyone else writes. But the project
is mature and they have a reputation for fixing bugs quickly.

and rely on bad browser sniffing to function.

It uses object detection, and internally the sort of thing it uses it for is
stuff like providing an abstracted event model that works across IE and
browsers that support the standard event model, that sort of thing.

Also to reduce size and|or obfuscate to 'protect' their source code

To reduce size. Given that it's GPL licensed, why would they want to
obfuscate it?

they are tokenized

The jQuery minimized release isn't tokenized, just comments and whitespace
removed - taking the core from 98KB down to 54KB. Gzipping on the server
reduces this down to 17KB.

making debugging a b*tch!

You can develop against the non-minimized version with proper whitespace and
comments and then deploy the minimized version on release.

Roll your own. Create functions that *only* do what you wish and you will
be far more satisfied with the results...

I always have in the past. The thing is, using jQuery, I can generally do
the same thing in a fraction of the time. My time is too important to hand
craft every little thing, and I don't find any of your objections compelling
enough to think that it's worth spending a day or more writing something I
could do in a couple of hours with jQuery just to avoid having to include a
"mammoth" 17KB of gzipped JavaScript.

Have you looked at it at all? You realise that the core is just a framework
that let's you, as you say, roll your own, just in a more efficient manner?
What you're advocating is like using Java but ignoring its class
libraries... that's all jQuery is, a framework. There are lots of
additional plugins for it, sure, but they're mostly third party. You don't
have to use them, and indeed, I generally don't.

The most useful thing for me is that it lets you select and manipulate the
DOM using CSS3 selectors*, which is extremely powerful. For example, zebra
striping all tables on the page:

$("table tr:nth-child(even)").addClass("striped");

How many lines of JavaScript would that normally take**?

If you're writing a lot of JavaScript then suddenly you find that it doesn't
take many cases like this to make bigger savings than the 17KB you're giving
up.

*these are implemented internally by the library, they don't rely on browser
support
** A List Apart's zebra striping code is ~70 lines

 

[dorayme]

And that is the real killer point. These 'libraries' are big, buggy, and
rely on bad browser sniffing to function. Also to reduce size and|or
obfuscate to 'protect' their source code they are tokenized making
debugging a b*tch!

Roll your own...

Perhaps this utility is for those less handy with js?

(Anyway, what do I know. I never much feel the need for rounded corners
for elements. I like the honesty of 90 degrees. Roundness has its place
but when it replaces the natural corners in a rectangle, it feels to me
to share the unsatisfactoriness of many artificial replacements.

People stick Holden engines in Jags and Bentleys. They go OK. But a
certain quality and feel to the whole thing in time seems to me to be
slightly distasteful. And we know about silicon body parts for men and
women.

Look, I hate to sound too nazi about this but there is a certain purity
about a rectangle and well... when I become ruler of the world, people
will mess with this purity at their own risk. There will be laws...
Everything, under my rule, will be what it is and not something else).

 

[pistacchio]

Hi there. Dispite some people (cit. needed ) claiming there's no
future for semantic web, when i design a page i try to make it
semantically meaningful.

I like working on a clean html (a la csszengarden, thought it is not the
best example of semantic design) and then shape its presentation via CSS.

There are things, as you may well know, that are not easy (or
impossible) to accomplish via CSS only if you tight to a semantic
layout. Think at a simple box div ( <div class="box">i'm a box</div> )
where you want to add rounded corners or some nice extra effect. Most
solutions are based on extra divs addend within (or around) the main
div, but, needless to say this is not semantically correct as
"toprightcorner" does not carry any information that is not merely
presentational.

My solution (used in a couple of upcoming files) has been using
"presentational javascript". Taking advantage of jQuery, i write a
clean, semantic-consistent page, then, with a js script, i add the extra
stuff (like those said extra-div for every .box div), and i cook
everything with CSS.

Does this make any sense?

Hi to you all again and thanks for your replies. I think i was not
properly clear in my first post. The discussion about jQuery is
certainly interesting, and so it is the discussion on whether rounding
corners are ok or not. But the main point of my post was not about
that. You can as well replace my sentence about jQuery with "my own
optimized code" or "prototype" and you can also replace "rounded
corners" with "a decorative image of a flower on the right side of the
page" and the core would not change.

I mean, I'm more interested in knowing opinions about the use of
javascript as a tool to accomplish separation of content and
presentation on the client side. What kind of javascript (custom code
or whatever library) and what kind of presentation (rounded corners or
jumping clown GIFs) is beyond the scope of my question.

Thanks
gdp

 

[Nik Coughlin]

Hi to you all again and thanks for your replies. I think i was not
properly clear in my first post. The discussion about jQuery is
certainly interesting, and so it is the discussion on whether rounding
corners are ok or not. But the main point of my post was not about
that. You can as well replace my sentence about jQuery with "my own
optimized code" or "prototype" and you can also replace "rounded
corners" with "a decorative image of a flower on the right side of the
page" and the core would not change.

I mean, I'm more interested in knowing opinions about the use of
javascript as a tool to accomplish separation of content and
presentation on the client side. What kind of javascript (custom code
or whatever library) and what kind of presentation (rounded corners or
jumping clown GIFs) is beyond the scope of my question.

Hi,

I asked this same question here in May, here's a link to that discussion:

http://groups.google.com/group/alt.html/browse_thread/thread/204564297ccd195b

 

[dorayme]

the main point of my post was not about
that. You can as well replace my sentence about jQuery with "my own
optimized code" or "prototype" and you can also replace "rounded
corners" with "a decorative image of a flower on the right side of the
page" and the core would not change.

I mean, I'm more interested in knowing opinions about the use of
javascript as a tool to accomplish separation of content and
presentation on the client side.

You want an opinion? OK, how about this one. Do clean semantic markup as
best you can. Style as you wish for more than default "appearance".
Still not quite the "look" you want ideally? Fine, then use javascript
for even more extras.

There you go.

 

[rf]

[jQuery]


It uses object detection,

So what was that stuff I quoted in another post? Here it is again:

<quote>
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test(
userAgent )
};
</quote>

That to me looks like totally incomplete browser sniffing.

 

[Nik Coughlin]

Why don't we go to the Authority and see:

http://jquery.com/

Hover over "cross browser". You will see, listed quite clearly (providing
JQuery supports your browser), exactly four browsers: IE, FF, Safari and
Opera.

Four browsers is, IMHO, *not* "almost all browsers". Hell, even I have at
least eight of them installed on my systems and I only dabble in this
stuff.

You can safely infer that if it works in FF it works in all of the Gecko
browsers seeing as how they all use the same JavaScript engine. Same can be
inferred about Webkit browsers from the fact that Safari is supported... I
see by running the test suite that this is the case for Chrome too, despite
it using a different JavaScript engine to the other Webkit browsers and not
being in the supported list. Chrome fails 1 test of 1270 in the jQuery test
suite, and this is a known bug in Chrome where it doesn't escape >
characters when inserting text nodes.

Given that the market share for IE versions less than 6 is somewhere under
1% (even allowing for how unreliable browser share figures are), and that
the market share for other browsers not using one of the rendering engines
mentioned above is well under 1% (same caveat), I think it's safe to say
"almost all browsers". ~98% is not what I call a "small subset".

It may well work *by mistake* in other browsers but the author is not
confident enough to state so.

Hardly by mistake, given my point above.

Indeed. And this, pasted directly from the JQuery code, should make you
very very scared:

Why? What's wrong with it? It's as close as you can get without object
detection, and see my note below about the code base.

<quote>
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test(
userAgent )
};
</quote>

Do I see your beloved MAC IE5.5 in there?

Bugger Mac IE5.5

If you audit the code further you'll see that the browser detection stuff is
only used where it's really needed - everything that can be done with object
detection *is* done with object detection.

 

[dorayme]

Why don't we go to the Authority and see:

http://jquery.com/

Hover over "cross browser". You will see, listed quite clearly (providing
JQuery supports your browser), exactly four browsers: IE, FF, Safari and
Opera.

Four browsers is, IMHO, *not* "almost all browsers". Hell, even I have at
least eight of them installed on my systems and I only dabble in this stuff.

No, very well then, but I did have in mind an important factor with my:

"And we could be talking major browsers or simply every browser that is
used at least once in the world in a one year period."

which you snipped.

If the question is about the vast majority of users on top of knowing
that rounded corners not showing will not stop the world, then I think
your criticism of Nik's contentedness with this particular solution is a
little harsh. It is an extreme demand that something that is not
essential should work in all browsers considered simply numerically with
no regard to the practical figures of real usage.

....

Do I see your beloved MAC IE5.5 in there?

That's it, you see. You would not actually catch me dead using this
browser for real. I keep it and mention it to stir up you guys, and that
is the only reason I use and mention it... <g>

 

[Nik Coughlin]

That's it, you see. You would not actually catch me dead using this
browser for real. I keep it and mention it to stir up you guys, and that
is the only reason I use and mention it... <g>

I think this is the best argument for using Mac IE5.5 that I've come across.
Had I a Mac I would get my hands on it pronto