dom

While most developers have some understanding of how HTML and the DOM work, there are a good amount of tags available that are most likely being misused. I don't care about non-evergreen browsers, so that's the only guarantee about compatibility I'm able to make.

Tags

<nav>       the main navigation controls
<header>    the introductory block at the start of the page
<main>      the main content, should cover most of the page
<section>   the different parts of main
<footer>    page end, credits and stuff
<aside>     the sidebar, if any exists

Events

A big gotcha of dom events it that they propagate to their parent nodes if left unhandled. By setting this.stopPropagation() the events are no longer propagated to their parents.

Another gotcha with the dom, is that when you're building dynamic systems with JavaScript, existing dom nodes will have default behavior that is executed. For example: when submitting a form, the default behavior is to refresh the page after submission. To prevent this from happening you have to use the this.preventDefault() method within the form element.

Reflows & repaints

A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.

A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page).

Buttons

Creating a button can be done in multiple ways (all depending on style). Function comes down to semantics. Best practices for this are:

  • a: use anchor tags for external links
  • button: use buttons for all non-form related actions
  • input: use input tags for all form related actions

source

Push notifications on the web

Create a manifest in index.html:

<link rel="manifest" href="/manifest.json">

window.open(url, '_blank')

window.fetch

Uses promises, first .then call defines in what form the data will be displayed. The value can be one of arrayBuffer(), blob(), formData(), json() and text().

window.fetch('http://localhost:1337')
  .then(function (res) { return res.text()})
  .then(function (res) {
    console.log(res)
  })

Setting cookie headers is not possible with fetch. Instead cookies can be set through the credentials api. The value can be one of omit, same-origin, include where omit is the default.

fetch('/something', { credentials: 'same-origin' })

Append class in JS

const node = document.querySelector('.foo')
node.classList.remove('ugly')
node.classList.add('pretty')
node.classList.toggle('hide')

Create popup banner

iOS

<meta
  name="apple-itunes-app"
  content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

android

"prefer_related_applications": true,
"related_applications": [
  {
  "platform": "play",
  "id": "com.google.samples.apps.iosched"
  }
]

media queries in JS

Using window.matchMedia

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

set values in node

  • node.texContent for text
  • node.innerHTML for HTML

File upload

hx`
  <form>
    <input type="file" onchange=${uploadFile}>
  </form>
`

function uploadFile (e) {
  const el = e.srcElement
  const form = new window.FormData()
  const files = el.files
  for (var i = 0; i < files.length; i++) {
    const file = el.files[i]
    console.log(file)
    form.append(file.name, file)
  }

  const opts = {
    uri: 'http://localhost:1337/torrent',
    body: form
  }
  xhr.post(opts, function (err, resp, body) {
    el.value = ''
    if (err) return console.error(err)
  })
}

Hash routing

In the browser hashes are used for two reasons:

  • to signal anchor tags on the same page
  • to create single-page applications

In essence these two modes might be viewed as two sides of the same coin. In the end they're both used to order data on a site.

DOM node prototype chain

HTMLDivElement.prototype
             |
             |.__proto__
             |
    HTMLElement.prototype
             |
             |.__proto__
             |
      Element.prototype
             |
             |.__proto__
             |
       Node.prototype
             |
             |.__proto__
             |
      Object.prototype
             |
             |.__proto__
             |
           null

results matching ""

    No results matching ""