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.
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.