705 Matching Annotations
  1. Last 7 days
    1. Security considerations When inserting HTML into a page by using insertAdjacentHTML(), be careful not to use user input that hasn't been escaped.

      ```html <select id="position"> <br /> <option>beforebegin</option>

      <option>afterbegin</option> <option>beforeend</option> <option>afterend</option>


      <button id="insert">Insert HTML</button> <button id="reset">Reset</button>

      Some text, with a code-formatted element inside it.


      ```js const insert = document.querySelector("#insert"); insert.addEventListener("click", () => { const subject = document.querySelector("#subject"); const positionSelect = document.querySelector("#position"); subject.insertAdjacentHTML( positionSelect.value, "inserted text" ); });

      const reset = document.querySelector("#reset"); reset.addEventListener("click", () => { document.location.reload(); });


    1. Use insertAdjacentHTML(). It works with all current browsers, even with IE11.

      js var mylist = document.getElementById('mylist'); mylist.insertAdjacentHTML('beforeend', '<li>third</li>');


      • first
      • second


    2. HTML 5 introduced the <template> element which can be used for this purpose (as now described in the WhatWG spec and MDN docs). A <template> element is used to declare fragments of HTML that can be utilized in scripts. The element is represented in the DOM as a HTMLTemplateElement which has a .content property of DocumentFragment type, to provide access to the template's contents. This means that you can convert an HTML string to DOM elements by setting the innerHTML of a <template> element, then reaching into the template's .content property.

      ```js /* * @param {String} HTML representing a single element * @return {Element} / function htmlToElement(html) { var template = document.createElement('template'); html = html.trim(); // Never return a text node of whitespace as the result template.innerHTML = html; return template.content.firstChild; }

      var td = htmlToElement('<td>foo</td>'), div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

      /* * @param {String} HTML representing any number of sibling elements * @return {NodeList} / function htmlToElements(html) { var template = document.createElement('template'); template.innerHTML = html; return template.content.childNodes; }

      var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>'); ```

  2. May 2023
  3. Apr 2023
  4. Mar 2023
    1. HTML templating and streaming response library for Worker Runtimes such as Cloudflare Workers.

      js function handleRequest(event: FetchEvent) { return new HTMLResponse(pageLayout('Hello World!', html` <h1>Hello World!</h1> ${async () => { const timeStamp = new Date( await fetch('https://time.api/now').then(r => r.text()) ); return html`<p>The current time is ${timeEl(timeStamp)}.</p>` }} `)); }

    1. ```js function makeDocument() { let frame = document.getElementById("theFrame");

      let doc = document.implementation.createHTMLDocument("New Document"); let p = doc.createElement("p"); p.textContent = "This is a new paragraph.";

      try { doc.body.appendChild(p); } catch (e) { console.log(e); }

      // Copy the new HTML document into the frame

      let destDocument = frame.contentDocument; let srcNode = doc.documentElement; let newNode = destDocument.importNode(srcNode, true);

      destDocument.replaceChild(newNode, destDocument.documentElement); } ```

    1. You can have multiple nested React.lazy components inside React.Suspense.


      const CatAvatar = React.lazy(() => import('./path/to/cat/avatar')); const ThorAvatar = React.lazy(() => import('./path/to/cat/thor-avatar'));

      const AppContainer = () => ( <React.Suspense fallback="loading..."> <CatAvatar /> <ThorAvatar /> </React.Suspense> ); ```

    1. CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.
    1. Microdata DOM API

      Warning: Microdata were implemented in some browsers for a long time. Nowadays, they have been abandoned and removed from all browsers and are therefore deprecated. You can't use them anymore and this document is kept as information only.

    1. The microdata becomes even more useful when scripts can use it to expose information to the user, for example offering it in a form that can be used by other applications.The document.getItems(typeNames) method provides access to the top-level microdata items. It returns a NodeList containing the items with the specified types, or all types if no argument is specified.Each item is represented in the DOM by the element on which the relevant itemscope attribute is found. These elements have their element.itemScope IDL attribute set to true.The type of items can be obtained using the element.itemType IDL attribute on the element with the itemscope attribute.

      ```js // This sample shows how the getItems() method can be used to obtain a list // of all the top-level microdata items of one type given in the document:

      var cats = document.getItems("http://example.com/feline"); ```

      ```js // This sample gets the first item of type "http://example.net/user" // and then pops up an alert using the "name" property from that item.

      var user = document.getItems('http://example.net/user')[0]; alert('Hello ' + user.properties['name'][0].content + '!'); ```

      ```js // The HTMLPropertiesCollection object, when indexed by name in this way, // actually returns a PropertyNodeList object with all the matching properties. // The PropertyNodeList object can be used to obtain all the values at once // using its values attribute, which returns an array of all the values.

      var cat = document.getItems('http://example.org/animals#cat')[0]; var colors = cat.properties['http://example.com/color'].values; var result; if (colors.length == 0) { result = 'Color unknown.'; } else if (colors.length == 1) { result = 'Color: ' + colors[0]; } else { result = 'Colors:'; for (var i = 0; i < colors.length; i += 1) result += ' ' + colors[i]; } ```

  5. Feb 2023
    1. Forwarding will always break emails specially in Outlook as it adds it's own code before composing. You can have a forward link on emails which takes you to a page to forward to a friend or you can go with a broken email when it's forwarded. It's harsh I know but there is no way around it.
  6. Jan 2023
  7. Dec 2022
    1. I had been wrapping my components with an improper tag that is, NextJS is not comfortable having a p tag wrapping your divs, sections etc so it will yell "Hydration failed because the initial UI does not match what was rendered on the server". So I solved this problem by examining how my elements were wrapping each other.
  8. Nov 2022
    1. There are plenty of articles about the emergence of PyScript for embedding Python code directly into HTML, but until now the creation of browser extensions in Python has been something of a closed door.

      One can use PyScript to write browser extensions in Python (or at least some simple ones?)

    1. 🧐 Why is there no event.preventDefault on the button? A <button type="button">, while seemingly redundant, is the HTML way of preventing a button from submitting its form.