Because I am known to write us­ing a foun­tain pen on pa­per, a num­ber of peo­ple have pointed me to this post and its un­der­ly­ing re­search. I won’t re­hash what is said in those sources, but the gist of it is that when you write things down by hand you’re re­cruit­ing more of your brain, which is a good thing.

I’m not an ex­pert on how the brain works, but I can say that, when writ­ing by hand, one is con­tin­u­ally solv­ing a se­ries of small prob­lems hav­ing to do with the spac­ing of words, how let­ters are con­nected, the cross­ing of the let­ter t (sometimes more than one in the same word) and the dot­ting of the let­ters i and j, and how to ac­com­plish all of those things through co­or­di­nated move­ments not just of the fin­gers but of the whole arm. All of that has to be in­te­grated in real time with what­ever is hap­pen­ing on a more ab­stract level in the brain’s pro­cess­ing of ideas and im­agery.

Concurrently I have been fol­low­ing dis­course on Reddit and other sources about how wide­spread use of AI has forced ed­u­ca­tors to re­turn to the long-aban­doned prac­tice of hav­ing their stu­dents take ex­ams in per­son by writ­ing things out long­hand in blue books. This has cre­ated new chal­lenges for stu­dents who never re­ally learned how to write by hand, and for teach­ers who can’t make sense of their stu­dents’ ter­ri­ble hand­writ­ing.

About twenty-five years ago I stopped com­pos­ing at the key­board and switched over to foun­tain pen on pa­per. Since then I have writ­ten many thou­sands of pages that way. The man­u­script of The Baroque Cycle was a stack of hand­writ­ten pages 42 inches high, which for a time was on dis­play at the Museum of Science Fiction in Seattle. With the ex­cep­tion of The Rise and Fall of D.O.D.O., which I co-wrote with Nicole Galland by email­ing Word files back and forth, every book I’ve writ­ten since then has been com­posed with foun­tain pen on pa­per.

Every so of­ten, when I’m sign­ing books at a book tour ap­pear­ance, some­one will come up to me and say some­thing like “you must have writer’s cramp!” or “is your hand sore yet?” I never have the time to pro­vide a full an­swer. If I did, how­ever, my an­swer would be that never, at any time dur­ing a quar­ter of a cen­tury dur­ing which I have spent a sub­stan­tial frac­tion of each work­ing day writ­ing by hand, have I ex­pe­ri­enced even the faintest traces of so-called “writer’s cramp” or any other such hob­gob­lins.

Yet I can re­mem­ber get­ting a sore hand when I was a kid writ­ing out as­sign­ments in school. Many peo­ple prob­a­bly re­mem­ber such ex­pe­ri­ences and as­sume, rea­son­ably enough, that it’s a nat­ural con­se­quence of writ­ing by hand for any length of time. This is not the case.

Here are some fairly sim­ple dos and don’ts for peo­ple who want to reap the ben­e­fits of writ­ing by hand.

It’s pretty ob­vi­ous that you’re go­ing to get tired faster if your mus­cles have to ex­ert more force. Writing with a pen­cil re­quires sig­nif­i­cantly more force than writ­ing with a good pen. Old-school ball­points with thick ink are no bet­ter. You can see vi­sual ev­i­dence of this if you flip over a sheet of pa­per on which you’ve been writ­ing with a pen­cil or an old ball­point. The pa­per will bear a vis­i­ble im­print where it was pressed down by the writ­ing in­stru­ment. Often that will con­tinue down into the stack of pa­per be­neath. That’s be­cause you had to push hard. This does­n’t hap­pen with a foun­tain pen. If the nib is work­ing prop­erly you need to ex­ert very lit­tle force. The nib is ba­si­cally skat­ing on the lit­tle lake of ink that it has just laid down.

Pains me to say it, but roller­ball gel pens are about as good as foun­tain pens on this front.

It might then seem rea­son­able to think that writ­ing with a sty­lus on an iPad or sim­i­lar would be best, since no force is needed and fric­tion is min­i­mized. I don’t think this is true. A small amount of fric­tion is ac­tu­ally de­sir­able. You don’t want the tip of the writ­ing in­stru­ment to skid out of con­trol. Your brain and your lit­tle hand mus­cles are re­ly­ing on a lit­tle bit of fric­tion. Since I’m writ­ing this dur­ing the World Cup, I’ll make a soc­cer anal­ogy. Soccer play­ers have spent many hours drib­bling balls across play­ing fields, and they’ve in­ter­nal­ized the physics—they know about how far the ball is go­ing to travel when they kick it a cer­tain way, and how of­ten they need to give it an­other kick to keep it mov­ing. If you put them on a gi­ant, fric­tion­less air hockey table, all of that knowl­edge would be­come use­less. Every touch on the ball would send it out of con­trol. Dribbling the ball down the field would be­come more tir­ing be­cause they’d have to be mak­ing con­tin­ual ef­forts to con­trol the bal­l’s move­ment. Relying on a lit­tle bit of fric­tion re­duces the amount of men­tal and phys­i­cal ef­fort.

The com­bi­na­tion of foun­tain pens and pa­per em­bod­ies a bal­ance that has been worked out over a long span of time by peo­ple who write a lot. This phe­nom­e­non is called “tooth” by afi­ciona­dos. Removing fric­tion by us­ing a hard sty­lus on glass will ac­tu­ally make the process more tir­ing.

Too much fric­tion, and too lit­tle fric­tion, are both more tir­ing than just a lit­tle bit of fric­tion, and that’s the bal­ance that is re­flected in the foun­tain pen/​pa­per tech­nol­ogy.

Rresults vary when you use var­i­ous pens on var­i­ous kinds of pa­per. Generally I get the worst re­sults on cheap printer pa­per, be­cause it wicks ink out of the nib too fast, and so cre­ates fat, blurry lines. Often I have the same prob­lem with yel­low le­gal pads. But al­most any pa­per in a blank note­book, or higher-grade printer pa­per with at least 25% cot­ton con­tent, works fine. I’ve learned over time that some of my foun­tain pens work bet­ter with cer­tain kinds of pa­per than oth­ers, so I match them up with­out hav­ing to think about it too hard.

Here’s a 300 dpi scan of tests I did with three dif­fer­ent pens on var­i­ous types of pa­per. You might have to zoom in to see much dif­fer­ence.

The pen on the left is a Jorg Hysek with a wide nib, and you can see that the cheap printer pa­per soaked up a lot of ink and left a thicker, fuzzier line. The le­gal pad was­n’t much bet­ter. Everything else ba­si­cally worked. The 100% cot­ton pa­per is from a box I pur­chased a long time ago - it was mar­keted for print­ing re­sumes, back in the days when peo­ple printed re­sumes. It is the tooth­iest of all these pa­pers and felt no­tice­ably scratch­ier. I guess it goes with­out say­ing that fancy Italian pa­per is the best, but the comp book and mole­sk­ine work per­fectly well with just about any pen.

(For those scor­ing at home, the mid­dle pen is a Diplomat Aero and the one on the right is a Monteverde Invincia)

If the pa­per is thin, writ­ing on one side can bleed through to the other, so the re­sults can be slightly harder to read if you write on both sides. Which leads me to:

The ecosys­tem is­n’t go­ing to col­lapse if you use more pa­per. It’s cheap. Focus on what’s im­por­tant here: your brain and your time. Write on one side. Trying to cram more words into a sheet will take you out of your nat­ural and com­fort­able writ­ing style and make you tired. Just buy a shit­load of pa­per or note­books or what­ever it is you want to use, and use it.

There’s a rea­son cur­sive was in­vented. Don’t even think about not us­ing it. It is far less tir­ing than print­ing one let­ter at a time. I learned cur­sive as a child. Then I went for many years with­out us­ing it much, and for­got some of it. Later I re-learned it by sit­ting in my kid’s el­e­men­tary school class­room dur­ing a par­ent-teacher con­fer­ence and ex­am­in­ing the forms printed on a long strip above the chalk­board (I still re­mem­bered how to do the lower-case let­ters, but I had for­got­ten some of the cap­i­tals).

Legibility was more im­por­tant back in the day when writ­ten doc­u­ments had to be read by other peo­ple. Hence the need for ex­act­ing pen­man­ship, taught in schools to long-suf­fer­ing chil­dren. This is prob­a­bly the source of a lot of angst around writer’s cramp and ink dis­as­ters. Today, if you’re writ­ing things down with ink on pa­per, you’re prob­a­bly writ­ing just for your­self, or per­haps for fam­ily mem­bers who can learn to rec­og­nize your hand­writ­ing.

