Mailing List Archive

1 2  View All
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
On Tue, Aug 28, 2012 at 11:00 AM, Ryan Kaldari <rkaldari@wikimedia.org>wrote:

> In that case, perhaps we should just say that all of the options are fine:
> $( '<div>' )
> $( '<div/>' )
> $( '<div></div>' )
> but emphasize not to use attributes in the tag creation.


Unless you are creating an input or a button. Maybe, we
should encourage people to read the jQuery documentation instead of trying
to re-document every feature ourselves.

- Trevor
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
On Tue, 28 Aug 2012 11:12:22 -0700, Rob Moen <rmoen@wikimedia.org> wrote:

>
> On Aug 28, 2012, at 10:52 AM, Trevor Parscal wrote:
>
>> jQuery internally maps '<tagName>' to document.createElement( 'tagName'
>> ).
>> This is a feature, and is used throughout jQuery internally. It's not
>> very
>> well documented as such, but Timo is adding it to the documentation as
>> to
>> resolve the confusion around this. $( '<div>' ) is a shortcut added to
>> jQuery for our convenience, and I think it's reasonable to use it.
>>
>
> + 1
> I've always used '<div />'. Recently though, I learned that you no
> longer need to do that in jQuery.
> And since have been using '<div>'.

That's an unintentional side effect. jQuery does not officially support $(
'<div>' ) without a closing </div> or />.

>> On Tue, Aug 28, 2012 at 10:44 AM, Mark Holmquist
>> <mtraceur@member.fsf.org>wrote:
>>
>>> In creating elements, maybe, but after creation, $.prop() is the
>>> preferred
>>> way to go because the DOM properties are more reliably synced with the
>>> actual state of the UI--apparently jQuery doesn't always properly sync
>>> the
>>> HTML attributes to the browser state. I'm sure Timo can explain more
>>> fully
>>> (and maybe more accurately).
>>>
>>
>> We had this discussion yesterday, and addClass is more direct than prop(
>> 'className' ) in every way and unless you mean to actually replace all
>> existing classes, addClass is preferred. prop is there for a reason and
>> it's also safe to use as escaping goes, but obviously not all attributes
>> are actually properties, so it's not like we should stop using attr.
>>
>> - Trevor
>> _______________________________________________
>> Wikitech-l mailing list
>> Wikitech-l@lists.wikimedia.org
>> https://lists.wikimedia.org/mailman/listinfo/wikitech-l


--
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name]


_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
On Tue, Aug 28, 2012 at 11:15 AM, Daniel Friesen <daniel@nadir-seen-fire.com
> wrote:

> That's an unintentional side effect. jQuery does not officially support $(
> '<div>' ) without a closing </div> or />.


And yet they use it themselves internally? As I mentioned, Timo is a jQuery
maintainer and said it is supported and welcome to be used, and is adding
the regrettably lacking documentation soon.

http://i.imgur.com/h13A1.png

- Trevor
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
Okay, sorry for being away for 30 minutes while I enjoyed dinner.

Someone[1] pointed me to this thread and suggested I chime in, so here I go.


On Aug 28, 2012, at 2:50 AM, Daniel Friesen <daniel@nadir-seen-fire.com> wrote:

> Either way $( '<div>' ) is NOT something officially supported by jQuery [..]
>

This is simply incorrect.
* It has been explicitly supported (whether or not intentionally/officiallt) by jQuery for years as can be seen in the source code.
* It has been used by jQuery core and other jQuery project for years (not just sporadically, but pretty much everywhere, consistency).

And I'm happy to announce that as of today, by popular demand, the jQuery team has finally updated[4] the 3-year old documentation to reflect this feature.

Up until now the documentation for the root jQuery() function still reflected the situation as it was 3 years ago. Where the string always had to be fully valid with closing tag, with the exception of <input> and <img/> because the native parsers in the browsers supported it that way (not because jQuery wanted us to).

But for a while now jQuery features element creation through the native createElement() by passing a single <tag> ("with optional closing tag or quick-closing"[2]). As such I've reverted this edit[3].



On Aug 28, 2012, at 9:57 AM, Tim Starling <tstarling@wikimedia.org> wrote:

