The Zombie DOM - old DOM stuff that still haunts us today | HTTP 203

Поділитися
Вставка
  • Опубліковано 13 гру 2021
  • Jake and Surma chat about 'features' of yesterday that still get in our way today. You might have encountered some of them before, but here's why they're weird.
    Bgcolor → goo.gle/3s2Znuq
    X-Mixed-Replace image → goo.gle/3pRgwo2
    Box model and quirks mode → goo.gle/30l5rCQ
    image → goo.gle/3ym1cDC
    document.all in the HTML spec → goo.gle/3oOxOTh
    document.all in the ES spec → goo.gle/3oOQHFK
    Live and static nodelists → goo.gle/30pXlci
    Java bindings for the DOM spec → goo.gle/33gxfcC
    The WebIDL spec → goo.gle/3m1Xn1w
    Document.domain → goo.gle/33sfwiH
    More videos in the HTTP 203 series → goo.gle/HTTP203
    Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs
    Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP203Podcast
    #HTTP203 #ChromeDeveloper #WebDev
  • Наука та технологія

КОМЕНТАРІ • 71

  • @Surefire99
    @Surefire99 2 роки тому +63

    Thank you for calling out APIs that return either items or arrays depending on the number of results. I've had many a murderous thought because of it.

  • @UliTroyo
    @UliTroyo 2 роки тому +45

    This web archeology stuff is fascinating! Like with POSIX, I'm always amazed by all the weird esoterisms we've built into our systems. Of these historical artifacts, part of me thinks "CULL THEM!" and part of me thinks they're beautiful in their ugliness and complexity. Like the endless and uncharted catacombs of Paris or the abandoned metro stations of NYC, there's so much wonder in our civilization's forgotten subspaces. It makes the web feel magical, like you're always one hammer throw away from rediscovering a tunnel that leads to Narnia. Or, more likely I guess, to a vandalized used toilet in an abandoned war bunker.

  • @ShawnBiddle
    @ShawnBiddle 2 роки тому +7

    "Bad Decisions Driven By Good Intentions" absolutely _does_ sound like an MCR album

  • @nielskersic328
    @nielskersic328 2 роки тому +17

    I love these so much. Jake and Surma are so knowledgeable and enjoyable and the production is great too. Happy Halloween, Christmas and Easter!

  • @Krilllind
    @Krilllind 2 роки тому +10

    I was laughing on the outside but crying on the inside while watching this... Not sure what to feel but great episode anyway!

    • @jakearchibald
      @jakearchibald 2 роки тому +3

      This is the best reaction I could have hoped for really

  • @s4ndeep1203
    @s4ndeep1203 2 роки тому +2

    Loved every minute of this episode !

  • @riddixdan5572
    @riddixdan5572 2 роки тому +2

    love your content. I can't get enough of this :D

  • @BobFrTube
    @BobFrTube 2 роки тому +2

    Very much appreciate the explanations. I lived through this evolution, especially when I tried to do screen scraping in the 90s and had to figure out the nascent DOM. The "all" scaler or array thing was just one of a slew of challenges. The other side was the way sites were implemented idiosyncratically. The backward compatibility is amazing though not perfect. I had to junk a device that was too clever by half in using JavaScript that no longer worked. What made it especially challenging is trying to figure this out by experimenting when the actual behavior was perverse.

  • @joshuamccarthy9250
    @joshuamccarthy9250 2 роки тому +1

    I recall a few years ago using a backwards compatibility trick by inserting an tag inside a . Older browsers would ignore the SVG since it wasn't recognized, but it would pick up the tag that contained the bitmap fallback. So yeah, I'm one of those culprits.

  • @MinhNguyen-kv8el
    @MinhNguyen-kv8el 2 роки тому +1

    Thank you for this informative video! Yesterday, I actually encountered the array Htmldocument and I was puzzled why I could not use .map so I ended up using for loop instead.

  • @MichaelSalo
    @MichaelSalo 2 роки тому +15

    I felt sure 'document.write' would be a star in this monster show. But I'm happy to discover a few lesser monsters.

  • @nullcarry6893
    @nullcarry6893 2 роки тому +7

    😂😂😂 This .all is deprecated don’t use it…
    But it’s the web.
    😂😂🤣🤣 I’m crying laughing.

  • @Ma1ne2
    @Ma1ne2 2 роки тому

    Loving this series really! I'm not a huge fan of Google, but these two are making me laugh and learn every single time!

  • @deem3365
    @deem3365 2 роки тому

    Tech history is always a blast to watch

  • @berndeckenfels
    @berndeckenfels 2 роки тому

    Those quirks are good to not know, but your presentation teaches about the inners of the browsers anyway, so good topic

  • @Anton-cv2ti
    @Anton-cv2ti 2 роки тому +5

    If the !DOCTYPE is used as a type of version control, why don't we just define a new version that removes all these shenanigans?

    • @MichaelSalo
      @MichaelSalo 2 роки тому +4

      JS did this once with strict mode. Perhaps there could be a 'DOM strict mode' someday.

    • @jakearchibald
      @jakearchibald 2 роки тому +2

      It's been discussed multiple times, but the benefit never seems big enough.

  • @dom8429
    @dom8429 2 роки тому +3

    would love to have a big website with all of those features and pass it to a junior dev :)

  • @sarahwbs
    @sarahwbs 2 роки тому +2

    I had forgotten about how people used to make popup menus with Java, somehow this reminded me of that. The horror!

  • @maxziebell4013
    @maxziebell4013 2 роки тому +5

    Wonderful episode... make this a recurring theme, please!

  • @sharonlau3963
    @sharonlau3963 Рік тому

    Interesting topic

  • @feldinho
    @feldinho 2 роки тому +3

    @Surma If you're prototyping, it's okay to use the ids directly as variable names. All the html ids that are also valid js variable names are auto-registered as variables under the global scope. Typescript always scream at me but, oh well… ¯\_(ツ)_/¯

    • @ambyjkl
      @ambyjkl 2 роки тому

      I use "window as any" or "window as unknown as Record"

  • @stonebubbleprivat
    @stonebubbleprivat Рік тому

    I would be interested in how much that slows performance (probably almost none) and how much of the code are these edge cases. Except for the stuff at the end, it didn't seem so bad like 'image' as an alias for 'img'. The picture-tag is also written out and not 'pic')

  • @shexec32
    @shexec32 2 роки тому

    Enjoyed the episode with the only downside being it didn't get released as a Halloween troll special.
    Will there be a sequel next Halloween?

  • @hobbyturystaSEO
    @hobbyturystaSEO 2 роки тому

    Can I have episode with H1 "The Old blond Vampire DOM - old DOM from other continet that need everblackgreen those days"

  • @danko95bgd
    @danko95bgd 2 роки тому

    pretty much everything

  • @Stoney_Eagle
    @Stoney_Eagle 2 роки тому +2

    I was hoping that the industrial look was temporary, I like the old set better.
    Are you two going back some day to a coffeeshop type of set, or is this permanent?

  • @HaNdTriXo
    @HaNdTriXo 2 роки тому +3

    Another good one is document referrer or HTTP referer?

  • @prezadent1
    @prezadent1 2 роки тому

    Not sure what a gef image format is.

  • @tim58850
    @tim58850 2 роки тому

    Thank u I am a old time I needs help...

  • @be2wa
    @be2wa 2 роки тому +1

    The shoes, are they gone for good?

  • @ColinRichardson
    @ColinRichardson 2 роки тому

    I thought
    var a = ""
    would make it into the list.

  • @Nielsblog
    @Nielsblog 2 роки тому +2

    Surprised you didn't mention navigator.userAgent, but I suppose that's not as obscure. I didn't know any of these, except the whole live and static NodeList thing. Super annoying to deal with.

    • @31redorange08
      @31redorange08 2 роки тому

      What's wrong with navigator.userAgent?

    • @dassurma
      @dassurma 2 роки тому +3

      @@31redorange08 Mostly that all browsers identify themselves to be... all other browsers at the same time.

    • @31redorange08
      @31redorange08 2 роки тому +1

      @@dassurma But that's not a real problem of the API. Site developers should've been punished for trying to parse it for feature detection.

  • @CyberAcidPlanet
    @CyberAcidPlanet 2 роки тому +3

    Thanks! I hate it.

  • @LeeSmith-cf1vo
    @LeeSmith-cf1vo 2 роки тому +1

    OK, so I get why the likes of `.map` don't exist on NodeList, but can we at least get them on iterators?
    And can we also have a nice way to convert a NodeList to an iterator, so we can use those methods there too?
    Sometimes I don't want to convert it to an array just so I can filter it

    • @jakearchibald
      @jakearchibald 2 роки тому +1

      NodeList is an iterator now, so we can't add map to that for compat reasons

    • @LeeSmith-cf1vo
      @LeeSmith-cf1vo 2 роки тому

      @@jakearchibald 🙁

    • @dassurma
      @dassurma 2 роки тому +1

      TC39 is looking into that: github.com/tc39/proposal-iterator-helpers

    • @vchabal
      @vchabal 2 роки тому +1

      Is this a bad thing? `NodeList.prototype.map = Array.prototype.map`

    • @jakearchibald
      @jakearchibald 2 роки тому +1

      @@vchabal it's always risky editing objects you don't own, but it might be ok in this case

  • @stannone7272
    @stannone7272 2 роки тому

    All this features does not make me proud to be a web dev.

  • @sandeeptottadi
    @sandeeptottadi 2 роки тому

    Hello World!

  • @tim58850
    @tim58850 2 роки тому

    Are u on Facebook?

  • @dailymeow3283
    @dailymeow3283 2 роки тому

    I feel like 1995

    • @alb12345672
      @alb12345672 2 роки тому

      Real men write HTML and JS with notepad!

  • @aarontgove101
    @aarontgove101 2 роки тому +2

    First!

  • @peppigue
    @peppigue 2 роки тому

    As an aspiring tech person, I find this a tad exclusionary. Just a little more laying out the ground around some of these cases would've brought me in on the shenanigans. I understand there are always someone who'll feel like that, but why not include a little more than the experienced crowd? Apart from that I like this format, and these guys work well in it.

    • @jakearchibald
      @jakearchibald 2 роки тому +1

      Happy to fill in some of the details! Which parts did you find exclusionary?

    • @peppigue
      @peppigue 2 роки тому

      @@jakearchibald Thanks for replying. I mean there's a certain quite high level of knowledge/experience assumed by your conversation, and if you lowered it a bit, it could be accessible to a bigger audience. I find a lot of tech people explain stuff as if the audience understands everything except the exact thing being explained. This is often correct in a professional setting, but not in most broader contexts.

    • @jakearchibald
      @jakearchibald 2 роки тому

      @@peppigue since this episode was about a bunch of different 'features', is there a particular section that you didn't find well-explained? What bit of detail was missing?

  • @adamtolbert1296
    @adamtolbert1296 2 роки тому

    Firrrrrst

  • @kaipulfer8229
    @kaipulfer8229 2 роки тому

    Too many jokes and acting and comedy and fooling around, I would appreciate the videos more on the point.... thankx!

    • @jakearchibald
      @jakearchibald 2 роки тому

      I appreciate the honest feedback, but maybe the show just isn't for you. We do this all in one take, so there isn't any acting. This episode in particular was focusing on silly stuff, and I enjoyed having a bit of fun with it. I'd rather it was like this than just a straight reading of facts.

    • @kaipulfer8229
      @kaipulfer8229 2 роки тому

      @@jakearchibald I find the actual content VERY interesting and funny too, the playing around is distracting me and rather unfunny for me. In my eyes you could attract more viewers :)) Thanx for the openness!

    • @jakearchibald
      @jakearchibald 2 роки тому

      @@kaipulfer8229 just so I'm on the same page, can you give me an example or two of what you didn't like? Was it just the intro, or particular parts within the episode too?

    • @kaipulfer8229
      @kaipulfer8229 2 роки тому

      @@jakearchibald You know, I don't want to be ugly here, its so personal to give feedback to a creative work. First: its free what you show to us, thank you so much for that. I wouldn't need the whole 2 person format. Showing the examples and expressing how astonishing they are would be enough and be much shorter and compressed. For me, you too you have far more fun with each other than I have with watching it :)) And I refer to all episodes and the general style. I only give that feedback because I would like to see this original content but the format is annoying me so much, that I do not watch it anymore :)) Selfish guy I am.

    • @jakearchibald
      @jakearchibald 2 роки тому

      @@kaipulfer8229 ah ok, it sounds like the issues here are pretty fundamental rather than just a couple of tweaks. Yeah, I just don't think this show is for you. However, I really appreciate the honest feedback, and hopefully you can find another show to enjoy on the channel!