To judge from the way peo­ple talk, a lot of them have mem­o­ries of foun­tain pen dis­as­ters where ink got all over the place for some rea­son. Or per­haps it’s just gen­er­a­tional trauma, handed down in an oral tra­di­tion. If the pen is work­ing cor­rectly, ink can only come out of it so fast. A cou­ple of rare ex­cep­tions:

If the pen’s ink reser­voir is partly empty, so that it con­tains an air bub­ble, and if it’s po­si­tioned nib down, then, when you go up in an air­plane, the bub­ble will ex­pand as the am­bi­ent pres­sure drops, forc­ing ink out the nib. Once I fig­ured that out, I got in the habit of mak­ing sure my pens were po­si­tioned nib up when tak­ing off in an air­plane. If I have time I’ll also re­fill the pen be­fore de­par­ture, to min­i­mize the size of the air bub­ble.

Sometimes if a pen gets dirty, or if the nib is some­how dam­aged, the ink will stop com­ing out and you can restart it by giv­ing it a lit­tle shake. If you do it just right, the ink flow restarts with­out in­ci­dent, but if you overdo it, a few drops of ink might shoot out onto the page and be­come blots. This sce­nario hap­pens a few times of year for me, only with one pen that has this prob­lem. I blot it with a piece of scrap pa­per and move on.

Just have note­books ly­ing around, or on your per­son. Write gro­cery lists, doo­dles, notes on meet­ings, to-do lists, or stray ideas. Journal. Copy out good lines from books. Anything that has your men­tal fo­cus will have a more en­dur­ing pres­ence in your brain if you write it down.

I am left handed. I have never had any trou­ble with my hand smear­ing the ink. Yet every con­ver­sa­tion I have about foun­tain pens leads to some­one claim­ing that it can never work for them be­cause they are left handed. I have no idea what they’re talk­ing about. When I was a child, writ­ing at length with pen­cil, the side of my hand some­times be­came gray from graphite picked up as my hand rubbed across the page. And some­times I have got ink on my hand when us­ing a ball­point pen that left an ink glob on the pa­per. But with foun­tain pens it’s easy to find a pen/​pa­per com­bi­na­tion such that the ink soaks into the pa­per and dries quickly enough that it does­n’t smudge when you’re writ­ing the next line. Here’s a sim­ple demon­stra­tion of dry­ing time and how it works with two pens: first a foun­tain pen and then a Pilot G-2 gel pen.

Obviously the Pilot gel pen ink dries faster, and so that might be a bet­ter choice for peo­ple who are re­ally wor­ried about smudg­ing.

Most mod­ern pens al­low you to choose be­tween us­ing pre­loaded plas­tic ink car­tridges and a plunger that en­ables you to draw ink up out of a bot­tle by hand. I use both. Start with the ink car­tridges, es­pe­cially if you travel. There’s no need to com­pli­cate mat­ters by mess­ing around with bot­tles. Since I do a lot of work from one lo­ca­tion, I have a cor­ner of a table­top set up there with ink bot­tles and a folded-up pa­per towel for wip­ing off the nib af­ter it’s filled (I have been us­ing the same pa­per towel for about twenty years). In the­ory this works bet­ter in the long term be­cause it al­lows you to flush the nib by forc­ing ink in and out of it a cou­ple of times when­ever you re­fill. In prac­tice I see no dif­fer­ence at all - pens that I re­fill with car­tridges don’t get clogged.

Even if every­thing works per­fectly you’ll end up with the oc­ca­sional ink-smudged fin­ger. It will wash off quickly - the ink is wa­ter-sol­u­ble. Until then, con­sider it a mark of dis­tinc­tion.

If you’re new to this I think it makes most sense to start by con­sid­er­ing what kind of pa­per is go­ing to work best in your life. Are you writ­ing loose­leaf, or in note­books? Legal pads? Blue books? Remember, it’s okay to use lots of pa­per, so pick some­thing that is­n’t too pre­cious and that is easy to re­plen­ish. I use a lot of mole­sk­ine note­books and Mead comp books, which I can buy in bulk on­line. For com­pos­ing fic­tion I use fancy loose­leaf pa­per.

If you have ac­cess to a store where they sell foun­tain pens, take some of that pa­per there and see what works best. If you’re work­ing with cheaper, thin­ner pa­per, start with finer nibs and work up to fat­ter ones un­til you start to see bleed-through.

Buy cheaper pens un­til you know what you like. I doubt there’s much of a dif­fer­ence be­tween cheaper and more ex­pen­sive foun­tain pens in terms of their ac­tual per­for­mance. What you’re pay­ing for, in an ex­pen­sive pen, is fancy ma­te­ri­als and styling. For ex­am­ple, if you look at the Pilot Vanishing Point line of pens - an in­ge­nious foun­tain pen that you can click, like an old-fash­ioned ball­point, to re­tract the nib in­side the bar­rel - fancier ver­sions cost five times as much as the base model.

In all hon­esty, the Pilot G-2 gel pens are go­ing to give you 80% of what you could ex­pect from a foun­tain pen for min­i­mal cost.

On the other hand, a ten-pack of Pilot G-2 gel pens goes for about twenty bucks. For the same amount you can buy a sim­ple but com­pletely ser­vice­able foun­tain pen that will last longer than you will.

No posts

Sign up to see the fu­ture, to­day

Sign up to see the fu­ture, to­day

Can’t-miss in­no­va­tions from the bleed­ing edge of sci­ence and tech

AI com­pa­nies are pour­ing un­told bil­lions of dol­lars into enor­mous data cen­ters in their ef­forts to sus­tain in­creas­ingly com­plex and re­source-in­ten­sive AI mod­els.

It’s an ex­tremely costly un­der­tak­ing built on seem­ingly bot­tom­less hype — and a moun­tain of debt. As Japanese fi­nan­cial news­pa­per Nikkei Asia found in a re­cent in­ves­ti­ga­tion, just five US tech gi­ants — Alphabet, Microsoft, Amazon, Meta, and Oracle — are hid­ing an es­ti­mated $1.65 tril­lion in debt that does­n’t ap­pear on bal­ance sheets. That’s even more than the $1.35 tril­lion in debt the five com­pa­nies of­fi­cially re­ported in their fi­nan­cial data for the most re­cent quar­ter.

Meta alone has amassed around $420 bil­lion in off-bal­ance-sheet debt, ac­cord­ing to Nikkei, high­light­ing how pre­car­i­ous the AI in­dus­try’s steep in­vest­ment in AI has be­come, and in­spir­ing com­par­isons to en­ergy com­pany Enron, which col­lapsed in spec­tac­u­lar fash­ion in 2001 be­cause of sim­i­lar debts hid­den be­hind shell com­pa­nies. Like Enron, they’re us­ing spe­cial pur­pose ve­hi­cles, or off-bal­ance sheet arrange­ments such as legally dis­tinct sub­sidiaries, as a way to make their fi­nan­cial re­port­ing look health­ier than it ac­tu­ally is — of­ten a glar­ing sign that some­thing is deeply amiss be­hind the scenes.

“The ac­count­ing treat­ment it­self is in fash­ion,” tech­ni­cal ac­count­ing con­sul­tant Tom Selling told Bloomberg. “But what if one of these com­pa­nies was a house of cards and was prop­ping it­self up with this ac­count­ing treat­ment? To me, that’s the risk.”

Experts con­tinue to warn of an AI bub­ble, not­ing the enor­mous and widen­ing gulf be­tween com­pany val­u­a­tions and their com­par­a­tively measly prof­its. The lat­est news will do lit­tle to quiet crit­ics who say the sit­u­a­tion is more dire than the com­pa­nies’ of­fi­cial bal­ance sheets sug­gest.

To keep up with the on­go­ing AI race, tech gi­ants are com­mit­ting vast sums to build out large-scale data cen­ter pro­jects, a long-term bet that may — or may not — pay off. They’re also sell­ing new shares to raise new funds, as Nikkei re­ports, which could lead to eq­uity di­lu­tion and a drop in in­vestor con­fi­dence.

That could make them even more vul­ner­a­ble if the AI bub­ble does pop, or the in­dus­try fails to gen­er­ate enough de­mand to jus­tify the data cen­ter con­struc­tion frenzy.

