In case anyone's wondering what the "Time to learn tech" hat is all about: kzread.info/dash/bejne/iK6gqpOIfaidmsY.html

I think me and Bramus are friends now

@WhirlpoolBrewer

Жыл бұрын

Excellent episode as always! I do wonder if you're slowly poking at Github to fix their links so you can work from the airport better :)

@JimishFotariya97

Жыл бұрын

Surma is watching from behind 😂

@joseperez-ig5yu

Жыл бұрын

Happy to hear that Jake!😊

@bramus

Жыл бұрын

\ (•◡•) /

This episode alias should be called - Do The Write Thing

Subscribe for more HTTP 203 → goo.gle/ChromeDevs

Theses episodes are really interesting. Tanks guys ! One day, when I’m done with college, I’m gonna watch all of them.

I feel the wow moment on this video when reach the createHTMLDocument, great job explaining something Jake

This might be the best http 203 intro yet

@DavidsKanal

Жыл бұрын

YO I remember your Minecraft maps man

@cassieevans8790

Жыл бұрын

No time for cutesy chit-chat!

@DavidsKanal

Жыл бұрын

@@cassieevans8790 There's always time for cutesy chitchatting

@boiimcfacto2364

Жыл бұрын

@@cassieevans8790 IDK why I didn't expect you'd be watching other HTTP203 videos XD. Will we get to see you in another video soon?

This is one of the most interesting web content on the entire platform

Impeccable bringer right there. Glorious performance.

This is excellent. With this one can also simulate some of the loading states and see when the browsers starts rendering things. I am just unhappy about youtube taking three days to suggest me this

Jake's socks represent so much web knowledge )

Props for the informative content :)

Zalig @bramus! 👏

I love that Surma's photo is in a frame on the shelf in the background. Nice tip of the hat to your previous co-host!

Greatest intro of all time

What I would like to see is tooling to generate fewer closing tags. Guess that's a project for the weekend, a new hiccup mode.

cool episode!

Http203 is amazing please upload more vids. I love it!

I like the way you show , the new features 🤩🤩🤩

Went on a deep dive into GML/SGML. Hilarious 😂 This channel is amazing 💯

"World is inside the paragraph or is it just inside the body?" - "Yes" 😂😂😂 Great video, Jake! I really loved it. I'm deep diving in these weeks into tags/tokens parsing for VTT, so this is really interesting

@nguyenhien-ql6vx

Жыл бұрын

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

@nguyenhien-ql6vx

Жыл бұрын

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

@nguyenhien-ql6vx

Жыл бұрын

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

@nguyenhien-ql6vx

Жыл бұрын

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

I still place a space and forward slash on the end of self closing tags. Even though I remember the bug being solved. Maybe it's time to move on. 😂

Awesome episode! Immediately gave my colleague the timestamp on self closing tags because I’m so annoyed seeing in our codebase 🤣

@offroaders123

Жыл бұрын

For some reason, saw that as "lol, HTML go " 😂

Не понимаю половины слов) но контекст понятен. Надеюсь нас много самоучек, спасибо ребятам.

@MrFlashAccount

Жыл бұрын

Продолжай слушать, со временем будешь понимать больше и больше ✊

The first part of the video convinced me that I am not an introvert.

The last trick with 'doc.write' was great, never thought you could get an element during the writing process of the document and append it to another.

I remember doing a lot of XHTML Transitional and a fair bit of Strict.

@jakearchibald

Жыл бұрын

Even with the Content-Type?

So I tried xhtml. It went a bit as expected. My page didn't render, so I started fixing compatibility errors until I got to the point, where the "errors" are part of the framework. Then I gave up. Question: Is it possible to express all new HTML features in xhtml? Are they that backwards compatible?

@jakearchibald

Жыл бұрын

Which errors were impossible to fix?

@MogohViol

Жыл бұрын

@@jakearchibald Oh, no, the errors were not impossible to fix. It was just, that those were part of the framework and I thought, that it's not worth my time to “fix” the framework. So my question is, has the HTML standard evolved that much, that it became impossible to write everything in pure XHTML, or should it (in theory) still be possible to write everything in plain old XHTML?

Welp, I finally have an answer to why doesn't work. Kinda weird but makes sense.

6:10 "GML... is a group of lads names... how do you feel about that?". AWK-ward. That's how

