#dev 2025-01-06
2025-01-06 UTC
grufwub, gRegorLove_, sebbu and [qubyte] joined the channel
# 
capjamesg[d] Does anyone use AVIF on their website?
# capjamesg[d] We don't have a wiki page on it.
# capjamesg[d] [qubyte] How do you convert to AVIF?
# capjamesg[d] Is your code open source?
# 
[qubyte] • the script it calls: https://github.com/qubyte/qubyte-codes/blob/main/scripts/convert-jpegs.js
# capjamesg[d] Thank you!
# capjamesg[d] I have been building a solution in Python for my image needs but it doesn't look like there is great Python AVIF support 😭
# capjamesg[d] PIL has an open PR for support: https://github.com/python-pillow/Pillow/pull/5201
# capjamesg[d] [edit] PIL has an open PR for support: https://github.com/python-pillow/Pillow/pull/5201
# capjamesg[d] I may wait until it's done.
# [qubyte] If examples of picture element markup are useful, my notes index has lots. https://qubyte.codes/notes/
# capjamesg[d] Wow, sharp is neat!
nemonical joined the channel
# capjamesg[d] Node looks good!
# capjamesg[d] Why did you choose 800 / 1600 for the image sizes?
# capjamesg[d] I have been reading into responsive images on web.dev but I worry about serving lower quality images.
# capjamesg[d] Good to know!
# [qubyte] Actually that’d be a really good idea. I use this script by invoking it manually too, and sometimes the image width I want differs, like on my favourite music page. https://qubyte.codes/blog/favourite-music
# capjamesg[d] [qubyte] Is there any advantage of using multiple <source> files when I could use content negotiation?
# capjamesg[d] The average reduction in file size from png/jpeg to webp for all assets on my blog is 332.89KB.
# capjamesg[d] And 363.61KB from png/jpeg to AVIF.
Ed1 joined the channel
# 
Ed1 Hey everyone. I'm trying to implement Webmentions usong webmentions.io and/or telegraphp3k.io, but both website return an error when I login
# Ed1 And it's kind of weird since the "normal" indielogin works just fine
# Ed1 Any idea of what can I debug? Thanks!
# Ed1 Oh wow, thanks! If it might help when I login into telegraph.p3k.io I get this error: HTTP 500
{"response":[],"raw_response":"","response_code":500}# Ed1 Elswehere I get a simple page with unexpected end of JSON input
# Ed1 If I can help providing other informations I'm here, thanks
# Ed1 Amazing, let me retry!
# Ed1 IT WORKS! Thanks again <3
ttybitnik and [Joe_Crawford] joined the channel
# capjamesg[d] [Joe_Crawford] I have a CSS question!
# capjamesg[d] When I load https://jamesg.blog/2024/12/21/persistent-information-on-scroll/, there is a layout shift while the image loads because I haven't set a height/width attribute.
# capjamesg[d] [edit] When I load https://jamesg.blog/2024/12/21/persistent-information-on-scroll/, there is a layout shift while the image loads because I haven't set a height/width attribute.
# capjamesg[d] But the image size adjusts as the page grows with CSS, between a min and max.
# capjamesg[d] How should I set the height/width in HTML so I don't get that layout flash?
# capjamesg[d] Maybe it should just be the image resolution?
# capjamesg[d] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img says "The intrinsic height of the image, in pixels. Must be an integer without a unit."
# capjamesg[d] [edit] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img says "The intrinsic height of the image, in pixels. Must be an integer without a unit."
# GuestZero kind of a stupid question – is the 'indieweb' movement interested in the www in the strict sense or do you bother/are knowledgeable with email servers etc as well..?
[Murray] joined the channel
[mattl] joined the channel
# 
artlung capjamesg[d] yes, setting a height attribute and a width unit has been standard since the first <IMG> tags. CSS then will infer the aspect ratio from that. I have also in some cases set an inline style attribute with an aspect ratio. So for that image: `<img alt="" src="/assets/indiewebwikipage.png" width="2358" height"1260">` or `<img alt="" src="/assets/indiewebwikipage.png" style="aspect-ratio: 2358 / 1260">`
gRegorLove_ and ttybitnik joined the channel
Ed1 joined the channel
# Ed1 I'm trying to implement webmentions in Ghost, but it seems like even if I have everything set up correctly they won't show up. I think it's because they recommendation feature overlaps the webmention.io implementation, is that possible?
# 
Loqi Ghost is an an open source CMS for blogging, general web publishing, newsletters, and paid subscriptions, and also a hosted silo at https://ghost.org https://indieweb.org/Ghost
# capjamesg[d] [Joe_Crawford] If I set the height / width, it stretches the image 😦
# capjamesg[d] Oh, setting height: auto fixes it...
# capjamesg[d] This should be live on my site in a min.
# capjamesg[d] This is all very complicated 😭
# capjamesg[d] I'm setting up a git submodule so my project has access to the images to get the heights and widths.
# capjamesg[d] [mattl] My site?
# Ed1 Okay okay I'm digging into this rabbit hole, but coming out stronger. Apparently there's this helper (ghost_head or smth like this) that includes all the stuff (including webmentions). I just need to try and create a theme that uses all the ghost_head content except for the webmention in order to override their default implementation.
# [Joe_Crawford] @capjamesg[d] images are first class elements, and deserve the care you are taking to get their display right. I know your preferred domain is in the words, but the pictures matter too.
# capjamesg[d] [Joe_Crawford]++
# capjamesg[d] I'm excited to be learning about all these details of the web.
# [Joe_Crawford] Your expertise grows daily.
# [Joe_Crawford] [mattl] I came across https://www.youtube.com/@ActionRetro the other day. Enjoyed the walkthrough exhuming an SGI Indigo2.
# [Joe_Crawford] True. True. The YT creator set up http://frogfind.com (no ssl required) as a frontend for DDG search so he can load it on old computers.
# capjamesg[d] How does https://jamesg.blog/2024/12/17/diffs/ look?
# capjamesg[d] [edit] How does https://jamesg.blog/2024/12/17/diffs/ look?
# capjamesg[d] I think it's working?
# [Joe_Crawford] Yes, no mention of the giants' shoulders he stands on.
# capjamesg[d] Where are you getting that error gRegor?
# capjamesg[d] Maybe I can't use attr()?
# [Joe_Crawford] Heh. James I would not do `attr(width) / attr(height)`
# [Joe_Crawford] Conceptually, what you have is 100% correct. In reality the attr() function doesn't ... uh... work.
# [Joe_Crawford] https://developer.mozilla.org/en-US/docs/Web/CSS/attr
# [Joe_Crawford] I mean, you can get a string out of it, yes. But for doing what you're doing, no.
# capjamesg[d] Are you seeing stretching gRegor?
# capjamesg[d] In Chrome everything looks okay for me.
# capjamesg[d] (although the aspect-ratio value is broken)
# capjamesg[d] Oh yeah. I'm not sure 😭
# [Joe_Crawford] I wanted to use it to do things like `<div class="graph" data-percent="65%"></div>` then use it in `div.graph
{ conic-gradient(red attr(data-percent), transparent 0)}` but it simply doesn't work like that.# [Joe_Crawford] `div.graph
{ background: conic-gradient(red attr(data-percent), transparent 0)}`# [Joe_Crawford] `<div class="graph" style="--data-percent: 65%"></div>` and `div.graph
{ background: conic-gradient(red var(--data-percent), transparent 0)}` DOES work though.# capjamesg[d] The downside of this implementation is my deploy times are going to go up by a minute.
# capjamesg[d] But I think it's worth it.
# capjamesg[d] I can work around that another day.
# [Joe_Crawford] can you cache those image sizes? I mean, re-reading them every time you build seems like overkill.
# capjamesg[d] gRegor The aspect ratio should be correct now.
# capjamesg[d] The clamp is necessary for the effect I want.
# capjamesg[d] The clamp lets the image grow / shrink in size depending on the width of the page, up to a max.
GuestZero_ joined the channel
# capjamesg[d] I should write a blog post about all of this.
# capjamesg[d] gRegor++
# capjamesg[d] [Joe_Crawford]++
# capjamesg[d] for all the help!
# capjamesg[d] I'm curious how the images look, visually. Does everything seem as expected?
# [Joe_Crawford] I have only seen the title of this bandied about and I do love it. Shades of Heydon.
# [Joe_Crawford] And capjamesg[d], yes site looking good!
sebbu2 joined the channel
# 
[KevinMarks] today in day job fun - "why doesn't this coverage map display in Chrome, it works in Edge and Firefox?"
# [KevinMarks] the coverage maps are rendered as a gif from some big GIS tool, and overlayed on top of leaflet maps as an image layer. This mostly works OK, but this particular one is the whole of the UK and is thus a 13476 by 22877 gif which is 5.8MB on disk and around 1.2GB as a pixel buffer. I'm amazed anything renders it without crashing, so well done to the browsers that manage it, I dread to think what is going on in the compositing loops there.
gRegorLove_ and claudinec joined the channel
# capjamesg[d] "Tim Carmody works at an AI education company and is a former senior writer at WIRED."?
ttybitnik joined the channel
# _pi_r2_0[d] In all fairness, I do totally question results from research based on how it's financed for example
# _pi_r2_0[d] Because I can't reproduce every study, I have to base myself on the evidence presented to me, and going to motive seems absolutely fair. If that's ad hominem I'm not firmly against it.
# _pi_r2_0[d] There could be eg p-hacking even if the results presented are technically an accurate representation of reality.
# _pi_r2_0[d] Not quite convinced it's all that relevant for this article though? (I'm an working for an "AI" company, and what's more one working on browser-based agents… yet I don't think "AI" opponents need worry about how I earn a living when I talk about HTML…)
glacier joined the channel
# carrvo[d] According to Wikipedia ad hominem gets a reputation of being a fallacy, but may not always be. And I think that is a fair point for Wikipedia to include because when you talk about a study or an experiment, the evidence they gather may not include all evidence there is to be had. In fact, that should be almost always impossible to achieve. So evidence can be selectively filtered (hence bias and fallacy). However, most consumers take for grant
# carrvo[d] Crime statistics, for example, are notoriously influenced by the amount of crime reported. Real crime numbers are expected to be higher due to many people not reporting crimes for various reasons.
# carrvo[d] But people can and do rely on the biased statistics to make decisions, and the presence of the bias is rendered rather unimportant.
IWSlackGateway and Ed1 joined the channel
# Ed4 Finally I got around the webmentions in ghost and now they work! YAY!
[tantek] joined the channel
# Ed4 Thanks <3 Now the only problem is understanding how to get back the Ed nickname here ahahaha
# Ed4 (Btw I missed so much this feeling of getting back the internet into a "personal" space)
# Ed4 Anyway, it's a problem for the me of tomorrow, I need some sleep now :D
glacier joined the channel