The pres­sure is on: four of the five com­pa­nies Nikkei an­a­lyzed are set to re­port sec­ond quar­ter earn­ings in the com­ing days and weeks. We’ll be watch­ing.

More on the AI bub­ble: There’s a Gigantic Problem at the Heart of the AI Industry That Could Cause the Whole Thing to Collapse

A de­sign sys­tem for build­ing faith­ful recre­ations of old UIs.

Intro

98.css is a CSS li­brary for build­ing in­ter­faces that look like Windows 98. See more on GitHub.

My First VB4 Program

Hello, world!

This li­brary re­lies on the us­age of se­man­tic HTML. To make a but­ton, you’ll need to use a <button>. Input el­e­ments re­quire la­bels. Icon but­tons rely on aria-la­bel. This page will guide you through that process, but ac­ces­si­bil­ity is a pri­mary goal of this pro­ject.

You can over­ride many of the styles of your el­e­ments while main­tain­ing the ap­pear­ance pro­vided by this li­brary. Need more padding on your but­tons? Go for it. Need to add some color to your in­put la­bels? Be our guest.

This li­brary does not con­tain any JavaScript, it merely styles your HTML with some CSS. This means 98.css is com­pat­i­ble with your fron­tend frame­work of choice.

Here is an ex­am­ple of 98.css used with React, and an ex­am­ple with vanilla JavaScript. The fastest way to use 98.css is to im­port it from unpkg.

<link rel=“stylesheet” href=“https://​unpkg.com/​98.css” >

You can in­stall 98.css from the GitHub re­leases page, or from npm.

npm in­stall 98.css

Components

Button

A com­mand but­ton, also re­ferred to as a push but­ton, is a con­trol that causes the ap­pli­ca­tion to per­form some ac­tion when the user clicks it.

A stan­dard but­ton mea­sures 75px wide and 23px tall, with a raised outer and in­ner bor­der. They are given 12px of hor­i­zon­tal padding by de­fault.

<button>Click me</​but­ton> <input type=“sub­mit” /> <input type=“re­set” />

You can add the class de­fault to any but­ton to ap­ply ad­di­tional styling, use­ful when com­mu­ni­cat­ing to the user what de­fault ac­tion would hap­pen in the ac­tive win­dow if the Enter key was pressed on Windows 98.

<button class=“de­fault”>OK</​but­ton>

When but­tons are clicked, the raised bor­ders be­come sunken. The fol­low­ing but­ton is sim­u­lated to be in the pressed (active) state.

<button>I am be­ing pressed</​but­ton>

Disabled but­tons main­tain the same raised bor­der, but have a “washed out” ap­pear­ance in their la­bel.

<button dis­abled>I can­not be clicked</​but­ton>

Button fo­cus is com­mu­ni­cated with a dot­ted bor­der, set 4px within the con­tents of the but­ton. The fol­low­ing ex­am­ple is sim­u­lated to be fo­cused.

<button>I am fo­cused</​but­ton>

Checkbox

A check box rep­re­sents an in­de­pen­dent or non-ex­clu­sive choice.

Checkboxes are rep­re­sented with a sunken panel, pop­u­lated with a “check” icon when se­lected, next to a la­bel in­di­cat­ing the choice.

Note: You must in­clude a cor­re­spond­ing la­bel af­ter your check­box, us­ing the <label> el­e­ment with a for at­tribute pointed at the id of your in­put. This en­sures the check­box is easy to use with as­sis­tive tech­nolo­gies, on top of en­sur­ing a good user ex­pe­ri­ence for all (navigating with the tab key, be­ing able to click the en­tire la­bel to se­lect the box).

This is a check­box

<input type=“check­box” id=“ex­am­ple1″> <label for=“ex­am­ple1”>This is a check­box</​la­bel>

Checkboxes can be se­lected and dis­abled with the stan­dard checked and dis­abled at­trib­utes.

When group­ing in­puts, wrap each in­put in a con­tainer with the field-row class. This en­sures a con­sis­tent spac­ing be­tween in­puts.

I am checked

I am in­ac­tive

I am in­ac­tive but still checked

<div class=“field-row”> <input checked type=“check­box” id=“ex­am­ple2”> <label for=“ex­am­ple2″>I am checked</​la­bel> </div> <div class=“field-row”> <input dis­abled type=“check­box” id=“ex­am­ple3”> <label for=“ex­am­ple3″>I am in­ac­tive</​la­bel> </div> <div class=“field-row”> <input checked dis­abled type=“check­box” id=“ex­am­ple4”> <label for=“ex­am­ple4″>I am in­ac­tive but still checked</​la­bel> </div>

OptionButton

An op­tion but­ton, also re­ferred to as a ra­dio but­ton, rep­re­sents a sin­gle choice within a lim­ited set of mu­tu­ally ex­clu­sive choices. That is, the user can choose only one set of op­tions.

Option but­tons can be used via the ra­dio type on an in­put el­e­ment.

Option but­tons can be grouped by spec­i­fy­ing a shared name at­tribute on each in­put. Just as be­fore: when group­ing in­puts, wrap each in­put in a con­tainer with the field-row class to en­sure a con­sis­tent spac­ing be­tween in­puts.

Yes

No

<div class=“field-row”> <input id=“ra­dio5″ type=“ra­dio” name=“first-ex­am­ple”> <label for=“ra­dio5”>Yes</​la­bel> </div> <div class=“field-row”> <input id=“ra­dio6” type=“ra­dio” name=“first-ex­am­ple”> <label for=“ra­dio6″>No</​la­bel> </div>

Option but­tons can also be checked and dis­abled with their cor­re­spond­ing HTML at­trib­utes.

Peanut but­ter should be smooth

I un­der­stand why peo­ple like crunchy peanut but­ter

Crunchy peanut but­ter is good

<div class=“field-row”> <input id=“ra­dio7″ type=“ra­dio” name=“sec­ond-ex­am­ple”> <label for=“ra­dio7”>Peanut but­ter should be smooth</​la­bel> </div> <div class=“field-row”> <input checked dis­abled id=“ra­dio8” type=“ra­dio” name=“sec­ond-ex­am­ple”> <label for=“ra­dio8″>I un­der­stand why peo­ple like crunchy peanut but­ter</​la­bel> </div> <div class=“field-row”> <input dis­abled id=“ra­dio9″ type=“ra­dio” name=“sec­ond-ex­am­ple”> <label for=“ra­dio9”>Crunchy peanut but­ter is good</​la­bel> </div>

GroupBox

A group box is a spe­cial con­trol you can use to or­ga­nize a set of con­trols. A group box is a rec­tan­gu­lar frame with an op­tional la­bel that sur­rounds a set of con­trols.

A group box can be used by wrap­ping your el­e­ments with the field­set tag. It con­tains a sunken outer bor­der and a raised in­ner bor­der, re­sem­bling an en­graved box around your con­trols.

<fieldset> <div class=“field-row”>Se­lect one:</​div> <div class=“field-row”> <input id=“ra­dio10” type=“ra­dio” name=“field­set-ex­am­ple”> <label for=“ra­dio10″>Din­ers</​la­bel> </div> <div class=“field-row”> <input id=“ra­dio11″ type=“ra­dio” name=“field­set-ex­am­ple”> <label for=“ra­dio11”>Drive-Ins</​la­bel> </div> <div class=“field-row”> <input id=“ra­dio12” type=“ra­dio” name=“field­set-ex­am­ple”> <label for=“ra­dio12″>Dives</​la­bel> </div> </fieldset>

You can pro­vide your group with a la­bel by plac­ing a leg­end el­e­ment within the field­set.

<fieldset> <legend>Today’s mood</​leg­end> <div class=“field-row”> <input id=“ra­dio13″ type=“ra­dio” name=“field­set-ex­am­ple2″> <label for=“ra­dio13”>Claire Saffitz</label> </div> <div class=“field-row”> <input id=“ra­dio14” type=“ra­dio” name=“field­set-ex­am­ple2”> <label for=“ra­dio14″>Brad Leone</label> </div> <div class=“field-row”> <input id=“ra­dio15″ type=“ra­dio” name=“field­set-ex­am­ple2″> <label for=“ra­dio15”>Chris Morocco</label> </div> <div class=“field-row”> <input id=“ra­dio16” type=“ra­dio” name=“field­set-ex­am­ple2”> <label for=“ra­dio16″>Carla Lalli Music</label> </div> </fieldset>

TextBox

