Web Technology Examples

Part I - Introduction

Welcome to IWT

How do Browsers Work?

The Basics

DevTools - pt I

DevTools - pt 2

DevTools - pt 3

DevTools - pt 4

DevTools - pt 5

DevTools - pt 6

DevTools - pt 7

DevTools - pt 8

DevTools - pt 9

DevTools - pt 10

DevTools - pt 11

DevTools - pt 12

Developer Tools

Elements Tab - HTML

Elements Tab - CSS

Console Tab

Network Tab

Sources Tab

Application Tab

Lighthouse Tab

Accessibility Tab

Command Palette

Part II - HTTP

Bundle Size

Render Blocking

Render Blocking - Fixed

Request Explorer

Sequence Explorer

Part III - HTML

Core HTML5

Canvas

Basics

Cube

Face

Image

Lines & Shapes

Rotate

Scale

Text

Transform

Translate

Document Structure

article

aside

figure

header & footer

headings

hgroup

main

nav

section

section outline

Forms

Elements

button

datalist

fieldset

input

output & select

textarea

Validating Data Entry

Frames

Basics

iframe

Inline Elements

abbr

bdi & bdo

bold & italics

br & hr

cite

code

data

del & ins

dfn

mark

time

Lists

Definition

Ordered

Unordered

Media Embeds

audio

embed

Images

Background vs. Foreground

Blocking Right Click

Compression

Data URIs

Elements

img

map

picture & source

Formats v1

Formats v2

Image Sprites

Invisible Pixel

Progressive JPEGs

object

video

Syntax & Conformance

Attribute Types

Comments

Conformance Check

Element Types

Emojis

Entities

Hello, World!

Loose Syntax

Tables

Simple Table

Row Span

Complex Table

Table Layout

Text Content

figure & blockquote

paragraph

pre

Name Needed

contenteditable

draggable

spellcheck

HTML vs. XHTML

Hello, HTML4!

Hello, HTML5!

Hello, XHTML!

XHTML as XML (HTML)

XHTML as XML (Malformed HTML)

Kitchen Sink

Proper vs. Convention

Semantic HTML

Markup in JS

Color Picker

Class Sillyness

URLs

Types of Links

Part IV - CSS

Hello, CSS!

The Cascade

Selecting (WIP)

Specificity (WIP)

Static Content

Box Model

Box Sizing

Color

Functions (WIP)

Color Spaces

Theming

Inline vs. Block

Position

Absolute

Fixed

Relative

Sticky

Pseudo Elements

Layout

Flex - pt I

Float

Grid - pt I

Writing Direction

Media

Fonts (WIP)

Images (WIP)

Imports (WIP)

Conditional Responses

Element States

Flex - pt II

Functions

Grid - pt II

Media Queries (WIP)

Animations & Movement

Animation (WIP)

Keyframes (WIP)

Transitions (WIP)

Part V - JavaScript

Async vs. Defer

Basic Inclusion

Defensive Inclusion

Dependency Layers

DOM Preview

Hello, JS!

Modern Inclusion

Scoping

IIFE (Immediately Invoked Function Expression)

Modules

Wrapper Object

Part VI - Form

CapacitorJS

iOS Version

Name Needed

Title Needed

Web Version

ElectronJS

MPA (Multi-Page App)

PWA (Progressive Web App)

SPA (Single Page App)

Part VII - Graphics

Canvas

Simple Example - pt I

Simple Example - pt II

Clicking

Cube

Face

Internet Explorer

Image

Lines & Shapes - pt I

Lines & Shapes - pt II

Pixel Check

Rotate

Scale

Text

Transform

Translate

CSS

Animation - Longhand

Animation - Shorthand

Drawings (from CodePen)

Transition - Longhand

Transition - Shorthand

Images - Simple

SVG

Simple Example - pt I

Simple Example - pt II

Embed

JavaScript - Take 1

JavaScript - Take 2

Animate

WebGL

Basics

2D Content

2D Color

Part VIII - Asynchronous

Window.requestAnimationFrame()

setInterval()

setTimeout()

setTimeout(0)

Part IX - Communications

Fetch

Form - POST

Pre-AJAX

WebRTC

WebSockets

WebSockets - Collector Script

XHR

Chatper 1

Hello, World!

Hello, World! (old)

Chapter 3

Fetch

Abort

Async - Send

Async - Send Slow

Authentication

Head

Long Process

Partial Progress

POST

Request Explorer

Response - Text More

Response - XML Walk

Sync - Send

Sync - Send Slow

XML Response Explorer

Old

Abort (old)

Async - Send (old)

Async - Send Slow (old)

Authentication (old)

Head (old)

Long Process (old)

Multipart (old)

Override MIME (old)

Partial Progress (old)

Partial Readystate (old)

POST (old)

Ready State (old)

Request Explorer Script (old)

Response Text More (old)

Response XML Walk (old)

Sync Send (old)

Sync Send - Slow (old)

XML Response Explorer (old)

XHR

Abort

Authentication

Head

Long Process

Multipart

Override MIME

Partial Progress

Partial Readystate

POST

Readystate

Request Explorer Script

Response Text More

Response XML Walk

XML Response Explorer

Part X - Regular Expressions

Need for Regex

Part I

Part II

Part III

Intro JS Regex

Part I

Part II

Part III

Part IV

Regex Modifiers

Part I

Part II

Positional Indicators

Escaping Characters

Indicating Repetition

Part I

Part II

Part III

Part IV

Part V

Part VI

Part VII

Part VIII

Grouping

Part I

Part II

Character Classing

Part I

Part II

Part III

Part IV

Part V

Part VI

Part VIIa

Part VIIb

Part VIII

Negative Classing

Part I

Part II

Part III

Classing Shorthands

Character Classes

Alternatives

Part I

Part II

Part III

Part IV

test()

Subexpressions

Part I

Part II

Part III

exec()

Part XI - Security

iframe Sandbox

Script Checksums

SOP (Single Origin Policy)

XSS Headers

Demo

Part XII - State & Storage

File System Access API

indexedDB API

JWT (JavaScript Web Tokens)

localStorage API

Part XIII - Web Components

Hello, Web Components!

Lifecycle Callbacks

The Shadow DOM

Passing Data - Attributes

Passing Data - Tags

Template & Slot

Open vs. Closed

Only One Shadow

:defined Selector

:host Selector

:host-context() Selector

Part Attribute

CSS Variables

Lifecycle

Custom Elements

Bypassing a Closed Shadow

Hello, React Components!

Custom Element Manifest