85 Matching Annotations
  1. Last 7 days
  2. Nov 2020
    1. This is not an issue related to using a virtual DOM. Plenty of non VDOM libraries have solved this. Imba and Solid come to mind.
    1. I'm looking at https://html.spec.whatwg.org/#attributes-3 right now, and it seems that there are a few others that ought to be boolean but are not currently in this list: allowpaymentrequest, formnovalidate, hidden (is on the original list in the master branch), itemscope, nomodule, and playsinline.
  3. Oct 2020
    1. A JavaScript DOM model supporting element creation, diff computation and patch operations for efficient re-rendering
    2. virtual-dom exposes a set of objects designed for representing DOM nodes. A "Document Object Model Model" might seem like a strange term, but it is exactly that. It's a native JavaScript tree structure that represents a native DOM node tree.
    3. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.
    1. Node doesn't have a DOM available. So in order to render HTML we use string concatenation instead. This has the fun benefit of being quite efficient, which in turn means it's great for server rendering!
    1. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
    2. Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term “virtual DOM” is usually associated with React elements since they are the objects representing the user interface
    3. The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.
  4. developer.mozilla.org developer.mozilla.org
    1. Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.)
    2. The Event interface represents an event which takes place in the DOM.
    1. DOM Events are sent to notify code of interesting things that have taken place.
    1. This article demonstrates how to create and dispatch DOM events. Such events are commonly called synthetic events, as opposed to the events fired by the browser itself.
    1. Unlike DOM events, component events don't bubble. If you want to listen to an event on some deeply nested component, the intermediate components must forward
  5. Sep 2020
    1. Allow creating custom components with the same abilities as native dom. By all means keep the same level of encapsulation, don't push class on components, but allow a component to mark the class property or another as a CSS Class property, in which case you could pass it through the same transformation that native elements go through
    1. React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.The HTML DOM is always tree-structured — which is allowed by the structure of HTML document. The DOM trees are huge nowadays because of large apps. Since we are more and more pushed towards dynamic web apps (Single Page Applications — SPAs), we need to modify the DOM tree incessantly and a lot. And this is a real performance and development pain.The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. It is not invented by React but it uses it and provides it for free. ReactElements lives in the virtual DOM. They make the basic nodes here. Once we defined the elements, ReactElements can be render into the "real" DOM.Whenever a ReactComponent is changing the state, diff algorithm in React runs and identifies what has changed. And then it updates the DOM with the results of diff. The point is - it’s done faster than it would be in the regular DOM.

      React creates a virtual DOM and every time the state of a component changes, it runs a diff algorithm on the virtual DOM. If something needs to be changed, it changes only this part in the HTML DOM. This is faster than the default of updating the entire HTML DOM any time something changes.

  6. Jul 2020
    1. One of the most important concepts in AMP’s design is its focus on reducing the amount of DOM reflow required to render its web pages. To reduce DOM reflow, AMP includes a layout system to ensure the layout of the page is known as early as possible in the lifecycle of downloading and rendering the page.
    2. Why was the container type inferred? Because we did not specify a height attribute for the amp-img tag. In HTML, reflow can be reduced by always specifying a fixed width and height for elements on a page. In AMP, you need to define the width and height for amp-img elements so that AMP can pre-determine the aspect ratio of the element.
    1. Applications built with just React usually have a single root DOM node
    1. The Document Object Model (DOM) is a programming interface for HTML and XML documents

      it's an API

    1. (DOM) is a cross-platform, language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the DOM tree may be addressed and manipulated by using methods on the objects
    2. the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the Web APIs, including the DOM (Document Object Model)
  7. Feb 2020
  8. Nov 2019
  9. 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.

      important

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

      cool!

    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:

      interesting!

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

      important

    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

  10. 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.

  11. Jan 2019
  12. dev01.inside-out-project.com dev01.inside-out-project.com
    |
    1
    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.

  13. 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.
  14. 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); }
  15. 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.
  16. 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.