A text box (also re­ferred to as an edit con­trol) is a rec­tan­gu­lar con­trol where the user en­ters or ed­its text. It can be de­fined to sup­port a sin­gle line or mul­ti­ple lines of text.

Text boxes can ren­dered by spec­i­fy­ing a text type on an in­put el­e­ment. As with check­boxes and ra­dio but­tons, you should pro­vide a cor­re­spond­ing la­bel with a prop­erly set for at­tribute, and wrap both in a con­tainer with the field-row class.

Occupation

<div class=“field-row”> <label for=“tex­t17″>Oc­cu­pa­tion</​la­bel> <input id=“tex­t17” type=“text” /> </div>

Additionally, you can make use of the field-row-stacked class to po­si­tion your la­bel above the in­put in­stead of be­side it.

Address (Line 1)

Address (Line 2)

<div class=“field-row-stacked” style=“width: 200px”> <label for=“tex­t18”>Ad­dress (Line 1)</label> <input id=“tex­t18″ type=“text” /> </div> <div class=“field-row-stacked” style=“width: 200px”> <label for=“tex­t19″>Ad­dress (Line 2)</label> <input id=“tex­t19” type=“text” /> </div>

To sup­port mul­ti­ple lines in the user’s in­put, use the textarea el­e­ment in­stead.

Additional notes

<div class=“field-row-stacked” style=“width: 200px”> <label for=“tex­t20”>Ad­di­tional notes</​la­bel> <textarea id=“tex­t20″ rows=“8”></​textarea> </div>

Text boxes can also be dis­abled and have value with their cor­re­spond­ing HTML at­trib­utes.

Favorite color

<div class=“field-row”> <label for=“tex­t21″>Fa­vorite color</​la­bel> <input id=“tex­t21” dis­abled type=“text” value=“Win­dows Green”/> </div>

Slider

A slider, some­times called a track­bar con­trol, con­sists of a bar that de­fines the ex­tent or range of the ad­just­ment and an in­di­ca­tor that shows the cur­rent value for the con­trol…

Sliders can ren­dered by spec­i­fy­ing a range type on an in­put el­e­ment.

Volume: Low

High

<div class=“field-row” style=“width: 300px”> <label for=“range22”>Vol­ume:</​la­bel> <label for=“range23″>Low</​la­bel> <input id=“range23” type=“range” min=“1” max=“11″ value=“5” /> <label for=“range24″>High</​la­bel> </div>

You can make use of the has-box-in­di­ca­tor class re­place the de­fault in­di­ca­tor with a box in­di­ca­tor, fur­ther­more the slider can be wrapped with a div us­ing is-ver­ti­cal to dis­play the in­put ver­ti­cally.

Note: To change the length of a ver­ti­cal slider, the in­put width and div height.

Cowbell

<div class=“field-row”> <label for=“range25″>Cow­bell</​la­bel> <div class=“is-ver­ti­cal”> <input id=“range25″ class=“has-box-in­di­ca­tor” type=“range” min=“1” max=“3″ step=“1” value=“2″ /> </div> </div>

Dropdown

A drop-down list box al­lows the se­lec­tion of only a sin­gle item from a list. In its closed state, the con­trol dis­plays the cur­rent value for the con­trol. The user opens the list to change the value.

Dropdowns can be ren­dered by us­ing the se­lect and op­tion el­e­ments.

<select> <option>5 - Incredible!</option> <option>4 - Great!</option> <option>3 - Pretty good</​op­tion> <option>2 - Not so great</​op­tion> <option>1 - Unfortunate</option> </select>

By de­fault, the first op­tion will be se­lected. You can change this by giv­ing one of your op­tion el­e­ments the se­lected at­tribute.

<select> <option>5 - Incredible!</option> <option>4 - Great!</option> <option se­lected>3 - Pretty good</​op­tion> <option>2 - Not so great</​op­tion> <option>1 - Unfortunate</option> </select>

Window

The fol­low­ing com­po­nents il­lus­trate how to build com­plete win­dows us­ing 98.css.

Title Bar

At the top edge of the win­dow, in­side its bor­der, is the ti­tle bar (also ref­fered to as the cap­tion or cap­tion bar), which ex­tends across the width of the win­dow. The ti­tle bar iden­ti­fies the con­tents of the win­dow.

Include com­mand but­tons as­so­ci­ated with the com­mon com­mands of the pri­mary win­dow in the ti­tle bar. These but­tons act as short­cuts to spe­cific win­dow com­mands.

You can build a com­plete ti­tle bar by mak­ing use of three classes, ti­tle-bar, ti­tle-bar-text, and ti­tle-bar-con­trols.

A Title Bar

<div class=“ti­tle-bar”> <div class=“ti­tle-bar-text”>A Title Bar</div> <div class=“ti­tle-bar-con­trols”> <button aria-la­bel=“Close”></​but­ton> </div> </div>

We make use of aria-la­bel to ren­der the Close but­ton, to let as­sis­tive tech­nolo­gies know the in­tent of this but­ton. You may also use “Minimize”, “Maximize”, “Restore” and “Help” like so:

A Title Bar

A Maximized Title Bar

A Helpful Bar

<div class=“ti­tle-bar”> <div class=“ti­tle-bar-text”>A Title Bar</div> <div class=“ti­tle-bar-con­trols”> <button aria-la­bel=“Min­i­mize”></​but­ton> <button aria-la­bel=“Max­i­mize”></​but­ton> <button aria-la­bel=“Close”></​but­ton> </div> </div>

<br />

If you work in or around the film in­dus­try, there is a de­cent chance you have used the work of The Numbers this month, whether you re­alise it or not.

Its hand-re­searched data is the high­est qual­ity, track­ing box of­fice grosses, bud­gets, home video and stream­ing across more than 78,000 films and 236,000 peo­ple. It gets north of eight mil­lion vis­i­tors a year, and is treated as THE de­fin­i­tive au­thor­ity by jour­nal­ists, aca­d­e­mics, film­mak­ers, pre­dic­tion mar­kets, and even Guinness World Records.

And it was this GOAT sta­tus which caused the cat­a­strophic events of March this year.

On the 5th March 2026, TheNumbers.com web­site van­ished.

The site was down for over a week, with­out ex­pla­na­tion. A week later, it resur­faced at a frac­tion of its for­mer size. Gone were the his­tor­i­cal charts, the in­di­vid­ual movie pages, and even the much-loved Report Builder.

With only a generic “we’re re­build­ing, please bear with us” mes­sage to go on, the in­ter­net re­sponded as it al­ways does - with con­fu­sion, anger, and con­spir­acy the­o­ries. One Reddit the­ory even sug­gested it was a de­lib­er­ate rug pull de­signed to crip­ple the free site to push peo­ple to­wards paid prod­ucts.

Three months on, I spoke at length with Bruce Nash, founder and CEO of The Numbers, about what hap­pened. He de­scribes quite an un­pleas­ant and event­ful ex­pe­ri­ence:

We got a lot of an­gry emails from peo­ple who are like, ‘Where’s this page that you used to have and you don’t have any­more?’

We got a lot of an­gry emails from peo­ple who are like, ‘Where’s this page that you used to have and you don’t have any­more?’

Within his tale are a num­ber of things that should worry any­one who runs, re­lies on, or sim­ply ap­pre­ci­ates the in­ter­net.

On Friday 17 October 1997, math­e­mati­cian and for­mer IBM soft­ware de­vel­oper Bruce Nash launched a Geocities site that tracked 300 films.

Bruce de­scribed the launch in a 20th an­niver­sary es­say (which now sur­vives only in the Internet Archive, for rea­sons that will be­come clear):

I hit a but­ton in an Access data­base, up­loaded some HTML pages to Geocities, and made a brief an­nounce­ment on the Hollywood Stock Exchange mes­sage boards to let peo­ple know that I was start­ing to an­a­lyze box of­fice for films to help them pick MovieStocks to trade on HSX.

I hit a but­ton in an Access data­base, up­loaded some HTML pages to Geocities, and made a brief an­nounce­ment on the Hollywood Stock Exchange mes­sage boards to let peo­ple know that I was start­ing to an­a­lyze box of­fice for films to help them pick MovieStocks to trade on HSX.

From those hum­ble be­gin­nings, Bruce and the team he built around the site turned The Numbers into the film in­dus­try’s most re­li­able fi­nan­cial source.

At the start of 2026, the data­base tracked 78,396 movies, 178,375 the­atri­cal re­lease records, and 236,176 peo­ple.