I love the reaveal at the end, I don't even feel it deserves to be called a hack. @18:54 why does the div(&co) go into the heading? I don't think this behaviour is explained by the open elements stack.

@jakearchibald

Жыл бұрын

It isn't the parser that puts the div into the heading, the JS does that

Wait for it...

JAKE HAS MORE F1 MERCH! SICK! pity about danny ricc 😞

@jakearchibald

Жыл бұрын

Yeah, sad to see him go. Hope he gets a decent drive somewhere. Although, Piastri was good in F2.

17:02: Doesn't the browser execute the appended script element? And did you crash your browser

@jakearchibald

Жыл бұрын

No, it only executes it once.

@jakearchibald

Жыл бұрын

In the spec, it's the "already started" state that tracks this html.spec.whatwg.org/multipage/scripting.html#already-started

Can you actually address those weird nested ems with css and queryselector? (not for a moment suggesting that anyone should actually do that!) I didn't realise that xhtml was still a thing tbh, I thought it was xhtml _or_ html5, but not both. I think it would be interesting to use that strict mode during dev but then have it be non-strict in the deployed version. Presumably we can easily do this by changing the content-type

@jakearchibald

Жыл бұрын

If it's in the DOM (the right hand view), then yeah they're addressable with CSS and JS.

@stephenJpollei

Жыл бұрын

I could have sworn that html5 defines an xml set of rules and a tag-soup set of rules.

@jakearchibald

Жыл бұрын

@@stephenJpollei if you serve your page using the XHTML content-type, it triggers the strict XML parser.

What about trailing slashes in HTML... inside an SVG?

@jakearchibald

Жыл бұрын

They work! (There's an example in the episode)

EDIT: At 20:07 you show the Github example using `document.body.append(div)` and I basically put my palm through my face. I've used `body.append()` and know damned well that whatever I'm appending is nested within the `` tag. I have no idea why I thought the below would be any different at first glance, lol. WHOOPS. OP: At 17:50 I assumed that the `.append()` would actually move `div.summary` _outside_ of ``, but I didn't think it'd nest the div _inside_ the `h1` - I thought you'd end up with: Page title

@jakearchibald

Жыл бұрын

Haha don't worry about it! Things like ::after in CSS make this stuff really confusing

@WafflesASAP

Жыл бұрын

@@jakearchibald I actually just Googled the proper definition of "append" and was surprised that the word "after" wasn't used at all. It's defined as: "add (something) as an attachment or supplement." For whatever reason, I've always assumed that "prepend" meant to add something _before_ something else, whereas "append" meant to add something _after_ something else. Today I learned! Thanks Jake!

@jakearchibald

Жыл бұрын

@@WafflesASAP it kinda does what you say. "append" is a relatively new method. The older method is "appendChild". It's appending (or prepending) and item to the child list of the element.

Please explain the difference between a graph and a tree in terms of parser output.

@jakearchibald

Жыл бұрын

In a tree, a node only has a single parent. In the graph system IE used, that wasn't enforced, and wasn't always true.

What is the reason that script requires a separate close tag even when it has a src attribute? I lost count of how many times that one has caught me

@jakearchibald

Жыл бұрын

In HTML, tags either need closing tags, or they don't. It never depended on attributes.

@LeeSmith-cf1vo

Жыл бұрын

@@jakearchibald well I was thinking more that self-closing should be allowed when the attribute is present. But now that you mention it, I can't think of any other example of such a thing. Shame

@jakearchibald

Жыл бұрын

@@LeeSmith-cf1vo self-closing tags weren't a thing when arrived in HTML, and it wouldn't have been compatible to add it later 😞

@stephenJpollei

Жыл бұрын

Pretty sure that not depending on attributes is because that's not something you could specify in SGML schema.

@SimonBuchanNz

Жыл бұрын

@@jakearchibald I just wish there was a warning for that happening: at the moment you get absolutely nothing! If it's at the end of the page (because you don't know about defer, I guess?) you don't even have the content after it disappearing.

