events/2025-03-26-hwc-europe

Homebrew Website Club Europe/London was an IndieWeb meetup on Zoom held on 2025-03-26.

• Archived from: https://etherpad.indieweb.org/2025-03-26-hwc-europe

Participants

• capjamesg - https://jamesg.blog
• zacharykai - https://zacharykai.net
• mandaris - https://mandarismoore.com/
• benji - https://benji.dog
• Joe Crawford https://artlung.com/
• jo https://dead.garden
• Kevin Marks https://kevinmarks.com
• Tantek Çelik https://tantek.com/
• Template:james https://jamesbrierly.com/
• ... add names

Notes

• Welcome to HWC!
• Music and rhythm
  • Question to think about: what is the rhythm of a website?
    • Some musicians switch between instruments mid-song. What does this mean for a website?
    • What is the tempo of a website?
  • Putting two-bar grooves on your website
  • https://en.wikipedia.org/wiki/Glass_harp
  • https://www.youtube.com/@roberttiso
  • https://jamesg.blog/search-pages?q=taylor%20swift&page=1
  • Background music on your websites
  • James thinks his website fits in with a classical vibe (but it was noted that Taylor Swift would be a good fit too!)
  • An instrument of browser tabs
  • Looking forward to writing more on our websites
    • Writing / editing being an enjoyable, therapeutic process
  • Adding an edit section to posts on your website
• ... add notes
• Music fans: Go find and listen to Pink Floyd's "Dark Side Of The Moon". Go. Tonight. Turn the lights off and listen to it. (Older folks: Please nobody mention "The Wizard Of Oz" here, we can discuss that after everybody's heard it normally.)

• • Tom Stoppard's radio play DarkSide for the 40th Anniversary of the Album - https://www.youtube.com/watch?v=Z06tu58oePA

• • Westworld S3 also used part of DSoM https://www.youtube.com/watch?v=ohMRfCxUKkA (piano version)

• • Another Pink FLoyd song, with the original Jazz violin solo restored https://www.youtube.com/watch?v=Bm4sDyCW0k8

• • sound design in movies: https://www.youtube.com/watch?v=kavxsXhzD48

Passing parameters to SVG https://kizu.dev/svg-linked-parameters-workaround/

• Flow comes up in a lot of places
  • Music
  • Communication / speech
  • Design
  • Typography

CSS article about Flow https://piccalil.li/blog/flow-utility/

Csikszentmihalyi on Flow https://en.wikipedia.org/wiki/Mihaly_Csikszentmihalyi#Flow

IndieWeb band

• The instruments we know on the call would make for an interesting band

What we're doing on our websites this week

• IndieAuth module for Apache (written in C)
• Putting things out there on the web
  • Joe shared his mixtapes on Mastodon, someone responded with a UI that looks like a cassette; the serendipity of the web.
• Audio Control with the look of a cassette: https://sheep.horse/2025/3/a_cassette_audio_control_for_the_web.html
  • mandaris still interested in integrating https://libre.fm/
    • And interested in reworking the search system on his website
  • Experimenting with IndieAuth
    • https://indieweb.org/Vouch_Proxy

• Message in a Bottle is a Taylor Swift song
  • https://en.wikipedia.org/wiki/Message_in_a_Bottle_(Taylor_Swift_song)

• Audio Control with the look of a cassette: https://sheep.horse/2025/3/a_cassette_audio_control_for_the_web.html

https://projects.metafilter.com/6368/Cassette-Audio-Control-for-the-Web

Talking about things you make can help you find people interested in working on something you're building

• https://jamesg.blog/coffee-songs
  • I'm also thinking about a Garfield coffee index, definitely featuring https://www.gocomics.com/garfield/2021/07/18

"My website is my omnibus of everything"

• Mike's page "Mikesplaining" page on time signatures: "A Young Person's Guide To Common Time Signatures" https://michaelkupietz.com/writing/mikesplaining/young-persons-common-signatures/ (while we're at it, a little on harmonic theory: "Why are two notes an octave apart considered the same note?" https://michaelkupietz.com/writing/mikesplaining/musical-notes-octave-considered/)

• https://sive.rs/music
  • Thinking about how our styles evolve on our websites
  • You can make a web page that lists the designs you have had on your website

Versions of a website - https://arielsalminen.com/faq/#:~:text=Do%20you%20have%20old%20versions%20of%20your%20website%20still%20around