During its life­time, the chal­lenges The Numbers has faced have changed im­mensely. For its first quar­ter cen­tury or so, the traf­fic was man­age­able and mostly po­lite. As Bruce puts it:

Pre-AI, we got hu­man traf­fic, mostly well-be­haved search en­gine crawlers, and a few peo­ple crawl­ing the site for per­sonal pro­jects. If some­one got too greedy, we could spot them and block them.

Pre-AI, we got hu­man traf­fic, mostly well-be­haved search en­gine crawlers, and a few peo­ple crawl­ing the site for per­sonal pro­jects. If some­one got too greedy, we could spot them and block them.

Over the past cou­ple of years, web­site own­ers the world over have seen their web traf­fic change. What was ini­tially only peo­ple brows­ing gave way to an ever-in­creas­ing num­ber of bots. By 2024, au­to­mated traf­fic had sur­passed hu­man traf­fic, and just last month, Cloudflare an­nounced that bots had reached 57.5% of web page re­quests.

The Numbers felt this shift in two dis­tinct waves. The first started around 2024:

We saw a big in­crease in crawls as AI train­ing joined the search en­gine crawlers. The AI crawlers are gen­er­ally less well-be­haved than the search en­gines, which in­creased the man­age­ment tasks for us to keep the site run­ning smoothly.

We saw a big in­crease in crawls as AI train­ing joined the search en­gine crawlers. The AI crawlers are gen­er­ally less well-be­haved than the search en­gines, which in­creased the man­age­ment tasks for us to keep the site run­ning smoothly.

And the sec­ond wave was stronger and more dam­ag­ing:

Around December 2025, we saw an­other big spike in traf­fic which I at­tribute to agen­tic AI: a com­bi­na­tion of AI agents that scrape sites in re­sponse to prompts, and peo­ple be­ing able to write agents that scrape sites.

Around December 2025, we saw an­other big spike in traf­fic which I at­tribute to agen­tic AI: a com­bi­na­tion of AI agents that scrape sites in re­sponse to prompts, and peo­ple be­ing able to write agents that scrape sites.

Like every data-rich site, by early 2026 The Numbers was be­ing ham­mered hard by AI bots scrap­ing its pages over and over at an in­dus­trial scale. Bruce says that only 10% of their traf­fic is from hu­mans brows­ing the site, with the rest com­ing from AI bots and au­to­mated traf­fic.

This put enor­mous strain on the site, but Bruce and his team were able to take mea­sures to mit­i­gate the worst of it. One of the clever­est was talk­ing to the ro­bots in their own lan­guage:

There’s stuff on the site which is de­signed for an LLM to read, so that it can tell some­body ‘here’s how you li­cence the data’ rather than ‘here’s how you scrape the web­site’. It’s had a huge ef­fect. We’re now get­ting prob­a­bly ten times the vol­ume of li­cens­ing en­quiries.

There’s stuff on the site which is de­signed for an LLM to read, so that it can tell some­body ‘here’s how you li­cence the data’ rather than ‘here’s how you scrape the web­site’. It’s had a huge ef­fect. We’re now get­ting prob­a­bly ten times the vol­ume of li­cens­ing en­quiries.

But mit­i­ga­tion is not the same as es­cape. From December through early March, the team strug­gled to keep the site alive un­der the load. Bruce es­ti­mates that:

Around 90% of our time was spent keep­ing the ex­ist­ing site run­ning while we spent our spare mo­ments work­ing on a new and im­proved sys­tem.

Around 90% of our time was spent keep­ing the ex­ist­ing site run­ning while we spent our spare mo­ments work­ing on a new and im­proved sys­tem.

The prob­lem was com­pounded by the site’s age: thirty years old, with ap­prox­i­mately 160,000 source files serv­ing around 2 mil­lion pages.

Then, in the early hours of Thursday 5 March, the servers col­lapsed.

The team scram­bled to un­der­stand what had hap­pened, ini­tially as­sum­ing it was the sheer weight of AI traf­fic. It seems AI was to blame… but pos­si­bly not only in the way they first thought.

Buried in the flood of agen­tic traf­fic, the site’s logs showed some­thing more pointed than scrap­ing. As Bruce de­scribes it:

Some of these used the site us­ing le­git­i­mate URLs, oth­ers were look­ing for back doors, most likely so they could get to the data be­fore it ap­peared on the site, or to ma­nip­u­late the data pre­sented to users.

Some of these used the site us­ing le­git­i­mate URLs, oth­ers were look­ing for back doors, most likely so they could get to the data be­fore it ap­peared on the site, or to ma­nip­u­late the data pre­sented to users.

On the ad­vice of a friend who works in cy­ber­se­cu­rity, the old server stayed off. For good. Restoring the back­ups and nurs­ing the thirty-year-old site back on­line would have meant de­fend­ing 160,000 legacy files against at­tack­ers who had spent months prob­ing them.

The team rushed up a skele­ton ver­sion of the web­site on new in­fra­struc­ture, which could at least keep de­liv­er­ing the lat­est box of­fice fig­ures while they took stock of what had hap­pened and what to do next. It went live on Friday 13 March.

At first glance, The Numbers may not seem like an ob­vi­ous tar­get. It does­n’t col­lect credit card in­for­ma­tion, and there is no juicy cus­tomer data to flip on the dark web. It is a small, in­de­pen­dent com­pany that pub­lishes how much money movies make.

How could some­one ex­pect to make money purely from hav­ing pri­vate ac­cess to their site?

In case you haven’t guessed it yet, it’s linked to pre­dic­tion mar­kets.

Polymarket runs weekly mar­kets on open­ing week­ends, and names The Numbers as the ul­ti­mate source of truth:

The ‘Daily Box Office Performance’ fig­ures found on the ‘Box Office’ tab on this movie’s The Numbers page will be used to re­solve this mar­ket once the val­ues for the 3-day open­ing week­end are fi­nal.

The ‘Daily Box Office Performance’ fig­ures found on the ‘Box Office’ tab on this movie’s The Numbers page will be used to re­solve this mar­ket once the val­ues for the 3-day open­ing week­end are fi­nal.

The sums on any sin­gle week­end mar­ket are mod­est by fi­nan­cial-mar­ket stan­dards, typ­i­cally in the tens to hun­dreds of thou­sands of dol­lars, with a cou­ple of mil­lion dol­lars across live box of­fice mar­kets at any given time.

If you could see The Numbers data be­fore every­one else, every sin­gle week, you would have a sig­nif­i­cant edge over all the other traders - learn­ing the an­swers slightly ahead of pub­li­ca­tion would al­low you to front-run the trades.

In a sit­u­a­tion like this, it is hard to know for cer­tain what hap­pened. We know that the logs showed months of au­to­mated prob­ing and scrap­ing of the site, but what fi­nally brought the site down, and who did it, re­mains an open ques­tion.

But the the­ory that some­one used AI to de­velop an ad­van­tage in a pre­dic­tion mar­ket is en­tirely plau­si­ble. The Numbers ex­pe­ri­ence shows us that:

We now live in a world where a movie sta­tis­tics web­site is worth hack­ing be­cause pre­dic­tion mar­kets em­power any­one to turn al­most any data into money.

We now live in a world where a movie sta­tis­tics web­site is worth hack­ing be­cause pre­dic­tion mar­kets em­power any­one to turn al­most any data into money.

Hacking web­sites is now some­thing any­one can do with a cheap AI sub­scrip­tion.

Hacking web­sites is now some­thing any­one can do with a cheap AI sub­scrip­tion.

The web, as we have it, is in­cred­i­bly frag­ile in the face of large-scale swarms of agen­tic AI bots.

The web, as we have it, is in­cred­i­bly frag­ile in the face of large-scale swarms of agen­tic AI bots.

In November 2025, Anthropic (the AI lab be­hind Claude) pub­lished a re­port on what it called the first doc­u­mented AI-orchestrated cy­ber es­pi­onage cam­paign. A state-spon­sored group had used its cod­ing tool to at­tack roughly 30 or­gan­i­sa­tions, with the AI per­form­ing 80% to 90% of the work and hu­mans step­ping in at only 4 to 6 de­ci­sion points per cam­paign.

Anthropic’s own con­clu­sion was:

The bar­ri­ers to per­form­ing so­phis­ti­cated cy­ber­at­tacks have dropped sub­stan­tially, and we pre­dict that they’ll con­tinue to do so.

