536 Matching Annotations
  1. Last 7 days
    1. js function transclude(elementId) { var clone = document.getElementById(elementId).cloneNode(true), placeholder; clone.id = null; document.write('<br id="__placeholder__">'); placeholder = document.getElementById('__placeholder__'); placeholder.parentNode.insertBefore(clone, placeholder); placeholder.parentNode.removeChild(placeholder); return transclude; }

      ```html

      This is paragraph 1.

      This is paragraph 2.

      This is paragraph 3. It should contain paragraphs 1 and 2. <script>transclude("p1")("p2")</script>

      ```

    1. 这种单独使用的标签,通常是因为标签本身就足够完成功能了,不需要标签之间的内容。实际应用中,它们主要用来提示浏览器,做一些特别处理

      为什么标签不需要结束标签?#share

  2. Jul 2022
    1. And immediately after it, the 2 CSS downloads begin. What we want to do is move the CSS downloads to the left, so all rendering starts (and finishes!) sooner. So all you do it take the URLs of these two files and add them to .htaccess with H2PushResource in front. For me that means the URL to my custom theme's CSS /wp-content/themes/phpied2/style.css as well as some WordPress CSS stuff. While I was there I also added a JavaScript file which is loaded later. Why now start early? So the end result is:

      WordPress tip to start loading some CSS and JS files earlier.

      Sample code to add to .htaccess: H2PushResource /wp-content/themes/phpied2/style.css H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1 H2PushResource /wp-includes/js/wp-emoji-release.min.js?ver=5.4.1

  3. Jun 2022
    1. The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.

      ```html

      <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

      ```

      ```js const el = document.querySelector('#user');

      // el.id === 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateOfBirth === ''

      // set a data attribute el.dataset.dateOfBirth = '1960-10-03'; // Result on JS: el.dataset.dateOfBirth === '1960-10-03' // Result on HTML: <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth="1960-10-03">John Doe</div>

      delete el.dataset.dateOfBirth; // Result on JS: el.dataset.dateOfBirth === undefined // Result on HTML: <div id="user" data-id="1234567890" data-user="johndoe">John Doe</div>

      if ('someDataAttr' in el.dataset === false) { el.dataset.someDataAttr = 'mydata'; // Result on JS: 'someDataAttr' in el.dataset === true // Result on HTML: <div id="user" data-id="1234567890" data-user="johndoe" data-some-data-attr="mydata">John Doe</div> } ```

    1. Using the download attribute to save a <canvas> as a PNGTo save a <canvas> element's contents as an image, you can create a link with a download attribute and the canvas data as a data: URL: Example painting app with save link

      ```html

      Paint by holding down the mouse button and moving it. Download my painting

      <canvas width="300" height="300"></canvas>

      ```

      css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; }

      ```js var canvas = document.querySelector('canvas'), c = canvas.getContext('2d'); c.fillStyle = 'hotpink';

      function draw(x, y) { if (isDrawing) { c.beginPath(); c.arc(x, y, 10, 0, Math.PI*2); c.closePath(); c.fill(); } }

      canvas.addEventListener('mousemove', event => draw(event.offsetX, event.offsetY) ); canvas.addEventListener('mousedown', () => isDrawing = true); canvas.addEventListener('mouseup', () => isDrawing = false);

      document.querySelector('a').addEventListener('click', event => event.target.href = canvas.toDataURL() ); ```

    1. Highlight part of an element This example uses the Range.setStart() and Range.setEnd() methods to add part of an address to a range. The selected range is then highlighted using Range.surroundContents(). The address contains nine nodes: five text nodes, and four <br> elements.

      ```html

      Wyatt Earp<br> 101 E. Main St.<br> Dodge City, KS<br> 67801<br> USA


      Nodes in the original address:

        ```

        ```js const address = document.getElementById('address'); const log = document.getElementById('log');

        // Log info address.childNodes.forEach(node => { const li = document.createElement('li'); li.textContent = ${node.nodeName}, ${node.nodeValue}; log.appendChild(li); });

        // Highlight the street and city const startOffset = 2; // Start at third node: 101 E. Main St. const endOffset = 5; // End at fifth node: Dodge City, KS const range = document.createRange(); range.setStart(address, startOffset); range.setEnd(address, endOffset);

        const mark = document.createElement('mark'); range.surroundContents(mark); ```

      1. ```js import DOMPurify from 'dompurify'

        const App = () => { const data = lorem <b onmouseover="alert('mouseover');">ipsum</b> const sanitizedData = () => ({ __html: DOMPurify.sanitize(data) })

        return ( <div dangerouslySetInnerHTML={sanitizedData()} /> ); }

        export default App; ```

    2. May 2022
      1. ```html

        Choose your monster's colors:

        <div> <input type="color" id="head" name="head" value="#e66465"> <label for="head">Head</label> </div> <div> <input type="color" id="body" name="body" value="#f6b73c"> <label for="body">Body</label> </div>

        ```

        ```js colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false);

        function watchColorPicker(event) { document.querySelectorAll("p").forEach(function(p) { p.style.color = event.target.value; }); } ```

      1. Following the newer definition, the aside element should be inside of the section element to which it is related. The main element is not a sectioning element (elements like article, section, body, figure etc. are). You can of course still place aside in main, but it will be related to the nearest sectioning element parent of main. That means there is no semantic difference (for aside) in these two examples:

        ```html

        <body> <main></main> <aside></aside> </body> <body> <main> <aside></aside> </main> </body>

        ```

      1. css html, body { height: 100%; margin: 0; } .wrapper { height: 100%; display: flex; flex-direction: column; } .header, .footer { background: silver; } .content { flex: 1; overflow: auto; background: pink; }

        ```html

        <div class="wrapper"> <div class="header">Header</div> <div class="content"> <div style="height:1000px;">Content</div> </div> <div class="footer">Footer</div> </div>

        ```

      1. Differences from innerHTML Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML. Moreover, using textContent can prevent XSS attacks.
      2. Differences from innerText Don't get confused by the differences between Node.textContent and HTMLElement.innerText. Although the names seem similar, there are important differences: textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows "human-readable" elements. textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of "hidden" elements. Moreover, since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.) Both textContent and innerText remove child nodes when altered, but altering innerText in Internet Explorer (version 11 and below) also permanently destroys all descendant text nodes. It is impossible to insert the nodes again into any other element or into the same element after doing so.
      1. Summary of Attributes

        • about: Specifies the subject of a relationship. If not given, then the subject is the current document.

        • rel : Defines a relation between the subject and a URL given by either href or resource. The subject is either specified by the closest about or src attribute, @@

        • rev : The same as the the rel attribute, except that subject and object are reversed.

        • property : Defines a relationship between the subject and either a string (if the content attribute is present) or a piece of markup otherwise (the content of the element that the property attribute is on).

        • content : Specifies a string to use as an object for the property attribute

        • href : Specifies an object URI for the rev and rel attributes. <mark>Takes precedence over the resource attribute</mark>.

        • resource : Specifies an object URI for the rev and rel attributes if href is not present.

        • src : Specifies the subject of a relationship.

        • datatype : Specifies a datatype of the object of the property attribute (either in the content attribute, or the content of the element that the datattype attribute is on.) By default, data in the content attribute is of type string, and data in the content of an element has type xml:Literal. If datatype="" is used, then for the RDF the element content is stripped of markup, and is of type string.

        • typeof : Creates a blank node, which becomes the subject, and asserts that the current element contains relationships that match the given RDF type.

      1. The simplest way to publish a description of your dataset is to publish DCAT metadata using RDFa. RDFa allows machine-readable metadata to be embedded in a webpage. This means that publishing your dataset metadata can be easily achieved by updating the HTML for your dataset homepage.

        ```html

        <html prefix="dct: http://purl.org/dc/terms/ rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns# dcat: http://www.w3.org/ns/dcat# foaf: http://xmlns.com/foaf/0.1/"> <head> <title>DCAT in RDFa</title> </head> <br /> <body> <div typeof="dcat:Dataset" resource="http://gov.example.org/dataset/finances">

        Example DCAT Dataset

        25th October 2010

        10th March 2013

        This is the description.

        <div property="dct:license" resource="http://reference.data.gov.uk/id/open-government-licence"> <span property="dct:title">UK Open Government Licence (OGL)</span> </div> <div property="dct:publisher" resource="http://example.org/publisher"> <span property="foaf:name">Example Publisher</span> </div> <div> <span property="dcat:keyword">Examples</span>, <span property="dcat:keyword">DCAT</span> </div> <div> Weekly </div> <div property='dcat:distribution' typeof='dcat:Distribution'> <span property="dct:title">CSV download</span>

        • Format <span content='text/csv' property='dcat:mediaType'>CSV</span>
        • Size <span content='240585277' datatype='xsd:decimal' property='dcat:byteSize'>1024MB</span>
        • Issues <span property='dct:issued'>2012-01-01</span>

        Download the full dataset

        </div> </body>

        </html> ```

    3. Apr 2022
      1. ``js let originalHTML =

        Hello Mr. Wayne, decide what to do:

        • Call Alfred
        • Take Thalia Al Gul to the cinema
        • Save Gotham
        <span>Use the mouse to choose an option.</span> `;

        let newHTML = `

        Hello Batman, decide what to do:

        • Kill The Joker
        • Save Thalia Al Gul
        • Save Gotham

        <span>Use the batarang to choose an option.</span> `;

        // Diff HTML strings let output = htmldiff(originalHTML, newHTML);

        // Show HTML diff output as HTML (crazy right?)! document.getElementById("output").innerHTML = output; ```

        ```css ins { text-decoration: none; background-color: #d4fcbc; }

        del { text-decoration: line-through; background-color: #fbb6c2; color: #555; } ```

    4. Mar 2022
      1. https://www.youtube.com/watch?v=rTSEr0cRJY8

        Starts out with four and a half minutes of anti-crypto and Web3 material. Presumably most of her audience is in the web3 space.

        http://youvegotkat.neocities.org

        Neocities: http://neocities.org

        The Yesterweb: http://yesterweb.org

        Marginalia Search: https://search.marginalia.nu/explore/random

        It [the IndieWeb] is so so queer. Like it's super gay, super trans, super good.

        The indie web also questions tech solutionism which often attempts to solve human problems by removing the human element. But easily the most remarkable and powerful thing about the internet is the ability it has to connect us with one another.

    5. Feb 2022
      1. Do you want to convert your HTML website to a WordPress website? But don’t know how? This blog will tell you three simple ways to convert your HTML website to a WordPress theme.

        WordPress allows people to create websites with no coding experience. Most people who still use HTML websites don’t know- how to convert them into a WordPress site, especially without losing content or needing to do excessive formatting on a page-by-page basis.

        Thankfully there are many ways to move from Static HTML to WordPress. This blog will see three different options to convert HTML to WordPress.

    6. Jan 2022
      1. Scholarly HTML is a domain-specific rich document format built entirely on open standards that enables the interoperable exchange of scholarly articles in a manner that is compatible with off-the-shelf browsers. This document describes how Scholarly HTML works and how it is encoded.
      1. // ==UserScript==
        // @name        Hypothes.is Better Title
        // @description Rewrite titles of Hypothesis users page for better bookmarking
        // @author      https://github.com/kael
        // @see         https://github.com/hypothesis/support/issues/257
        // @version     1
        // @grant       none
        // @include      https://hypothes.is/users/*
        // ==/UserScript==
        
        window.onload = () => document.title = `Hypothesis / ${window.location.pathname.split("/users/")[1]}`;
        
      1. First, here’s a magic trick you might not realize Hypothesis has up its sleeve. Consider this PLOS One article. Annotate it in one tab, then open a second tab and annotate the PDF version there. You’ll see both annotations in both tabs. How is that possible?

        The answer is that when scholarly publishers provide HTML versions of articles, they typically include metadata that points to PDF versions of the same articles. Here’s one way that happens:

        <meta name=”citation_pdf_url” content=”http://journals.plos.org/plosone/article/file?id=10.1371/journal.pone.0168597&type=printable”>
        

        Hypothesis remembers the correspondence between the HTML and PDF versions, and coalesces annotations across them.

      1. 4. Robustifying a link when linking to a specific version

        If the main intent is to link to a specific state of an original resource, for example a snapshot of the original resource in a web archive or one of its version in a version control system, then Robust Link information is conveyed as follows:

        • href for the URI that provides the specific state i.e., the snapshot or resource version;
        • data-originalurl for the URI of the original resource;
        • data-versiondate for the datetime of the snapshot or resource version.

        [...]

        <a href="http://en.wikipedia.org/w/index.php?title=Web_archiving&oldid=485347845"
           data-originalurl="http://en.wikipedia.org/wiki/Web_archiving"
           data-versiondate="2012-03-20">Robust Link to this specific version of the Wikipedia page</a>
        
      2. 3. Robustifying a link when linking to the original resource

        If the main intent is to link to an original resource but also allow future users of that link to see the state of the original resource around the time the link was put in place, then Robust Link information is conveyed as follows:

        • href for the URI of the original resource for which the snapshot was taken;
        • data-versionurl for the URI of the snapshot;
        • data-versiondate for the datetime of linking, of taking the snapshot.

        [...]

        <a href="http://www.w3.org/"
           data-versionurl="https://archive.today/r7cov"
           data-versiondate="2015-01-21">Robust Link to the W3C home page</a>
        
      3. The approach proposed here is to convey this information on a link by leveraging HTML5's attribute extensibility mechanism. It introduces the following data- attributes for the anchor (<a>) element:

        • data-originalurl for the URI of the original resource;
        • data-versionurl for the URI of the snapshot;
        • data-versiondate for the datetime of linking, of taking the snapshot.
      1. <link rel="prefetch" href="/style.css" as="style" />
        <link rel="preload" href="/style.css" as="style" />
        <link rel="preconnect" href="https://example.com" />
        <link rel="dns-prefetch" href="https://example.com" />
        <link rel="prerender" href="https://example.com/about.html" />
        <link rel="modulepreload" href="/script.js" />
        
      1. although if you are using XMLDOM with JavaScript you can code something like var n1 = uXmlDoc.selectSingleNode("//bookstore/book[1]/title/@lang"); and n1.text will give you the value "eng"
        • TEST, value: "selected".text
      2. @KorayTugay, No, the first expression selects, doesn't "return" -- a set of nodes, and this set of nodes is not a string. A node is not a string -- a node is a node in a tree. An XML document is a tree of nodes. lang="eng" is just one of many textual representations of an attribute node that has a name "lang", doesn't belong to a namespace, and has a string value the string "eng" – Dimitre Novatchev Oct 22 '14 at
        • OK: select, not value
      1. //Parent[@id='1']/Children/child/@name will only output the name attribute of the 4 child nodes belonging to the Parent specified by its predicate [@id=1]. You'll then need to change the predicate to [@id=2] to get the set of child nodes for the next Parent. However, if you ignore the Parent node altogether and use: //child/@name you can select name attribute of all child nodes in one go.
        • OK, select ALL
      2. //Parent[@id='1']/Children/child/@name Your original child[@name] means an element child which has an attribute name. You want child/@name.
        • OK: /@name
      3. So far I have this XPath string: //Parent[@id='1']/Children/child[@name]
        • [@name] NO SELECCIONA, sino que FILTRA!
        • ver respuesta "382"
      1. function parseLinkHeader( linkHeader ) {
           const linkHeadersArray = linkHeader.split( ", " ).map( header => header.split( "; " ) );
           const linkHeadersMap = linkHeadersArray.map( header => {
              const thisHeaderRel = header[1].replace( /"/g, "" ).replace( "rel=", "" );
              const thisHeaderUrl = header[0].slice( 1, -1 );
              return [ thisHeaderRel, thisHeaderUrl ]
           } );
           return Object.fromEntries( linkHeadersMap );
        }
        
    7. Dec 2021
      1. Most of the metadata about our document lives in the head of the document, and it makes perfect sense. Most information about our bodies also live in our head.

        Metadata placement.

      1. Welcome to Accessibility WeeklyA weekly dose of web accessibility to help you bring it into your everyday work. Delivered to your inbox each Monday, curated by David A. Kennedy.

        a11y Weekly is about web accessibility. How to make the web user friendly to everyone.