53 Matching Annotations
  1. Feb 2020
  2. Nov 2019
  3. Jun 2019
    1. Please note: we need to hide the ball before the call (*). Otherwise we’ll usually have a ball on these coordinates, as it’s the top element under the pointer: elemBelow=ball.

      but the method is supposed to return the most nested one. why did we need to hide the ball? cause its the most nested one in the DOM structure? didn't get it...

    2. What’s the first idea? Probably to put onmouseover/mouseup handlers on potential droppables and detect when the mouse pointer appears over them. And then we know that we are dragging/dropping on that element. But that doesn’t work. The problem is that, while we’re dragging, the draggable element is always above other elements. And mouse events only happen on the top element, not on those below it.

      key point!

    3. Another important aspect – we track mousemove on document, not on ball. From the first sight it may seem that the mouse is always over the ball, and we can put mousemove on it. But as we remember, mousemove triggers often, but not for every pixel. So after swift move the cursor can jump from the ball somewhere in the middle of document (or even outside of the window). So we should listen on document to catch it.

      if not, some mouseMove events we think are triggered on the ball will actually be triggered on other elements - hence the need to track those events on document

    1. Children are ignored.

      key point! notice the demo...

    2. According to the browser logic, the mouse cursor may be only over a single element at any time – the most nested one (and top by z-index).

      key point!

    3. We should keep that possibility in mind when using event.relatedTarget in our code. If we access event.relatedTarget.tagName, then there will be an error.

      key point!

    1. A text selection is the default browser action on mousedown event. So the alternative solution would be to handle mousedown and prevent it, like this:

      an alternative to preventing the selection of text on double click (see "user-select" CSS usage above)

    1. We should use them instead of new Event if we want to create such events. For instance, new MouseEvent("click"). The right constructor allows to specify standard properties for that type of event.

      important, if you wish/need to generate custom events

    1. An alternative solution would be to check in the document handler if the default action was prevented? If it is so, then the event was handled, and we don’t need to react on it.

      instead of stopPropagation, we can preventDefault() in the child and check if it was prevented in a parent event listener

    1. So, without scrollbar the content width would be 300px, but if the scrollbar is 16px wide (the width may vary between devices and browsers) then only 300 - 16 = 284px remains, and we should take it into account. That’s why examples from this chapter assume that there’s a scrollbar. If there’s no scrollbar, then things are just a bit simpler.

      in other words, "width" contains the border, scrollbar and padding

    1. So nowadays getComputedStyle actually returns the resolved value of the property.


    2. elem.classList.toggle("class") – if the class exists, then removes it, otherwise adds it.


    1. The call to document.write only works while the page is loading.

      key point! don't use this method. create elements instead and embed them...

    2. node.append(...nodes or strings) – append nodes or strings at the end of node, node.prepend(...nodes or strings) – insert nodes or strings into the beginning of node, node.before(...nodes or strings) –- insert nodes or strings before the node, node.after(...nodes or strings) –- insert nodes or strings after the node, node.replaceWith(...nodes or strings) –- replaces node with the given nodes or strings.

      note: the string inserted is treated as string and is 'escaped'. for methods that allow inserting string as html, see below...

    1. Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the href DOM property is always a full URL, even if the attribute contains a relative URL or just a #hash.

      so not only the type is different between the attribute and the DOM property, but also their content might differ.

    2. There are other examples. The style attribute is a string, but the style property is an object:


    3. HTML attributes have the following features: Their name is case-insensitive (id is same as ID). Their values are always strings.


    4. So when an element has id or another standard attribute, the corresponding property gets created. But that doesn’t happen if the attribute is non-standard.

      key point

  4. May 2019
    1. In most cases, we expect the text from a user, and want to treat it as text. We don’t want unexpected HTML in our site. An assignment to textContent does exactly that.

      key point - sanitation at courtesy of the browser itself

    2. If innerHTML inserts a <script> tag into the document – it doesn’t execute. It becomes a part of HTML, just as a script that has already run.

      key point!

    3. The innerHTML property allows to get the HTML inside the element as a string. We can also modify it. So it’s one of most powerful ways to change the page.

      key point. compare this with innerText

    1. In the example below, there are two scripts. The first one creates a reference to the collection of <div>. As of now, its length is 1. The second scripts runs after the browser meets one more <div>, so its length is 2

      now that's confusing! see line below on contrasting with querySelector()

    2. elem.querySelectorAll(css) returns all elements inside elem matching the given CSS selector.

      notice that it returns all elements inside 'elem', meaning it works on a subset of the document, not its entirety. Much more effective, wise and useful to limit your searches like this.

    3. The behavior is described in the specification, but it is supported mainly for compatibility. The browser tries to help us by mixing namespaces of JS and DOM. Good for very simple scripts, but there may be name conflicts. Also, when we look in JS and don’t have HTML in view, it’s not obvious where the variable comes from. If we declare a variable with the same name, it takes precedence:

      in other words - don't use JS variables for elements on the page with specific ID

    1. Please note an interesting detail here. If we run the example above, the last element shown is <script>. In fact, the document has more stuff below, but at the moment of the script execution the browser did not read it yet, so the script doesn’t see it.

      because the last thing available to the browser when the script run is the script code itself... . This is a key point and a reason why its usually recommended to add all script tags at the end of the body - so the whole DOM will be loaded before the scripts run

    2. elements

      that's the key point here...

    3. In the DOM world null means “doesn’t exist” In the DOM, the null value means “doesn’t exist” or “no such node”.

      key point!

    1. comments – sometimes we can put the information there, it won’t be shown, but JS can read it from the DOM.

      key point - i wonder if Angular uses this capability as I do know that it introduces some comments into the DOM

    2. there’s a rule – if something’s in HTML, then it also must be in the DOM tree

      including HTML comments

    1. keydown – pressing a key may lead to adding a character into a field, or other actions.

      interesting example on a default action

    2. Menu items are links <a>, not buttons. There are several benefits, for instance: Many people like to use “right click” – “open in a new window”. If we use <button> or <span>, that doesn’t work. Search engines follow <a href="..."> links while indexing.

      key point on why use 'a' tag instead of buttons for navigation purposes

    3. If we handle an event in JavaScript, often we don’t want browser actions. Fortunately, it can be prevented.

      like for example if a link is used in a SPA. We don't want page reload... so we need to tell the browser not to handle the event.

    1. One more example. A click on an element with the attribute data-toggle-id will show/hide the element with the given id:

      now that's a nice useful example. In many cases you have a page in which several items are concealable in this fashion. cool!

    2. When we assign an event handler to the document object, we should always use addEventListener, not document.onclick, because the latter will cause conflicts: new handlers overwrite old ones.

      key point (and a logical one...)

    1. Note that while formally there are 3 phases, the 2nd phase (“target phase”: the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.

      the example below is really useful in understanding this

    1. Element that handled the event. That’s exactly the same as this, unless the handler is an arrow function, or its this is bound to something else, then event.currentTarget becomes useful.

      key point, as using arrow functions is quite common these days, to have lexical binding of this, without confusion

    2. Please note – if we don’t store the function in a variable, then we can’t remove it.

      key point

    1. The document object gives access to the page content

      note: page content, not other functional areas of the browser. Read on to see other parts of the browser.

  5. Jan 2019
  6. dev01.inside-out-project.com dev01.inside-out-project.com
    1. An HTML element is an individual component of an HTML document or web page, once this has been parsed into the Document Object Model.

      Know the Document Object Model.

  7. Oct 2018
    1. React is fast, thanks to the VirtualDOM. Using a diffing algorithm, the browser DOM nodes are manipulated only when there is a state change. This algorithm is computationally expensive. Using webworkers to perform the calculations can make React even faster.
  8. Sep 2018
    1. DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG
    1. var el; var i = 0; var fragment = document.createDocumentFragment(); while (i < 200) { el = document.createElement('li'); el.innerText = 'This is my list item number ' + i; fragment.appendChild(el); i++; } div.appendChild(fragment);
    1. The fastest (): while (node.lastChild) { node.removeChild(node.lastChild); } Alternatives (slower): while (node.firstChild) { node.removeChild(node.firstChild); } while (node.hasChildNodes()) { node.removeChild(node.lastChild); }
  9. Apr 2016
    1. If bp is before the range’s start, or if range’s root is not equal to node’s root, set range’s start to bp.
  10. Sep 2015
    1. You will also have to tell AngularJS what part of the directive's HTML template that is to contain the transcluded HTML

      cf. The concept of 'slots' in the Shadow DOM spec.