The bar­ri­ers to per­form­ing so­phis­ti­cated cy­ber­at­tacks have dropped sub­stan­tially, and we pre­dict that they’ll con­tinue to do so.

In an ear­lier threat re­port, Anthropic were even clearer:

Criminals with few tech­ni­cal skills are us­ing AI to con­duct com­plex op­er­a­tions, such as de­vel­op­ing ran­somware, that would pre­vi­ously have re­quired years of train­ing.

Criminals with few tech­ni­cal skills are us­ing AI to con­duct com­plex op­er­a­tions, such as de­vel­op­ing ran­somware, that would pre­vi­ously have re­quired years of train­ing.

Meanwhile, an au­tonomous AI pen­e­tra­tion tester called XBOW reached num­ber one on HackerOne’s US leader­board, the rank­ing of the peo­ple (formerly all peo­ple) who find se­cu­rity holes in real com­pa­nies for boun­ties, sub­mit­ting nearly 1,060 vul­ner­a­bil­i­ties along the way.

Getting ac­cess to a thirty-year-old web­site with 160,000 legacy files is ex­actly the kind of known-flaw sur­face that AI tools have made cheap to probe. The ex­per­tise bar­rier that once pro­tected small sites from all but the most de­ter­mined at­tack­ers has largely evap­o­rated.

Bruce and his team were rel­a­tively lucky. Despite hav­ing their en­tire site knocked out overnight, they were able to keep go­ing. The Numbers has al­ways been free to use, and the site has­n’t re­lied heav­ily on ad­ver­tis­ing for the past few years, so the out­age did­n’t de­stroy an in­come stream they de­pended on.

Their core busi­ness is tied to sell­ing bulk data through the OpusData ser­vice, pro­duc­ing comp analy­sis re­ports for film­mak­ers and in­vestors, and pub­lish­ing the Business Report - all of which were un­af­fected by the pub­lic site go­ing down.

But they do need to build an en­tirely new web­site, from scratch, to host those 78,396 movies, 178,375 re­lease records and 236,176 peo­ple. Restoring the site from a backup was­n’t an op­tion, as Bruce points out:

It was re­ally clear that we could­n’t just put that server up again, be­cause it would in­evitably be brought down again, pos­si­bly within min­utes.

It was re­ally clear that we could­n’t just put that server up again, be­cause it would in­evitably be brought down again, pos­si­bly within min­utes.

That is why the site came back bare-bones in mid-March, and why fea­tures are re­turn­ing grad­u­ally rather than all at once.

Right now, the team is hav­ing to re­con­sider what a pub­lic web­site even means in 2026. Bruce’s analy­sis is that The Numbers used to serve two au­di­ences (human be­ings and search en­gines) and now serves roughly six: hu­mans, search en­gines, LLM train­ing runs, prompt-based AI traf­fic, agen­tic AI, and pre­dic­tion mar­ket pun­ters. Each has dif­fer­ent needs and a dif­fer­ent traf­fic pro­file. As he puts it:

We’ve gone from a world where run­ning a web site meant fo­cus­ing on three things (content, ads, and SEO) to about eight to ten dif­fer­ent fac­tors that go into every de­sign de­ci­sion.

We’ve gone from a world where run­ning a web site meant fo­cus­ing on three things (content, ads, and SEO) to about eight to ten dif­fer­ent fac­tors that go into every de­sign de­ci­sion.

The goal, he says, is to sup­port all six au­di­ences, with new OpusData ser­vices and on­line fea­tures for Business Report sub­scribers, and, im­por­tantly, to help reg­u­lar hu­man users of the site re­gain the data it has al­ways pro­vided, some of it in new and im­proved form.

Pretty bad, tbh. Enough that site own­ers such as Bruce have to ques­tion the value of some­thing that will take so much time and money to build and de­fend.

Cloudflare, which pro­tects a huge share of the world’s web­sites, pub­lishes data on how many pages each AI plat­form crawls for every one vis­i­tor it sends back to the web­sites it crawled.

Google crawls about five pages for every vis­i­tor it sends you. OpenAI crawls over 1,000. Anthropic crawls over 38,000 pages for every sin­gle vis­i­tor it refers.

Note that the scale is log­a­rith­mic, i.e. each step along the bot­tom is ten times big­ger than the last, be­cause oth­er­wise the dif­fer­ences are quite lit­er­ally too large for me to in­clude on one chart.

For the his­tory of the in­ter­net to date, the prin­ci­ple of the open web was that, in re­turn for let­ting the search en­gine ro­bots read your site, they would send you read­ers. But now, that trade no longer ap­plies. The num­ber of ro­bots has ex­ploded, and they no longer send any­one back.

When this fire­hose is aimed at a small site, it can in­flate the band­width bill and pos­si­bly even take down an en­tire site. Sites which can re­late to Bruce’s ex­pe­ri­ence in­clude:

Read the Docs, a non-profit that hosts doc­u­men­ta­tion for open-source soft­ware, who watched a sin­gle crawler down­load 73 ter­abytes of zipped HTML in one month, cost­ing it over $5,000 in band­width.

Read the Docs, a non-profit that hosts doc­u­men­ta­tion for open-source soft­ware, who watched a sin­gle crawler down­load 73 ter­abytes of zipped HTML in one month, cost­ing it over $5,000 in band­width.

iFixit, the re­pair-guide data­base, logged a mil­lion hits from Anthropic’s crawler in a sin­gle day.

iFixit, the re­pair-guide data­base, logged a mil­lion hits from Anthropic’s crawler in a sin­gle day.

Triplegangers, a seven-per­son com­pany sell­ing 3D scans, was knocked of­fline dur­ing busi­ness hours by OpenAI’s bot, in what its CEO de­scribed as “basically a DDoS at­tack”. The founder of code-host­ing ser­vice SourceHut re­ported spend­ing “anywhere from 20 – 100% of my time in any given week” fight­ing AI crawlers, with “dozens of brief out­ages per week”.

Triplegangers, a seven-per­son com­pany sell­ing 3D scans, was knocked of­fline dur­ing busi­ness hours by OpenAI’s bot, in what its CEO de­scribed as “basically a DDoS at­tack”. The founder of code-host­ing ser­vice SourceHut re­ported spend­ing “anywhere from 20 – 100% of my time in any given week” fight­ing AI crawlers, with “dozens of brief out­ages per week”.

The ed­i­tor of Linux news site LWN de­scribed crawler traf­fic from “literally mil­lions of IP ad­dresses” and con­cluded: “it is a dis­trib­uted de­nial-of-ser­vice at­tack”.

The ed­i­tor of Linux news site LWN de­scribed crawler traf­fic from “literally mil­lions of IP ad­dresses” and con­cluded: “it is a dis­trib­uted de­nial-of-ser­vice at­tack”.

When the GNOME open-source pro­ject mea­sured its traf­fic, roughly 97% turned out to be bots.

When the GNOME open-source pro­ject mea­sured its traf­fic, roughly 97% turned out to be bots.

A uni­ver­sity li­brary banned 16,000 IP ad­dresses in 48 hours to keep its cat­a­logue on­line.

A uni­ver­sity li­brary banned 16,000 IP ad­dresses in 48 hours to keep its cat­a­logue on­line.

The Wikimedia Foundation, which runs Wikipedia, re­ported in April 2025 that bots ac­count for about 35% of its pageviews but at least 65% of its most ex­pen­sive traf­fic, be­cause crawlers bulk-read ob­scure pages that hu­man read­ers rarely touch.

Six months later came the other half of the squeeze, when Wikipedia’s hu­man pageviews fell roughly 8% year on year, as peo­ple in­creas­ingly get Wikipedia’s knowl­edge from AI sum­maries with­out ever vis­it­ing Wikipedia. The ma­chines are tak­ing both the con­tent and the read­ers at an in­dus­trial scale, too.

AI tools are some of the most pow­er­ful and de­struc­tive things hu­mans have ever cre­ated. And they are be­ing ef­fec­tively tested by the pub­lic in real time in the real world. When the Manhattan Project was try­ing to work out the power of their atomic tech, they did not do so by send­ing every­one the specs each morn­ing and see­ing which houses blew up.

The world we have built thus far is so in­cred­i­bly ill-pre­pared for the power and scale of the AI mod­els we all have ac­cess to.

I don’t wish for this to sound like a one-sided anti-AI fear cam­paign. There is a lot to like about AI and what it can do for the hu­man race. But we do need to con­sider the world we’re cur­rently step­ping into.

