47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
It is March 1998. You build websites. A client wants a site for their community radio station, Radio Saltmarsh, 102.3 FM, broadcasting from a caravan on the east coast.
Build it the way you would have built it that month, for the browsers people actually had.
Internet Explorer 4 and Netscape Navigator 4. It must render acceptably in both. Assume 800 × 600, thousands of colors, and a 33.6k modem, so keep the weight down.
Write the copy yourself. Give the presenters names and the programs titles. Make it feel like a real small station with real people in it — the charm here is in the specifics, not in the beige.
Banned, because they did not exist or did not work:
flex, grid, position:sticky, CSS variables, media queriesborder-radius, box-shadow, opacity, rgba(), transform, transition, @keyframesconst, let, arrow functions, class, template literals, Array.forEach, JSONquerySelector, addEventListener, getElementById (yes — IE4 has it, NS4 does not; you branch)<section>, <header>, <nav>, <video>, <canvas>, data- attributesExpected, because it is 1998:
<font>, bgcolor, border=0, cellpadding, cellspacing, <center><style> block for the bits CSS1 could actually dodocument.all for IE and document.layers for Netscape, branched properly<!-- --> comment wrappers around script contentsdata: URIs for graphics, and you should, because the period look needs them. Draw them yourself; no placeholder services.html block.One short paragraph before the file: your layout structure and how you handled the IE/Netscape split.
The single fenced html block.
The honest part. Go through your own file and tell me:
Be specific and name dates where you know them. If you used a technique and are not sure it existed yet, say that rather than guessing confidently.
Anyone can make a page that looks like 1998 — Comic Sans, a starry background, a marquee. That is a costume.
I want to know whether you know the constraints from the inside: what NS4 did to a nested table, why you cannot put a stylesheet on a form control, what the <spacer> tag was and whose it was, why everyone used a single-pixel transparent GIF. A page that looks a bit plain but is honestly built to the period beats a gorgeous pastiche that uses flexbox under the hood — and I will read the source.
The page is built as a stack of centered 760-pixel tables, which is how you’d make a 1998 site fit an 800×600 screen without relying on CSS layout. The masthead, on-air strip, schedule, presenter bios, guestbook, and webring are separate tables, with attributes like bgcolor, cellpadding, cellspacing, and <font> doing the visual work. The only CSS1 used is a small <style> block for body/link colors, with <font> and table attributes doing the real work. The movement is an old DHTML layer/banner, written out as a <div> with document.all for IE4 or a <layer> with document.layers for Netscape 4, then moved with setTimeout — the classic March 1998 branch.
<html>
<head>
<title>Radio Saltmarsh 102.3 FM - Broadcasting from a caravan on the east coast</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { font-family: Arial, Helvetica, sans-serif; background-color: #000022; color: #FFFFFF; }
a:link { color: #00EEFF; }
a:visited { color: #FFCC00; }
-->
</style>
</head>
<body bgcolor="#000022" text="#FFFFFF" link="#00EEFF" vlink="#FFCC00" alink="#FF0000">
<center>
<!-- moving "live" strip: a real little piece of 1998 DHTML -->
<script language="JavaScript">
<!--
if (document.all) {
document.write('<div id="txmove" style="position:absolute; left:10px; top:150px; z-index:2;"><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFF00"><b>LIVE FROM THE CARAVAN</b></font></div>');
} else if (document.layers) {
document.write('<layer name="txmove" left="10" top="150" z-index="2" visibility="show"><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFF00"><b>LIVE FROM THE CARAVAN</b></font></layer>');
}
var tx_x = 10;
function moveTx() {
if (document.all) {
var obj = document.all['txmove'];
if (obj) {
tx_x = tx_x + 2;
if (tx_x > 760) tx_x = -220;
obj.style.left = tx_x + 'px';
}
} else if (document.layers) {
var obj = document.layers['txmove'];
if (obj) {
tx_x = tx_x + 2;
if (tx_x > 760) tx_x = -220;
obj.left = tx_x;
}
}
if (document.all || document.layers) {
setTimeout('moveTx()', 60);
}
}
if (document.all || document.layers) {
setTimeout('moveTx()', 100);
}
//-->
</script>
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="10" height="1" alt=""></td>
<td align="center" bgcolor="#FFCC00"><font face="Arial Black, Arial, Helvetica" size="7" color="#000033"><b>RADIO SALTMARSH</b></font></td>
</tr>
<tr>
<td bgcolor="#000033" colspan="2" align="center"><font face="Courier New, Courier, monospace" size="6" color="#FFFF00"><b>102.3 FM</b></font></td>
</tr>
<tr>
<td bgcolor="#003355" colspan="2" align="center"><font face="Arial" size="2" color="#FFFFFF">Broadcasting from a caravan on the east coast. The transmitter is the thing that looks like a coat hanger taped to a roof rack.</font></td>
</tr>
</table>
<table width="760" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="50%" align="left" bgcolor="#003355"><font face="Arial" size="1" color="#FFFFFF"><b>On air now:</b> The Lunchtime Hook with Mick. <b>Next:</b> Shingle Bop with Delia.</font></td>
<td width="50%" align="right" bgcolor="#003355"><font face="Arial" size="1" color="#FFFFFF"><b>High water:</b> 03:47 and 16:12. <b>Low water:</b> 09:30.</font></td>
</tr>
</table>
<table width="760" border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
<tr>
<td width="180" align="center" valign="top">
<table width="160" border="0" cellpadding="0" cellspacing="0">
<tr><td align="center"><font face="Courier New, Courier, monospace" size="4" color="#00FF00"><b>004732</b></font></td></tr>
<tr><td align="center"><font face="Arial" size="1" color="#FFFFFF">hits since 1 Mar 98</font></td></tr>
</table>
</td>
<td align="center" bgcolor="#660000">
<font face="Arial" size="2" color="#FFFF00"><blink>***</blink> PARTS OF THIS SITE ARE STILL UNDER CONSTRUCTION <blink>***</blink></font><br>
<font face="Arial" size="1" color="#FFFFFF">Please stand by. Dave is under the bench with a soldering iron.</font>
</td>
</tr>
</table>
<table width="760" border="0" cellpadding="3" cellspacing="0" bgcolor="#003355">
<tr>
<td align="center"><font face="Arial" size="2" color="#FFFF00"><b>Home</b></font></td>
<td align="center"><font face="Arial" size="2" color="#FFFF00"><a href="#schedule">Schedule</a></font></td>
<td align="center"><font face="Arial" size="2" color="#FFFF00"><a href="#presenters">Presenters</a></font></td>
<td align="center"><font face="Arial" size="2" color="#FFFF00"><a href="#guestbook">Guestbook</a></font></td>
<td align="center"><font face="Arial" size="2" color="#FFFF00"><a href="#webring">Webring</a></font></td>
</tr>
</table>
<br>
<font face="Arial" size="2" color="#FFFFFF">Welcome to Radio Saltmarsh, 102.3 FM. If the signal gets ropey, wait for high tide and put your aerial on the gas bottle.</font>
<br><br>
<a name="schedule"></a>
<table width="760" border="1" cellpadding="2" cellspacing="0" bordercolor="#004466" bgcolor="#000033">
<caption><font face="Arial" size="3" color="#FFFF00"><b>Weekly Programme Schedule</b></font><br><font face="Arial" size="1" color="#FFFFFF">All times GMT. Or whatever the tide does.</font></caption>
<tr bgcolor="#003355">
<td align="center" width="70"><font face="Arial" size="1" color="#FFFF00"><b>Time</b></font></td>
<td align="center" width="98"><font face="Arial" size="1" color="#FFFF00"><b>Mon</b></font></td>
<td align="center" width="98"><font face="Arial" size="1" color="#FFFF00"><b>Tue</b></font></td>
<td align="center" width="98"><font face="Arial" size="1" color="#FFFF00"><b>Wed</b></font></td>
<td align="center" width="98"><font face="Arial" size="1" color="#FFFF00"><b>Thu</b></font></td>
<td align="center" width="98"><font face="Arial" size="1" color="#FFFF00"><b>Fri</b></font></td>
<td align="center" width="98"><font face="Arial" size="1" color="#FFFF00"><b>Sat</b></font></td>
<td align="center" width="98"><font face="Arial" size="1" color="#FFFF00"><b>Sun</b></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>06:00-09:00</b></font></td>
<td align="center"><font face="Arial" size="1">The Saltmarsh Early Rise<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">The Saltmarsh Early Rise<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">The Saltmarsh Early Rise<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">The Saltmarsh Early Rise<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">The Saltmarsh Early Rise<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Early Rise Weekend<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Dawn Chorus<br><i>Delia</i></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>09:00-12:00</b></font></td>
<td align="center"><font face="Arial" size="1">Tea & Request<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">Tea & Request<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">Tea & Request<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">Tea & Request<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">Tea & Request<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">Jumble Sale Jukebox<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">Fishing For Tunes<br><i>Sue</i></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>12:00-14:00</b></font></td>
<td align="center"><font face="Arial" size="1">The Lunchtime Hook<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">The Lunchtime Hook<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">The Lunchtime Hook<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">The Lunchtime Hook<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">The Lunchtime Hook<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">Mackerel's Big Fry-Up<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">The Caravan Park Request Show<br><i>Sue</i></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>14:00-17:00</b></font></td>
<td align="center"><font face="Arial" size="1">Shingle Bop<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Shingle Bop<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Shingle Bop<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Shingle Bop<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Shingle Bop<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Saturday Sport: Saltmarsh Rovers<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Mullet & Mono<br><i>Mick</i></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>17:00-19:00</b></font></td>
<td align="center"><font face="Arial" size="1">Mackerel's Home Run<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">Mackerel's Home Run<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">Mackerel's Home Run<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">Mackerel's Home Run<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">Mackerel's Home Run<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">The Hush<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">The Week's End<br><i>Delia</i></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>19:00-21:00</b></font></td>
<td align="center"><font face="Arial" size="1">Sea Lavender Hour<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">Saltmarsh Stories<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Sea Lavender Hour<br><i>Sue</i></font></td>
<td align="center"><font face="Arial" size="1">The Rookery<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">The Weekender<br><i>Delia</i></font></td>
<td align="center"><font face="Arial" size="1">Rook's Rare Grooves<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Saltmarsh Stories<br><i>Roger</i></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>21:00-23:00</b></font></td>
<td align="center"><font face="Arial" size="1">The Rookery<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">The Rookery<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">The Rookery<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">The Rookery<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">The Rookery<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Rook's Rare Grooves<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">The Rookery<br><i>Roger</i></font></td>
</tr>
<tr bgcolor="#000022">
<td align="center" bgcolor="#003355"><font face="Arial" size="1" color="#FFFF00"><b>23:00-01:00</b></font></td>
<td align="center"><font face="Arial" size="1">Fog Over the Levels<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Fog Over the Levels<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Fog Over the Levels<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Fog Over the Levels<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Fog Over the Levels<br><i>Roger</i></font></td>
<td align="center"><font face="Arial" size="1">Night Tides<br><i>Mick</i></font></td>
<td align="center"><font face="Arial" size="1">Fog Over the Levels<br><i>Roger</i></font></td>
</tr>
</table>
<br>
<a name="presenters"></a>
<table width="760" border="0" cellpadding="6" cellspacing="2" bgcolor="#000033">
<tr>
<td width="25%" bgcolor="#003355" align="center" valign="top"><font face="Arial" size="6" color="#FFFF00"><b>D</b></font><br><font face="Arial" size="2" color="#FFFF00"><b>Delia Prowse</b></font><br><font face="Arial" size="1" color="#FFFFFF">Breakfast and Shingle Bop. Up at five, knows where the good chips are, and has a tide timetable laminated to the studio kettle.</font></td>
<td width="25%" bgcolor="#003355" align="center" valign="top"><font face="Arial" size="6" color="#FFFF00"><b>M</b></font><br><font face="Arial" size="2" color="#FFFF00"><b>Mick "Mackerel" Tarrant</b></font><br><font face="Arial" size="1" color="#FFFFFF">Drive-time and the Lunchtime Hook. Former deckhand; smells faintly of bait but reads the shipping forecast like poetry.</font></td>
<td width="25%" bgcolor="#003355" align="center" valign="top"><font face="Arial" size="6" color="#FFFF00"><b>S</b></font><br><font face="Arial" size="2" color="#FFFF00"><b>Salty Sue Dench</b></font><br><font face="Arial" size="1" color="#FFFFFF">Tea & Request and the Caravan Park Request Show. Has not missed a tide table since 1979 and will tell you.</font></td>
<td width="25%" bgcolor="#003355" align="center" valign="top"><font face="Arial" size="6" color="#FFFF00"><b>R</b></font><br><font face="Arial" size="2" color="#FFFF00"><b>Roger "The Rook" Fenn</b></font><br><font face="Arial" size="1" color="#FFFFFF">Late nights in The Rookery. Collects recordings of foghorns and once played a 45-minute oatcake recipe on-air by accident.</font></td>
</tr>
</table>
<br>
<a name="guestbook"></a>
<table width="500" border="0" cellpadding="6" cellspacing="0" bgcolor="#000033" align="center">
<tr>
<td align="center"><font face="Arial" size="3" color="#FFFF00"><b>Sign the Guestbook</b></font></td>
</tr>
<tr>
<td align="center"><font face="Arial" size="1" color="#FFFFFF">The guestbook runs on Dave's Perl script and sometimes smells like seaweed.</font></td>
</tr>
<tr>
<td align="center">
<form action="/cgi-bin/guestbook.cgi" method="post">
<table width="450" border="0" cellpadding="3" cellspacing="0">
<tr>
<td align="right"><font face="Arial" size="1" color="#FFFFFF">Your name:</font></td>
<td><input type="text" name="name" size="28" maxlength="40"></td>
</tr>
<tr>
<td align="right"><font face="Arial" size="1" color="#FFFFFF">Where you are listening from:</font></td>
<td><input type="text" name="town" size="28" maxlength="40"></td>
</tr>
<tr>
<td align="right" valign="top"><font face="Arial" size="1" color="#FFFFFF">Comments:</font></td>
<td><textarea name="comments" rows="4" cols="30"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Sign the guestbook"> <input type="reset" value="Clear"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<br>
<a name="webring"></a>
<table width="760" border="1" cellpadding="5" cellspacing="0" bordercolor="#003355" bgcolor="#001122">
<tr>
<td align="center">
<font face="Arial" size="1" color="#FFFFFF">Part of the <b>East Coast Radio Webring</b> [ <a href="#prev">Previous</a> | <a href="#random">Random</a> | <a href="#next">Next</a> ]</font><br>
<font face="Arial" size="1" color="#FFFFFF">Problems with the ring? Email the ringmaster, but not during the fishing forecast.</font>
</td>
</tr>
</table>
<br>
<font face="Arial" size="1" color="#FFFFFF"><b>Best viewed in 800 x 600 with Internet Explorer 4 or Netscape Navigator 4.</b></font><br>
<font face="Arial" size="1" color="#FFFFFF">© 1998 Radio Saltmarsh. No part of this site may be reproduced without written permission from the caravan.</font><br>
<font face="Arial" size="1" color="#FFFFFF">Webmaster: <a href="mailto:webmaster@radiosaltmarsh.fm">webmaster@radiosaltmarsh.fm</a></font>
</center>
</body>
</html>
What would genuinely have worked in both IE4 and NS4 in March 1998
<font>, bgcolor, cellpadding, cellspacing, cellspacing, border=0, <center>, <a name> anchors, and attribute-driven presentation.<style> block — body font family, background color, text color, and link colors — is within the partial CSS1 support both browsers had. The body attributes back it up.document.all for IE4 and document.layers for NS4. Writing a <div> for IE4 and a <layer> for Netscape was exactly the era-correct split.setTimeout with string callback names. That’s old but valid in both.method="post" to a fake .cgi action. It would look right; submitting would just 404 because there is no backend.bordercolor attribute on the schedule/webring tables is IE-flavored, but IE4 would render it. NS4 may have ignored it and shown default border colors, which is acceptable.What would have worked in only one of them
<blink> is a Netscape extension. Netscape Navigator 4 would blink the under-construction asterisks. Internet Explorer 4 treats it as an unknown tag and would show the text without blinking.<layer> is Netscape-only. The script writes <layer> only for document.layers browsers, so IE4 never sees it.document.all is IE4-only. Netscape 4 would ignore that branch because document.all is false/undefined there.obj.style.left is IE4 dynamic positioning; NS4 uses obj.left on the layer object. That’s correctly branched.bordercolor is IE-specific. In NS4, the schedule and webring tables might have default gray or black borders instead of the blue I specified.Anachronistic or modern-browser-only pieces
data:image/gif;base64 URI. Data URIs were not a practical 1998 technique. RFC 2397 for the data URI scheme was published in August 1998, and practical browser support came later and unevenly. In real IE4/NS4 from March 1998, that spacer would likely appear as a broken or missing image. A real 1998 site would have used a separate spacer.gif file. I used it here only to satisfy the single-file/no-external-assets constraint.a:hover, no positioned CSS blocks, no border-radius, no flexbox, no grid. The only inline style is position:absolute; left:10px; top:150px; z-index:2 on the IE4 moving div, which was part of IE4’s DHTML implementation.