#dev 2021-11-11

2021-11-11 UTC
inertia, rockorager, nertzy_, Allie, willnorris, KartikPrabhu, alex11, chenghiz_, Seirdy, voxpelli, justache, akevinhuang2, shoesNsocks, [chrisbergr], BinarySavior, [jeremycherfas], ranuzz, [calumryan], kogepan, neocow, schmudde, sebsel, vilhalmer, squarepants, hans1963[d], [KevinMarks], Zegnat, tetov-irc, noobranu and kogepan_ joined the channel; rockorager left the channel
#
Zegnat Seb[d]: I did not catch your question about sync/async JS very well on mic, if you had any questions there, maybe drop them here? :)
#
capjamesg[d] Is it possible to position an <aside> below the <main> tag on mobile?
#
Zegnat capjamesg[d]: probably? They are simply containing elements, your CSS decides where they are positioned. Much like <div>s would be.
#
Seb[d] Zegnat yea, I was wondering whether or not I had to rewrite my javascript to be compatible with async.
#
Seb[d] But when I marked it async I got errors so there is my answer.
#
Zegnat You should not need to change your JS to make it async, unless your JS depends on running at a certain time during DOM parsing.
#
Zegnat I always ask myself: "does it matter when this runs?" if the answer is no, make it async.
#
capjamesg[d] I was trying to push the sidebar on this page down to the bottom on mobile but it's not going well: https://retro.jamesg.blog/
#
Loqi yea
#
Seb[d] yea I have a 'DOMContentLoaded' thingy in there so you should expect that it then can be run async
#
Zegnat Seb[d]: agreed
#
Zegnat capjamesg[d]: You are using flexbox. You could try adding `order: 2` to the aside when the browser window is less wide
#
Zegnat That way flexbox will put it after your main section
#
capjamesg[d] Good call! I am quite new to flexbox -- positioning elements side by side is frustrating. I didn't know order: 2; existed.
#
capjamesg[d] Zegnat++
#
Loqi Zegnat has 13 karma in this channel over the last year (31 in all channels)
#
capjamesg[d] for the help and swiftness!
akevinhuang and noobranu joined the channel
#
Zegnat Seb[d]: possible problem: if you make the <script> in your head async, it may not have loaded yet when the browser gets to the <script> at the end of your body where you try and call the functions. So the functions will not be defined yet at that point.
#
Zegnat If you do keep it blocking, you probably did not need the DOMContentLoaded at all, because you are triggering the code at the end of body when the elements are already part of the DOM :)
chenghiz_, voxpelli, Allie_ and willnorris joined the channel
#
Seb[d] yea but... I have no such scripts?
#
Seb[d] Or maybe I have and have inlined them?
#
Seb[d] I will have to look at my javascript-situation at another point in time 🙂
#
Seb[d] aaronpk: look into PurgeCSS? tailwind people use it to strip down on all the CSS tags and only have those that are mentioned in the templates
#
jeremycherfas Was there any discussion of the relative merits of waterfall in Firefox vs Chrome?
willnorris, Allie and chenghiz_ joined the channel
#
Zegnat jeremycherfas: not that I caught. The graphs that aaronpk showed came from https://www.webpagetest.org/
#
Zegnat Which is also where most performance stats you might find on blogs, and in that slidedeck about <head>, come from
ranuzz joined the channel
#
jeremycherfas Cool. Thanks zegnat++
#
Loqi zegnat has 14 karma in this channel over the last year (33 in all channels)
voxpelli, squarepants and schmudde joined the channel
#
@aswath ↩️ He better define what he means by voip. I suspect he is restricting his focus to SIP, thattoo interworking w PSTN, including crossbar. IfI restrict myself to full IP then it is solvedw WebRTC and Indieauth.#EnThinnai (twitter.com/_/status/1458822903768793090)
schmudde, Aksel and akevinhuang2 joined the channel
#
GWG Zegnat: Do you want to try to iterate on ticket auth further?
#
@AnandaYudy https://meutia.net/blog/wordpress-vs-blogspot-mana-yang-lebih-baik testing webmention (twitter.com/_/status/1458871071533256712)
#
Zegnat I am not quiet sure what more I need on Ticket Auth just yet
edburns[d], kogepan, schmudde and sebsel joined the channel
#
Zegnat [tantek]1: re https://tantek.com/t5Fh2 - I do wonder if for performance <script async> in <head> will win out as browsers can apply their own scheduling for downloading external scripts in the most optimal way. Maybe paralel with CSS etc. While the elements at the end of the page will be encountered later by the parser. I am just not sure how I would do a testcase for that.
#
Loqi [Tantek Çelik] inspired by @csswizardry @btconf, tried ct.css on my homepage (had to disable HTTP CSP), & only 1 green box! No <script> in <head>, no problem. If you support Progressive Enhancement (all sites should), scripts can go at end of body, right before <...
#
[tantek]1 good questions Zegnat. I suppose what I'm signaling to the browser by putting my scripts at the end is that I *really* don't want *any* bandwidth/CPU wasted on anything script related that could *possibly* be used for faster handling of rendering / first interaction with the page.
#
[tantek]1 because none of the rendering nor interactions *depend* on script.
#
aaronpk i think that's a really good first step beyond reordering stuff in the head
#
[tantek]1 and quickly displaying content and responding to user interaction demands is the top priority of a page, not script
#
[tantek]1 like even if it's just a "few hundred milliseconds" of difference, it's worth it, or even if it's only noticeable on "slower" connections or "older" devices
#
[tantek]1 making slower connections / older devices feel faster or ideally feel *fast* no caveats is worth it
#
Zegnat I am just wondering if that would already be done by the async flag, as browsers should not stop rendering for those. But again, would need a solid test case or a browser engineer who knows how their fetching priorities work to weigh in.
#
Zegnat I too like putting my <script> at </body>. Just today that I thought of if that might be suboptimal or not, haha
#
[tantek]1 say you have images later on in the page, like photos. an async script *might* start downloading (and waste bandwidth) before the image can start downloading
#
Zegnat True, yes, in that case you would want the <script> after those <img>. Good case!
#
Zegnat Also, I think we should be talking about defer and not async, as defer will not interupt the browser thread when it finishes downloading: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
#
Zegnat Just found out about that seconds ago, hehe, never looked up the difference between async/defer prior to today.
#
Zegnat The more you know :D
#
[tantek]1 defer could work. I suppose the "scripts right before </body>" technique doesn't need explicit browser support for "defer" so might work on more (older?) devices?
#
Zegnat Yes
#
Zegnat Though for some of those we are talking about 10+ year old browsers? I am not sure how many of those are actually likely to visit my site. https://caniuse.com/script-defer
#
Zegnat A versio of defer shipped in Firefox 3.5 in 2009, according to caniuse
#
aaronpk 10 years is pretty well into the territory of not needing to worry about support at this point IMO. but, Opera Mini is not to be underestimated https://raddevon.com/articles/where-are-opera-mini-users/
#
[tantek]1 I may very well have organized my scripts into that part of my home page ~10 years ago
#
Zegnat Opera Mini is special anyway, as you need to know what their server side rendering client supports, right? As it will never run JS on-device, at least not when I last used it
#
Zegnat So if you know you have users in Opera Mini markets, you need a whole separate testing flow
#
[tantek]1 or you do Progressive Enhancement and assume the Opera Mini users may never see your scripts
#
[jeremycherfas] What is progressive enhancement?
#
Loqi progressive enhancement is the web development practice of building web pages, sites, apps so they are at least readable, and preferably allow for most if not all interactions, from any kind of browser, and optionally take advantage of additional capabilities (like various CSS & JS features) when available https://indieweb.org/progressive_enhancement
#
[jeremycherfas] Thanks @Loqi
#
Loqi you're welcome, [jeremycherfas]
maxwelljoslyn[d] joined the channel
#
[KevinMarks] I only got a blocking stylesheet for ct.css, whioh is fine as my stylesheet is tiny
tetov-irc, hoenir and rhiaro joined the channel