> Personally, I would use document.getElementById() to do that. It's
> standard, and it's faster and more secure. More complex selectors
> derived from user input can be replaced with jQuery.filter() etc. with
> no loss of performance.
>
> -- Tim Starling
>


Indeed.
Moreover, aside from the performance and security, there's another important factor to take into account. And that is the fact that IDs can contain characters that have special meaning in CSS selectors (such as dots).

We've seen this in before when dealing with a MediaWiki heading (where the ID-version of the heading can (or could) contain dots). So whenever you have what is supposed to be an element ID in a variable, use document.getElementById (even if you don't care about performance or security).




On Aug 28, 2012, at 6:39 AM, Chris Steipp <csteipp@wikimedia.org> wrote:

> On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist <mtraceur@member.fsf.org> wrote:
>> I also tried to get an answer about the better between $( '<div
>> class="a-class" />' ) and $( '<div />' ).addClass( 'a-class' ), but
>> apparently there's little difference. At least when creating dynamic
>> interfaces, I'd like to have some guidance and consistency if anyone is
>> interested in chatting about it.
>
> I'm going to try and put some guidelines for secure javascript code
> together soon, but it's a much better habit to use .addClass(
> 'a-class' ) and the other functions to add attributes.
>

I'm looking forward to that.

Note that it is perfectly fine and secure to use:
$( '<div class="a-class"></div>' );

But when working with variables (whether from user input or not), then methods like addClass should be used instead. Both for security as well as predictability:
$( '<div class="' + someVar + '"></div>' ); // Bad

If the variable contains any unexpected characters it can for example cause the jQuery object to be a collection of 2 or 3 elements instead of 1.



On Aug 28, 2012, at 8:00 PM, Ryan Kaldari <rkaldari@wikimedia.org> wrote:

> In that case, perhaps we should just say that all of the options are fine:
> $( '<div>' )
> $( '<div/>' )
> $( '<div></div>' )
>

Indeed[5].



On Aug 28, 2012, at 2:50 AM, Daniel Friesen <daniel@nadir-seen-fire.com> wrote:

> If you don't like the XHTML-ish shortcut that jQuery provides, then our coding conventions should be to use `$( '<div></div>' );`.
>

I agree we shouldn't use XHTML-ish shortcuts because it looks confusing:
$('<ul><li/></ul>');

That works because jQuery converts <tag/> to <tag></tag>.
But just because jQuery allows that doesn't mean we should do it.
I'd recommend we keep it simple and always use valid HTML syntax when writing HTML snippets for parsing.

Either use the <tag> syntax to create a plain element, or use fully valid XML/HTML syntax (with no shortcuts) for everything else.


-- Timo

[1] Well, actually, almost a dozen someones.

[2] http://api.jquery.com/jQuery/?purge=1#jQuery2

[3] https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJavaScript&diff=576860&oldid=576443

[4] https://github.com/jquery/api.jquery.com/commit/ea8d2857cd23b2044948a15708a26efa28c08bf2

[5] https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJavaScript&diff=576924&oldid=576860

_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
+1

Thank you for grounding this conversation in reality.

- Trevor

On Tue, Aug 28, 2012 at 12:18 PM, Krinkle <krinklemail@gmail.com> wrote:

