Web Development Reference

Contents

• CSS
  • PostCSS
• Web APIs
  • IndexedDB
  • WindowOrWorkerGlobalScope
• Events
  • Keys
  • Management
  • onFocus()
• Create a favicon.ico from .png
• Resources
• Web Development Terminology

CSS

PostCSS

Web APIs

IndexedDB

Client-side database implemented in JavaScript.

WindowOrWorkerGlobalScope

• fetch()
• setTimeout()

Events

Keys

Management

• stopPropagation()
• preventDefault()

onFocus()

Important: there does not appear to be a robust way of determining whether a focus event was initiated by user mouse, user keyboard, or programatic action.

Create a favicon.ico from .png

• create a .png file 512x512
• convert via:

$ convert public/image.png     \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 24x24 \) \
  \( -clone 0 -resize 32x32 \) \
  \( -clone 0 -resize 48x48 \) \
  \( -clone 0 -resize 64x64 \) \
  -delete 0                    \
  -alpha off                   \
  -colors 256                  \
  ./public/favicon.ico

Resources

• WHATWG DOM Spec (One-Page Version)
• MDN DOM Reference
• MDN Events Reference
• MDN Console Reference
• Content Security Policty (CSP) Checker / CSP Evaluator

Others:

• About HTML semantics and front-end architecture
• Building Your Color Palette
• Refactoring UI: Table of Contents

Web Development Terminology

AD

active directory

DMZ

demilitarized zone; referring to subnetwork between an organization’s internal network and untrusted external networks

DOM

Document Object Model; a platform-neutral model for events, aborting activities, and node trees

IdP

identify provider

client-side

the DOM and JavaScript that runs in the user’s browser

front end web server / UI server

server that serves static assets (JavaScript, CSS, HTML) and may route dynamic requests (other web pages, API calls)

polyfill

a piece of code—typically JavaScript—used to provide modern functionality to browsers that do not natively support it

vendor prefix

the browser (vendor) prefix added to CSS rules and JavaScript APIs that enable browser-specific behavior. Note: According to MDN this is being phased out.