Menu ⇓

  2. I’m thinking the time might have come to write a wrapper around DOMDocument which actually makes it usable. Thoughts:

    • automatic conversion of various encodings to HTML entities to scoot round encoding issues
    • XPath queries still work but querySelector and querySelectorAll are implemented for both the document and individual elements via Symfony XPath → CSS converter and relative XPath queries
    • A DOMNodeList which actually implements ArrayAccess instead of acting like a fake array
    • Perhaps some javascript-inspired property names like innerText, innerHTML for consistency
    • Maybe some jQuery-influenced shortcut goodness for doing things like removing/replacing elements

  4. @benwerd loving your work on idno! Just had a look at the source, great that you’re using 2, I have some suggestions/corrections:

    • .h-entry is better off where you’ve got .idno-entry so then the author .h-card can be scoped into the entry
    • add .p-author to the .h-card for each .h-entry to explicitly declare authorship
    • put .h-as-* on the same element as .h-entry .idno-entry
    • put .u-url where you currently have .dt-published, move .dt-published to the time element

    Thanks to Aaron Parecki you can see how a page is parsed here, or use my php-mf2 demo sandbox for experimentation by hand.

  5. ↪ Emil Björklund: What is the equivalent of a unit test for HTML + CSS? (Yes, I know of Selenium, webdriver etc, but I'm fishing for other answers as well.)

    @thatemil I’ve always considered style guides/pattern libraries to be unit tests for HTML+CSS, and you could automate them with JS if they get too unwieldy.

  8. If you want to generate real PDFs from HTML (i.e. with page breaks and real text, not just vast screenshots inside a PDF) then wkpdf is the way to go. Super fast, installs easily, great output.

  9. ↪ Laura Kalbag: And <br/> tags used instead of <label>s in forms makes me downright stabby.

    Laura Kalbag my current pet peeve is a h1, then a h2 directly below it which is not a header, just a paragraph the author wanted to make look bigger (or a subheader, like bootstrap does with the downright weird h1 -> small). I saw it once a while ago, now I’m seeing it everywhere :/

  11. Cross-browser selection UI injection flow:

    1. Listen for mouseup on body
    2. When triggered, let s be window.getSelection()
    3. If s.isCollapsed === false, return
    4. Else, let r be s.getRangeAt(0)
    5. Create a new element e
    6. Call r.surroundContents(e)
    7. e.innerHTML and e.textContent now return useful values, and e’s coordinates can be used to inject UI into the page

    To resolve: what element should e be? Or more accurately, what display property should it have? Possibly inline-block (inline mucks up if selection is across block elements, block mucks up selections within text nodes)

    Turns out there are problems with r.surroundContent, namely that it does not handle partial element selections. See MDNs explanation and solution.

  14. aral I disagree, "continue" is confusing compared to start. Start = start from a number, continue = what? Continue from a number? So the list should start from that number plus one? Or continue from another ol (perhaps by using an id reference)?

  15. Rolled out usage of the menu element on . I’m looking forward to more browser support for HTML context menus, that will really open up the possibilities for cross-browser extensions