« first day (436 days earlier)      last day (4737 days later) » 

14:00
Right, that should work.
If you wanna just the text content then:

chat.addEventListener("DOMNodeInserted", function(e) {
if(e.target.className !== "message") return;
console.log(e.target.querySelector(".content").textContent);
}, false);
y u use CSS selectors when not necessary @_@
it is if you need just the text w/o the time and other stuff
or you can traverse, sure, but why?
getElementsByClassName
Bleep
Is there any real speed benefit?
Since the method gets all children, querySelector gets just the first.
(1)YES, (2)it's using real DOM methods, not hipster, jQuery fanboy CSS selector horrid methods
//this works:
function validTarget ( target ) {
    return target.nodeType === 1 && target.classList.contains( 'user-container' );
}
document.getElementById( 'chat' ).addEventListener( 'DOMNodeInserted', function ( e ) {
    if ( !validTarget(e.target) ) {
        return;
    }
    console.log( e.target );
});
Sweeeet
14:04
Oh, querySelector is a DOM method, I'll have you know. And that comes from someone, who above all fancies vanilla javascript. :-)
Why couldn't I get it right the first time around?
It's a monstrosity. js shouldn't have css selectors.
Why exactly is it monstrosity? Sure, the way jQuery users use them is usually wrong, but that's their problem. I think that if you're not worjking with your own DOM (since then you should have all elements at hand in variables), the selector API comes in handy.
Because the DOM is a tree. css selectors select via html. js doesn't have access to html, it has access to the DOM.
When you treat the DOM like html, you're not doing it wrong, you're dealing with it wrong
Which leads to doing it wrong
@Witiko DOMNodeInserted is deprecated
@Zirak for sufficiently large trees querySelector can be faster then gEBCN
Also pleases, target.nodeType === Node.ELEMENT_NODE
magic numbers are evil
@Raynos I don't care about faster
Also, see the challenge (slightly altered): Using DOM events, find the last message sent in chat (sent, not updated or anything else - only really new messages must filter through) and grab its sender and its contents. Go.
14:12
@Raynos: Well, since older IEs don't implement Node, one has to do with magical numbers sometimes. :-)
@Zirak: Well, faster and more readible are the main ideas behind scripting languages.
well, not faster
:D
If you're doing it wrong, then you're doing it wrong, no matter how readable it is.
innerHTML may be the most readable thing on the planet, but it's still wrong
@Witiko older IEs also dont implement classList, addEventListener, e.target, etc
True
This is just for Chrome, so feel free to be creative
@Zirak: As for doing it wrong - sure, if it is "My tree" I created via javascript then using selectors is a mark of bad coding. But when accessing someone else's code, it's something a bit different.
You just need to parse through the tree - either by traversing or by selecting against is.
14:16
Anyway
if your using selectors over gEBCN/gEBTN your doing it wrong
get*By* is also selecting. CSS selectors are always the greater evil, because their core foundation (treating the DOM like html) is bad
...
if your saying gEBI is evil then go fuck off
Even I'm not that much of a puristfag
DOM is representation of HTML :-)
HTML is a serialized representation of the DOM ;)
@Raynos Where did I say that?
14:17
It's the other way around
You said getByX is evil
No, I didn't. But yeah that part wasn't very clear of me
I meant to make a difference between selecting via DOM selectors and selecting via CSS selectors.
@Witiko The js objects you interact with are a presentation of js. It doesn't make it right to use eval
Well, in some cases (parsing JSON in older browsers, pre-compiled functions) I am all for eval. :-) Although in most cases, it is just bad.
Every rule has its exceptions. It doesn't make the rule any less valid.
@rlemon Nice hat
hi all
I don't know about that. Scaring people by saying it's evil and not showing that it has its uses doesn't sound ideal.
@Vlad: Hey
14:22
I am using swfobject.embedSWF function and dont see the flash content in IE although I can open the settings menu on the flash container. Any idea why?
Only people who absolutely know what the hell their doing should make the call whether to use things like eval. Otherwise, they're not worthy. And I personally don't see any valid reasons to use css selectors
I think that when parsing through someone else's DOM (like the messages here), it's quicker, the code is cleaner and thus justifiable. In your code you shouldn't need it.
It is perfect for extensions. :-)
Why?
maybe I dont have valid js code, but I dont get any errors in IE, weird.
Because you don't have the other person's Elements in variables, so you need to search the DOM either way. So, instead of looping and doing what querySelector would've done, you just use the function.
@Vlad: Sorry for ignoring you, could you provide sample code?
14:28
And instead of just going through the gruesome process of building your own DOM elements, you just use innerHTML
using this code to invoke popup window and load html page that has flash embeded inside
newWindow = window.open(url, "_blank", options);
newWindow.callId = params[0];//callId;
newWindow.param2 = params[1]; etc.
does IE has some issues on window.open method?
@Zirak: That actually isn't usually plausible, since you want to attach stuff to the elements, which innerHTML doesn't alow.
user986408
err guys how would i use the eventhandler "onchange" directly in the js script ? like "document.getElementById('a1234').onchange ..." ?
Not necessarily. And why can't you just slap on innerHTML and select elements from there?
@ThatWebNe: ....onchange = function() { ... }
user986408
14:30
thanks ~.~
embedSWF is cross browser function right?
@Zirak: Because it's neither faster nor necessary?
Nor are css selectors necessary.
If you have good html, css selectors are moot.
With other person's code, querySelector is the quickest way of getting to what you wana parse out.
Alright, for the millionths time - I'm talking about parsing other person's DOM / html. :-)
I know you are. And I still insist that you treat the DOM like a tree and not like a string.
user986408
14:33
can anyone tell me why my onchange isn't triggered ?
http://pastie.org/3075155
@Vlad: It doesn't seem that ways. embedSWF is not a native func
@ThatWebNerd onchange is for input elements
user986408
ah..
user986408
so is there another way to accomplish this scenario?
@Witiko I was talking if I can use embedSWF from swfobject with all browsers? is it compaible with all browsers. My app works in firefox and chrome but dont see it in IE
14:36
@ThatWebNerd (1)onchange doesn't alert when the content of any element is changed, only when the value of form elements changes. (2)Passing a string to setTimeout is like calling eval. Change setTimeout( "fun()" ) to setTimeout( fun ). (3)Don't use innerHTML to get/set text. See gist.github.com/1490195 .
I'm not sure what your "scenario" is, exactly. Zirak outlined all of my complaints though
user986408
thanks
If it's just a counter, you should use a variable to store it, not the DOM
user986408
actually it should end up as a userscript for an already rendered page
user986408
checking for ajax changes.
14:39
I don't there is an event for changes in an element's content
@Vlad: It should be compatible.
@Zirak: Well, what about this code:

<div id="message">
... variable number of elements ...
<div class="text"></div>
<div name="text"></div>
<div class="text" name="text">
Text Node You Wanna Parse Out
</div>
</div>


You can:
1) Traverse through #message's children to find the
2) gEbN or gEbCN and loop over it
3) document.querySelector("div.text[name=text]").firstChild.nodeValue

To say nothing about more convulted DOM structures. Their messy HTML, sure, but I have to parse it. :-)
What's wrong with #2?
and even if it were a form element, the change event only gets fired when a user enters it, if you changed the value of a text input in javascript, the event won't get fired
It's basically doing what qS would've done anyways.
[].filter.call( messageDiv.getElementsByClassName('text'), function ( elem ) {
    return elem.name === 'text';
});
user986408
14:43
@Dennis so basically i have to compare the whole innerHTML to itself once in a while..
You really don't get my point. I'm not saying that you shouldn't use css selectors because they already do what you'd have done. I'm saying you shouldn't use css selectors because the DOM isn't an html string, it's a data structure, it's a tree, it's an object model
@Zirak: I do get that. And how exactly am I violating it by searching through it based on the objects' properties?
I'm all for programmer lazyness, but I'm against it when it makes you do the wrong design choices (see: Dart)
Let alone [].method being the ugly way of writing Array.prototype.method, since we are so puritan here. :-)
"div.text[name=text]" is not something that even remotely resembles the DOM. It is, however, how the html looks like.
14:45
Wrong, that's how CSS selectors look like
Yeah, I know, but I'm lazy.
And CSS selectors are modeled after...?
And CSS selectors are made so that they work with HTML, XML and possibly other document types - like DOM
CSS + SVG? You're not seeing things
They're all based on SGML. Point being?
oh, and the DOM isn't a document type. It's a document object model.
Poor wording - CSS, like DOM, is made so that they work with several document types
@ThatWebNerd Can you hijack the function that updates the div? Save it off, then replace it with a function that runs the old one + your new "onchange" code?
14:49
Point being that your argument about CSS and query selectors being modelled after HTML is invalid, also I'm showing that CSS selectors work for wide range of document types - like DOM. So it isn't some lazy addition cause of HTML, it's a part of DOM3 spec. :-)
You know what? The minute CSS has native DOM processing capabilities (no script cheating or however that funky thing is called), give me a call, I'll give you a big kiss on the lips.
Until then, the DOM is a tree. CSS selectors being a part of the DOM spec doesn't make them right. CSS selectors are meant to do different things than traverse over a DOM.
And until then, this argument is moot as well.
That's about right, they are meant to give the programmer a way of concisely defining what elements he is talking about. What you then do with that information is another thing.
user986408
learning proper javascript rly gives me a hard time.. tell me again why jquery is bad please :)
jQuery is bad, since it bromotes bad coding practices, which you can't tell, since you don't know javascript.
Wow, is this the official "piss Zirak off" month?
14:53
@Zirak I heard jQueery replaced JavaScript
jQuery is javascript
In disguise :D
@Witiko troll
@Raynos: nope? :-)
Y ARE DEM NOOBS HERE
WHERE DID THEY COME FROM
WHO OPENED THE NOOB PORTAL >:(
gist: jQuery library critique, 2011-12-01 14:15:09Z
# jQuery

`$` itself is a god object. Everything goes on it. The standard plugin / extension architecture that is recommended is to just bolt more methods on `$` itself!

Surely this is bad. An example would be how we have both `$.load` which is overloaded to do completely different things. If they were on two separate sensibly named objects `$Container.load` and `$EventTarget.load`. Personally I would deprecate the latter in favour of `.on('load'`

The animation should be it's own little modular thing, not bolted onto `$`. Ajax should be it's own little modular thing, not bolted onto `$`

# `$` 

This is overloaded to three functions. It would be more sensible to have `select`, `construct` and `domready` as there seperate entities.

# `$.get`, `$.getJSON`, etc

We have some subset of `$.ajax` short cuts which are uneven. These should be removed.

# `$.attr`

What does it even do? It doesn't just set / get attributes. It does a whole bunch of weird logic for backwards compat.

# `:text`, `:checked` `:button`

Useless, slow utility selectors. Having these things promotes bad and slow code. You wouldn't want to use them for performance penalities. They also make the CSS selector a joke by throwing propitiatory selectors in the mix. 

At least split the selector engine into two, one that adheres to (a subset of) standards and one which have their own extensions.

# `.css` 

css isn't bad as such. But it's overused, a lot. We do need a cross browser style manipulation utility but we don't need documentation recommending you use it everywhere.

The community seems to _forget_ the massive penalty that is causing re flows. editing in-line css is slow and should be avoided

# `.toggle`

Another overloaded method that shouldn't be overloaded, that's just plain confusing

# `.wrap`, `.live`

These shouldn't exist.

# `.each`, `.map`, etc

Doesn't match the `.forEach`, `.map`, etc signature. Massively confusing

# `.map`

Hey, lets flatten the returned array! Surely that's an useful "feature"!

# `.domManip` 

domManip executes all scripts irregardless of their status. It does not bother to check whether they are [inserted into a document][1] nor does it bother to check whether their "already started" flag is set.

> The first is a flag indicating whether or not the script block has been "already started". Initially, script elements must have this flag unset (script blocks, when created, are not "already started"). The cloning steps for script elements must set the "already started" flag on the copy if it is set on the element being cloned.

# `.bind`

`Function.prototype.bind` exists. Pick a better name

# Swallowing exceptions and silent errors

jQuery never gives any error messages and tries as hard as possibly not to fail or bubble up internal exceptions. It just likes to swallow all errors.

# `.data`

It only _reads_ from `data-` properties once on load and never reads/writes to them again. This is frustrating. 

Either it shouldn't have anything to do with `data-` properties or it should be a cross browser `.dataset` emulation, not some kind of halfway in between thing.

This does not help debugging at all.

# `.extend`

extend only deep copies "plain objects". Which is rather useless if you use prototypical OO because properties with enumerable non-own properties are not plain. 

This basically means the deep extend is a joke and should be avoided. There is no warning about this "feature".

  [1]: http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#insert-an-element-into-a-document
@Raynos: e troll or him troll? :D
*me
14:55
Because I already yelled at two homeless guys, a retarded fund-raiser, an ex-something, my parents, a fake Santa and some people here. That's a new record.
That's not even all the people who actually managed to piss me off, just piss me off good
And you're pouring your anger on innocent CSS selectors. :D
user986408
wow.. nice list u got there..
Innocent?
I still can't quite see how u figure that gEbN a gEbCN are NOT evil, since className and name attributes are, you know, html thing and not DOM thing. Which leaves us with the option #1? You'd actually loop over all the children?
Attributes are a core part of the DOM
Elements have attributes
15:01
Indeed, but these two functions are obviously meant for HTML.
Since className and name are standardized in HTML (gEbId as well)
There's a difference between a DOM thing and an html thing.
And this is moot. I'm going to eat doughnuts
So I still can't see why it's less evil to use these to extract the data you need from the alien DOM. :-) I don't think it's evil at all, just applying your mentality.
Buen Appetit
15:14
But to tell you what I agree with: querySelector is painfully slow, so when the DOM structure is static, it's usually much less costly & better practice to use getElement(s)By methods or traversing. Also, having to parse through other person's DOM should ideally not be needed (outside extensions), since in well designed environment you'd work with just JSON - in that case all getElement(s)By and CSS Selector methods would be used very sparingly, if at all.