I so much would love to see parsing errors (let's call them challanges) in the developer console. C&P to a validator ist so pre-2000 and esp. for generated HTML still necessary.

@jakearchibald

Жыл бұрын

Yeah, I filed that with our devtools team (see the link in the description) but it doesn't look like they're interested.

@HoffmannPeter

Жыл бұрын

@@jakearchibald I read that Issue, but it's already closed, just thought to at least give a statement of support. I don't think it's about performance but human readability and your case of the missing dom-branch that got transfomed away.

@SimonBuchanNz

Жыл бұрын

Surely there's an extension?

Would having a strict mode in html potentially cause pages to fail if a browser addon prevents script loading or otherwise alters it or the html in some way? Would it only affect inline JS or not at all?

@jakearchibald

Жыл бұрын

Good question! I don't think add-ons interact with the parser directly, so I don't think they would cause parsing failures.

@MundoFinky

Жыл бұрын

@@jakearchibald Couldn't a browser extension execute document.write("") ?

@MundoFinky

Жыл бұрын

Wow, XHTML documents don't support document.write and innerHTML checks validity before taking effect. So I guess it's impossible for an extension to make the parsing fail.

@jakearchibald

Жыл бұрын

@@MundoFinky unless they can transform the stream from the server. I don't know much about extensions, so I don't know if that's possible.

does jake remind of sheldon in initial still?

23:42 Wait, is it still not possible to pass a stream from the fetch response to the DOM?

@jakearchibald

Жыл бұрын

Nope, but you can do it yourself using doc.write

@AmirPlusH

Жыл бұрын

@@jakearchibald Thank you so much for the great content! I love it! Few questions though 1) if I stream the fetch response and doc.write it to DOM, does this mean browser will have to do more reflow and repaint as opposed to inserting whole fetch response in one go? 2) If I fetch a badly written response-with a script that removes a previous element “A”- and stream it, “A” will be onscreen until the script is put on DOM, but if I insert the whole response in one go user might see “A” for a split second (side question: is it possible to avoid this, say by asking browser to render response and then insert result into DOM?). If this is the case, is there any situation where I should NOT use this hack to stream response onto page? P.S. sorry for the long question, couldn’t make it shorter.

@jakearchibald

Жыл бұрын

@@AmirPlusH 1) potentially, depending on the speed of the connection. But, the cost of layout is a fair price when it comes to displaying content sooner. It's what _every_ browser does by default when loading a large document. 2) I'm struggling to follow this. Why not test it? There's a JSBin link in the description you can use as a starting point.

@AmirPlusH

Жыл бұрын

@@jakearchibald Thank you very much!

Is streaming HTML a good idea though? Is it faster or a better UX to do that with fetched HTML really?

@jakearchibald

Жыл бұрын

Yep, that's why _every_ browser does it by default

@SimonBuchanNz

Жыл бұрын

It can take seconds to read the bytes off a server in many cases even after the first response byte, and further many servers can send the header and part of the page before it needs eg database data.

🤯

I don't get it! So good browsers will automatically correct your mistakes but they are not always right. So your page might not look the way you intended but it is OK! Because, it creates competition between the browsers? And who is pushing a code which is giving an error on the production? Just have strict rules so when it fails when I am developing it so I can correct it. Am I missing something?

@jakearchibald

Жыл бұрын

It doesn't create competition between browsers, since there's one spec for all browsers to follow. I agree that DevTools could do more to highlight parse errors, but in the meantime there are plenty of validators and linters.

Welcome to another episode of questions that nobody asked

@jakearchibald

Жыл бұрын

😁 More of that coming up in future episodes!

@atikenny

Жыл бұрын

Just to be clear, I loved it, and Keep them coming!!!

I enjoy the videos, but can the audio guy please do a better job? Sometimes i can barely hear them talk, and i turn up the volume, then they say one really loud word or the music comes on blaring... i just want one solid dB level plz

@jakearchibald

Жыл бұрын

Yeah, we had a bit of an audio issue with this episode that wasn't recoverable. Hopefully it'll be better for the next one.

@jordanclark223

Жыл бұрын

@@jakearchibald All good, thanks for the confirmation! And thanks for taking the time to make these, we really enjoy the topics, especially since they are coming from you guys

@ALbertoDoriguzzi

Жыл бұрын

oh me too! The volume is pretty low 😅 …anyway thanks guys, love your videos!

Where is the other guy? is he ok?

Why is Surma using a switch controller for his presentation remote, and how is it connected?

@jakearchibald

Жыл бұрын