• Kupietz's first-ever professional web site: https://web.archive.org/web/19980129091309/http://www.greentortoise.com:80/ (archive.org is corrupting the image map on that page, the map actually looked as it appears on the top of the next version of the site at https://web.archive.org/web/19980627072713/http://www.greentortoise.com:80/)

Being aware of what we share on our websites

• "Here’s the last 30 days." section on https://artlung.com

Making pages with their own, distinct layout on your website

• • Can be jarring, but allows experimentation in design
  • Having a common section -- like a navigation bar! -- would be useful
    • This could also be a hamburger menu in the bottom corner that is distinct from everything else on the site; works well with light-dark mode
    • Could web components be used here?
    • A marker of "Here's where you are!" (like the lowercase "i" button)
    • Loading screen between pages with an interstitial that says "And now for a new design!" :D

"Recapitulate" https://en.wikipedia.org/wiki/Recapitulation_theory "ontogeny recapitulates phylogeny" Idea for an Etherpad extension: sign in with your domain name so you can persist the colour of your text

• KM the pie chart reminds me of my now-immortal Bip Bop test sequence https://www.youtube.com/watch?v=HD4emXqHCsE

CSS transitions API

• https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
• https://developer.chrome.com/docs/web-platform/view-transitions

Information design on websites

• Is information design more intuitive to people newer to the web because there has been so much work done?
• James observation: it would be fun to try and make an information architecture as different as possible to what exists already. (A digital garden that has a garden background and lots of images that connect things; image map navigation; what link structures could exist?)
• It's hard to make consistent navigation on an old site with lots of pages
• Experimenting with different types of content / structures can help you find one that you like
• Wikipedia proved that a flat information architecture works well for large numbers of documents
  • Premature heirarchy can create a lot of overhead.
  • Wikipedia has noted that language subdomains (i.e. de.wikipedia) was a mistake
    • Domains cause a need for SSO / auth cookies / lots of technical overhead
    • Showing contributions across language wikis is hard
  • Sitemaps can help people find their way through a website
    • Mini maps are a spatial representation of a sitemap
    • Visual distinctions can help people remember where things are // things being in their own place on the website.
  • "Related pages" section on your website
    • James is interested in doing hybrid category list / wiki pages
  • How can video game design influence the information architecture of your website?
  • Tantek's advice: start flat.
  • I have a Digital Weedpatch

https://en.wikipedia.org/wiki/In-A-Gadda-Da-Vida

• • This fellow has projects by domains - https://cloudlord.management/
    • https://melonking.net/free/software/flood is funny :D
• The Internet Phone Book is in print! Slowly coming together! https://www.are.na/kristoffer-tjalve/photo-album-printing-the-internet-phone-book

https://www.goodreads.com/book/show/1169797.The_Internet_White_Pages_1994

• "CSS is incredible!"

• Where the apostophe goes in the plural for James
  • James's - per https://en.wikipedia.org/wiki/St_James%27s