Also gonna grab a snack. :-)
15:29
@Amaan: Nice, bookmark'd
Yeah, I thought so too
@Zirak /mdn String.indexOf
Isn't working or is it just slow?
@Zirak /mdn String.indexOf
Nice
Messed the link up though
15:40
The first one is to indexof@Zirak
Sorry, was also sending a message at the same time. Need to work on multi-response
The first one's link@Zirak
Yeah, it tried handling both our requests at the same time.
Yeah
@Zirak /jquery $.proxy
ok, now there's a bug
15:41
@Zirak maek real bot
@Raynos Game finished or didn't start. Ping me with /new to start
You're just doing it manually, right? Not using a Search API?
@Zirak fuck your bot >_>
Lmao
:D
15:41
XD
@Zirak /jquery $.proxy
hrn
2 mins ago, by Amaan
You're just doing it manually, right? Not using a Search API?
@Zirak
I need to work on the command regex
Check the source: gist.github.com/1518493
GGG had the idea of turning it into a Chrome extension, something I like, since chrome extensions have cross-domain xhr
Hmm
Yeah, but how would that be useful?
You could, for example, see if the link it generates is valid
15:45
You dnn't even need an extension. Userscript will do :-)
Or use a search api that doesn't support jsonp
What search API can you use?
They all either require ads or are paid.
I wonder how the IRC bots do it
Google "I'm feeling lucky"
Ah. Yeah, that could work.
So all the bot has to do is return the link you would be redirected to
@Zirak /jquery jQuery.proxy
@Zirak Could not find specified jQuery property
@Zirak Game finished or didn't start. Ping me with /new to start
lol, pinging myself gets the bot into a loop
15:47
@Zirak /new
+---+
| |
|
|
|
__+__

