#dev 2026-06-24
2026-06-24 UTC
CRISPR, citizenAlex, [Sophia_wood], cotsuka and grufwub joined the channel
# 
WinnerWind how do you guys manage iconography for your site? I'm planning on adding a few buttons and making vector graphics for them, but im conflicted between putting them into the CSS (messy) or doing something else that im not aware of
dabeglavins5 joined the channel
# 
[capjamesg] I like to use the SVG icons from https://phosphoricons.com/
# [capjamesg] In general I prefer to use SVG in my HTML.
# WinnerWind [capjamesg]: SVG in your HTML? like the SVG is INSIDE the HTML?
# [capjamesg] Yes 😄
# [capjamesg] It’s messy but you can get some relatively lightweight SVGs.
# [capjamesg] It saves on the additional network request.
# [capjamesg] I don’t know how much of a difference if at all it makes though.
# [capjamesg] I have adopted the behaviour mainly because Phosphor has a copy SVG button which is easy for me to use 😂
# WinnerWind [capjamesg]: I see. i prefer having svgs be files rather than doing it inline but thanks!
cotsuka joined the channel
# WinnerWind [tantek]: yeah true, but my SSG's templater plugin isn't very flexible with inserting file content, just the path to the files
manu7 and cotsuka joined the channel
# 
chr0m4 [capjamesg_]: same here, messy but very lightweight. It does makes a difference, it reduces network request. i don't use many, but I often create a file like my-icon.liquid.html and I make it use some include variables (width, height and fill) and then include like
{% include icons/my-icon.liquid.html width="" height="" ... %}# chr0m4 (jekyll stuff, but applicable to any SSG engine)
# chr0m4 liquid* template*
# chr0m4 WinnerWind: nice tutorial on iocaine, just configured it on my vps
# chr0m4 WinnerWind++
chr0m4, oleh2ogi and cotsuka joined the channel
# chr0m4 !tell [rose]: I think you would like this status page i created for my services 😄 https://status.carlosmolero.com/
# WinnerWind chr0m4: how'd you find it! and nice! congrats on getting it setup
[rose] joined the channel
# 
[rose] [capjamesg] and @WinnerWind - Don't forget about SVG sprite sheets. A single request and cacheable between pages. Regardless of the icon set used, you might find my summary of when to use what and the trade=offs useful: https://sustyicons.com/use-sustyicons-efficiently/
# [rose] Oh and I forget where it is, but someone did research on SVGs being used inline versus as an image, VERY important point: inline is more efficient as assumed, but ONLY if the SVG itself is efficient/has been optimised. As soon as you get even minor path complexity and dodgy maths, you are better off using the img method. As a rule of thumb, I don't need to do that with any icons or logos I make myself. But some icon sets have dodgy maths.
# [capjamesg] Oooh I didn’t know about SVG sprite sheets.
# [capjamesg] [Rose]++
[daveletorey] joined the channel
# [daveletorey] I am currently documenting something that will make SVG even more performant
# [daveletorey] Will share once it goes live
# [daveletorey] It will affect all sizes of SVGs
# [daveletorey] [Rose] I’ll make sure I do share
# [daveletorey] I may even give a demo in Home Brew Web Club London tonight if I can bear to be in my office
# chr0m4 WinnerWind: I'm spying on you, nah, just click on your profile in chat-names and found it haha
# chr0m4 I'm too invested at this point in https://svgrepo.com , 'copy optimized SVG', create [icon].liquid.html and include.
# chr0m4 but I save that one!
# WinnerWind [Rose]: I do gamedev and i used to do some low level gamedev (imagine making games for smartwatches and stuff, for fun) and using spritesheets was THE way to load images, even back then. i never thought of doing it for websites but it could be useful. reading the link, though, i can't tell HOW to use Susty Icons
# WinnerWind i might consider the spritesheet approach but my SSG is a bit rigid and it would prefer loading the path of files individually
# WinnerWind [Rose]: like, how do i use SVG spritesheets in my own site
lavandula joined the channel
# WinnerWind [Rose]: are you saying the part in "At a glance, this..."? if so, that just looks like normal SVG loading to me?
# WinnerWind then i guess my next question would be how exactly i'd tell the SVG that a specific design is the #404-outline (i use inkscape so im willing to get my hands dirty)
# WinnerWind there's a tool? i might have missed that
# [rose] Front page…. https://sustyicons.com or click on the logo
# WinnerWind oh, my bad!
# WinnerWind i had JS disabled so the front page wasn't loading
# WinnerWind ah okay, each "drawing" is just an SVG Group on the root
# WinnerWind yup, just inspected a spritesheet
# WinnerWind ill try making my own and experimenting to see if i can make it work with my own iconography
cotsuka joined the channel
# chr0m4 https://codeberg.org/devcarlosmolero/jekyll-indie-web-about small jekyll plugin that I created for generating an about.md out of your indieweb or any other wiki profile
# WinnerWind got it! i dont think i have the mental bandwidth to re-use paths like that BUT having all my elements in one SVG file organized as groups is tons easier
# WinnerWind chr0m4++ looks useful! mediawiki to local scraper for single files is something i needed for a while. id ont use jekyll or ruby but ill be using the source code to make my own one-shot scraper
# chr0m4 glad you find it useful!
[Jo] joined the channel
# citizenAlex Hi - I'm trying to make my website smolweb compliant and was wondering why there might be an issue with max-width css
# chr0m4 citizenAlex: there's an issue with that? where does it say that?
# citizenAlex On smolweb.org the validator gives a Grade B for max-width. It doesn't count as a violation of the standard but there is something about it that downgrades
# citizenAlex Is it that it allows the use of large images and is therefore more resource intensive?
# chr0m4 let me check out my website, i use a lot max-width
# chr0m4 it's an overly dramatic support argument
# chr0m4 max-width is not "less performant" or anything, they're trying to pass it as something that isn't supported widely, but that's not true in 2026: https://caniuse.com/?search=max-width
# chr0m4 filter: blur and the like are not performant (without triggering your browser's 3d acceleration) but max-width is totally fine. But, if you want to avoid it you can use a container with a width, clamp, max-inline-size or grid constraints. There are tons of alternatives.
cotsuka joined the channel
# chr0m4 citizenAlex: hope that helps
# citizenAlex very helpful. Thank you!
# citizenAlex chr0m4++
# chr0m4 citizenAlex: anytime :)!
[jeremycherfas] joined the channel
# WinnerWind [Rose]: figured out how to make my own icons. thanks for the spritesheet tip!
# WinnerWind [Rose]++
# WinnerWind https://x0.at/dNBs.png using a placeholder
# WinnerWind i do fear that it iwll break in more esoteric browsers but so far looks good
# 
[jeremycherfas] I’ve been thinking about a way to display some data that accumulates daily as a cumulative graph, and one possibility would be to add a point to an SVG each day, maybe by having the SVG draw in the data from a simple external file. Does that sound at all like a good approach?
# WinnerWind like... a graph?
# WinnerWind an svg for each point sounds wildly inefficient
# WinnerWind you could pre-render these graphs every day then store that as an svg
# [jeremycherfas] Exactly like a cumulative graph. A single SVG, to which is adfded a point a day.
# WinnerWind there's a few javascript libraries that can do graphs for you one being chartjs https://www.chartjs.org/
# [jeremycherfas] No interest in JS.
# WinnerWind [jeremycherfas]: i feel like one svg for each and every point is kind of inefficient. a single svg doing a graph on the other hand makes more sense
# [jeremycherfas] I did something similar when I was tracking spam, and for that I added a point by hand each day, or maybe week, can’t remember. That was inline. Now I’m thinking if I used a Twig template, I could suck in the data from an external file that would be much easier to append to.
# WinnerWind i used an SVG template on which a script would append data to for something similar-ish.
# WinnerWind basically it would look at a specific placeholder then replace that with its own data filled from a yaml file
cotsuka, d1s1nf3ct, ZodiacalComet and oxtyped joined the channel
# [capjamesg] jorisvandijk Re: your blog post. Clever idea!
# 
jorisvandijk Thank you!@
# jorisvandijk Saves time, works well
# [capjamesg] Yeah it’s really neat!
# jorisvandijk Obviously, feel freev
# jorisvandijk Sorry- I meant obviously feel free to "steal" 🙂
# [capjamesg] jorisvandijk++
# 
ZodiacalComet jorisvandijk++ fellow zoxide user
# jorisvandijk ZodiacalComet: There's dozens of us. Dozens! 😉
deathcomestotime, [schmarty], cotsuka, CRISPR and ax562 joined the channel
# 
[Murray] Some very cool stuff in here on the "upcoming" CSS random() function: https://polypane.app/blog/experimenting-with-random-in-css/
kensanata and cotsuka joined the channel
# WinnerWind there's nothing more frustrating than trying to get this to work. im trying to do the spritesheets trick with my own design and i just... can't... get.... it... too.... WORK!!!!! this is positively frustrating and im not even sure why my browser inserts the svg just fine but doesn't actually display anything
# WinnerWind part of me thinks its CSS.
# WinnerWind oh it is loading in, however because of.... magic, it appears in the wrong location
# WinnerWind I'm just going to do the old school thing and make each thing its own SVG file ^_^`
# WinnerWind sometimes old-school is best
cotsuka and ZodiacalComet joined the channel
# jorisvandijk jcjordyn120 it's generated automatically at `index.xml`
# jorisvandijk I suggest adding an rss button somewhere for ease. I just went to the xml because you stated it was a Hugo site
# WinnerWind jcjordyn120 doesn't seem to be in this place, wrong guy?
# [capjamesg] See #indieweb. We’re trying to move the discussion here 😄
# jorisvandijk No, right guy, wrong place - sorta
# WinnerWind oh, i see, they haven't joined this channel yet (i know them on IRC)
# WinnerWind sorry for the confusion ^_^`
# jorisvandijk No worries
jcjordyn120 joined the channel
# WinnerWind jcjordyn120: catching up on what you missed: <jorisvandijk> jcjordyn120 it's generated automatically at index.xml <jorisvandijk> I suggest adding an rss button somewhere for ease. I just went to the xml because you stated it was a Hugo site
# jcjordyn120 ah ok
# jcjordyn120 I thought it'd automatically put a hyperlink to it
# ZodiacalComet It is in a `rel=alternate`
cotsuka joined the channel
# jorisvandijk WinnerWind++
# jcjordyn120 hmm, I don't think so
ZodiacalComet_ joined the channel
# 
Loqi rel=alternate is a way to indicate that a hyperlink links to an alternate representation of the current page https://indieweb.org/rel-alternate
cotsuka joined the channel
# jorisvandijk That Loqi is one smart cookie
# jorisvandijk Loqi++
# jorisvandijk Aw- it deserves so much more
CRISPR, decipaliz, cotsuka and grufwub joined the channel
cotsuka and ax562 joined the channel
# jorisvandijk aaronpk: Aaronpk, cybercriminal 😉
cotsuka and ZodiacalComet joined the channel
# Loqi It looks like we don't have a page for "open redirect" yet. Would you like to create it? (Or just say "open redirect is ____", a sentence describing the term)
# 
gRegor or redirect to https://en.wikipedia.org/wiki/URL_redirection#Security_issues
cotsuka joined the channel
# jorisvandijk Could the owner of the https://geekring.net/ be dead? I've polled his address many times. His "feed" does not change over many months. I want to join, but I wonder if there's something to join