#dev 2026-06-28
2026-06-28 UTC
grufwub, vidak, NaomiAmethyst, cotsuka, Daijo- and Saige_Leah joined the channel
# 
WinnerWind I'll be honest the dev tools has been literally instrumental in making m website look good
# WinnerWind being able to visualize how CSS properties are being applied has made all the difference. Had a bit of a confusion between why the css rule for .badges.icon.noai was being over-ridden by the .text.content > img rule and the devtools helpfully pointed out why
# 
chr0m4 CSS is fun, I still write tons of it for custom animations (I love animations and micro interactions) but nowadays I use tailwind for styling the 90% of the HTML
# WinnerWind CSS for animations?
# chr0m4 and yep, without the dev tools you’re blind
# chr0m4 keyframes
# chr0m4 what is keyframes in css?
# 
Loqi It looks like we don't have a page for "keyframes in css" yet. Would you like to create it? (Or just say "keyframes in css is ____", a sentence describing the term)
# chr0m4 Uops
# WinnerWind i just looked up css keyframes and animations and my mind has been expanded
# WinnerWind i feel like that scene from the first doctor strange where the doctor hallucinates himself travelling universes
# chr0m4 yup, have fun, I wish I could rediscover this! haha
# WinnerWind time to animate everything :P /hj
# WinnerWind i thought animations had to be JS, no exceptions
# chr0m4 there are lots of combinations, you can do CSS online depending on the animation or they can start being triggered by JS because you attach that animation to a class and add dynamically
# chr0m4 css only*
# WinnerWind to be fair i wanted to keep animations minimal (i dont want to distract my reader too much)
# WinnerWind plus im not sure how accessibility would feel about animations
# chr0m4 one common pattern is: @keyframes > css class > js button adds the class dynamically to an element
# chr0m4 use them only where they make sense
# chr0m4 from an UX point of view, micro interactions are genuinely helpful
# WinnerWind my site doesn't have a bunch of these, the buttons and stuff are very much kept to a minimum
# chr0m4 I love this example, let me get it for you
# chr0m4 it’s behind Instagram ugh
# chr0m4 but I agree that it’s better not to need them tbh
# WinnerWind aw man, seems you can't use an animation for linearly interpolating colors :(
# chr0m4 do you mean this? WinnerWind: https://www.gregives.co.uk/blog/interpolating-colour-with-css ?
# WinnerWind chr0m4: kind of, but im pretty sure my method won't work because im interpolating between two hex values
# WinnerWind oh i think i know why it doesn't work, because im interpolating a variable that i wrote and not a HTML defined variable, so the browser gets confused and doesn'tk now how to interpolate it
# WinnerWind basically i need to control the thing that the variable controls and not the variable itself
# WinnerWind ill settle for a jittery animation, it's not that big of a deal tbh (i think it fits the vibe more)
# WinnerWind the thing i need to control is background-image: which can't be interpolated anyway
# chr0m4 Uhmm for that I would suggest creating the animation outside and placing a gif/mp4 image
# chr0m4 unless you need the background to react to something, which makes everything more complex
# WinnerWind thankfully i dont need it to be reactive, but a gif/mp4 image would make it significantly harder because the color of it changes based on what page you're on (i just modify the variable and it changes)
# WinnerWind plus that's extra network load when the browser can do the same thing for me in 4 lines of css
# chr0m4 ah
# chr0m4 that’s easy
# chr0m4 you have different pages no? and you want to make the background to change the color depending on the page right?
# WinnerWind yup
# chr0m4 imagine. html.layout—home
{} html.layout—post {} html.layout—about {} then place your linear gradient or different color in each # chr0m4 just use different classes for your html tag
# WinnerWind that would still mean a lot of duplicated code ^_^`
# chr0m4 I’m probably analyzing this from Jekyll’s perspective xD
cotsuka joined the channel
# WinnerWind my SSG has you writing the CSS and HTML manually and then telling the program where exactly replacements must be made based on rules (eg. if a variable is set then change background colors)
# WinnerWind that's why this abomination exists https://x0.at/aMtP.png
# WinnerWind (the current_page variable gets set by different templates which inhert this one)
deathcomestotime, {{cowglow}}, cowglow, Margi, cotsuka, bodyclick and bodyclick1 joined the channel
NbgMozillian and bterry joined the channel
# WinnerWind aaaaaand im done! going to fix up the git history for my SSG a little bit (my personal site and the source code are on two branches of the same repo which works but its incredibly annoying) and then I'm going to start deploying the site little by little, and write code for my site which will surely come in handy :)
# WinnerWind when i say write code i mean writing wikitemplates so that i dont need to keep reusing assets, wow im sleepy
# WinnerWind also: help me decide! in which order do the badges look better? https://x0.at/BRuc.png or https://x0.at/oBci.png ?
# WinnerWind ill be adding more badges, these are just placeholder ones i found
# girlonthemoon WinnerWind: i like them at the bottom
# WinnerWind got it!
deathcomestotime, cotsuka and gRegor joined the channel
# 
[jeremycherfas] Agreed. Prefer them as the final thing.
barnabywalters, [artlung], cotsuka and cowglow joined the channel
# 
cowglow PR is open, if anyone wants to have a look: https://github.com/cowglow/mc-scrpt-live/pull/88
# 
[tantek] [snarfed] follow up: when I go https://fed.brid.gy/settings and enter `https://bsky.app/profile/did:plc:uj535urgmp6i4pbajftwsnyf` into "Block" field, press return, server returns 500 with very plain HTML: `<!doctype html><html lang=en><title>500 Internal Server Error</title><h1>Internal Server Error</h1><p>The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error
deathcomestotime, barnaby, [April] and cotsuka joined the channel
# WinnerWind im using multiple CSS files for each part of my website. how do you guys maintain CSS variables? Do you dump it into one big CSS file or keep variables local for the use case?
[artlung] joined the channel
# chr0m4 WinnerWind: basically, root file importing different components for readability, but combined into 1 file (it's not that big)
# WinnerWind ah, you're using tailwind?
# chr0m4 Yes, but since i'm using variables i could get rid of it
# chr0m4 tailwind.css is the main file, but it's my handwritten css
# chr0m4 it's just called that wat because it imports tailwind
# WinnerWind got it!
IWSlackGateway joined the channel
# WinnerWind im thinking of putting all my variables in one big file so that i dont have to keep redefiniting and having to change colours and margins in 3000 places
# chr0m4 any variable defined under :root is available in avery css defined afterwards
# chr0m4 so it's a great idea
[tantek] joined the channel
[capjamesg] joined the channel
# chr0m4 lol
[tantek] and [capjamesg] joined the channel
# 
[capjamesg] handwrittencss++
Margi joined the channel
# WinnerWind chr0m4: yup, i found that out on complete accident. accidentally declared the same variable name in two places and i was so confused why changing it in the second file changed it in the first file
# dashing.msi3184 handwrittencss++
cotsuka, Turboblack, claudinec, [social], [Jo], blacklight, bterry and proofreed joined the channel
# WinnerWind opened the reflog of my SSG and i see 1214 entries.... yikes!
# WinnerWind all those auto-rebases paid off /s
# WinnerWind i'm going to switch to merging the master branch into my personal ssg branch instead as it creates 3 reflog entries instead of (number of commits in the personal ssg branch + 1) entries
barnaby, ax562, [artlung], cotsuka, chr0m4, GuestZero, ttybitnik and [snarfed] joined the channel
bterry1, cotsuka, barnaby, oxtyped, mossymaker, blacklight, deathcomestotime and Saige_Leah joined the channel
# Loqi [edit] ok, I added "Apple iTunes / Podcast apps do apparently support [[Atom]] feed podcasts. Example and recommendation to embed cover art in the actual MP3 file: https://stackoverflow.com/questions/5124014/is-it-possible-to-add-itunesimage-to-an-atom-feed-with-enclosures" to the "See Also" section of /podcast https://indieweb.org/wiki/index.php?diff=85486&oldid=85485
# [tantek] [edit] podcast << Apple iTunes / Podcast apps do apparently support [[Atom]] feed podcasts. Example and recommendation to embed cover art in the actual MP3 file: https://stackoverflow.com/questions/5124014/is-it-possible-to-add-itunesimage-to-an-atom-feed-with-enclosures
# [tantek] [edit] !tell [schmarty] do you display "likes" on your posts? E.g. I tried to "like" https://martymcgui.re/2023/01/14/this-week-in-the-indieweb-audio-edition--january-7th---13th-2023/ and pretty sure my site sent a webmention, and nothing showed. Tried also pasting my like URL https://tantek.com/2023/014/f1 into your form, still nothing shown.
# [tantek] [edit] Oh interesting looks like I liked the note announcing the podcast rather than the podcast itself! https://martymcgui.re/2023/01/14/this-week-in-the-indieweb-audio-edition--january-7th---13th-2023/
blacklight, ZodiacalComet and ZodiacalComet1 joined the channel
# chr0m4 Does anyonme selfhosts sourcehut?
# chr0m4 I'm tempted, but theres no single shot docker image that I can run, there are a bunch of unofficial one, but highly convoluted
# ZodiacalComet1 from the little that I tried it for simple curiosity, I ended up making a custom image based on another one. Got the "meta" on running but nothing else
# ZodiacalComet1 Then I left that on the side, since there wasn't really a need for it for me
ulhar4409[d], cotsuka, [Jo] and [pcarrier] joined the channel