> Okay, sorry for being away for 30 minutes while I enjoyed dinner.
>
> Someone[1] pointed me to this thread and suggested I chime in, so here I
> go.
>
>
> On Aug 28, 2012, at 2:50 AM, Daniel Friesen <daniel@nadir-seen-fire.com>
> wrote:
>
> > Either way $( '<div>' ) is NOT something officially supported by jQuery
> [..]
> >
>
> This is simply incorrect.
> * It has been explicitly supported (whether or not
> intentionally/officiallt) by jQuery for years as can be seen in the source
> code.
> * It has been used by jQuery core and other jQuery project for years (not
> just sporadically, but pretty much everywhere, consistency).
>
> And I'm happy to announce that as of today, by popular demand, the jQuery
> team has finally updated[4] the 3-year old documentation to reflect this
> feature.
>
> Up until now the documentation for the root jQuery() function still
> reflected the situation as it was 3 years ago. Where the string always had
> to be fully valid with closing tag, with the exception of <input> and
> <img/> because the native parsers in the browsers supported it that way
> (not because jQuery wanted us to).
>
> But for a while now jQuery features element creation through the native
> createElement() by passing a single <tag> ("with optional closing tag or
> quick-closing"[2]). As such I've reverted this edit[3].
>
>
>
> On Aug 28, 2012, at 9:57 AM, Tim Starling <tstarling@wikimedia.org> wrote:
>
> > Personally, I would use document.getElementById() to do that. It's
> > standard, and it's faster and more secure. More complex selectors
> > derived from user input can be replaced with jQuery.filter() etc. with
> > no loss of performance.
> >
> > -- Tim Starling
> >
>
>
> Indeed.
> Moreover, aside from the performance and security, there's another
> important factor to take into account. And that is the fact that IDs can
> contain characters that have special meaning in CSS selectors (such as
> dots).
>
> We've seen this in before when dealing with a MediaWiki heading (where the
> ID-version of the heading can (or could) contain dots). So whenever you
> have what is supposed to be an element ID in a variable, use
> document.getElementById (even if you don't care about performance or
> security).
>
>
>
>
> On Aug 28, 2012, at 6:39 AM, Chris Steipp <csteipp@wikimedia.org> wrote:
>
> > On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist <mtraceur@member.fsf.org>
> wrote:
> >> I also tried to get an answer about the better between $( '<div
> >> class="a-class" />' ) and $( '<div />' ).addClass( 'a-class' ), but
> >> apparently there's little difference. At least when creating dynamic
> >> interfaces, I'd like to have some guidance and consistency if anyone is
> >> interested in chatting about it.
> >
> > I'm going to try and put some guidelines for secure javascript code
> > together soon, but it's a much better habit to use .addClass(
> > 'a-class' ) and the other functions to add attributes.
> >
>
> I'm looking forward to that.
>
> Note that it is perfectly fine and secure to use:
> $( '<div class="a-class"></div>' );
>
> But when working with variables (whether from user input or not), then
> methods like addClass should be used instead. Both for security as well as
> predictability:
> $( '<div class="' + someVar + '"></div>' ); // Bad
>
> If the variable contains any unexpected characters it can for example
> cause the jQuery object to be a collection of 2 or 3 elements instead of 1.
>
>
>
> On Aug 28, 2012, at 8:00 PM, Ryan Kaldari <rkaldari@wikimedia.org> wrote:
>
> > In that case, perhaps we should just say that all of the options are
> fine:
> > $( '<div>' )
> > $( '<div/>' )
> > $( '<div></div>' )
> >
>
> Indeed[5].
>
>
>
> On Aug 28, 2012, at 2:50 AM, Daniel Friesen <daniel@nadir-seen-fire.com>
> wrote:
>
> > If you don't like the XHTML-ish shortcut that jQuery provides, then our
> coding conventions should be to use `$( '<div></div>' );`.
> >
>
> I agree we shouldn't use XHTML-ish shortcuts because it looks confusing:
> $('<ul><li/></ul>');
>
> That works because jQuery converts <tag/> to <tag></tag>.
> But just because jQuery allows that doesn't mean we should do it.
> I'd recommend we keep it simple and always use valid HTML syntax when
> writing HTML snippets for parsing.
>
> Either use the <tag> syntax to create a plain element, or use fully valid
> XML/HTML syntax (with no shortcuts) for everything else.
>
>
> -- Timo
>
> [1] Well, actually, almost a dozen someones.
>
> [2] http://api.jquery.com/jQuery/?purge=1#jQuery2
>
> [3]
> https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJavaScript&diff=576860&oldid=576443
>
> [4]
> https://github.com/jquery/api.jquery.com/commit/ea8d2857cd23b2044948a15708a26efa28c08bf2
>
> [5]
> https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJavaScript&diff=576924&oldid=576860
>
> _______________________________________________
> Wikitech-l mailing list
> Wikitech-l@lists.wikimedia.org
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in codingconventions (and methods for building DOMs with jQuery) [ In reply to ]
> Indeed.
> Moreover, aside from the performance and security, there's another important factor to take into account. And that is the fact that IDs can contain characters that have special meaning in CSS selectors (such as dots).
>
> We've seen this in before when dealing with a MediaWiki heading (where the ID-version of the heading can (or could) contain dots). So whenever you have what is supposed to be an element ID in a variable, use document.getElementById (even if you don't care about performance or security).
>
Modern browsers like Chrome / IE9 are really fast, jQuery isn't just about performance but also about shorter code. Why don't have something like $.id(myId), as a "shortcut" to document.getElementById(). Also perhaps another .get* methods (there were bunch of them).
As you are one of jQuery code maintainers, such feature can be easily implemented.
Dmitriy