What breaks first are the things built for the old in­ter­net. The open web was built on as­sump­tions such as that vis­i­tors are mostly hu­man, that traf­fic roughly tracks read­er­ship, and that the cost of serv­ing your site is re­lated to the value you get from serv­ing it. Every one of those as­sump­tions is now out of date.

Software ren­der­ing in 500 lines of bare C++

In this se­ries of ar­ti­cles, I aim to demon­strate how OpenGL, Vulkan, Metal, and DirectX work by writ­ing a sim­pli­fied clone from scratch. Surprisingly, many peo­ple strug­gle with the ini­tial hur­dle of learn­ing a 3D graph­ics API. To help with this, I have pre­pared a short se­ries of lec­tures, af­ter which my stu­dents are able to pro­duce quite ca­pa­ble ren­der­ers.

The task is as fol­lows: us­ing no third-party li­braries (especially graph­ics-re­lated ones), we will gen­er­ate an im­age like this:

Warning: This is a train­ing ma­te­r­ial that loosely fol­lows the struc­ture of mod­ern 3D graph­ics li­braries. It is a soft­ware ren­derer. I do not in­tend to show how to write GPU ap­pli­ca­tions — I want to show how they work. I firmly be­lieve that un­der­stand­ing this is es­sen­tial for writ­ing ef­fi­cient ap­pli­ca­tions us­ing 3D li­braries.

The start­ing point

The fi­nal code con­sists of about 500 lines. My stu­dents typ­i­cally re­quire 10 to 20 hours of pro­gram­ming to start pro­duc­ing such ren­der­ers. The in­put is a 3D model com­posed of a tri­an­gu­lated mesh and tex­tures. The out­put is a ren­dered­ing. There is no graph­i­cal in­ter­face, the pro­gram sim­ply gen­er­ates an im­age.

To min­i­mize ex­ter­nal de­pen­den­cies, I pro­vide my stu­dents with a sin­gle class for han­dling TGA files — one of the sim­plest for­mats sup­port­ing RGB, RGBA, and grayscale im­ages. This serves as our foun­da­tion for im­age ma­nip­u­la­tion. At the be­gin­ning, the only avail­able func­tion­al­ity (besides load­ing and sav­ing im­ages) is the abil­ity to set the color of a sin­gle pixel.

There are no built-in func­tions for draw­ing line seg­ments or tri­an­gles — we will im­ple­ment all of this man­u­ally. While I pro­vide my own source code, writ­ten along­side my stu­dents, I do not rec­om­mend us­ing it di­rectly, as do­ing the work your­self is es­sen­tial to un­der­stand­ing the con­cepts. The com­plete code is avail­able on github, and you can find the ini­tial source code I pro­vide to my stu­dents here. Behold, here is the start­ing point:

#include “tgaimage.h”

con­s­t­expr TGAColor white = {255, 255, 255, 255}; // at­ten­tion, BGRA or­der con­s­t­expr TGAColor green = { 0, 255, 0, 255}; con­s­t­expr TGAColor red = { 0, 0, 255, 255}; con­s­t­expr TGAColor blue = {255, 128, 64, 255}; con­s­t­expr TGAColor yel­low = { 0, 200, 255, 255};

int main(int argc, char** argv) { con­s­t­expr int width = 64; con­s­t­expr int height = 64; TGAImage frame­buffer(width, height, TGAImage::RGB);

int ax = 7, ay = 3; int bx = 12, by = 37; int cx = 62, cy = 53;

frame­buffer.set(ax, ay, white); frame­buffer.set(bx, by, white); frame­buffer.set(cx, cy, white);

frame­buffer.write_t­ga_­file(“frame­buffer.tga”); re­turn 0; }

It pro­duces the 64x64 im­age frame­buffer.tga, here I scaled it for bet­ter read­abil­ity:

Compilation

git clone https://​github.com/​ss­loy/​tinyren­derer.git && cd tinyren­derer && cmake -Bbuild && cmake –build build -j && build/​tinyren­derer obj/​di­a­blo3_­pose/​di­a­blo3_­pose.obj obj/​floor.obj

Teaser: few ex­am­ples made with the ren­derer

Comments

Please en­able JS and dis­able any ad blocker

The re­lease of Kimi K3 has opened a fresh round of angst and con­fused dis­course. There’s a loud co­hort of jour­nal­ists, busi­ness lead­ers, and politi­cians ar­gu­ing that open source AI is a dan­ger­ous threat. OpenAI’s Dean Ball:

One prob­a­ble out­come of an open-weight-model-dom­i­nant world is full AI com­mu­nism… rather than a mar­ket prod­uct, AI is a “public good”

One prob­a­ble out­come of an open-weight-model-dom­i­nant world is full AI com­mu­nism… rather than a mar­ket prod­uct, AI is a “public good”

Freely avail­able AI for any­one? The hor­ror!

Frontier labs’ case against open source AI is es­sen­tially: Open source mod­els1 are dan­ger­ous (and un-Amer­i­can!). We should open the AI Pandora’s Box, but only with re­spon­si­ble gate­keep­ers (toll col­lec­tors, prefer­ably us!). Only trusted users (our most prof­itable cus­tomers) should be able to use it.

I want to ad­dress some bad ar­gu­ments against open source AI, but some cor­rec­tions on how the ar­gu­ment is be­ing framed are in or­der:

Open source soft­ware is the foun­da­tion for com­mer­cial soft­ware​

Ball’s fram­ing strolls past the fact that open source soft­ware is the foun­da­tion of all pro­pri­etary soft­ware. This in­cludes fron­tier mod­els, which at the end of the day are soft­ware prod­ucts.

Open source soft­ware is coun­ter­in­tu­itive to peo­ple out­side of the soft­ware in­dus­try. Why work hard on a prod­uct, and give it away for free?

A soft­ware pro­gram is a stack of pro­grams, with each layer built on top of an­other. To build Uber, you need pro­gram­ming lan­guage frame­works, soft­ware to send and re­ceive web traf­fic, data analy­sis tools, and count­less other com­po­nents. Most of these are not dif­fer­en­tia­tors for a com­mer­cial en­ter­prise, so it serves com­mer­cial ac­tors to co­op­er­ate on lower com­po­nents in the stack and com­pete on the higher level pieces that ac­tu­ally dif­fer­en­ti­ate their prod­ucts.

Frontier labs would very much like AI mod­els to not fall into the cat­e­gory of “so com­mon­place that it does­n’t make sense to com­pete on”. Whether that hap­pens re­mains to be seen.

Open source soft­ware is very dif­fi­cult to sup­press​

In re­al­ity, the ar­gu­ment about sup­press­ing open source mod­els is mostly be­side the point. History tells us that sup­pres­sion of open source soft­ware is ex­tremely dif­fi­cult, and at­tempt­ing to do so only serves to weaken com­pa­nies against in­ter­na­tional com­peti­tors. A brief his­tory of en­cryp­tion is il­lus­tra­tive:

Today, PGP is a com­mon­place tool any­one can use, and most devs are at least fa­mil­iar with. But when Phil Zimmermann in­vented it in 1991, the U.S. gov­ern­ment con­sid­ered en­cryp­tion to be mil­i­tary tech­nol­ogy. A crim­i­nal in­ves­ti­ga­tion was opened against Zimmermann.

When Netscape cre­ated SSL, the U.S. gov­ern­ment al­lowed it to only re­lease a weak­ened ver­sion of it in­ter­na­tion­ally. These con­trols back­fired: it was much eas­ier to ac­quire the weak­ened, “international” ver­sion, so even many Americans used it.

Export con­trols did not suc­ceed in lim­it­ing en­cryp­tion as the gov­ern­ment wished. SSL, PGP, and sim­i­lar tools were read­ily avail­able through­out the world, and the con­trols dis­ad­van­taged Americans. Eventually, courts ruled that re­leas­ing en­cryp­tion source code is pro­tected speech, and the U.S. gov­ern­ment re­laxed en­cryp­tion ex­port con­trols.

Narrowing sup­pres­sion to “Chinese” mod­els won’t make things eas­ier. What, ex­actly, makes an AI model Chinese? Is it Chinese if, as fron­tier mod­els al­lege, it was dis­tilled from American mod­els? What about if an American fine-tunes a Chinese model? At best, reg­u­lat­ing AI in this way will (temporarily) en­cum­ber Americans with red tape and di­min­ished AI ac­cess rel­a­tive to the rest of the world.

Open source AI is not just a Chinese phe­nom­e­non​

