Developer Notes

Reminders for choosing structure based on meaning rather than appearance.

Term / Syntax	Name	Description	Example
button vs link	Action vs navigation	Use a button for an action in the current interface and a link when the user is going somewhere.	<button>Save</button> vs <a href="/projects">Projects</a>
section vs div	Meaningful section	Use section when content forms a meaningful titled section; use div when you only need grouping.	If the group has a real heading/topic, section may be appropriate.
headings	Document outline	Choose heading levels from document hierarchy, then size them with CSS.	Do not choose <h4> just because you want smaller text.
native first	Prefer native semantics	Use native elements and attributes before recreating their behavior with ARIA and JavaScript.	<button> already provides keyboard/button semantics.

Mental models for sizing, spacing, Flexbox, Grid, and responsive decisions.

Term / Syntax	Name	Description	Example
margin vs padding	Outside vs inside	Ask which side of the border the space belongs on.	margin = outside; padding = inside
rem vs em	Document vs component scale	Use rem for root-relative sizing and em when a value should intentionally scale with its component.	font-size: 1rem; padding: .75em 1em;
Flexbox axes	Direction first	When alignment surprises me, I check flex-direction before touching alignment properties.	justify-content = main axis; align-items = cross axis
Grid tracks	Structure first	Define the track system before forcing individual items into place.	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
breakpoints	Content-driven	Add a breakpoint when the content stops working well, not because a device list says to.	Resize until the layout needs a structural change.

Reminders for keeping browser behavior understandable and maintainable.

Term / Syntax	Name	Description	Example
small functions	Clear data flow	Prefer functions with one clear responsibility over long handlers that mutate many unrelated things.	filterRows(query); updateStatus(count);
DOM state	Classes over scattered styles	When possible, express visual state with classes/data attributes and let CSS own appearance.	element.classList.toggle("is-open");
event delegation	Stable parent listeners	Delegation is useful for repeated/dynamic children when one parent can interpret the clicked target.	list.addEventListener("click", handleListClick);
async errors	Handle boundaries	Catch errors where you can meaningfully recover, report, or add context.	try { await save(); } catch (error) { showStatus(error.message); }

Habits that reduce the amount of guessing involved in fixing problems.

Term / Syntax	Name	Description	Example
first error	Fix earliest failure	Later errors can be symptoms. Start with the first meaningful error in the console/log.	Console → first stack trace → source line
inspect before edit	Collect evidence first	Use computed styles, Network, DOM inspection, and logs before making random changes.	Expected vs actual is more useful than guessing.
one change	Test one variable	Change one relevant assumption at a time so the result teaches you something.	Selector first, then state, then event, then callback.
commit small	Readable history	Smaller focused commits are easier to review, revert, and understand later.	git commit -m "Add accessible search status"