_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions [ In reply to ]
On Tue, 28 Aug 2012 10:40:23 -0700, Niklas Laxström
<niklas.laxstrom@gmail.com> wrote:

> On 28 August 2012 02:26, Daniel Friesen <daniel@nadir-seen-fire.com>
> wrote:
>> I ran into our coding conventions for creating elements in JS:
>> https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Creating_elements
>> var $hello = $('<div>').text( 'Hello' );
>> // Not '<div/>'
>> // Not '<div></div>'
>>
>> This looks like some really bad advice.
>
> The very reason I and others have been killing '<div/>' with fire is
> that I was told it doesn't work in IE. Can you explain what is going
> on?

If they're talking about jQuery that's a mistake on part of whoever told
you that.

jQuery has a regexp internally that converts <tag ... /> anywhere in the
input automatically into <tag ...></tag>. It's an intentional shortcut so
that you don't have to specify the closing tag every time you're creating
an element that you're going to add content to dynamically.

> Personally I don't like '<div/>' because there is no such thing in
> html. I could understand '<div>' as a shortcut for creating a div
> element.
>
> Unless the issue is clarified, I think that recommending to always use
> valid html like <div></div> seems a much better option than either of
> <div> or <div/>.

What would you think about bypassing all the pointless vs. discussion by
adding something like `$.tag( 'div' )` or `$.create( 'div' );`?

> -Niklas
>


--
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name]


_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
On Tue, Aug 28, 2012 at 4:18 PM, Krinkle <krinklemail@gmail.com> wrote:
> Moreover, aside from the performance and security, there's another important factor to take into account. And that is the fact that IDs can contain characters that have special meaning in CSS selectors (such as dots).
>
> We've seen this in before when dealing with a MediaWiki heading (where the ID-version of the heading can (or could) contain dots). So whenever you have what is supposed to be an element ID in a variable, use document.getElementById (even if you don't care about performance or security).

About that, see:
https://bugzilla.wikimedia.org/30471
(MediaWiki generates ids which can't be selected)


Helder

_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
I will rescue two facts listed in this thread, about using jquery and
creating tags

[quote][1]
>Basically $( '<span class="foo">' ) will break completely in IE7/IE8.

[quote][2]
>It's important to note however that IE required that input and button >tags
>are created with a type (if they are going to have a specific one)
>
>$( '<input type="password">', { 'class', 'example' } );






--
--
ℱin del ℳensaje.

_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
> In that case, perhaps we should just say that all of the options are fine:
> $( '<div>' )
> $( '<div/>' )
> $( '<div></div>' )
> but emphasize not to use attributes in the tag creation.
>

+1
All three will return the same, and this is not HTML, it's JavaScript. It
really is just a matter of personal flavor in coding style, nothing else.

By the way, you can also use

$( '<div/>', { 'class': 'foo', 'title': 'myTitle', ... } );

for adding attributes right away. Should be faster, more readable and less
error-prone than using tags directly in the div's definition string.

Cheers,
Daniel W
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: $( '<div>' ) vs. $( '<div />') in coding conventions (and methods for building DOMs with jQuery) [ In reply to ]
On Thu, Aug 30, 2012 at 3:24 AM, Daniel Werner
<daniel.werner@wikimedia.de>wrote:

>
> By the way, you can also use
>
> $( '<div/>', { 'class': 'foo', 'title': 'myTitle', ... } );
>
>
Just be aware this also allows you to use things like 'html' and 'text'
which are not attributes at all, but call .html() or .text() internally.
There are also property aliases here.

In short - be aware of what the code does by reading the manual.

http://api.jquery.com/

- Trevor
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

1 2  View All