events/2025-05-14-hwc-europe
Homebrew Website Club Europe/London was an IndieWeb meetup on Zoom held on 2025-05-14.
- Archived from: https://etherpad.indieweb.org/2025-05-14-hwc-europe
Participants
capjamesgJoe Crawford https://artlung.com/
- Template:Psylok https://giorgiopretto.com
Yousef Amar https://yousefamar.com/
mandaris https://mandarismoore.com/Brandon Pugh https://www.brandonpugh.com/
benji https://benji.dog
Tantek Γelik https://tantek.com/
jo https://dead.garden
pcarrier.com https://pcarrier.com- Add yourself here⦠(see this for more details)
Notes
- Welcome to HWC!
- Trackbacks? Are they just spam? Pingback?
- https://artlung.com/likes/ (I call out links which I also was able to send webmentions to)
- CSS light-dark selector for dynamically choosing colours depending on light mode or dark mode
- https://css-tricks.com/exploring-color-contrast-for-the-first-time/ (color-contrast)
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
- Recent article from WebKit blog from Jen Simmons https://webkit.org/blog/16929/contrast-color/
- https://config.figma.com/
- Figma designed an automated website maker based on design made in a Figma board
- But it generates lots of divs and spans
- Joe has a page of links to YouTube https://artlung.com/cssbattles/ with JavaScript code to progressively enhance those links to open a details element with arrow navigation and touchstart to allow tablet swiping https://artlung.com/cssbattles/cssbattles.js
- James link rel="edit" (and natural language heuristics) to access the github link for editing using a bookmarklet
- https://jamesg.blog/create
- You can create GitHub files with values in a query string:
- https://github.com/capjamesg/jamesg.blog/new/main/pages/posts?filename=2025-05-14-test123.md&value=---value of the post
- where the ? is the start of the query string.
- the value needs to be URL encoded.
- https://github.com/capjamesg/jamesg.blog/new/main/pages/posts?filename=2025-05-14-test123.md&value=---value of the post
https://decapcms.org/docs/intro/
- create a new file in github from current page: https://github.com/bpugh/brandonpugh.com/blob/main/bookmarklet.js
- GitHub issue templates: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository
- The backtick key is useful in JavaScript for string interpolations
- https://en.wikipedia.org/wiki/Backtick
- Scheme calls it a "quasi quote"
- What we're working on
- James is working on his edit bookmarklet
- Matthew made a bill of materials for his home server
- https://turner.enemyterritory.org/shared/repo/user/carrvo/website/homeserver-bom-calculator.html
- What are the costs of associated with running a home server?
- What would a website (software) bill of materials look like?
- SBOM format (Software Bill of Materials) is becoming more popular.
- Domain, server costs, CDN, DNS, illustrators who help with your site, GitHub, GitHub Actions / CI, -- what other costs are there?
- "tokei" lets you see what languages you are using and how many lines in each.
- sloccount is related too
- https://github.com/XAMPPRocky/tokei.
- tokei is made in rust and is really fast.
- supports JSON/YAML/etc. output if you want to render in HTML
- Manny is working on share buttons for his website
https://piccalil.li/blog/simplify-sharing-with-built-in-apis-and-progressive-enhancement/
- Front End Study Hall: https://events.indieweb.org/2025/05/front-end-study-hall-028-FnCziY2O2Fd9
- The next one is May 20th (a tuesday!)
- Tantek at IndieWeb Camp Dusseldorf
- Upgraded site to PHP 8
- Regression was an annoyance - broke auto footnote styling and linking
- Tantek fixed an issue on the call (not the aforementioned regression), announcing "a-ha" when fixing!
- https://tantek.com/appearances now works (no .html needed)
- Querying your photos that match a condition (i.e. ones you have found on Wikipedia)
- Tagging your photos on Flickr so you can cite a Flickr URL for such sets, e.g. ones used in Wikiepdia articles, or in press articles
- Tantek long-term plan: Moving content from pbwiki wiki to his personal website, and putting things in places that make more sense on his website. appearances is one instance of that.
- Idea: filter posts on your site that have been syndicated.
- How does one become an extra in a film as a computer wizard?
- Library / IndieWeb crossover - https://artlung.com/blog/2025/05/13/a-landscape-of-things-to-read/
- https://en.wikipedia.org/wiki/Library (first photo is a photo of
- Working in libraries
- Apple's printer: https://en.wikipedia.org/wiki/LaserWriter
- Defensive coding
- Good engineering: One failure should not cause everything else to fail -- a significant quality in infrastructure.
- Building the Hundred-Year Web Service with htmx https://www.youtube.com/watch?v=lASLZ9TgXyc
- XML
- secondary effects of code
- another thing to think about: what are all the inputs? how does that effect a summary of a blog post?
- how will an RSS reader see the content?
* you may want to have another attribute you use for RSS feeds if the title contains HTML, etc.
- Joe liked the two-way binding
- Blog post idea: List of frameworks you use on your website
- There are sites that try to analyze what technologies a site uses based on what it loads (markup that indicates WP, jquery, etc.)
- coffees-made meta tag
- James' coffee HTTP headers:
- x-powered-by: Coffee and code
- x-favourite-coffee-brewer: Orea
- Brandon uses a Hugo theme that has a "suggest changes" button
- It would be cool if you could load websites on an Apple Watch
- You'd have to design the website to accompany the form factor
- https://jamesg.blog/2023/12/22/taylor-swift-lyrics-desk
- Last displayed:
- Prompt: Friday
- Taylor Swift: Feels like home, stay in bed the whole weekend.
- Last displayed:
- https://jamesg.blog/2021/06/22/thermal-printer-part-3
https://chrishansen.tech/posts/Electronic_Shelf_Tag/
Google Glass uses:
Mastodon on an eInk Screen:
- https://artlung.com/blog/2019/09/06/from-the-indieweb-meet-this-morning-annika-backstroms/
- James also showed off an eInk screen with Taylor Swift output
- Benefit of web apps: You don't have to install them / set them up on your computer!
- We can run a browser on everything, the same way we can run DOOM on everything.
- The mindset of putting things on the web / working with the web platform
- https://pebble.github.io/pebblejs/
- https://developer.rebble.io/developer.pebble.com/guides/communication/using-pebblekit-js/index.html
- Gatekeeping of what it means to be a developer -- if you write HTML/CSS, you are definitely a programmer!
- You can share websites with friends!
- We can run each other's HTML that we write.
- This is one reason why readable source / replicable code is important.
- Web page idea: Showing your website on as many different devices as possible.
- James question: Could I run my website on a coffee brewer?
- A light bulb blinking binary to show your website
- Meta tag that describes the roast that pairs best with an article
- What would article pairings look like?
https://blog.infected.systems/posts/2025-04-21-this-blog-is-hosted-on-a-nintendo-wii/
- https://streetpass.social/
- We should have Streetpass for computers :D
- Apple has a feature that lets you put two phones in proximity to share contacts
- Airdrop is related
- But there are so many security considerations
- On the topic of Tic Tac Toe, built a website for a similar but more complex game, https://teeko.cc
- In the days before common SSL and secured Wireless: (EtherPEG and DriftNet) one could display images flying around on a wirelessnet work
- https://web.archive.org/web/20110618142228/http://www.etherpeg.org/
- https://web.archive.org/web/20110609040119/http%3A//www.ex-parrot.com/%7Echris/driftnet/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern
- <input type="text" class="scream" name="scream" title="Insert suitable scream here" required="" pattern="[aA!]*">
- HTML input types: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
- NFC tag where you scan the NFC and it takes you to a page to RSVP on your website
- Maybe you sign in to the event page with your domain, or it knows your domain by some mechanism (i.e. your browser saying what your domain name is, in some distant future where this is possible!)
- Costa large cups are really large
- Scrivener tool for organising notes
- Tool for manually transcribing text: https://otranscribe.com/
- James' oTranscribe from 6+ months ago is still in his session storage!
- HappyScribe automatically transcribes text https://www.happyscribe.com/
- Google Recorder Android app can be used for taking audio notes, and does on-device transcription
- Many more tools to turn audio into raw text exist on the web these days, including on-device transcription
- What would an audio-first experience look like for a website?
- https://shell-song.neocities.org/# uses AI-based audio.
- On-screen text would be essential for accessibility.
- "Aural Box Model" as an analogue for "Box Model" - to encompass pauses, cue sounds, changes in output level or voice based on content
- ^ On mobile <input type="file" β¦="β¦capture=microphone"/> works for capturing audio input from a user. Explicit consent is required. https://web.dev/articles/getusermedia-intro
- Although many operating systems have dictation features
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aural (Deprecated?)
- https://lab.artlung.com/speech-synthesis/
- https://2023.stateofthebrowser.com/speaker/ana-rodrigues/
- James filed https://github.com/adityatelange/hugo-PaperMod/pull/1741 shortly after the call to see if he can get rel=edit into the Hugo PaperMod theme, a popular Hugo theme.
- James also filed https://github.com/squidfunk/mkdocs-material/pull/8217.