events/2025-09-24-hwc-europe
Homebrew Website Club Europe/London was an IndieWeb meetup on Zoom held on 2025-09-24.
- Archived from: https://etherpad.indieweb.org/2025-09-24-hwc-europe
Participants
Thomas Vander Wal https://vanderwal.net
capjamesg https://jamesg.blog
Reilly Spitzfaden https://reillyspitzfaden.com
jo https://dead.garden
Britt Coxon https://britthub.co.uk/
gRegor Morrill https://gregorlove.com/
mandaris https://mandarismoore.com/
Fractalkitty https://fractalkitty.com and https://toground.link
Paul Watson https://www.lazaruscorporation.co.uk
Angelo Gladding https://ragt.ag
zachary.kai - https://zacharykai.net/- Template:pjg1 - https://pjg1.site
Joe Crawford https://artlung.com/ (arrived late)
- ... add names
Notes
- Welcome to HWC!
- https://www.explorefall.com/
- https://en.wikipedia.org/wiki/International_Fixed_Calendar
- Coffee, good company -- a good way to start the day!
- What we've been doing on our websites recently
- Manny is experimenting with CSS view transitions
- You can use ::view-transition as progressive enhancement
- A potential polyfil? https://github.com/demarketed/view-transitions-polyfill
- https://en.wiktionary.org/wiki/Vorf%C3%BChreffekt -- "The phenomenon that something which was previously working correctly, suddenly does not work correctly when one tries to demonstrate the operation to others. "
capjamesg has been making a Kanban board: https://playground.jamesg.blog/kanban.html?project=coffee. It works with localStorage -- you can use it if you want!
gRegor Morrill made an "Enhance!" button (and a "Dehance!" one too!): https://gregorlove.com/lab/enhance.php
- Speaking of coffee, I'm unreasonably delighted by this dancing coffee GIF I found and put at the bottom of my /coffee page: https://gregorlove.com/coffee/
- This is great!
- Speaking of coffee, I'm unreasonably delighted by this dancing coffee GIF I found and put at the bottom of my /coffee page: https://gregorlove.com/coffee/
- MetroWind has been working on https://mws.rocks/nms-freighter-planner/ and https://mws.rocks/experiments/foil/ and https://mws.rocks/experiments/button/
- Lee is working on Webmentions, and sent a Webmention to RSVP to this event: https://lee-perry.co.uk/webmentions/homebrew-website-club-europe-london
- HTML callouts: https://github.com/whatwg/html/issues/10100
- https://whatwg.org/ and https://whatwg.org/faq
- Accessibility tools
- https://wave.webaim.org/
- https://sa11y.netlify.app/bookmarklet/
- https://www.w3.org/WAI/test-evaluate/tools/list/
- Contrast checker: https://webaim.org/resources/contrastchecker/
- https://www.tpgi.com/color-contrast-checker/
- HTML lang= attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang
- "Zed" (versus "Zee")
- color and colour: https://jamesg.blog/2025/02/17/images-light-dark-css
- "garburator": https://en.wikipedia.org/wiki/Garbage_disposal_unit
- Weights and measures
- https://en.wikipedia.org/wiki/History_of_mathematics#Babylonian
- Printing web pages
- 88x31 buttons: 88x31
- IndieWeb_Carnival
- IndieWeb Carnival this month: https://toground.link/second-person-birds/
- The prompt is "second person birds"
- wordle for ears: https://melodecho.com/
- Birdle: https://www.play-birdle.com/
- Making templates for your website
- PHP has " includes" that you can use to include templates
- examples: page w/ sidebar, page w/o sidebar
- copying an existing template you have
- Tables of contents
- Is there a primitive object type that's a "thank you"
- webmention type of "thank you?"
- open heart can take an emoji payload: https://openheart.fyi/ π π
- Related: Karma!
- Related: h/t (hat tip) giving_credit#Hat-tip
- TIL h/t!
- /thank-you page on your website!
- The webmention would come from /thank-you!
- https://jamesg.blog/2024/02/19/personal-website-ideas/?ht=vanderwal.net
- Some of us have lots of browsers and windows and tables open at the same time :D
* "mental tab"; keeping track of websites you want to go to in your head
- Won't recommend this approach, its chaotic π
- Using different IDEs to build specific contexts for each editor
- Sophia enjoys using Nova
- Displaying webmentions
- Visual design
- Moderation
- Open Stories, an open version of Instgram Reels: Open_Stories
- https://ragt.ag/south-pasadena/trees/ordinance-analysis
- persistent headers
- on/off colors
- column widths
- pick out cities
- https://ragt.ag/trees/ordinances
- Bootstrap might have some useful CSS to borrow as a baseline: https://getbootstrap.com/docs/5.3/content/tables/#overview including responsive tables that can scroll left/right on desktop
- HTML table design considerations
- Column widths could be different so columns with narrow data take up less space
- Alternating row colours
- Left/right scroll?
- Sticky headers for persistence
- I first read about sticky table headers here - https://btxx.org/posts/Please_Make_Your_Table_Headings_Sticky/
- Mobile design
Designing big data tables: Insights from a UX/UI perspective https://medium.com/@nika.romanenko11/designing-big-data-tables-insights-from-a-ux-ui-perspective-c1600f230f34
The Ultimate Guide to Designing Data Tables https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
- Best approach for huge data tables https://ux.stackexchange.com/questions/100786/best-approach-for-huge-data-tables-currently-using-scrolls
- Data design: who is your audience? will they be interested in all the data at once, or want to explore into different areas? how will the table expand over time?
- You could use cards that let people compare each item one at a time on mobile
- If the data is going to grow to be big, you could embed a spreadsheet?
- you may want to use graphs too; graphs can help make data easier to understand.
- using as few words as possible is important in information design
- focus on contrasts between the data
- digital vs. physical reading differences; it can be harder to focus on reading on digital devices
- tts can be helpful for reading blog posts
- molly white records versions of her blog posts on Citation Needed (example: https://www.citationneeded.news/it-matters-i-care/)
- recording audio versions of your blog post
- poetry has cadence, so tts isn't as effective
- what does an interface for showing the audio look like?
- Public records departments have lots of civic data that you can use!
- The indie web has the power of doing things with civic data
- Personal websites + civics
- James is reading: https://us.macmillan.com/books/9780374612467/thisisforeveryone/
- https://theodi.org/
https://www.lazaruscorporation.co.uk/rituals-and-declarations
- idea: font inspector for the mobile web
- Jo added "This is for Everyone" to the https://dead.garden/books/ page to her website!
- https://www.heirloomagency.com/store/p/swiss-cheese-mono
- A keyboard made up of Pokemon posed as letters!
- https://laughingsquid.com/cheese-computer-keyboard/ - cheese board.
- The Commodore Keyboard had some interesting square glyphs: https://sta.c64.org/cbm64pet.html - the squares reminded me of Swiss Cheese Mono
- Fonts for kids! https://primarium.info/
- Someone made a font with their handwriting: https://chameth.com/making-a-font-of-my-handwriting/
jo has some text on her website written in her handwriting
- using https://www.calligraphr.com/
- Another post talking about using a handwritten font for her zines - https://jvns.ca/blog/2020/08/08/handwritten-font/
- https://artlung.com/blog/2018/03/12/wow-calligraphr-com/
Joe Crawford (wants to revisit this now that I've made more comics)