JavaScript Notes

Security Considerations in HTML

Markup is not where security is enforced, and several markup decisions can undermine it entirely. The ones every front end developer should know.

HTML

The Console and the Network Panel

The Console reports what went wrong. The Network panel shows what was requested, in what order, and how big it was. Between them they explain most pag...

HTML

Keyboard Navigation, Focus and tabindex

If it cannot be reached with the Tab key it does not work. Focus order, visible focus indicators, the three values of tabindex and the traps to avoid.

HTML

Forms and JavaScript

Read values, submit without a page reload, validate with the built in API, and handle errors accessibly. All of it built on a real form element.

HTML

Events and Event Delegation

How a click travels through the DOM, why one listener can serve a thousand elements, and the keyboard events that inline handlers always forget.

HTML

Selecting and Changing Elements

querySelector, classList, dataset and the methods that actually get used. The small set of DOM operations that covers most day to day work.

HTML

The DOM: What the Browser Builds From Your Markup

Your file is text. The DOM is the live tree the browser built from it, and they are not the same thing. Knowing the difference is what makes debugging...

HTML

Loading Scripts: defer, async and type=module

Where a script tag sits and which attribute it carries decides whether your page paints in half a second or four. Three loading behaviours, and when e...

HTML

The template Element

Markup that is parsed but not rendered, waiting to be cloned. The clean way to build repeated content in JavaScript without writing HTML as strings.

HTML

Web Storage and Browser APIs from a Page

localStorage, sessionStorage and geolocation. What a page can remember, what it must ask permission for, and what should never be stored in the browse...

HTML

The canvas Element

A blank bitmap you draw on with JavaScript. Powerful for graphics and games, and invisible to every reader who cannot see the screen.

HTML

Data Attributes: Storing Your Own Data in Markup

A legitimate way to attach custom information to an element, readable from CSS and JavaScript, without inventing invalid attributes.