• James (https://jamesbrierly.com/) uses Univers font on his website
  • Found via https://jero.zone/
  • Considerations for testing your website: make sure the fonts work on different OSes

• Making your website without AI

• The IndieWeb being a more raw way to express yourself
  • Exciting to look back in a year and see what *you* have been writing about

• Websites as a way to connect with people
• The personal website community is fun; you don't need to worry about follower counts. Lots of people to meet.

• https://lu.ma/foclondon
• https://futureofcoding.org/

• https://photos.jamesbrierly.com/ has a cool design feature where when you scroll the information about the photo persists.
  • Philosophy is intentional design; less is more.

• https://bearblog.dev

All the auths: authorization, authorship.

https://slashpages.net#nope "a list of things you don't like or don't want to do"

• https://fyr.io/nope
• A meta /nope page which only sais "No"
• And /yeah pages exist too
• /yes and /nope pages relate to the idea of site principles, like https://tracydurnell.com/2025/01/21/guiding-principles-for-my-website/ and https://sarajaksa.eu/2025/02/in-reply-to-tracys-guiding-principles-for-my-website/ and https://jamesg.blog/2025/03/05/philosophy-of-james-coffee-blog

https://www.reddit.com/r/funny/comments/1ornz8/these_two_books_contain_the_sum_total_of_all/

• This is funny :D

"We're both in the same rabbit hole right now"

• /hwc-quotes wiki page? that'd be great

Jo's radio station: https://dead.garden/radio/

• • https://kingposs.com/radio
  • Collaborative radio
  • https://sdf.org/?tutorials/anonradio
  • What would it look like to have an open mic night on your own radio station?
  • https://onsug.com/ is a collaborative podcast

https://blog.avas.space/ noted the question of what it would be like to have others write a post for your website (maybe just a friend)

• • Jo, you're welcome to post on my website! - James (jamesg.blog)

• https://indieweb.org/representative_h-card
  • mandaris The initial goal was to make things work with https://webmention.rocks/ and https://indieweb.org/
  • https://indieweb.org/authorship
  • mandaris: Still confused in how it works as the validators do not show the author

"ombudsman"

• another idea: /words-of-hwc; a running list of unique words we mention on HWC

• Joe Crawford's site updates this week:
  • https://artlung.com/rsvp/ I have a spot to do my webmention rsvps now
  • https://artlung.com/cssbattles/ is a new official page to track my css battles
  • I've added more mixtapes at https://artlung.com/mixtapes/
  • And more blogging and uploading images and videos https://artlung.com/videos/

• Reminders of other IndieWeb This Week!
  • Still time to watch and post about What's Up Doc for IndieWeb Movie Club https://artlung.com/whatsupdoc-imc/
  • Front End Study Hall 024 is tomorrow https://events.indieweb.org/2025/03/front-end-study-hall-024-j8dtucnWT7Iz

• A (snarky) idea for a /yes page: something you can share with people in heated discussions
  • "What do you think?" "https://example.com/yes"

Neat idea: adding an editing interface on your web pages at the bottom so you don't need to transition to a different editing UI.

You can change the details/summary icons in CSS. Michael has done this on his website.

"Self-hosting: it's like being a parent!"

• https://www.w3.org/2025/03/breakouts-day-2025/Overview.html
• Calendar of events https://www.w3.org/calendar/breakouts-day-2025/

• Thinking about PESOS from Bluesky to personal websites
• AT protocol event
  • https://www.youtube.com/watch?v=HoagVD-Baa4&list=PL47nQSDRhiP2m8RH_AM4NTWuzN3XA3W27&index=1
  • Bluesky are doing interesting things with crawling to make sure users get the content they expect in their feeds

• https://engineering.tumblr.com/post/21276808338/tumblr-firehose
• https://brid.gy/ works with Bluesky and fed.brid.gy
• Using Bluesky as a reader

• Thing to think about when posting to Bluesky via Brid.gy: how do you want your posts to show up (truncated, post title, link to post, etc.)
• Bluesky treats links well

• Bessemer Convertor
• Steel cobbles — search this phrase on YouTube for wild videos of industrial accidents (non-fatal)

• A metal-style IndieWeb radio ads
• An IndieWeb jingle?
• "Ice cream is a state of mind"

• Michael's website is now ranking on Google
  • From page 11 to 1
• Kupietz's Pirate Cat Radio promo https://michaelkupietz.com/wp-content/uploads/2023/08/05-Michael-Kupietz-Pirate-Cat-Radio-Promo.mp3 (whole radio show, 1 hr live performance: https://michaelkupietz.com/music-sounds/full-length-albums/michael-kupietz-almost-5282009/)

• https://www.youtube.com/watch?v=t2tYvANA8to

• Original "wazzup" Budweiser ad: https://www.youtube.com/watch?v=JJmqCKtJnxM

• A "wazzup" welcome message that plays when someone visits your website
• Horrible Quiznos ad; Kupietz is glad he didn't have a TV then https://www.youtube.com/watch?time_continue=23&v=aZrks-BPeLQ&embeds_referring_euri=https%3A%2F%2Fwww.google.com%2F&source_ve_path=MzY4NDIsMjg2NjY

• "Why?"
  • "Because it's fun!"
  • "Oh, good enough!"

• Idea: make a gopher version of your website
• WordPress hotline / hotline where you can call for specific help for a technical topic

• James should blog about the coffee hotline phone he set up
  • Future version was an email https://jamesg.blog/2024/02/20/coffee-hotline/

• https://www.youtube.com/watch?v=JcAx4djR25Q
• Nintendo hotline: https://www.reddit.com/r/nintendo/comments/6pbbim/when_you_were_stuck_on_a_certain_game_ever_call/

https://www.youtube.com/watch?v=Au1He0_eCkw

• https://indieweb.org/personal_library

James' hands smelled like old books after showcasing an old dictionary n the topic of perfumes: https://www.tumblr.com/fragranticareviewers/777632726253731840

• food
  • frittata
  • midnight omlette
  • food hydrtator
  • https://en.wikipedia.org/wiki/Spanish_omelette
  • band name: guitars and oatmeal
  • idea: a band name with a url in the name