Browser and DOM misc

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 is 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 does 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).

source

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

Push notifications on the web

Create a manifest in index.html:

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

Open links in new tab

window.open(url, '_blank')
<a href="" target="_blank"></a>

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().

fetch('http://zacanger.com')
  .then((res) => res.text())
  .then((a) => console.log(a))

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"
  }
]