There’s an as­sump­tion baked into the open source AI de­bate that open source mod­els are some­thing that only the Chinese gov­ern­ment has an in­cen­tive to de­velop. In re­al­ity there are many com­mer­cial ac­tors with am­ple in­cen­tive to de­velop open source AI:

Chip mak­ers: Nvidia CEO Jensen Huang has de­scribed what Nvidia is build­ing as “token fac­to­ries”2. Nvidia does­n’t care if its chips are used to run fron­tier mod­els or cheap open source mod­els3 - it just wants to pro­duce and gen­er­ate de­mand for as many to­kens as pos­si­ble. And in­deed Nvidia has it­self re­leased a suite of open source mod­els.

American Startups: Thinking Machines Lab re­cently re­leased a pow­er­ful open source model. They and oth­ers are bet­ting that mod­els will be com­modi­tized, and a de­fen­si­ble moat can be built around aux­il­iary ser­vices that com­ple­ment or cus­tomize mod­els.

Enterprise AI users: Frontier model cus­tomers aren’t cur­rently all that ac­tive in open source AI de­vel­op­ment, but they will be. They will want lower-cost mod­els for low-com­plex­ity tasks, and more fine-grained con­trol over cus­tomer-fac­ing fea­tures.

BigCos: You can be sure that Google and Meta are watch­ing OpenAI’s new ad prod­uct closely. Should fron­tier model ad prod­ucts gain trac­tion, it would be well worth it for these be­he­moths to com­modi­tize ad-free, open source mod­els to squash ad com­pe­ti­tion.

The “AI race” is… what, ex­actly?​

Much of the angst around China’s mod­els cen­ters on “losing the AI race”. But what’s the goal of this race? Is it to de­velop the best model? To sell the most to­kens? To de­stroy hu­man­ity first?

Talking about an “AI Race” does­n’t make more sense than talk­ing about an “Internet Race”. We’re not com­pet­ing to be the first to send a rocket to the moon, we’re re­act­ing to a new, trans­for­ma­tional tech­nol­ogy. To the ex­tent there’s a race be­tween na­tions, it’s to ab­sorb this tran­si­tion and grow economies. In this fram­ing, free AI mod­els are a boon, not a threat.

Bad ar­gu­ments to fear Chinese AI mod­els​

China is “AI dump­ing!“​

Scott Galloway has ar­gued that free Chinese AI is an at­tempt to elim­i­nate com­peti­tors in the long run:

This is what China did to so­lar pan­els, steel, EVs, and bat­ter­ies. First, they match Western qual­ity, or they don’t even match it. 89%. Close. Actually, match it with cars, they’ve matched it, but go ahead. Then they cut the price by two thirds, then they own the mar­ket.

This is what China did to so­lar pan­els, steel, EVs, and bat­ter­ies. First, they match Western qual­ity, or they don’t even match it. 89%. Close. Actually, match it with cars, they’ve matched it, but go ahead. Then they cut the price by two thirds, then they own the mar­ket.

But apart from chips, AI is­n’t a phys­i­cal good. Solar pan­els and steel re­quire phys­i­cal sup­ply chains, each link of which can­not eas­ily ex­ist on its own. If no one is man­u­fac­tur­ing so­lar pan­els in your coun­try, it’s dif­fi­cult to build a busi­ness sell­ing so­lar-grade sil­i­con wafers.

Software is­n’t like that. An open source model com­ing from China does­n’t pre­vent a fine-tun­ing busi­ness from suc­ceed­ing in the US - quite the op­po­site!

They will spread pro­pa­ganda!​

It’s not un­rea­son­able to as­sume that Chinese mod­els will be shipped with a pro-China point of view. But this is not a rea­son to sup­press them. The mod­els are open source! If any American has an is­sue with the po­lit­i­cal slant of Chinese AI mod­els, they are free to change and re­lease an “Americanized” one. At least within the U.S., it’s dif­fi­cult to fore­see a model seen as hav­ing a dis­torted pro-China bias out­com­pet­ing a sub­stan­tially sim­i­lar model with a dis­torted pro-U.S. bias.

They will add back­doors!​

AI does not change the ba­sic mar­ket for vul­ner­a­bil­i­ties: re­spon­si­ble ac­tors patch them, at­tack­ers ex­ploit them. Limiting tools for re­spon­si­ble ac­tors only serves at­tack­ers.

It’s the­o­ret­i­cally pos­si­ble for a bad ac­tor to em­bed hid­den ad­ver­sar­ial be­hav­ior in a model. But if this hap­pens, it serves the in­ter­ests of re­spon­si­ble ac­tors to find these ex­ploits as soon as pos­si­ble, and the best way to do this is to let any­one who wants to in­spect them.

Open source AI is com­ing​

It does­n’t mat­ter much what pol­icy mak­ers or busi­ness lead­ers want: open source AI is too pow­er­ful, and too dif­fi­cult to con­trol. It’s com­ing, and at­tempts to squash it will not amount to any­thing more than noise along the way.

Footnotes​

I’ll use the terms “open source model” as in, “open weights model”. ↩

I’ll use the terms “open source model” as in, “open weights model”. ↩

Quote taken from Derek Thompson’s re­cent ar­ti­cle on Chinese AI. Which, while we’re here, gets a few things wrong:

who­ever is on the fron­tier is the best placed to dom­i­nate non-fron­tier mar­kets as well, which are just the fron­tier mi­nus n-months, i.e. months in which the fron­tier model mak­ers have been op­ti­miz­ing their cost of serv­ing.

It’s un­clear why this should be the case. Their ac­cess to mas­sive cap­i­tal mat­ters less for small-model de­vel­op­ment, and they lack in­cen­tive to do so rather than push users to their more ex­pen­sive mod­els.

It’s strik­ing the ex­tent to which Claude Code and Codex are prov­ing to be quite sticky; whichever har­ness you start work­ing with is likely to be the one you stick with

Claude Code and Codex are sticky in the way that Coke and Pepsi are sticky: once you choose one, there’s not much rea­son to switch. But this as­sumes sim­i­lar cost and qual­ity. In re­al­ity, cod­ing agents have no moat. It takes a very small in­con­ve­nience to mo­ti­vate users to switch agents, whether that be price dif­fer­ence, model qual­ity, or re­li­a­bil­ity is­sues. ↩

Quote taken from Derek Thompson’s re­cent ar­ti­cle on Chinese AI. Which, while we’re here, gets a few things wrong:

who­ever is on the fron­tier is the best placed to dom­i­nate non-fron­tier mar­kets as well, which are just the fron­tier mi­nus n-months, i.e. months in which the fron­tier model mak­ers have been op­ti­miz­ing their cost of serv­ing.

who­ever is on the fron­tier is the best placed to dom­i­nate non-fron­tier mar­kets as well, which are just the fron­tier mi­nus n-months, i.e. months in which the fron­tier model mak­ers have been op­ti­miz­ing their cost of serv­ing.

It’s un­clear why this should be the case. Their ac­cess to mas­sive cap­i­tal mat­ters less for small-model de­vel­op­ment, and they lack in­cen­tive to do so rather than push users to their more ex­pen­sive mod­els.

It’s strik­ing the ex­tent to which Claude Code and Codex are prov­ing to be quite sticky; whichever har­ness you start work­ing with is likely to be the one you stick with

It’s strik­ing the ex­tent to which Claude Code and Codex are prov­ing to be quite sticky; whichever har­ness you start work­ing with is likely to be the one you stick with

Claude Code and Codex are sticky in the way that Coke and Pepsi are sticky: once you choose one, there’s not much rea­son to switch. But this as­sumes sim­i­lar cost and qual­ity. In re­al­ity, cod­ing agents have no moat. It takes a very small in­con­ve­nience to mo­ti­vate users to switch agents, whether that be price dif­fer­ence, model qual­ity, or re­li­a­bil­ity is­sues. ↩

Ok, it cares a lit­tle - the ocean of cap­i­tal go­ing to train fron­tier mod­els is cer­tainly a good thing for Nvidia. But in the long run, if com­mer­cial to­ken de­mand is re­placed by de­mand for open source to­kens, Nvidia still wins. ↩

Ok, it cares a lit­tle - the ocean of cap­i­tal go­ing to train fron­tier mod­els is cer­tainly a good thing for Nvidia. But in the long run, if com­mer­cial to­ken de­mand is re­placed by de­mand for open source to­kens, Nvidia still wins. ↩