-------------
oh yeah...I forgot that doesn't work right @_@
Is it fine aside from not monospacing the output?
yep
...
@Zirak m
15:49
The trouble with monospacing is the timing. I need it to be after all the output's been asigned, before it's being sent.
We should probably move to the Sandbox room, shouldn't we?
Turned it off already ;)
A hangman bot? Just how much bored are you? I could use a bored coder. :D
A hangman bot is fun!
@Witiko Doing this kind of stuff is fun!
15:49
And soooo bored......
Any kind of bot is fun!
@Zirak: Thought as much :-)
But yeah, bots are fun
Problem with codifying is that only the hangman uses it.
I could always make a special event, "beforeafteroutput"
ooorrrr, set a special variable!
bot.output(msg, true)?
Thought more along the lines of bot.codifyoutput, but that could work. Does SO markdown allow partly-codified messages?
let's test

if this works
Nope :(
Now with minimal error handling. Hit me.
15:59
@Zirak /mdn document.getElementById
Cool
@Zirak HTMLInputElement
@Dennis Game finished or didn't start. Ping me with /new to start
@Zirak /mdn HTMLInputElement
16:00
Haha
Probably should have linked to the search instead
Uploading current code to github. Try hangman
Move to the Sandbox, I guess?
okay
16:07
in NoSQL, 20 secs ago, by Raynos
What are indexes?
Hi
Is prototype property on an object somehow similiar to super in for example Java?
Is it a reference to the parent?
Nope. something.prototype (in js) is what something will inherit to its children
Object.getPrototypeOf(something) (or the non-standard __proto__ property, used before ES5 gave us the former) is like super
hmm
ok
I think I have to read some more
But why do you expose it in a property?
Why not?
It allows setting properties with much greater ease
16:31
@Pjotr There's nothing comparable to super in Java, because Java is a class-based OO language, whereas JS is prototype-based.
@Pjotr There are no classes in JS, only objects. Every object has a prototype, which is either another object or null.
It's easy to mistake a prototype and Function.prototype.prototype, which is an object that will be passed as a prototype to the Function's instances. It can be hard to wrap one's head around that :D
@Pjotr When you access a property in JS, it first looks to see if the current object has such a property, if not you go to the prototype object and try that, and then repeat.
@Zirak: proto is imo still superior, because not only can you get the prototype of an object, but you can also directly re-set it. Which can prove quite useful.
__proto__ that is
@Witiko You won't be able to set __proto__ forever.
Well, forever is relative, I'm sure they won't do away with it thanks to backwards-compatibility (at least not outside the strict mode), but that'S not my point. My point is that it would be nice to have a prototype setter
Maybe a keyword, dunno.
16:48
@Witiko In Harmony it'll be gone, replaced with an operator to set a prototype at object creation-time. There will be no way to change it after creation.
It's already fairly rarely used, so once it is added, it may well be removed fairly quickly.
But we'll only find out when we find how much it breaks.
Well, Harmony is shaping up to be less and less scripting a language and more javaish and static. I should prolly get myself to read the draft. :-)
There's nothing that static in it.
There's const, but that's been around in impls forever.
I mean overall the changes brought with the strict mode
Equally, there's still quite a lot agreed upon yet to be added to the draft.
16:56
I'll not comment on what I haven't read about, but banning eval, with() and arguments.callee altogether in strict mode is something that I don't quite like. :-)
@Witiko eval isn't banned in strict mode
Oh, I suppose I shouldn't believe w/o testing myself. :-) JResig's blog.
Understandable, though, since I don't quite see the point of strict mode, so I haven't tested it much.
I'm still not convinced it's a massive gain, you can get most of the gains from a compiler POV with static-analysis.
By the way, can anyone see why exactly is this CSS query throwing a DOM SYNTAX ERROR? Just prototyping around, but I'd like to know what's wrong with it: .linkmail:not(td.reply .linkmail)
@Witiko I believe :not only allows simple selectors, and that's overly complex.
17:05
that's not it, .linkmail:not(td.reply) doesn't work either
or would that apply as overly complex as well?
"A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class."
So that's overly complex
Alright, thanks
@Zirak /new
Stopped the bot, didn't want it to interfere with regular chat
17:14
@Zirak /sadface
:P Go
It's on now
Added a new command, /die. It stops the bot
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

