QUERYSELECTOR DOES NOT SCOPE TO THE ELEMENT
Yeah, it does:
The
querySelector()
method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
https://developer.mozilla.org/Web/API/Element/querySelector
Easy example. Go here: https://example.com. Result:
document.querySelector('div').querySelector('div');
null
document.querySelector('div').querySelectorAll('div');
NodeList []
In a certain sense, it does, but not in the way you might expect it to.
Suppose you have the following markup:
<div class="a">
<div class="b">
<div class="c"></div>
</div>
</div>
The result of b.querySelector('.a .c')
is not document.querySelector('.b .a .c')
, which would be null.
Instead, it returns document.querySelectorAll('.a .c').filter(e => b.contains(e))[0]
which is c
.
So it is scoped in the sense that you’ll only get back elements that are children of the element you’re calling querySelectorAll
on, but the CSS query itself is not scoped to the element.
Yeah, this tripped me up earlier in the year. I wrote a dom library for the D language and got a bug report saying the results were inconsistent with javascript and I was like “wtf”…. then saw this in the spec. (In fact, with mine, there’s just an implicit :scope
at the start of the string, so you can do querySelector("> div");
to get like the immediate child.)
I find my behavior more useful though so I haven’t actually “fixed” it… I actually don’t understand why javascript did it this way. It kinda smells like a bug that they regretted but couldn’t fix without unknowable compatibility woes, so they added :scope to work around it.
Wow that is horrible. With the current page we are on, this fails:
document.querySelector('.story').querySelector('.stories');
but this works:
document.querySelector('.story').querySelector('.stories .story_liner');
I don’t know what to tell you, the code is there, and when run, you can see for yourself… https://jsfiddle.net/tyg2fdmp/
The text macros I get, this is clearly a refined system and it’s impressive but I get it. I completely do not get how he’s producing those diagrams in realtime in the middle of a lecture though, so this blog post is a cliffhanger :-)
I really want to see how the diagrams happen. My thoughts: diagrams on a sketchpad that are later imported (or imported with a script??).
I used to take notes in LaTeX for 2 courses, for diagrams I would draw them in my notebook and then make diagrams and graphs after class. I stopped doing it because it got to a point where I was trying to fix a latex error and I would ignore the content. I think what would’ve worked best for me would be to take notes in LaTeX during class, but only try to compile it and fix errors after class.
Have a look here!
I just published the follow-up blog post here!
I was wondering how you did it, if there was a bit of a cheat maybe, and I’m delighted to see that the answer is “streamlining and lots of practise with inkscape”! This is inspirational stuff, keep it up :-)
Re-reading you comment, I see that you meant the graphical diagrams and not just the LaTeX generation…that would be interesting to see.
How do you know which styles to use?
Like, say:
How do you find out that you need to use those specific class names?
I tried looking this up, but came back rather empty-handed. Loads of examples abound, but it’s never very clear to me what classes apply to what exactly and how people figure out what the class names are in the first place.
You can inspect the UI via the Browser Toolbox (You can enable it in the Developer Tools settings and then press Ctrl+Alt+Shift+I)
Aha, brilliant! Thank you
Thanks! I’ve cited you in the post, as my changes only involved editing existing styles from other people.