Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Thu, Aug 30, 2012 at 3:24 AM, Daniel Werner
daniel.wer...@wikimedia.dewrote:
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
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Mon, Aug 27, 2012 at 9:39 PM, Chris Steipp cste...@wikimedia.org wrote: On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist mtrac...@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. To clarify this point, in that *specific* example, there's no appreciable difference from a security perspective. The problem comes when you move out of the land of constants, and start concatenating variables. Any time you find yourself doing something like this: $( 'div class=' + fooclass + ' /' ); ...you're way better off doing this: $( 'div /' ).addClass( fooclass ); Not only is it clearer, but it's more secure. Why? If the provenance of that variable is at all unclear, or if you know it comes from user input, I believe you're basically using the DOM to make sure that the string is treated as a class name rather than arbitrary HTML (Arbitrary HTML leads to XSS. XSS leads to anger. Anger leads to hate). I don't know jQuery well enough to know for sure if using addClass is sufficient for arbitrary strings or if it's best to *also* escape fooclass, but it's at least more likely to be safe than concatenating to arbitrary HTML. If you're dealing just with a constant string, maybe it's ok to use either. However, sooner or later, someone is going to want to make a small tweak that involves changing part of the constant to a variable, and there's a good chance that someone is going to be relatively inexperienced and will simply rely on concatenation rather than changing the code to use addClass. Even if addClass doesn't inherently handle the escaping for you, a lot of basic DOM methods do, which is what makes them appealing from a security perspective. The more specific you can be, the better. Rob ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
Rob is correct that using addClass is the preferable way to go for classes, and attr is the preferable way to go for other attributes. They are both are safe since they use setAttribute internally which escapes the values. - Trevor On Tue, Aug 28, 2012 at 10:29 AM, Rob Lanphier ro...@wikimedia.org wrote: On Mon, Aug 27, 2012 at 9:39 PM, Chris Steipp cste...@wikimedia.org wrote: On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist mtrac...@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. To clarify this point, in that *specific* example, there's no appreciable difference from a security perspective. The problem comes when you move out of the land of constants, and start concatenating variables. Any time you find yourself doing something like this: $( 'div class=' + fooclass + ' /' ); ...you're way better off doing this: $( 'div /' ).addClass( fooclass ); Not only is it clearer, but it's more secure. Why? If the provenance of that variable is at all unclear, or if you know it comes from user input, I believe you're basically using the DOM to make sure that the string is treated as a class name rather than arbitrary HTML (Arbitrary HTML leads to XSS. XSS leads to anger. Anger leads to hate). I don't know jQuery well enough to know for sure if using addClass is sufficient for arbitrary strings or if it's best to *also* escape fooclass, but it's at least more likely to be safe than concatenating to arbitrary HTML. If you're dealing just with a constant string, maybe it's ok to use either. However, sooner or later, someone is going to want to make a small tweak that involves changing part of the constant to a variable, and there's a good chance that someone is going to be relatively inexperienced and will simply rely on concatenation rather than changing the code to use addClass. Even if addClass doesn't inherently handle the escaping for you, a lot of basic DOM methods do, which is what makes them appealing from a security perspective. The more specific you can be, the better. Rob ___ 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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On 12-08-28 10:40 AM, Trevor Parscal wrote: Rob is correct that using addClass is the preferable way to go for classes, and attr is the preferable way to go for other attributes. They are both are safe since they use setAttribute internally which escapes the values. 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). -- Mark Holmquist Contractor, Wikimedia Foundation mtrac...@member.fsf.org http://marktraceur.info ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
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. On Tue, Aug 28, 2012 at 10:44 AM, Mark Holmquist mtrac...@member.fsf.orgwrote: 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
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On 8/28/12 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. 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. Ryan Kaldari ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
Timo where are you ? +1 .addClass as it directly manipulates the .className property. 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. On Tue, Aug 28, 2012 at 10:44 AM, Mark Holmquist mtrac...@member.fsf.orgwrote: 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 ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
Unfortunately, our resident Javascript master is eating dinner :) Ryan Kaldari On 8/28/12 11:00 AM, Rob Moen wrote: Timo where are you ? +1 .addClass as it directly manipulates the .className property. 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. On Tue, Aug 28, 2012 at 10:44 AM, Mark Holmquist mtrac...@member.fsf.orgwrote: 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 ___ 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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
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'. On Tue, Aug 28, 2012 at 10:44 AM, Mark Holmquist mtrac...@member.fsf.orgwrote: 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 ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Tue, Aug 28, 2012 at 11:00 AM, Ryan Kaldari rkald...@wikimedia.orgwrote: 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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Tue, 28 Aug 2012 11:12:22 -0700, Rob Moen rm...@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 mtrac...@member.fsf.orgwrote: 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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Tue, Aug 28, 2012 at 11:15 AM, Daniel Friesen dan...@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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
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 dan...@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 tstarl...@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 cste...@wikimedia.org wrote:
On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist mtrac...@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 rkald...@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 dan...@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:
$('ulli//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%2FJavaScriptdiff=576860oldid=576443
[4]
https://github.com/jquery/api.jquery.com/commit/ea8d2857cd23b2044948a15708a26efa28c08bf2
[5]
https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJavaScriptdiff=576924oldid=576860
___
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
+1
Thank you for grounding this conversation in reality.
- Trevor
On Tue, Aug 28, 2012 at 12:18 PM, Krinkle krinklem...@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 dan...@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 tstarl...@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 cste...@wikimedia.org wrote:
On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist mtrac...@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 rkald...@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 dan...@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:
$('ulli//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%2FJavaScriptdiff=576860oldid=576443
[4]
https://github.com/jquery/api.jquery.com/commit/ea8d2857cd23b2044948a15708a26efa28c08bf2
[5]
https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJavaScriptdiff=576924oldid=576860
___
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
___
Wikitech-l mailing list
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Tue, Aug 28, 2012 at 4:18 PM, Krinkle krinklem...@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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
Hence, I think we should change our coding conventions to always use `$( 'div /' )`. +1 for valid XHTML. Considering that bytes are cheap and validity is good, this seems like a good idea. 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. My preference is the latter, because it avoids extensive HTML inside of JavaScript. But I'd be interested to hear other thoughts. -- Mark Holmquist Contractor, Wikimedia Foundation mtrac...@member.fsf.org http://marktraceur.info ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
$( 'div' ) is the way to go. - Trevor On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist mtrac...@member.fsf.orgwrote: Hence, I think we should change our coding conventions to always use `$( 'div /' )`. +1 for valid XHTML. Considering that bytes are cheap and validity is good, this seems like a good idea. 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. My preference is the latter, because it avoids extensive HTML inside of JavaScript. But I'd be interested to hear other thoughts. -- Mark Holmquist Contractor, Wikimedia Foundation mtrac...@member.fsf.org http://marktraceur.info __**_ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/**mailman/listinfo/wikitech-lhttps://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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Monday, August 27, 2012 at 4:40 PM, Trevor Parscal wrote: $( 'div' ) is the way to go. Yeah. Mark Pilgrim's overview of the sordid history of XHTML is useful background: http://diveintohtml5.info/past.html -- Ori Livneh o...@wikimedia.org ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Mon, 27 Aug 2012 16:57:52 -0700, Ori Livneh o...@wikimedia.org wrote: On Monday, August 27, 2012 at 4:40 PM, Trevor Parscal wrote: $( 'div' ) is the way to go. Yeah. Mark Pilgrim's overview of the sordid history of XHTML is useful background: http://diveintohtml5.info/past.html -- Ori Livneh o...@wikimedia.org Can we not just jump into making this a HTML5 vs. XHTML topic? Because if you want to make this HTML5 vs. XHTML 'div' is NOT valid HTML5. If you don't like the XHTML-ish shortcut that jQuery provides, then our coding conventions should be to use `$( 'div/div' );`. Either way $( 'div' ) is NOT something officially supported by jQuery and makes it easy for developers to accidentally write broken code. -- ~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: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Monday, August 27, 2012 at 5:50 PM, Daniel Friesen wrote: If you don't like the XHTML-ish shortcut that jQuery provides, then our coding conventions should be to use `$( 'div/div' );`. Either way $( 'div' ) is NOT something officially supported by jQuery and makes it easy for developers to accidentally write broken code. By Jove, you're right. The jQuery docs confirm. Retracted! -- Ori Livneh o...@wikimedia.org ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] $( 'div' ) vs. $( 'div /') in coding conventions (and methods for building DOMs with jQuery)
On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist mtrac...@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. ___ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
