114
Implementing Tic Tac Toe with 170mb of HTML - no JS or CSS (portswigger.net)
submitted 1 year ago by mac@programming.dev to c/programming@programming.dev
26 comments fedilink hide all child comments
top 26 comments
sorted by: hot top controversial new old
[-] addie@feddit.uk 62 points 1 year ago

Well now. A few things, here:

  • there are not 9 × 9 × 9 × 9 × .... possible ways to play. After the first move, 8 squares remain, and so on, so there's at most 9 × 8 × 7 × ... = 9! = 362880 ways that the game can be played, ignoring the fact that most of those can be eliminated as reflections and rotations, or as win positions before you fill the whole board.

  • we don't care how we got there. Each square can either be blank, a cross, or a nought, so 3^9 combos = 19683, and most of those are illegal, as only the boards where there's (one or zero) more crosses than noughts are good. And you don't need to store 'the computer's move', just jump directly to letting the player go again. Let's guess we need at most a quarter of that.

  • we could have created a single web page with 5k anchor elements on it back in the HTML 1.0 days, ignoring the fact that it would have taken a while to download on our 28.8K modems. That wouldn't have been 170 Mb of unnecessary tagging, even with the 'lay it out with tables' style we had at the time.

Google do seem to have a predilection for reinventing the past, poorly. I hear that their bonuses are based on inventing 'new' things, though, so it's in their interest to pass it off?

[-] Treczoks@kbin.social 36 points 1 year ago

Indeed. One could have done the whole thing with a simple, static HTML page.

On top an empty board with 9 clickable fields. Each of them links to a new, pre-rendered board on the same page, with the move of the player and the perfect reply of the computer already in place, and 7 clickable fields. Which link to other, pre-rendered boards with 5 clickable fields remaining, then with three. The last one only has one field open, so this could be pre-filled as a player move.

All in all this would result in 9x7x5x3=945 pre-rendered boards max on that page. And, of course, two links to "You won" and "You Lost". I'm no HTML junkie, so I have no idea how many bytes one would need to produce such a board, but I'm sure this all could easily done way below 170MB.

[-] kogasa@programming.dev 12 points 1 year ago* (last edited 1 year ago)

Some of those boards are impossible, and there are multiple ways to get to most of them, so you only need maybe half of that. There are 5,478 possible valid boards in total if you allow the computer to play any legal move.

[-] Treczoks@kbin.social 6 points 1 year ago

As I described, I'd need way fewer, as the optimal computer counter-move would already be included in the next board.
So if you placed your X in the top left field in the starter image, the link would directly go to a field with the X in the top left, the O in the center position, and links in all the remaining seven positions. And of course the pre-calculation will eliminate some of the boards already, e.g. if the player or computer already won after the third move, where placing a fourth will not make sense.

[-] Illecors@lemmy.cafe 30 points 1 year ago

And that, kids, is why maths is absolutely necessary if you want to amount to anything more than a shitty webdev.

[-] nitefox@sh.itjust.works 2 points 1 year ago

Which is also why I’m a shitty webdev

[-] floofloof@lemmy.ca 11 points 1 year ago* (last edited 1 year ago)

170 Mb of unnecessary tagging

The guy in the blog says mb (millibits) and you say Mb (megabits). I was confused so I checked, and the page is 170MB (megabytes). I agree though, that's inefficient even for an intentionally inefficient idea.

[-] interolivary@beehaw.org 8 points 1 year ago* (last edited 1 year ago)

The guy in the blog says mb (millibits)

a) does anybody actualy use that? How many people reading this thread can say they've actually seen that in real use or used it?

b) I'm fairly convinced you knew what was meant because it's not like it's uncommon to use a minuscule m for "mega" in colloquial usage

Weird performative pedantry or a joke that flew over my head? I give about a 0.5 probability for both

[-] floofloof@lemmy.ca 1 points 1 year ago* (last edited 1 year ago)

