Building Mason’s Nerdy Icon Showcase

Almost every TNT page uses a dark or dark-neutral background. This page explicitly inverts that convention. The decision is justified by the content: the artwork is a cheerful nerd emoji; the programmer is a student who spent three hours on something difficult and finished it. The page should feel like a celebration, not a technical document.

The color choices encode this: #fffef5 (warm cream, not clinical white), #f4c430 (golden yellow, energetic and optimistic), and #010256 (Mason’s own bgcolor, authentic) as the accent navy. The page background uses Mason’s navy only in the navbar and hero overlay — everywhere else, it recedes in favor of the warm cream.

The lighter tone also creates a visual contrast that makes the output image stand out: the dark navy emoji frame against the light cream page creates a spotlight effect that draws the eye to Mason’s artwork immediately.

The classic computer-paper look — alternating green and white bands, monospace font, line numbers in a left gutter — is not just decoration. It teaches three CSS techniques simultaneously that appear in professional stylesheets everywhere:

Technique 1: nth-child(6n±) for group alternation

The classic greenbar paper alternated every 3 lines, not every line. Achieving that in CSS requires selecting groups of three with modular arithmetic. :nth-child(6n+1), :nth-child(6n+2), and :nth-child(6n+3) select lines 1, 2, 3, 7, 8, 9, 13… The pattern repeats every 6, covering both halves of each group.

Technique 2: counter-reset and counter-increment

/* Step 1: reset counter to 0 on the parent */
ol { counter-reset: ln; }

/* Step 2: increment by 1 for every child */
ol li { counter-increment: ln; }

/* Step 3: display the value in ::before */
ol li::before { content: counter(ln); }

This pattern auto-generates the numbers 1, 2, 3… for every <li> element — including blank lines — without JavaScript. Add a line and the numbers update automatically. Remove a line and they update automatically. It is exactly how CSS-generated ordered list numbers work internally, exposed for custom use.

Technique 3: ::before as a self-maintaining gutter column

The line number lives in a pseudo-element, not in the HTML. That means it cannot be selected with Ctrl+A, it cannot be accidentally edited, and it does not appear in clipboard paste. user-select: none reinforces this. The gutter is visual infrastructure, not content — and the CSS keeps them categorically separate.

The dark bar above the code block with the three traffic-light dots (red, yellow, green) and the filename establishes visual context before the code is read. It signals: this is running code, in a specific file, on a specific platform.

The three colored circles are the macOS window control metaphor — instantly recognizable to any student who has seen a coding tutorial screenshot. Including them without any functionality is a design pattern well worth naming: affordance borrowing. You borrow the visual language of a familiar object to communicate context. The circles say “code editor” before a single character is read.

The first two lines of Mason’s code are comments:

# i did this all by myself without an ai or outward assistents
# it took me like three hours

Nothing was corrected. “assistents” is Mason’s spelling. “cricle2 end” (line 24) is Mason’s typo. Both are displayed exactly as written, in the code block and quoted in the intro card.

The reasoning: these details are not mistakes that need fixing — they are evidence of real human work. A student who spent three hours on something and then wrote it down in their own voice produced something authentic. Correcting the spelling would erase that authenticity. The showcase page honours the original, imperfections included. That is itself a teachable principle: when you display someone’s original work, your job is to present it, not improve it.

The output image frame uses background: #010256 — exactly Mason’s bgcolor("#010256") from line 4 of his code. This means two things:

1. When the image loads: the frame color matches the canvas background exactly, making the image appear seamless inside the frame.
2. When the image does not load yet: the frame shows the navy canvas color that Mason intended, giving students an accurate preview of the environment before the image appears.

This is the same principle as the background-color fallback for hero images: design for both states (image present and image absent) so neither state looks broken.

A Copy button was added to the dark terminal header bar, after the “Python 3 · CodeHS Turtle” label. Clicking it copies all 154 lines of Mason’s code to the clipboard, ready to paste directly into CodeHS. The implementation uses navigator.clipboard.writeText() with an execCommand fallback for older browsers, and converts   blank lines to proper empty strings so Python parses the pasted code cleanly.

The aria-hidden="true" attribute was moved from the container <div> to its three decorative children (traffic-light dots, filename, tag). An interactive element cannot live inside an aria-hidden region — the button must be reachable by assistive technology.

On success the button label briefly reads Copied! in green before reverting — the same two-second feedback pattern used across TNT’s Cross Training concept pages.

tnt-base-styles.css does not define .spark-bar globally — each page’s own stylesheet is responsible. Because masonsNerdyIconOriginalCodeStyles.css had no .spark-bar block, the bar was rendering with browser defaults rather than the themed TNT appearance seen on convQuestPoster.html.

The exact rule set from convQuestPosterStyles.css was copied and adapted: background: #080415, padding: 0.5rem 1rem, flex layout, and muted right-side span color. The only change: link color uses var(--mn-yellow) instead of var(--cq-vision), so Mason’s golden accent drives the bar rather than the Conversation Quests gold.

The hero’s background-position was changed from center (equivalent to 50% 50%) to center 30% — shifting the vertical crop so the focal area of the ComicCon photo sits slightly above the container’s midpoint rather than dead-center. This change was made directly by the developer, not via a Copilot prompt — a useful pattern to note: small single-property visual tweaks are often faster to make directly and then document here so the value is never treated as arbitrary later.

The CSS two-value background-position percentage model is worth understanding precisely:

• 0% — image top edge flush with container top edge.
• 50% — image midpoint aligned to container midpoint (the default center).
• 100% — image bottom edge flush with container bottom edge.
• 30% — the image’s 30%-from-top point aligns with the container’s 30%-from-top point, cropping more from the bottom than from the top. Useful when the photo subject sits in the upper-middle of the frame.

The same image appears in both the main app’s hero (masonsNerdyIconOriginalCodeStyles.css) and the chatlog’s inline <style> block, so each can be tuned to its own container height independently. There is no single rule that controls both.

The refactor produced masonsNerdyIconUpgrade.py. Three structural changes made all the difference:

1. Named constants at the top. Every magic number and color string became a named variable: FACE_RADIUS = 75, EYE_SPACING = 72.5, BRIDGE_LENGTH = 145, CHEEK_COLOR = “#ed3e4a”. Changing one constant now updates every part of the code that depends on it.
2. One function per facial feature. draw_face(), draw_glasses(), draw_eyes(), reposition_to_mouth(), draw_mouth(), and draw_cheeks() each own their section. The turtle state still flows sequentially between them — no absolute positioning needed.
3. Inline comments explain intent, not mechanics. # negative = clockwise quarter turn is more useful than # circle(75, -90). The section dividers (# STEP 2 — draw_face) act as breadcrumbs matching the main() call list.

The main() function is the payoff: seven calls, one per feature, readable as prose. Students can trace the draw order without reading the functions themselves.

Dynamic code display instead of 300+ hand-coded <li> elements. The refactored Python file is ~170 executable lines plus comments — too long to hand-author as HTML. Instead, the full source is stored as a JavaScript template literal (var UPGRADE_CODE = `...`) in the <head>. On load, buildCodeDisplay() splits it on \n and injects one <li><code> per line into an empty <ol id="codeList">. The CSS counter/nth-child greenbar rules work identically on dynamically-added elements.

Inline comment detection via character scan. A for loop scans each line character by character, tracking whether it is inside a "..." string. The first # found outside a string marks the comment boundary. This correctly handles "#010256" (a color string containing #) without false positives.

Stage navigation bar. Both pages share a thin dark bar below the spark bar, showing the current stage and linking to the other. This makes the comparison workflow obvious: click the bar, open the other tab, compare.

Stage 2’s functions were architecturally dependent on each other’s ending state. draw_glasses() assumed it would start where draw_face() left off. draw_eyes() assumed it would start where draw_glasses() left off. The sequence was a chain: break any link and everything after it drew in the wrong place.

The most visible symptom was reposition_to_mouth() — a dedicated function whose sole job was to retrace the complex path back to a known arc position and sweep around the face to the mouth zone. In a truly independent design that function simply disappears: draw_mouth() calls goto(0, −35) directly.

The principle is named after the scouting rule “Leave No Trace” — a campsite left exactly as you found it. Applied to turtle graphics, the guarantee has three parts: position (an absolute coordinate set with goto()), heading (an absolute direction set with setheading()), and pen state (explicitly lifted with penup() before any goto()). Every function in Stage 3 opens with the same three-call idiom and closes with the same two-call idiom:

The parking spot (PARK_X=0, PARK_Y=−300) doubles as a debugging aid: if a function forgets penup() before exiting, a visible line trails from the last drawing position off the canvas, immediately identifying which function failed to clean up.

Mason’s original backward(50) placed the face center at approximately (−50, 75) in canvas coordinates. For a Leave No Trace-y design, working from an offset center complicates every goto() constant.

Stage 3 eliminates the offset. The face arcs start at goto(0, −75); setheading(0) — the bottom of a circle whose center is exactly (0, 0), the canvas origin. Positions are now clean symmetric offsets from that anchor: mouth center at (0, −35), glasses entry at (72.44, 19.41), cheek dots at (−35, −35) and (45, −35). The math is the same; the bookkeeping is dramatically simpler.

Every goto() constant was derived by tracing the circle geometry of Stage 2’s movement sequence, using the rule that circle(r, extent) places its arc center r units to the left of the current heading and advances the heading by extent degrees. The face center calculation:

For the remaining positions (eye zone, cheek dots), the analytical path through the glasses-frame sequence is complex. The recommended verification method: add print(xcor(), ycor(), heading()) at the end of each Stage 2 function, run once in CodeHS, and compare the numbers to the Stage 3 constants. The full analytical derivation is in leaveNoTraceyNotes.md.