events/2025-05-28-hwc-europe
Homebrew Website Club Europe/London was an IndieWeb meetup on Zoom held on 2025-05-28.
- Archived from: https://etherpad.indieweb.org/2025-05-28-hwc-europe
Participants
Tantek Γelik
Reilly Spitzfaden
benji
mandaris
capjamesg
Al Abut
jo- ... add names
Notes
- Welcome to HWC!
- A blog post James saw recently and enjoyed: https://alexwlchan.net/2025/learning-how-to-make-websites/
- https://www.youtube.com/watch?v=oSVPkuplVRY --- PC that makes coffee
- "sonification"
- What we're making
- Tantek not making anything new on his site recently, struggling with PHP8 problems
- James is building a site to view rainfall data in Scotland year-over-year
- Cool portfolio site with sound: https://omegacentauri.jp/
- https://eva.town/ has a piano on it!
- Manny is building with the Share API in the browser.
- https://mandarismoore.com/2025/05/27/share-the-love.html
- https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API
- Turning on SSL on a website and enabling dynamic DNS
- Designing a KanBan board in HTML/CSS
- Use is to keep all task management within a repository
- Implemented with CSS grid; change a class name to move the column of a task.
- Accessible code snippets are hard
- The Good Internet Magazine is live! https://goodinternetmagazine.com/
- Code snippet design
- Anchor links to line numbers
- Could a code snippet have sidenotes (or are comments enough)?
- Sidenotes may be ideal for longer comments
- Screen size -- how much space do you have?
- Al Abut recently had a "worlds colliding" moment when a cyclist from Germany DMed on Instagram about seeing Al's blog on the Indieweb
- His name is Joshua Meissner and his personal site has beautiful photography and links to his writing: https://joshuameissner.de/
- His next goal is to build out his own blog more and display routes. Publishing maps on your personal website is a land mine, some good resources to get an overview of the current state of things is on the wiki: maps
- I found Joshua through his excellent article on bikepacking.com, a website I've often referenced as an example of a small business and website run with Indieweb principles: https://bikepacking.com/stories/slower/
- https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
- Can be used to fill space in columns of grid items
- Manny - My favorite grid tutorial https://css-tricks.com/snippets/css/complete-guide-grid/
- https://libre.fm/ is shutting down.
- https://github.com/foocorp/hacienda/discussions/117
- Template:Mat.tl seems to be shutting down his other projects as well and also taking a break from social media: https://bsky.app/profile/mat.tl/post/3lqalysjajk2c
- Unfinished Projects Release Forms booklet
- What are the potential uses for floats in 2025?
- As an aside paragraph or two, or a mini-note that has its own heading within a blog post.
- A pull quote, in the print magazine-style layout.
- Example of float on https://tantek.com/2025/127/b1/running-for-w3c-advisory-board-ab-election; the grey box at the top of the page.
- Template:Mandaris - Using floating for images https://mandarismoore.com/2025/03/02/your-friendly-neighborhood-spiderman.html
- A bad use of floats: For a two-column layout. Grid is recommended today.
- Template:Mandaris - Multicolum list of categories https://mandarismoore.com/2025/03/02/your-friendly-neighborhood-spiderman.html
- Tantek Γelik your aside with the "bonus" margin would benefit with future css attribute (in Safari now) margin-trim: block;
- Designing a blockquote that shows a quotation mark (") in a :before while also having several paragraphs of text within the blockquote.
- 11ty Discord: https://www.11ty.dev/blog/discord/
- 11ty internally uses "markdownit" which has the option to extend the markdown parser if you need to
- Reilly you might check out this sort of CSS https://codepen.io/artlung/pen/zxGGWZm
- https://jamesg.blog/buttons
- https://zacharykai.net/blogroll has a buttons grid
- https://www.benji.dog/linkroll
- James: you can't overuse details and summary -- they are fun to click!
- Self-auth could be good to read to learn more about PHP
- https://apps.artlung.com/logo-i-zer/88x31.php generates custom Artlung logos
- https://apps.artlung.com/logo-i-zer/source.php is the source code for the generator
- Joe is thinking of creating a dynamic blogroll that shows the most recent post from each author
- Tantek Γelik updated his home page events list on the call.
- Publishing Events on your site lets you share events you enjoy with your readers.
- Publish on your own site, rather than Instagram :D
- https://reillyspitzfaden.com/interactions/ lists events
- The IndieWeb Carnival for this month finishes in a few days: https://thoughts.uncountable.uk/may-2025-indieweb-carnival-small-web-communities/
- And Movie Club too: https://tantek.com/2025/120/t1/indieweb-movie-club-tomorrowland
"+1 for manual HTML coding" "keep on hacking the IndieWeb!" -- Tantek's saying goodbye!
- James is working on https://editbutton.net/
- It is installable on Firefox
- He made the editbutton.net website this week!
- Al Abut would like an easier way to update his blog on the go, especially for things like cycling.
- One of the few drawbacks of publishing a static site
- HTML on the go?
- Part of my Instagram addicition is because it's easy to use on mobile devices
- Maybe capture text on the go from Mastodon
- https://github.com/dddddddddzzzz/OpenStories
- https://openstories.fyi/
- There is an example on https://muan.co/
- Stories are great on mobile
- What is a text version of a Story?
- A thread of text / micro-posts
- You could also have a multi-media story?
- Some people on Instagram post Stories that are text on coloured backgrounds.
- https://www.robinsloan.com/tap/tour/
- http://scripting.com/ has anchor links for every paragraphs that appear as hashtags at the end of every paragraph.
- This means you can link to an individual paragraph.
- Another example: https://pluralistic.net/2025/05/28/cheaters-ever-prosper/
- https://wikitok.net/
- https://about.flipboard.com/press/announcing-surf-the-first-browser-for-the-open-social-web/
- https://surf.social/
- Is a combination of micro-blogging, full blog posts, videos, etc.
- Benji says the UI is interesting
- Flipboard looked great on the iPad in its early days
- https://craigmod.com/ worked on Flipboard's early design
- Flipboard book at https://craigmod.com/journal/digital_physical/
- Al is thinking about how to bring his blog into the physical world a bit more
- https://bikepacking.com/stories/slower/
- Sells memberships which include a journal
- Linking the physical and digital
- James has stickers for his blog and a pin!
- Taking parts of your website and making it a brochure -- actually designing the page for print.
- The Good Internet Magazine was launched today: https://goodinternetmagazine.com
- Other recent Netlify experience: https://theadhocracy.co.uk/wrote/buh-bye-netlify "Buh-bye Netlify!"
- Netlify has a serverless offering for running functions in the cloud: https://www.netlify.com/blog/intro-to-serverless-functions/
- Serverless webmentions receiver: https://github.com/benjifs/serverless-webmentions
- Using certbot for SSL
- There are lots of considerations for running your own server
- A bat signal of someone that flies in to help you fix your server
- James made https://playground.jamesg.blog/stories.html
- With a linear format you can pre-load things as needed for multimedia
- https://tracydurnell.com/2023/06/28/compromising-information/
- Sharing more personal things on one's website
- https://shellsharks.com/brewlog
- Mike of Shellsharks also does a newsletter https://shellsharks.com/scrolls/scroll/2025-05-16
- Great comic:
- /hovercards
- The struggle of trying to figure out how to make lots of content on your website navigable.
- https://developer.chrome.com/docs/web-platform/view-transitions may be interesting for view transitions. It is a new API. Firefox does not yet support this API.
- https://notes.andymatuschak.org/ shows cards of information
- Designing a website that is more spatial, where you go to different areas
- https://marigold.town
- Michael is working on an 88x31 button
- 88x31 generator: https://hekate2.github.io/buttonmaker/
- https://goblin-heart.net/sadgrl/projects/88x31-button-maker
- https://88x31.datakra.sh/
- https://jamesg.blog/search-pages?q=cookie&page=1
- HTML clothes:
- https://thegithubshop.com/collections/dev-core/products/header-hat
- "what if the cookie escapes into the browser?"