← back to index

DN-01: Frontend Notes

Drive-by frontend notes, part one.

published Mar 17, 2017 tags #javascript #frontend #notes

~/posts/dn-01 $ cat post.md

/ LANG EN / 中文
/ THEME / /

The DN series — drive-by things worth jotting down, mostly web-related.

In IE, each domain has a cap on total cookies:

  1. IE6 and earlier: up to 20.
  2. IE7 and later: up to 50.
  3. Firefox: up to 50.
  4. Chrome and Safari: no hard cap.

IE and Opera also clean up unused cookies on a schedule; Firefox does it randomly. By contrast, userData — supported on basically every browser — doesn’t get wiped, with a per-entry cap of 128 KB.

Over SSL, cookies are hard to intercept; even if they are, a reasonable expiry keeps their value low. For cookies that don’t hold sensitive data, they’re a convenient transport.

display:none vs visibility:hidden

  • display:none: hides the element and removes its space in layout. Surrounding elements collapse together, as if it didn’t exist.
  • visibility:hidden: hides the element but its space in layout is preserved.
  1. <link> is an HTML tag; @import is a CSS rule.
  2. <link> loads in parallel with the page; CSS referenced by @import only starts loading after the page is loaded.
  3. @import only works in IE5+; <link> works everywhere.
  4. Styles from <link> have higher specificity than @import.

position:absolute vs float

  • In common: applying float or position:absolute to an inline element takes it out of flow, and lets you give it explicit width and height.
  • Different: float still occupies space and affects layout of other elements; position:absolute is fully out of flow and can overlap other elements.

CSS selectors

  1. ID (#my-id)
  2. Class (.my-class-name)
  3. Tag (div, h1, p)
  4. Adjacent sibling (h1 + p)
  5. Child (ul > li)
  6. Descendant (li a)
  7. Universal (*)
  8. Attribute (a[rel="external"])
  9. Pseudo-class (a:hover, li:nth-child)

CSS3 pseudo-classes

  • p:first-of-type: the first <p> among its parent’s children.
  • p:last-of-type: the last <p>.
  • p:only-of-type: the only <p> among its parent’s children.
  • p:only-child: a <p> that’s the only child of its parent.
  • p:nth-child(2): the second child of its parent, when that child happens to be a <p>.
  • :enabled / :disabled: form-control enabled state.
  • :checked: radio or checkbox selected.

XML vs JSON

  1. JSON is smaller on the wire than XML, so it’s faster to transmit.
  2. JSON interoperates natively with JavaScript — easier to parse and handle.
  3. JSON is less descriptive than XML.
  4. Parsing JSON is much faster than parsing XML.

Doctype

  • <!DOCTYPE> can declare three DTD types — Strict, Transitional, and Frameset.
  • HTML 4.01 defines all three.
  • XHTML 1.0 likewise defines three XML document types: Strict, Transitional, Frameset.
  • Standards mode (strict) renders pages that follow current standards. Quirks mode (loose / compatibility) renders pages designed for older browsers.

HTML vs XHTML

  1. All tags must be closed.
  2. Element and attribute names must be lowercase.
  3. All tags must be properly nested.
  4. All attribute values must be quoted.
  5. Special characters like < must be entity-encoded.
  6. All attributes must have a value.
  7. -- is not allowed inside a comment.
  8. Images must have alt text.
← back to index