VISUAL STUDIO
From Marketing to Technical Marketing
Author: Luke McLaughlin

OPEN IT
1. Extract the whole companion ZIP into an ordinary folder on your computer.
2. Open the visual_studio folder.
3. Double-click index.html. If asked, choose a modern web browser.
4. Keep styles.css, model.js, app.js and the examples folder beside index.html.
   They are local files used by the page. Do not move index.html on its own.

The studio itself needs no server, installation, account, key, subscription or
internet connection. A desktop or laptop browser is recommended for the wide
illustrations. On a narrow screen, a diagram may scroll sideways. Some phone
file-preview apps do not execute JavaScript; use an actual browser on a computer
if your preview is blank. The PDF provides equivalent static mechanisms.

LEARN ONE VISIBLE CHANGE
- Choose a demonstration on the left.
- Read the input labels. Change a value, then press Change input / restart.
- Predict the next stored value or visible result before pressing Next.
- Use Previous to compare the two states. Restart returns to the first state.
- The arrow and tinted code line indicate the instruction being discussed.
- The state box shows values held by the program. The output box shows what has
  been displayed. Those are different things: returning is not printing.
- Reveal answer and Reveal practice solution stay closed until you choose them.
- Run the actual example after you can explain its illustrated mechanism.

KEYBOARD AND ACCESSIBILITY
Tab moves through controls. Enter or Space activates a focused button.
Left/Right arrows move between steps while focus is outside an input or select.
Native dropdown arrow keys and text editing are preserved. Focus has a visible
outline. The diagrams have text alternatives, captions and accompanying prose.
Colour is reinforced by arrows, positions and words. No animation is automatic.
You control the pace. These measures are not a claim of formal accessibility
certification or of compatibility testing with every assistive technology.

WHAT IS A MODEL, AND WHAT REALLY RUNS?
The step panels are inspectable JavaScript teaching models. They are NOT a
Python interpreter, a SQL engine, a search engine, or a recording of one.
The models expose selected state transitions so you can reason about them.
The examples provide actual Python, SQLite and browser JavaScript programs.
The DOM demonstration's live panel runs real browser interaction. The waiting
demonstration's live panel runs a real promise and a local timer, not a network
request. Its 600 millisecond delay is for teaching, not a performance claim.
The SEO example is explicitly pseudocode. It does not crawl a live website.
The AI example validates fixed sample data; it does not call an AI model.
The integrated project's runnable files make a real request to a Python server
on your own computer. Follow its separate README before opening its webpage.

DEMONSTRATIONS
1. Python loop (Chapter 9)
   Costs [300, 120, 200] produce totals 300, 420, 620 and Finished: 620.
   Try 30,0,20, a single item, and an empty list.
   File: examples/loop.py
2. Function call (Chapter 11)
   Trace supplied values, parameters, local calculation, return and print.
   Try enquiries = 0 and observe the return before division.
   File: examples/function.py
3. SQL joins (Chapter 20)
   Match Acorn and Birch to campaign 1; compare Hazel under LEFT/INNER JOIN.
   Files: examples/join_and_group.sql and examples/sql_demo.py
4. SQL grouping (Chapter 19)
   Follow each campaign into Search or Social, then count and add within groups.
   Files: examples/join_and_group.sql and examples/sql_demo.py
5. JavaScript and the page (JavaScript page-interaction lessons)
   Register a handler, click a button, read input, replace a paragraph.
   File: examples/dom.html (double-click it)
6. Waiting for a result (JavaScript asynchronous lessons)
   Compare loading, fulfilled promise and rejected promise. Run both outcomes.
   File: examples/async.html (double-click it)
7. Combined cost per enquiry (Chapters 35-37)
   Add costs and counts separately. 620 / 18 displays as EUR 34.44.
   This is an attributed descriptive metric, not a causal experiment.
   File: examples/analytics.py
8. Replay without duplication (Chapter 42)
   Compare failure before/after saving and a duplicate delivery. A stable event
   identifier and a database uniqueness rule protect this one database write.
   They do not automatically protect a separate email or payment action.
   File: examples/automation.py
9. Crawling and indexing (Chapter 31)
   Compare permission to fetch with a page-level noindex directive.
   Blocking crawling does not reliably remove a known URL from results.
   This is a simplified decision model with no guarantee of indexing/ranking.
10. Connected report (integrated professional project)
   Browser -> Python route -> SQL totals -> Python rate -> JSON -> browser.
   Files: examples/integrated_project/README.txt, server.py and index.html
11. Check an AI proposal (Chapters 44-46)
   Separate parsing, allowed structure, allowed labels and semantic correctness.
   A valid shape does not prove the label is right or authorise an action.
   File: examples/validate_ai.cjs (Node 22 or later)

RUN PYTHON FILES
The earlier Python chapters explain installation and terminals.
Open a terminal in visual_studio/examples, then type, for example:
    python loop.py
Windows alternative:
    py loop.py
The other single-file Python examples run the same way. sql_demo.py uses
Python's built-in SQLite support, so no extra database installation is needed.
The SQL file can also be read in your editor. Its setup should only be run once
per fresh database; the Python runner creates a fresh database every time.

READ, THEN CHANGE
If a .py, .sql or .cjs link downloads or displays text, that is expected: those
files are source code, not browser apps. Open them in your code editor.
Save a copy before experimenting. The studio's code blocks show the core
mechanism; the example file adds any necessary page markup, setup or output.
The integrated report deliberately adds a little setup around the core flow.

WHAT THE INPUT LIMITS MEAN
These small examples use fictional whole-euro costs and non-negative whole
counts. Cost inputs are capped at 100000 and loop lists at six items to keep
illustrations readable. These restrictions are teaching choices, not rules of
Python, SQL or JavaScript. Production money handling needs an explicit decimal
or integer-minor-unit policy, consistent units, and tests.

FILES YOU CAN INSPECT
index.html: page structure
styles.css: page presentation
model.js: pure functions that produce each teaching state
app.js: diagrams, controls and browser interactions
examples/: runnable source files and the local integrated report
model.test.cjs: tests for important model behaviours
Run model tests with Node 22+: node --test model.test.cjs
These cross-checks also require the python command on your PATH.
No npm install is needed.

PRIMARY SOURCES CHECKED 13 OCTOBER 2026
Google Search Central, noindex and crawl-access requirement:
https://developers.google.com/search/docs/crawling-indexing/block-indexing
MDN, await and the surrounding async function:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
MDN, the JavaScript execution model:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model
SQLite, conflict handling and IGNORE:
https://www.sqlite.org/lang_conflict.html

The teaching illustrations, code and examples were written for this book.
They are not copied video frames, and no claim is made that they reproduce an
instructor's actual screen presentation. Review the book's source-coverage
appendix for the precise limits of the earlier course review.

2026 VISUAL REDESIGN
Each mechanism now has a distinct SVG treatment: list tape and memory slot,
function boundary, joined keys, receipts and grouping trays, annotated browser,
waiting timeline, paired sums, replay route, SEO gates, request lanes and
validation checks. The model.js content and runnable examples are preserved.
graphics/ contains 68 editable SVG snapshots (one for every default step).
graphics.js generates the same artwork for changed inputs.

Open ../program_construction/construction_studio/index.html for four additional
experiments in program construction: instruction order, loop placement,
function calls and browser events. Each has runnable examples and separate
answers. The two studios work offline after extracting the ZIP.
