Skip to content

Instantly share code, notes, and snippets.

@mbbx6spp

mbbx6spp/webdev.org

Last active January 18, 2019 23:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbbx6spp/21cc0753b5645aaf27dfad3c8889e85d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbbx6spp/21cc0753b5645aaf27dfad3c8889e85d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
webdev.org

Decisions/directions for web development projects

Goals for future websites or web applications builts in the next year include:

  • Accessibility: content on the web application should be accessible to people of different abilities using screenreaders by default
  • Footprint: assets and markup of web application should be as minimal as possible without forgoing any of these other goals
  • Mobile-first: design layouts and content dissemination should be optimized for mobile-first
  • Usable: most common tablet and desktop size renderings should work well
  • Performance: ensure each page load has first meaningful paint within 0.4s and ensure page fully interactive by 0.8s (without network latency)

Accessibility

Decisions to accomplish the goal:

  • utilize ARIA attributes: https://www.w3.org/TR/html-aria/
  • utilize semantic HTML5 elements wherever relevant and possible to convey message of content. These include `article`,`aside`, `details`, `figcaption`, `figure`, `footer, `header`, `main`, `mark`, `nav`, `section`, `summary`, `time`, `abbr`, `acronym`, `blockquote`, `ul`, `ol`, `h1`, … `p`, `code`, `dfn`, `cite`, `hr`, `kbd`, `samp`, `sub`, `sup`, `var`, `strong`, etc.

Footprint

Decisions to accomplish the goal:

  • avoid general purpose CSS frameworks
  • use minimimalist reset CSS
  • style for conveying the content as intended, do not be concerned with visual design until much later in the development cycle

Mobile-First

Decisions to accomplish the goal:

  • use CSS Grid to layout elements (simpler for my brain to grok) https://developer.mozilla.org/en-US/docs/Web/CSS/grid
  • optimize for smaller phone width is default layout without media queries styles
  • TODO determine if we want to go the responsive or adaptive layout route in terms of behavior as width increases.

Usable

Decisions to accomplish the goal:

  • use media queries to layout content elements for larger phones, tablets and desktops based on width

Performance

Decisions to accomplish the goal:

  • utilize minimizers, compressors, dead code eliminators, or optimizers as appropriate for each type of asset, e.g. CSS, Javascript, HTML, PNGs, etc. (investigate parcel)
  • avoid unnecessary Javascript includes
  • ensure Javascript includes can be loaded asynchronously or deferred and advice in markup as expected wherever possible
  • leverage Cache-Control and related HTTP headers and CDN hosting when possible
  • host using the HTTP/2 (over TLS) protocol
  • use common sense (but validated) performance optimization approaches for Javascript and CSS
  • render HTML in minified form
  • leverage preconnect/prefetch rel attribute values for CSS
  • avoid custom fonts like the plague
  • leverage lighthouse for feedback and just feedback judiciously
  • eliminate or eradicate third party tracking includes except up to one of them. Investigate their data collection and privacy policy for my users.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment