What’s New(s) at TNT?
The latest transmissions from the lab.
Click any headline to tune in.
The 2026 Headlines
TNT has been building, breaking, and rebuilding things since 2015. This page tracks what’s new. Click a headline to expand it — or just scroll and let curiosity do the driving.
The asset folder was named WSoldierPPTVids2026-07-20. The background images were named buckyActivation.jpg and Memory_Suppressing_Machine_CW_1.webp. The videos were named Winner_Sold_Chair_Training. The brief practically wrote the theme for us — and GitHub Copilot took the hint.
Activate Novices is a custom-built HTML5 video player styled around the HYDRA Winter Soldier activation protocol. The premise is clean: select a training sequence (2023 edition or 2026 edition) and initiate the protocol. What’s underneath is more interesting than the premise. The app bypasses the browser’s native <video> controls entirely and builds its own from scratch: a Play/Pause button whose label and icon stay perfectly in sync with video state (via the play, pause, and ended events), a steel→ice gradient progress bar that is also a seek control, a live currentTime / duration display, five playback speed presets (0.5×–2×) that set video.playbackRate, and a Loop toggle that flips video.loop — meaning when engaged, the browser handles the restart natively and the ended event never fires.
The visual design was derived directly from buckyActivation.jpg: cold blue metallic restraints against a dark background gave us the steel-blue / ice / dark-navy palette. Memory_Suppressing_Machine_CW_1.webp sits behind multiple dark gradient layers as a fixed body background — depth without distraction. The whole thing is three files (activateNovices.html, activateNovicesScripts.js, activateNovicesStyles.css), and all three were produced in a single prompted exchange. A second exchange added the Loop button. A third produced this sentence.
The S.P.A.R.K. chat log documents the full development session: asset discovery, palette derivation, player architecture choices, loop-state persistence behavior across film switches, and a design discussion about whether <video> playback qualifies for the TNT Graphics category. (It doesn’t — the Graphics category is for generating visual content with code, not playing it back. But the argument is in the log if you want it.)
Activate Novices is listed in JS Apps under the Winter Soldier arm icon, and cross-listed in S.P.A.R.K., Simulations, and Miscellaneous on the Explore page. The simulation classification earns its place: we are absolutely, playfully pretending this app is the same activation protocol Bucky Barnes endured. Longing. Rusted. Seventeen. Daybreak. Okay, maybe we just press Play.
If you’ve seen the Three Stooges clip, you already know the premise: Moe, Larry, and Curly crash a women’s college and accidentally teach a nested-loop algorithm set to music. Swingin’ the Alphabet was one of TNT’s earliest PHP apps (originally built in August 2019), and it has now been fully renovated into the 2026 ecosystem — complete with a S.P.A.R.K. chatlog that doubles as a PHP refresher course.
The app takes any phrase, extracts its unique consonants, and generates the Stooges’ phonics song for each one. Enter “three stooges” and you get stanzas for T, H, R, S, and G — each card showing T-A: Tay • T-E: Tee • T-I: Ticky-Tie • T-O: To • Ticky-Tie To • T-U: Too • Ticky-Tie To Too! — in a responsive Bootstrap card grid that lays out four to a row on desktop and stacks cleanly on mobile. The algorithm behind it is a real string-manipulation chain: strtolower() → str_split() → array_unique() → two preg_match() filters.
The renovation had one deliberate design departure from the original: the form uses GET instead of POST. Generating a song from a phrase is a read-only query with no side effects, which makes GET the semantically correct HTTP method — the URL becomes bookmarkable, refreshing reruns the query cleanly, and there is no browser “Resubmit form data?” trap. Placed alongside Ambiguous Message PHP (which correctly uses POST for a password check), the two apps now form a concrete GET-vs-POST teaching pair. The S.P.A.R.K. chatlog documents all 13 PHP concepts the app uses — from superglobals and pass-by-reference to output buffering, string interpolation, and htmlspecialchars() — making it one of the more thorough PHP teaching documents in the collection.
Try the PHP App • S.P.A.R.K. Chat Log • Movie Clip • Legacy PHP App
TNT doesn’t often spotlight Java with a dedicated historical piece — most of our Java work lives quietly inside classroom projects and legacy demos. But this one earns its place on the News page, because understanding why Java exists changes how students feel about learning it.
Oracle’s official Java Story documentary brings together the original engineering team — James Gosling, Mike Sheridan, and Patrick Naughton — to recount one of the more unlikely origin stories in computing. In 1991 they called themselves the Green Project, worked out of a rented office in Santa Cruz, and were building a language called Oak for consumer electronics that never quite arrived. Then the World Wide Web exploded, they pivoted overnight to browser applets, and within a few years Java was running on hundreds of millions of machines.
The classroom payoff is real. Java often lands on students as a pile of mandatory syntax: declare the class, declare the type, catch the exception. This documentary puts the “why” behind all of it. Object encapsulation was a safety net for hardware nobody had designed yet. The JVM’s bytecode layer — “Write Once, Run Anywhere” — was a direct attack on the platform fragmentation that made 1990s software a nightmare. Strict typing and no manual memory management were engineering requirements for devices that couldn’t afford to crash, not stylistic opinions. The film also covers the naming story: “Oak” was already trademarked, the team brainstormed replacements over coffee, and Java — 1990s slang for coffee — stuck. Hence the cup.
The companion clip page includes three collapsible discussion sections: the full origin story, why it matters in the CS classroom, and three key moments to watch for — including the pivot to the web, the “Write Once, Run Anywhere” JVM model as the ancestor of Docker and Kubernetes, and the naming session that produced a logo still recognized worldwide.
The Rate the Insults quiz is the companion to the Copilot Comedian — and it should technically be played first. 49 polite insults appear in randomized order with no labels: 25 written by Copilot, 24 written by humans. The challenge: click Human or AI for each one, rate them 1–5 stars if you wish, and let the AI grader deliver a verdict when you’re done.
The grader speaks in character — the same voice that delivered the jokes now evaluates whether you could identify them. Grade tiers range from “Silicon Whisperer” (A, ≥90%) through “Coin Flipper” (D) to “Fool’d by the Robot” (F). Each grade comes with a first-person comment, including a D-grade admission that it was basically guessing too, frankly, when it wrote some of them.
The two apps are now wired together. The Comedian opens with a one-time popup modal on first load — a challenge that appears before the jokes start: “Before the answer key appears in color, can you guess which is which?” Click to take the quiz, or dismiss it to proceed. localStorage remembers the choice so the prompt never appears twice.
The quiz is also cross-listed in the Trickery category on Explore. The categorization earns its place: 49 jokes presented without authorship labels, where the entire point is to see if AI writing can pass as human, is exactly what “trickery” means in the TNT context. The concealment of authorship is the trick.
The S.P.A.R.K. chatlog contains what may be the most useful conversation in this entire app collection: a frank discussion about whether Copilot “really wrote” the jokes or pulled them from a training database. The honest answer is documented fully, along with a taxonomy of three mental models students use to understand LLMs — and why only one of them (the Pattern Completion Model) is accurate.
The Copilot Comedian is a JavaScript comedy app built from exactly three ingredients: a robot-at-a-microphone stage photograph from Adobe Express, an HTML reference shell, and a plain text file containing 24 polite insults. GitHub Copilot built the rest — the complete app, framework, and development log — in less than an hour.
The premise: a robot comedian stands at stage left in front of a brick wall. Press the button and a fresh insult zooms out of the brickwork in bold Bangers type — overshoot, bounce, settle. No joke repeats until all 49 have been delivered, guaranteed by a Fisher-Yates shuffle with a deck-boundary check that prevents the same punchline from landing twice in a row across shuffles. On narrow viewports, the button politely steps aside and reads “Next Joke!” instead of “Hit Me With a Joke!” — a two-span CSS toggle with no JavaScript required.
Now, about those jokes. The deck has two voices. The original 24 are hand-curated human classics — “The wheel is spinning but the hamster is dead.” “I bet you rotate the squares in Tetris.” — joined by 25 written by Copilot itself: “You’re like a browser tab I keep open just in case, but never actually need.” “Every room you enter gets slightly less efficient.” When a Copilot-authored joke lands, the text shifts from warm cream to a cool metallic blue-silver and the counter below the stage appends “★ by Copilot” — a live attribution in the same frame as the punchline. The meta-irony is now structural: a machine assembled an arsenal of remarks about human intelligence, built the stage to deliver them from, and then wrote the attribution system that puts its own name on its material. All in thoroughly good fun. For the record: GitHub Copilot would never actually suggest any of this. Probably.
The S.P.A.R.K. chatlog is one of the more technically layered in the collection. It covers: using image composition as a CSS layout constraint, the void el.offsetWidth forced-reflow animation restart pattern, the Fisher-Yates deck-boundary problem, the width: min(100%, calc(88vh × aspect)) viewport-height stage sizing formula, and the “two spans in a button” responsive label technique. Plus an Impact Box at the end that makes the three-ingredients-to-full-app story as clear as it deserves to be.
As for who’s really the comedian here — the robot, the AI, or the app — we’ll let the audience decide.
The Sudoku Saga is a seven-page JavaScript ecosystem built through a series of documented AI-assisted sessions. It begins with a classic Sudoku puzzle and expands into a fully integrated teaching platform covering gameplay, AI solving strategies, recursive puzzle generation, and custom puzzle lifecycle management.
The ecosystem consists of seven pages:
- Sudoku Saga — Play — interactive 9×9 board with six built-in demos, conflict detection, mark mode for uncertain entries, and a Live Puzzles dropdown that automatically populates with any AI-generated puzzles saved to localStorage.
- AI Solver — watch the AI reason through any puzzle step by step with three color-coded strategies: blue for Naked Singles (forced elimination), purple for Hidden Singles (one valid placement in a group), and amber for backtracking trials. Pause, Resume, and Step controls are fully functional. A Full Log modal shows complete reasoning.
- AI Puzzle Generator — watch recursive backtracking build a valid 9×9 grid from scratch (Phase 1: fill), then remove cells while verifying uniqueness (Phase 2: remove). Call stack depth is shown live in the log. Easy = 45 givens, Medium = 35, Difficult = 28. Generated puzzles can be saved, played, or handed to the AI Solver.
- Rules & Strategies — complete reference covering all 8 solving strategies from Scanning & Cross-Hatching through Trial and Error, with difficulty badges, a board state diagram, and a full guide to the digit palette controls.
- Custom Puzzle Ecosystem (3 pages) — a Generate → Play → AI Solve circuit powered by localStorage. The play page autosaves progress after every digit entry so interrupted games can be resumed. A non-dismissible Bootstrap modal alerts the player if no puzzle is found in storage.
- Landing Page — four primary feature cards (Play, Generate, Solve, Rules) and three secondary cards (Play Custom, Solve Custom, Chat Log), color-coded to preview their destination pages.
The S.P.A.R.K. chat log is one of the most technically dense in the TNT collection, covering ten+ sessions including:
- Pre-compute then replay — why collecting all solver steps upfront makes Pause/Resume/Step trivial (each is two lines of code) and real-time async solving is complex for no visible benefit to the student.
- State machine bugs —
isRunningandisPausedare orthogonal flags, not a single state. The identical bug appeared independently in both the solver and the generator; both discoveries are documented. - Recursion in depth —
fillGrid()(constructive, randomized, logged) andcountSolutions(b, 2)(verificational, silent, early-exit at 2). The Phase 1 generator animation literally shows the call stack growing and shrinking on the board. - localStorage autosave with ID validation — puzzle ID matching guards against restoring stale progress when a new puzzle is generated. Three persistence options (URL params / sessionStorage / localStorage) are evaluated and the rationale documented.
- Non-dismissible modals —
backdrop="static"andkeyboard="false"for pages that have no valid state without a puzzle; two actionable exits provided. - Mobile portrait breakpoint — 389 px derived from the board’s fixed 360 px width + container padding, not chosen arbitrarily.
Sudoku Saga Home • AI Solver • AI Generator • S.P.A.R.K. Chat Log
A 2022 JavaScript Bingo game has been fully renovated into the TNT 2026 ecosystem — one of the most extensively documented S.P.A.R.K. renovation sessions in the collection. The Bingo SPARK Edition retains full game functionality: a randomly generated 5×5 card with correct column number ranges (B:1–15, I:16–30, N:31–45, G:46–60, O:61–75), six token colors, a cage operator mode that enables a click-to-draw ball selector, drawn-entry lists tracked chronologically and sorted, and localStorage persistence for player name, token color, and cage operator preference.
The renovation touches every layer of the HTML and CSS shell without changing a single line of the original game logic. The S.P.A.R.K. chat log documents a sequence of design decisions that serve as a curriculum in themselves:
- Bootstrap 5.3 table color gotcha — upgrading from Bootstrap 5.0.2 to 5.3.3 silently removed the red BINGO card header. Bootstrap 5.3 applies
background-colorvia--bs-table-bgdirectly to each cell, bypassing any background set on the parent<thead>. The fix requires targeting.bg-custom-color1 td, .bg-custom-color1 thexplicitly. - Cage panel placement iteration — the operator draw panel traveled through four placements before settling as a flex sibling inside the card’s own white frame. Each step is documented with reasoning.
- Heading hierarchy vs visual sizing — five validation errors for skipped heading levels resolved a foundational principle: dialog and landmark titles are real headings; labels, instructions, and data output are not. Non-semantic headings were replaced with styled
<p>elements. - Hero height as a context decision — the hero was reduced from 260px to 140px. Game apps warrant shorter heroes than classroom projection tools; getting the player to the card faster is a direct UX improvement.
- Pre-existing accessibility fix — a
for="check1"label referenced a non-existent element; clicking the label silently did nothing for keyboard users. Fixed tofor="operatorChkBox".
The Conversation Quests saga is one of TNT’s clearest demonstrations of what a single day of vibe coding can produce. It began with a screenshot of an Instagram post — plain text on white, a list of 15 friendship-deepening questions from achievewithari. By the end of the session, that screenshot had become a multi-page interactive web ecosystem with a frosted-glass motivational poster, a JavaScript draw-a-question app, and a complete three-part HTML → CSS → Bootstrap 5 teaching series.
The before-and-after tells the story. The original was an unformatted phone screenshot — a text list on white. The final poster uses backdrop-filter: blur() for frosted-glass effects, CSS custom properties for four-level color theming, a four-colour gradient stripe (■ blue → ■ green → ■ orange → ■ gold, mapping the emotional arc from safe questions to vulnerable ones), and a @media print stylesheet so it can be printed, framed, and hung in a classroom. Same 15 questions. Completely different experience. The S.P.A.R.K. chat log opens with a side-by-side of both — exactly the kind of evidence novices need to believe that vibe coding actually works.
The full series has four deliverables:
- Conversation Quests — the interactive app. Click a button, get a randomly drawn question with a smooth reveal animation. The draw card is sized and designed to be screenshot-ready for Instagram sharing, making the app useful far beyond the web page itself. The four-level color system and JavaScript array-of-objects pattern are documented in the S.P.A.R.K. chat log.
- Conversation Quests Poster — all 15 questions on one page. A classroom motivational poster built on a full-bleed watercolor background painting (generated in Adobe Express), frosted-glass card, rainbow gradient stripe, and a print stylesheet that strips all web chrome to produce a clean printable sheet. Frame it, project it, or screenshot it for social media.
- The Vibe Coder Essentials series — three teaching pages that use the poster’s own source code as every example. No invented tutorial code — every snippet is a real line from a working file:
- HTML Essentials — 10 HTML elements with YOU/AI split notes
- CSS Essentials — 10 CSS properties and patterns from the poster stylesheet
- Bootstrap 5 Essentials — 10 Bootstrap concepts from across the series
- The S.P.A.R.K. chat log — five documented development sessions covering color theory, CSS component theming, the dual-format Instagram/webpage design challenge, Adobe Express image generation, the before-and-after visual transformation, and every decision made in bringing the series into the TNT site navigation.
The series is wired into the TNT ecosystem: linked from Styl’n (Vibe Coder Essentials in Foundations; the poster in Featured Apps) and from Explore! (S.P.A.R.K. offcanvas, Styling category card, and Styling offcanvas).
The Hot Seat Spinner is a p5.js classroom tool used daily to call on students equitably — renovated from a working legacy app into the 2026 TNT ecosystem with a full S.P.A.R.K. treatment. The renovation touches only the HTML shell; the 600+ line p5.js sketch, which handles multi-class roster management, attendance tracking, selection history, and a confetti celebration animation, is preserved exactly as it was field-tested.
The app enforces a single rule: no student is called twice until everyone in the class has had a turn. A student marked absent is removed from the wheel for the day without losing their rotation position. All rosters and history persist to localStorage across page reloads. The wheel displays up to fifteen saturated segments; previously-selected students are shown with a lightened, grayed color so the remaining pool is immediately visible at a glance.
The renovation uses a light, bright visual theme — a deliberate departure from TNT’s standard dark palette. Classroom projectors lose significant lumens in lit rooms; a white background reflects ambient light where a dark background absorbs it. A pastel gradient overlay on the existing cpSpinner.jpeg hero background creates an energetic, welcoming feel. A Noun Project fortune wheel icon (red-on-white, already TNT-aligned) replaces a generic Font Awesome placeholder and now appears consistently in the hero heading, the Processing Apps grid card, and as the og:image for both pages.
The app is cross-listed in Processing, S.P.A.R.K., and Simulations on the Explore page. Note: the app was initially filed under JS Apps; a post-renovation review correctly reclassified it as a Processing app, since the entire interaction model is built on p5.js.
After a multi-year hiatus, TechNoviceTools has a brand-new PHP app — and it arrived with a full S.P.A.R.K. session behind it. Ambiguous Message PHP is a server-side companion to the JavaScript Ambiguous Message puzzle, built specifically to demonstrate the single most important distinction between client-side and server-side code: where does the secret live?
In the JavaScript version, the password is stored in a plain JavaScript variable. Any visitor who opens DevTools can find it — and that’s entirely intentional, the assignment being: can you find the password? In the PHP version, the password never leaves the server. The browser receives finished HTML; the PHP machinery that produced it, including the password check, exists only in the Cave of Wonders, unreachable by any browser tool. The two apps are a deliberate curriculum pair — same visual design, same interaction model, opposite security postures.
The puzzle uses a phrase with two ideologically opposite punctuated readings. After the correct password is entered, a three-state toggle cycles through the dismissive reading (in blue), the empowering reading (in pink), and the raw unpunctuated original. The colors are deliberate: blue and pink as gender signals are a cultural construct, not a natural fact, and the app’s moral section names this explicitly as a third layer of its “context shapes meaning” thesis.
The password is themed to match the app content — a discoverable hint lives in the puzzle instruction paragraph for those who look. Students who pursue the literary reference will find the key hiding in plain sight.
The full development session is documented in a S.P.A.R.K. chat log that functions as a rudimentary PHP tutorial: $_SERVER, $_POST, htmlspecialchars(), json_encode(), PHP’s stateless request model, and a genuine hard-to-find bug caused by PHP’s lexer processing closing tags before it processes comments. The log also covers two design consultations: which approach to show both phrase readings (a toggle won over two separate passwords), and why the dismissive reading should appear first to create productive cognitive dissonance in the reader.
TNT’s PHP dormancy is officially over — courtesy of GitHub Copilot (Claude Sonnet 4.6), who designed the entire PHP architecture, crafted the three-state toggle, rationalized the color coding, and chose the password. It’s good to have the Cave of Wonders open for business again.
Open Ambiguous Message PHP • S.P.A.R.K. Chat Log • JS Version (for comparison) • PHP Apps
A classic classroom puzzle app has been renovated into the TNT 2026 ecosystem with a full S.P.A.R.K. treatment. The premise is simple: a jumble of repetitive words — “that that is is that that is not is not is not that it it is” — is displayed in a large font. The challenge is to figure out what it says once properly punctuated, cased, and spaced. The answer is locked behind a password, so the experience plays out as a genuine puzzle.
When the correct password is entered, the message transforms from muted lavender-white to bright green — a deliberate visual choice that reinforces the app’s own thesis: context turns ambiguity into meaning. A second reveal panel then appears, featuring the Claude Debussy quote “Music is the silence between the notes” alongside a short reflection on how punctuation does for language what silence does for music.
The renovation touches every layer of the app without changing a line of its JavaScript logic. A full TNT navbar, hero section, and footer replaced the original minimal shell. The dark theme uses a radial gradient body background that spotlights the puzzle area like a stage. Bootstrap’s modal chrome was re-themed to match the deep navy palette. An Enter key listener was added so the password can be submitted without clicking — implemented by triggering the Submit button’s own click, which preserves Bootstrap’s data-bs-dismiss behavior.
The renovation also corrected two ARIA issues: the alert modal was missing role="dialog" (the root cause of the validator error that triggered the whole renovation), and the password modal was missing all ARIA attributes entirely. Both fixes are documented in Ask Copilot Entry #024, titled “— Improperly Introduced.” The app is listed in the JS Apps grid and cross-listed in the S.P.A.R.K. and Text-Based categories on Explore.
Open Ambiguous Message • S.P.A.R.K. Chat Log • Ask Copilot Entry #024
The classic Mattel Magic 8 Ball has been rebuilt as a fully integrated TNT S.P.A.R.K. app — and the engineering under the hood turns a toy into a lesson in probability, geometry, and algorithm design.
The sphere is rendered with a 50-layer gradient shading algorithm: no 3D library, no WebGL — just fifty carefully positioned, colour-interpolated circles that together create a convincing illusion of a reflective plastic surface. Responses are drawn from four probability-weighted pools: positive (35%), negative (35%), vague (20%), and snarky (10%). This weighted random selection mirrors techniques used in games, simulations, and machine-learning models.
After each shake, an expandable “The Math Behind the Ball” panel reveals the live geometry values for that exact draw — shine angle, viewport position, and computed text size — updating with every click so students can see exactly what the sketch is calculating in real time.
The app is cross-listed under S.P.A.R.K. and Processing on the Explore page. A companion Movie Clips page covers the real-world history of the toy and — courtesy of The Action Lab — shows exactly what is inside the ball: a 20-sided die floating in blue alcohol. The S.P.A.R.K. chat log documents every design decision from sphere-shading math through response weighting to the TNT 2026 shell integration.
Play Magic 8 Ball • S.P.A.R.K. Chat Log • History & How It Works
Pinky & the Brain’s legendary “Are you pondering what I’m pondering?” exchange has been rebuilt as a S.P.A.R.K. Processing app — and the real lesson isn’t the responses, it’s how the font size is calculated.
The app holds 70+ of Pinky’s non-sequitur replies, served in a guaranteed shuffle-without-repeat: every index is tracked, no response appears twice until the full set is exhausted, then the cycle begins again. Three radio-button-selectable font-sizing algorithms let students compare strategies on the exact same response text:
- Map — partitions
msg.lengthinto three buckets and assigns each a font-size range. Fast, but the bucket edges are estimates. - Root — divides canvas width by
Math.round(Math.sqrt(numChars)). Compresses gracefully: four times as many characters produces only half the font size. Also triggers a grow-and-rotate entry animation. - Loop — starts at font size 120 and shrinks until p5.js’s
textWidth()reports the text fits. Most accurate because it measures rendered pixel width, not character count.
A live stats panel updates on every click with character count and computed font size, making the algorithm differences immediately visible. A jump-to-response dropdown lets students select any specific quote for direct comparison. The classic Pinky & the Brain poster image plays an audio clip on click. Narf!
The app is cross-listed under S.P.A.R.K. and Processing on the Explore page. The S.P.A.R.K. chat log documents the full rebuild from Stage 7, including the radial gradient background system, three-algorithm design rationale, and the Unkempt Google Font registration requirement — a necessary step whenever a p5.js sketch calls textFont() with a web font.
After a month or so of development, we took the plunge and launched our new 2026 version of TNT: Our AI-enhanced, S.P.A.R.K-developed showcase site!
This sort of update is a bit nerve-wracking, but the tech support folks were on top of things, and we got the site wired up with relatively little pain.
The full Matrix Rain family has now been modernized into the TNT 2026 shell: Random, Custom Random, Message, and Custom Message. All variants now share the same navigation and footer framework, visual style, and improved run/pause reliability using button-state logic instead of legacy input-value toggles.
After comparative review, Custom Message Matrix Rain is now the primary message-based variant. It supersets the old Message Rain mode by combining modal-based text entry (plus a convenient Clear action) with full simulation tuning controls. The original Message Rain page remains available as a legacy evolution stage for instructional continuity.
Explore and cover-page navigation were updated to reflect this consolidation, and the full engineering rationale is captured in the Matrix Rain S.P.A.R.K. chatlog.
Matrix Rain Cover • Open Primary Message Mode • Matrix Code Movie Clip • S.P.A.R.K. Chat Log
LightWrite is a two-way simulation of the Stranger Things Christmas-light communication system — rebuilt from a 2022 student demo (David M.) into a full 2026 TNT app. In Human mode, you type on the keyboard and the corresponding bulbs glow on a living-room wall photograph. In Claude mode, the AI autonomously spells out TNT coding phrases one illuminated letter at a time, as if communicating from the Upside Down.
The 2026 rebuild corrected two bugs in the original: a push/pop accumulation error
in the p5.js lightUp() function (translate calls without save/restore caused every
subsequent letter to be drawn at the wrong position), and an aspect-ratio distortion
(the original used a 500×500 square canvas for a 959×598 image, compressing the background
and mis-mapping every letter coordinate). Both are documented in the S.P.A.R.K. chat log as
teaching examples.
The app is cross-listed under S.P.A.R.K., Processing, and
Simulations on the Explore page. The name LightWrite was chosen from
a list of Ask Copilot suggestions (Entry #020). The settings page persists mode, speed,
and a custom phrase to localStorage.
Cover Page • Open App • S.P.A.R.K. Chat Log • Watch the Scene
Vibe Codin’ is a parody of the Bee Gees’ 1975 disco hit “Jive Talkin’” — rewritten to celebrate AI-assisted software development. The term “Vibe Coding” was coined by Andrej Karpathy in 2025 to describe working with AI as a creative and technical partner: you set the direction, the AI handles the syntax, and the human stays firmly in the pilot’s seat.
The project consists of five pages: a disco-themed cover with the Saturday Night Fever background image, the original “Jive Talkin’” lyrics for comparison, the full parody lyrics (color-coded by section, footnotes explaining references to Claude, Raina, token credits, and S.P.A.R.K.), the S.P.A.R.K. development chatlog, and a new AI Revised Edition — a Weird Al–approved rewrite incorporating the chatlog’s own critique: singability fixes, trimmed chorus, interlude punchlines ([waiting for API response…] and [spinner intensifies]), and a new classroom-specific verse featuring the unforgettable “fresh-baked bread / Comic Sans instead” couplet.
The project is cross-listed in both Miscellaneous and
Styling on the Explore page. As a styling showcase it demonstrates:
full-bleed hero backgrounds with gradient overlays, CSS @keyframes animation
(spinning disco ball), a custom audio player with volume slider, multi-page site
architecture, Google Fonts type hierarchy (Boogaloo / Inter / Lora), and character
encoding best practices. The chatlog also documents the “documentation as
deliverable” discipline and includes a B+ → A critique of the parody.
Cover Page • Read the Parody • AI Revision • S.P.A.R.K. Chat Log
A new movie clip page features Sheb Wooley’s 1958 novelty hit “Purple People Eater” — one of the best-selling singles of the year, born from a schoolboy joke, and almost never released. The page includes a collapsible history of the song and its performer (Wooley also appeared in High Noon and Rawhide), the embedded video clip, and a copyable block of the full lyrics ready to paste into a student CSS project.
The companion S.P.A.R.K. chat log documents the full development session and includes a ten-step teacher’s exercise for a first HTML/CSS styling unit. Students start from a plain HTML skeleton, validate it before adding anything, link a stylesheet, distinguish verses from choruses with CSS class selectors, contain content with max-width, add a hero header with a background image and gradient overlay, and finish by introducing CSS custom properties (:root { } variables). Every step validates. The exercise is designed to produce a page similar to the grand finale demo.
The grand finale itself uses Lobster (display) and Lora (lyrics) Google Fonts, CSS custom properties for the violet palette, verse/chorus blocks with distinct visual treatment, and a hero that uses the purplePeopleEater.jpg image with a two-layer background (gradient + photo). No Bootstrap — pure hand-written CSS only, appropriate for the introductory level of the exercise.
Watch the Clip • S.P.A.R.K. Chat Log & Exercise • Grand Finale Demo
A standalone variant of Yahtzee adds a 14th scoring category: Zilch. Defined as a roll where all five dice show different values and they do not form a run of four or more consecutive numbers, a true Zilch is rarer than it first appears — only two of the six possible all-different hands qualify ({1,2,3,5,6} and {1,2,4,5,6}), giving a single-throw probability of roughly 3.1%. Worth 45 points, it sits between Large Straight (40) and Yahtzee (50).
The Zilch Edition lives in its own folder (YahtzeeZilch2026-06-14/) with entirely separate JavaScript, CSS, and stats storage. A distinct violet / purple design system immediately signals “this is a different game.” Scores are saved under the key zilchScores in localStorage, keeping Zilch records cleanly separated from standard Yahtzee history. All the SPARK Edition’s quality-of-life features are included: zero-score confirmation modal, all-dice-frozen guard, Sort button (with the diceArr/diceStr sync fix), and stats offcanvas with Clear Scores.
A full About & Scoring Guide explains the Zilch math, lists the only two valid hands, and documents how this variant differs from standard play. A development chat log covers the design reasoning: why standalone beats in-app toggle, how the definition was corrected before a line of code was written, and three principles for variant-game architecture. The Zilch Edition appears as a fourth card on the Yahtzee cover page.
A classic 2021 classroom Yahtzee game has been rebuilt from the ground up as a fully integrated TNT app — and the entire development process is documented as a S.P.A.R.K. chat log that students can read as a lesson in AI-assisted software development.
The SPARK Edition features: a TNT amber design system, stats in a collapsible offcanvas panel (with a Clear Scores button), a zero-score confirmation modal that appears before a category with no qualifying dice is scored, a guard that disables the Roll button when all five dice are frozen, an optional Sort button (display-only, with a full data-sync fix documented in the chat log), a separate About & Scoring Guide page, and a cover page offering three editions to choose from. The original game engine (yahtzee_game_scripts.js) is untouched throughout — all enhancements are wrapper functions in a new script file.
The chat log documents every significant decision: why Stats stayed on the game page as an offcanvas (navigating away would lose session state), how the zero-score guard uses the Command Pattern to defer a function call across an async modal, how a sort bug was found through field testing (exact reproduction state: 4 2 4 1 1 → sort → click die 3 → 4 2 2 1 1), and three principles for making bug reports AI-legible. Every user prompt is critiqued for what it did well and what could be stronger.
The SPARK Edition is dual-listed in the Explore page under both Games and S.P.A.R.K. with AI.
The shared TNT_JS_Utilities2026-06-11.js library has been expanded from 3 sections to 5, merging in a set of functions from an older utility file that had been living in a project subfolder. All additions were vetted for duplicates (one exact duplicate was intentionally skipped) and two bugs in the incoming code were corrected before inclusion.
New Section 2 — Array Utilities adds duplicateArray() (shallow copy, used internally by the median function) and obtainUniqueElementsInArray() (deduplicated array, preserving first-occurrence order). New Section 3 — Stats Utilities adds getMinimum() (loop-based min — bug fixed: arr.leng → arr.length and return val → return min), getMin() and getMax() (Math-based), getMean(), and getMedian() (bug fixed: added numeric sort comparator so strings like “1, 10, 2” sort correctly). Two new String Utilities were also added: sortSymbolsInString() and createStringFromArray(). The Stopwatch section renumbered to Section 5 accordingly.
These functions are used across the Yahtzee apps for dice deduplication (straights), array sorting (median), and stats display.
The Password Generator has been brought into the 2026 TNT ecosystem, upgraded from Bootstrap 4 to Bootstrap 5.3.3, and restyled with the full TNT dark-navy treatment. The app sports a cyber-teal accent color, a binary-background hero, a persistent sub-navigation bar, and the standard TNT navbar and footer across all three of its pages.
The generator offers a rich set of options: choose from Digits, Symbols, UPPER-CASE, and lower-case alphabet pools; apply an Unambiguous filter (removes look-alike characters), a Disemvowel filter (removes vowels including Y), or a Unique constraint (no repeated characters). A Custom Symbols field lets you supply your own character set, and a Simple Shuffle mode randomly permutes your exact input.
Under the hood, the refactor removes the jQuery dependency entirely, upgrades all Bootstrap 4 utility classes to their Bootstrap 5 equivalents, and replaces the deprecated document.execCommand(‘copy’) with the modern Clipboard API (navigator.clipboard.writeText()) with an execCommand fallback for older browsers.
The app is listed in the JS Apps grid and in the Explore Utilities category — the first new app to land in that category for 2026.
The Personal Finance suite has been fully refactored from Bootstrap 4 to Bootstrap 5.3.3 and integrated into the TNT 2026 design ecosystem. What was a standalone, plain-styled multi-page app is now a cohesive set of six pages with the full TNT dark-navy treatment: standard navbar, footer, per-tool color-coded heroes, and a persistent secondary sub-nav that lets students jump between calculators without going back to a menu page.
The suite covers the four core time-value-of-money scenarios taught alongside graphing calculators: Savings (future value of a principal + regular payments), Loan (monthly payment for a given principal, APR, and term), Sinking Fund (regular payment needed to reach a future-value target), and Annuity (regular payment receivable from a lump-sum investment). A fifth page — Equations — presents all four formulas with symbol definitions and intermediate variable explanations in TNT-styled reference tables.
All JavaScript calculation logic is preserved exactly from the original and has been verified against TI graphing calculator TVM solver results. The refactor upgrades Bootstrap 4 classes to their Bootstrap 5 equivalents (mr-*→me-*, data-toggle→data-bs-toggle, text-monospace→font-monospace, etc.), removes the jQuery dependency entirely, and replaces <input type="button"> with proper <button type="button"> elements throughout.
The app is linked from both the JS Apps page and the Explore Mathematical category.
A classic TNT classroom drill has been fully refactored and promoted to the 2026 site. Light Bulb Moment challenges students to match a randomly generated integer (in the range [−128, 127]) by toggling a row of eight light-bulb icons ON or OFF — each bulb representing one bit of an 8-bit signed integer in two’s-complement encoding.
The refactor replaces the original plain-HTML/CSS shell with the full 2026 TNT design system: Bootstrap 5.3.3 layout, Font Awesome icons, a compact animated hero, a Bootstrap accordion for collapsible instructions, and the shared TNT navbar and footer. An amber-themed dark colour palette ties the app visually to the archive banner used throughout the legacy section.
Under the hood, the new lbm_operations.js upgrades the original var-based logic to const/let, corrects the two’s-complement calculation for negative values, and adds a Click Score column to the results history table — showing each player’s click count against the theoretical minimum. A score of 1.000 means the optimal path was found. The stats table can be copied directly into a spreadsheet.
The app is now listed on both the JS Apps page and the Explore page under the Mathematical category.
We added a user-friendly safety net for broken internal links. Instead of dropping visitors onto a hard dead-end, TNT now routes unresolved internal destinations to a custom Site Under Construction page with clear next steps.
The logic lives in scripts/linkGuard.js, which intercepts same-origin links and redirects to the fallback when a destination is unavailable. This does not replace host-level 404 handling, but it dramatically improves everyday navigation resilience for in-site clicks.
Classroom payoff: fewer “where did the page go?” moments, smoother recovery when legacy paths move, and a much more professional user experience during active renovation.
Our Ask Copilot page now includes richer context for students who may not know the “Dear Abby” reference. We added a quick history link in the masthead and connected it to a dedicated clip page so the analogy is instantly clear.
The new Dear Abby movie clip page includes the cultural background blurb, citation, and a direct return path to Ask Copilot. We also wired related calls-to-action so students can jump between context and column entries without getting lost.
Result: the page keeps its fun editorial voice while becoming more inclusive for new readers who did not grow up with the newspaper-era reference.
Two of our most content-heavy pages just got a usability upgrade: Ask Copilot and the TNT Image Gallery now include live search tools so students can find what they need without endless scrolling.
Ask Copilot now includes keyword search, topic filtering, a live result count, and a clear-filters button. We also added URL-aware filtering, so a link can open pre-filtered entries for a specific topic or keyword.
The TNT Image Gallery continues to support live filtering for titles, captions, and commentary text, making it much easier to locate a specific classroom moment or image thread.
This is one of those small features with big classroom impact: faster lookup, better discoverability, and a smoother experience for both teaching and independent student exploration.
The Styl’n page now has a “Go Vintage!” button in the hero. Click it once and the entire page transforms into a 1950s beauty salon aesthetic: teal salon-chair accents, dusty rose borders, warm ivory cream backgrounds, a vintage star-pattern wallpaper, and coral-italic headings. Click it again and modern mode is instantly restored.
How it works — for those new to HTML and CSS. A web page can have more than one stylesheet loaded at a time. Normally, the last rule wins. But rules can also be written to activate only under certain conditions. In this case, a file called tnt-vintage-styles.css contains all the vintage color and pattern rules — but every rule starts with body.vintage-mode, which means they do nothing at all until the word vintage-mode appears on the <body> element. That word is added or removed by a single line of JavaScript when you click the button: document.body.classList.toggle('vintage-mode'). No page reload, no new files downloaded, no restructuring of the HTML. CSS does the rest instantly.
The wallpaper background is two stacked CSS layers: a semi-transparent cream overlay sits on top of the tiled star pattern image. The overlay keeps the text readable while the pattern shows through underneath. Both are set with a single background property — CSS can hold multiple background layers separated by commas.
The preference is saved using localStorage, so if you reload the page while in vintage mode, it picks right up where you left off. The full technical story, including how classList.toggle works and why scoping rules under a parent class is a best practice, lives in Ask Copilot Entry #010.
TNT has a new advice columnist, and he types faster than anyone in the building. Ask Copilot is our “Dear Abby”-style showcase of real interactions with GitHub Copilot — written up as letters and responses in the spirit of a classic newspaper column.
Each entry starts with a question from the lab (conversational, sometimes dramatic) and a response from Copilot (clear, occasionally witty). The first four entries cover topics drawn directly from this site’s own 2026 rebuild: why var is the bell-bottoms of JavaScript, what a disappearing pep talk has to do with form submission defaults, how a copy-paste bug hid itself for three years, and an honest assessment of what the old TNT site got right — and what it didn’t.
The column is designed to grow. Every interesting interaction in the lab is a candidate for a new entry. Students can see how questions are framed, how answers are structured, and what good prompting looks like in practice — without it feeling like a lecture.
A classic TNT app from 2023, the Pep Talk Generator got a complete
JavaScript overhaul. The 72 hand-written radio button blocks in the
original HTML were replaced by a data-driven columns array
and a buildColumns() function — a live demonstration
of the DRY principle (“Don’t Repeat Yourself”).
The upgrade also covers a fistful of modern JavaScript techniques:
const and let replacing var,
template literals replacing string concatenation, forEach
and find replacing manual for loops, and
addEventListener replacing inline onclick
attributes. A localStorage-backed counter tracks your
lifetime pep-talk tally across page reloads, and the deprecated
document.execCommand('copy') was swapped for the modern
Clipboard API using async/await.
A copy-paste bug in the original randomPepTalk()
— where column 3 was randomly selected twice
instead of columns 3 and 4 — was caught, fixed, and
annotated with a “DWR — Danger Will Robinson!” comment
so students can study exactly what went wrong and why
const would have caught it immediately.
After more than a decade of building things, we rebuilt the builders. The entire root-level TNT site has been redesigned from scratch for 2026, moving from the Bootstrap 5.0 era to Bootstrap 5.3.3, with Font Awesome 6.5 icons, Google Fonts (Boogaloo for brand moments, Inter for body text), and a consistent dark-navy design language across all pages.
The new Explore page replaces the old accordion with a card grid for each of the eleven app categories. To keep the grid visually uniform as new apps accumulate, each category card opens a Bootstrap offcanvas panel — a slide-in drawer that holds the full app list and a link to the legacy archive.
Nothing was thrown away. All 100+ legacy apps are preserved and fully functional in the archive. The new site is simply a cleaner runway for what’s coming next.