-------
@Zirak a
  +---+
  |   |
  |   O
  |
  |
__+__
a
-------
17:28
@Zirak e
  +---+
  |   |
  |   O
  |
  |
__+__
a, e
----e--
@Zirak p
  +---+
  |   |
  |   O
  |   |
  |
__+__
a, e, p
----e--
@Zirak t
  +---+
  |   |
  |   O
  |   |
  |
__+__
a, e, p, t
---te--
17:29
@Zirak n
  +---+
  |   |
  |   O
  |   |
  |
__+__
a, e, p, t, n
--nte--
@Zirak i
  +---+
  |   |
  |   O
  |   |
  |
__+__
a, e, p, t, n, i
-inte--
@Zirak w
  +---+
  |   |
  |   O
  |   |
  |
__+__
a, e, p, t, n, i, w
winte--
17:30
@Zirak rs
Correct! The phrase is winters. Congrats to @Witiko
It's no use, I keep cheating ( gist.github.com - hangman.js words array ) :P
yeah. I'll take that out :D
or...I can just change the word range
@Witiko Hit me with /die please
@Zirak die already
@Witiko Game finished or didn't start. Ping me with /new to start
17:35
@Zirak /die
@Dennis I'm dead!
That's unfortunate
Now try and run other commands
@Zirak /mdn String.split
neat, it works
17:36
This isn't sandbox, though. Ppl might not like our spamming.
It's christmas, noone's here
True, just nolife cases.
Anyway, started it again. Enjoy
Can I use your underlying bot API and create another bot? I'm just not in the mood to reinvent the wheel :D
I've got a few ideas where to take this, though.
Of course
17:40
Any recommended reading, or explanation on prototypes?
I am well familiar with regular Object oriented programming: Java, C++, Ruby etc
Right now at this instant, probably not, because inside of bot.parseMessage I call game.receiveMessage, but that can easily be changed
I don't understand prototypes, or classes...or whatever you call it in JS
Thank ou
@Witiko You can use more events! I really wanted to export the events from IO anyway
17:43
I will read it
Enjoy
The bot isn't completely free on its own. It's really tied with this chat, but if you just want more commands or something, then it's super easy to do. Just call bot.addCommand( commandName, callback ). Callback receives two arguments: command arguments in string form, and the username who sent you the message.
@Pjotr:
var a = {a:1}, b = {b:2}, c = {c:3}, obj = {};
b.__proto__ = c;
a.__proto__ = b;
obj.__proto__ = a;
obj.a + obj.b + obj.c === 6;

@Zirak I'll figure it out. :-)
And share afterwards
Code is pretty readable, imo. Tell me if something isn't clear
Am I supposed to understand that?:P
Yes! Lurk more :-)
Every object has a prototype, that's another object. When you request a property and it's not found in the object itself, the prototype is searched through. Of course the prototype object can have a prototype on its own, so a prototype chain is created. In the example above the chain goes like this:

obj --> a --> b --> c

That's why obj.a + obj.b + obj.c equals 6, although obj has no properties.
But `__proto__` is an unstandard way of doing this. Usually Functions are used for this:

function funct() {
// ... constructor code
}
funct.prototype = ...; // the prototype attached to the function's instances
var result = new func(); // an empty object, whose `__proto__` is funct.prototype
17:53
Object.create much?
Object.create is a nice touch
But apart from the descriptor, it can be rewritten using the old way
Object.create = function(object) {
  var f = new Function;
  f.prototype = object;
  return new f;
};
....did you actually just use new Function to create an nop function?
Also, Object.create(null) says hi
Hey there, Object.create(null)
Also, yeah, I did. Just for the novelty purposes. One just keeps on using function() {}, gets old. :-)

« first day (436 days earlier)      last day (4737 days later) »