I was actually confused enough to have to check. I frequently work with memory, storage and bandwidth calculations so I'm always aware of the distinction between MB and Mb (and MiB, etc.), so I wondered whether "mb" was intentional, if weird.

[-] elint@programming.dev 1 points 1 year ago

Do you really work with memory, storage, and bandwidth? If so, have you EVER run across an instance where memory, storage, or bandwidth were referred to in millibits? Memory, storage, and bandwidth are extremely important in my job, though not my direct focus, and I can say over 50 years as a sysadmin and coder, I have never encountered "mb" and had it actually mean "millibits". Literally not once. Now "Mb" definitely has some ambiguity (in bandwidth, it's used for Megabits, and in memory/storage, it's more often than not a typo of MB), but "mb" actually meaning "millibits"? No, friend. Just no.

[-] floofloof@lemmy.ca 1 points 1 year ago

No, that's why it seemed weird.

[-] Illecors@lemmy.cafe 2 points 1 year ago

Seriously? :D You seriously considered the idea o bits - the smallest possible unit - to be divided into a thousand subunits? :D Get lost

[-] floofloof@lemmy.ca 0 points 1 year ago* (last edited 1 year ago)

I didn't think it through. I think I had "kilo-" in mind. Sorry for being dumb.

[-] clearleaf@lemmy.world 45 points 1 year ago

Modern web development in a nutshell.

[-] eager_eagle@lemmy.world 31 points 1 year ago

ahem excuse me?

modern implementation would have at least a 300mb node_modules/ and a bunch of memory leak sources

[-] choroalp@programming.dev 33 points 1 year ago

170 MEGABYTES. Excusez moi?

[-] interolivary@beehaw.org 5 points 1 year ago* (last edited 1 year ago)

I mean, wouldn't it essentially have to be storing every possible move (well, state) for as many rounds as you want for the player to be able to play at most? And I'm not sure he can take advantage of the fact that you can end up in the same state from multiple other states, which would remove a lot of the redundant ones

[-] coloredgrayscale@programming.dev 3 points 1 year ago

Look at the screenshot at the beginning of the article. Every possible state is stored in a div, with the state encoded in its Id. So it's possible to reuse such "duplicate" states.

Strictly speaking, it would not be allowed for the same ID to occur multiple times.

[-] zout@kbin.social 23 points 1 year ago

Sorry, but, mb, in lowercase? Like millibit?

[-] kinttach@lemm.ee 19 points 1 year ago

“I implemented the FizzBuzz algorithm in only 10 million lines of code!”

[-] cbarrick@lemmy.world 13 points 1 year ago 
char* fizzbuzz(int n) {
    switch (n) {
        case 0: return "fizzbuzz";
        case 1: return "1";
        case 2: return "2";
        case 3: return "fizz";
        case 4: return "4";
        case 5: return "buzz";
        ...
    }
}
[-] MagnoliaMayhem@programming.dev 7 points 1 year ago

A terrifying number of people think like that.

[-] clearleaf@lemmy.world 8 points 1 year ago

For comparison the original StarCraft game asks for 80 uppercase megabytes of HDD (76.294 of whatever we're calling the lowercase thing today) and for RAM it asks for 16MB/15.259mib.

[-] cbarrick@lemmy.world 11 points 1 year ago

whatever we're calling the lowercase thing

  • M: "Mega": 1000^2
  • Mi: "Mebi": 1024^2
  • m: "Milli": 1000^-1
[-] tfcmad@lemmy.ml 6 points 1 year ago

Doesn't seem to work in Firefox? It just displays every combination lol

[-] festus@lemmy.ca 5 points 1 year ago

It uses a newer HTML feature called popover which Firefox doesn't support by default yet.

this post was submitted on 13 Nov 2023
114 points (87.5% liked)

Programming

17314 readers
182 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Rules

  • Follow the programming.dev instance rules
  • Keep content related to programming in some way
  • If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev

founded 1 year ago
MODERATORS
snowe@programming.dev
Ategon@programming.dev
MaungaHikoi@lemmy.nz