kzread.info/dash/bejne/on19qqxmfqzfldY.html 😀 (but I'm Jake, not Surma)

@colin-vandervoort

Жыл бұрын

Not sure if you’re just trolling but Jake talked about the gamepad API in a previous episode

@dbmusictech

Жыл бұрын

Not trolling just mixed up my two brilliant hosts 🤦 Thank you, will look for this episode. Have used the gamepad api before, but never considered it in this context!

@colin-vandervoort

Жыл бұрын

Ah my bad haha. Yeah I haven’t used that API but it seems neat. Maybe at some point I can kick Powerpoint to the curb and build something like Jake has for presenting

I’ve used a lot of things Jeff recommended but I’m sure as hell not purchasing copilot

@jakearchibald

Жыл бұрын

What?

Wouldn't all those issues be solved by just... Closing your tags

You specifically said you wouldn't have any more friends unless an old one died. Bramus, you'll have to kill someone.

@jakearchibald

Жыл бұрын

I'll get them to fight to the death in the next episode

@cassieevans8790

Жыл бұрын

@@jakearchibald *cracks knuckles*

@bramus

Жыл бұрын

😅

great streaming tip, could you achieve this with an aswell? let = document.createElement(''); .setAttribute('sandbox','allow-same-origin'); let doc = .contentDocument; doc.write(''); document.body.append(doc.body.firstElement); ... using an will probably be more resource intensive....i think...

@jakearchibald

Жыл бұрын

Yep, you can do the same trick with an .

did anyone notice that he's using a nintendo switch joycon to switch slides

@jakearchibald

Жыл бұрын

😀 kzread.info/dash/bejne/on19qqxmfqzfldY.html

As a German with some Knowledges about Latin I'd say: "Bra" like "bra", with emphasis and "mus" like "moose", but short and without emphasis But the name might be from a completely different language...

Developing upon a bad solution feels like growing a cancer.

@jakearchibald

Жыл бұрын

What's the bad solution here?

Happy to be the first to comment 🤩

@tejasthorat

Жыл бұрын

xd turning on notifications so wont miss a video.

Looks like google devs are watching youtube content creator how to grow your channel videos

IMHO, browsers should have never allowed anything that wasn't well-formed (XML). Browser "magic" to fix bad HTML, and auto closing paragraphs is overhead that should really no longer be needed. In 2022, I think browsers should insist on well-formed HTML, and as a legacy option, allow for "magic" element closing.

@jakearchibald

Жыл бұрын

Err, did you, urm, watch the episode? At all? In particular, the bit from 5:15 onwards?

@alystair

Жыл бұрын

There is no guarantee of wellformed-ness online, esp. with inconsistent connectivity

@stephenJpollei

Жыл бұрын

xml didn't even exist when first browsers were created. I do use validators for my html. I actually like auto-closing. xml real strength is not requiring a schema, but if you have schema then it doesn't buy you that much. It allowed things like mixing svg and xhtml, but browsers special cased that. And xslt might have been useful.

@sn0kite

Жыл бұрын

@@jakearchibald I did, but I didn't arrive at the same conclusion. I guess I understand how competitive market forces drove browsers to accept mal-formed content, but if all the browsers did the same thing (dreaming), the errors would have been obvious during development, and all browsers would be showing the same thing. Does the content-type=application/xhtml+xml; charset=utf-8 that you mention at 13:38 offer any significant performance improvements compared to the "magic" parser settings used by default?

@jakearchibald

Жыл бұрын

@@sn0kite no performance benefit. It may be slower. Fwiw, I've been working in web performance for over 15 years and I've never seen parser speed be a bottleneck. I guess I don't understand why you think it'd be a good thing that a browser would hide useful content from users. Potentially life-saving content.

is it too much if i asked please go straight to the topic instead of boring openings?

@jakearchibald

Жыл бұрын

Yep

@mythoughtsxcttheexempt2112

Жыл бұрын

I find the intro necessary for some of us... 🤔...

@terrible_-

Жыл бұрын

boo this man. boooooo

@GuillaumeRossolini

Жыл бұрын

Non-native viewers use these intros to calibrate their brain, for example to get used to the accents and mannerisms.

I was impressed but waiting for the magic and then in the end that amazing hack omx. HTTP 203 never let’s me down