2024/Brighton/Demos

From IndieWeb

2024/Brighton/Demos was a session at the end of day 2 of IndieWebCamp Brighton 2024 where participants took turns demonstrating and talking through what they did, made, created on or using their personal website or for the community.

Demos

Jeremy Keith

  • Sharing bookmarklets to test website
    • Wrote blog post: https://adactio.com/journal/20965 with bookmarklets on WAVE, SSL Report, validating HTML, carbon calculator, and more.
    • Demoing bookmarklets: Carbon calculator.
    • Take bookmarklet, drag into toolbar. When you visit website, you can click on the bookmarklet.
    • Paul’s website gets an A* carbon rating :)
  • Adding related links and adding blog posts with related links
    • When you're looking at links you can see related links. Got this working today.
    • Uses tags to determine what links to show (i.e. link about front-end web development shows more links about front-end development).
    • shows related blog posts on Links entries (short posts about a specific links); you can see things Jeremy has written that are related to a particular link.
    • Blog posts also show related links.
    • Works as long as Jeremy tags posts diligently.
    • Excited about the fact there are more places to go next after you read a post on his website.

Mark Everitt

  • Helping out with DNS and hosting things at the beginning
  • Gets A* carbon rating *using Jeremy's bookmarklet) − better than 100% of websites!!
  • CSS extraction, added a colophon that describes design philosophy.
    • Hosting information, IndieWeb functionality, etc.
  • CSS for page is cached; used to have a lot more rules in main css, but now there are fewer. Styles not used on every page (i.e. syntax highlighting, MathML) are in separate files now.

Dave Letorey

  • Trying to setup webmention with new site
  • Adds h-card to footer
    • Split things in h-card into an authors.json file that is pulled automatically to add content to footer.
    • Footer pulls from the authors.json file.
    • When he gives his code to other people, they can change the JSON attributes rather than having to edit the code in the footer.
  • Wants to keep website as minimal as possible.
    • Demo'd footer with h-card.
  • Fell down a DNS rabbit hole and struggled to get website to be back online
    • Site is back online (James: exciting!)
  • Started plugging in Webmention in website
    • Added rel=webmention and a pingback link
    • That's as far as I got, now that I have that, what am I going to do with it
    • Still figuring out what to do with it
    • Unsure about putting all comments on his website
  • Added responsive text.

Ana Rodrigues

  • Getting micropub endpoint set up with Indiekit
    • Can pubilsh files to personal GitHub repository
    • Content is being deployed to Ana's personal website
    • Next step: Writing a plugin to work with Ana's specific setup.
  • Adding privacy/accessibility pages on website
  • Updated footer to use two side-by-side boxes that look like a sketchbook
  • Uses Pinterest moodboard to keep track of ideas and inspiration, eventually would like website to look like some sources of inspiration.

Chris Newton

  • Uses Markdown on posts.
  • MDN says that titles on images are harmful because of issues with touch devices, keyboard navigation, screen readers, etc.
  • Updated Markdown parsing logic with a tool called Unified.js that lets him change the structure of the Markdown. Already being used for image optimization. Updated how content is rendered so that the img w/ title is now a figure with figcaption.
  • Documented Unified.js plugin in a blog post that describes how his tool works.
  • You can use utilities with Unified.js to do things like use CSS selectors to select images.
    • Then you can use hastscript to build new objects in the syntax tree.
    • Creates figure element, puts image inside it, creates figcaption, adds text in caption. Replaces default content in the tree with the resulting code.
  • Conclusion: Adds captions to images.

scoutaloud

  • Made their first website!
    • It has a domain name!
  • Set up S3 bucket for website
    • Started setting up CloudFront account for personal website, takes time, reading, and learning
    • Put picture on personal website

Paul Watson

  • Updated 404 page styles (example: https://lazaruscorporation.co.uk/14414).
    • All one page, no JS
    • Interactive game where you can click links to navigate to different pages
    • Then you end up at a post on his website
    • Every block of text is a div with an id and CSS is used to show and hide sections.
    • Some of the pages have artwork that is relevant to the page
    • Helps you find a page on the site that you might want to see

Murray

  • Created Ad Hops section on their website, which tracks the beers they have drunk/recorded
    • Has almost integrated all parts of the API, but doesn't have geolocation or type attribute (e.g. "stout" or "IPA") working
    • Shows star rating
    • Q: Does it use h-review? A: Has not used h-review due to ongoing community discussion on whether to subsume h-review into h-entry, so uses that instead, but has used h-review specific m2d e.g. rating.
    • Page marked up as a h-feed.
    • Uses rel=me to main website to populate author details.
    • Still needs to do more experimentation with microformats and markup.

Ros

  • Showing personal website
    • First web page from scratch
    • Has navigation bar (doesn’t go anywhere yet)
    • Added colours for links
    • Uses different fonts for headings
    • Working on lines, borders, margins
    • Coding from scratch is satisfying so you can see the results
  • Thinks will have site online within a week
  • Trying to work on how to write articles, but priority is getting things out there now.

Jon Roobottom

  • Spent time on private posts
  • Restyled articles
    • Chosen favourite articles that are promoted
    • Spent a lot of time getting the first published dates on articles; moving into digital gardens paradigms.
  • Wrote a blog post — took 15 minutes. Mainly thanks to digital garden concept of publishing then knowing you can edit.
  • Excited about building things for his website.

Francesco Figari

  • Page works well when you dynamically resize
  • Menu changes size when you resize the page
  • Copied code from blog post a few years ago to add a dark theme
  • Dark theme is live on his blog
  • Created Writing page, will fill it out with more content in the future
  • Worked on other CSS changes on website – things I've read on the internet example shown.
  • Some pages still use the old design system

Nina

  • https://honeyeyefilm.de
    • Website was empty this morning, now has content
    • Inspired by https://josprojects.com and the Instagram style
    • Links to professional and personal Instagram in the footer
  • Added Impressum
  • Main page shows photograph she has taken

capjamesg

I did a few things: firstly wrote a blog post on [1] 100 more things you can do on your website'. Actually 100 items this time. recommend making a quiz! (e.g. favourite cheese, anime hair). Actually it's not 100 things! Close enough to 100.

Other thing: past few weeks the website has had a penguin in background. Press 'p' to show the penguin, press WASD to move it, when it gets close to a hyperlink it'll open the page. Just a fun way to navigate around my site.

And another thing: every blog post now has a related Taylor Swift lyric. I underestimated how long it'd take, but it's almost done.

Sam Boyer

  • Released new blog
  • Created old-fashioned menu
  • Not actually an Apache index, but looks like one. Made with CSS. Hosted on GitHub Pages. Uses jinja2 templates.
  • Subdirectories instead of tags.
  • There is an RSS feed, made as a jinja2 template.
  • Added syntax highlighting to blog posts, thanks to pandoc, which is used to generate blog posts from markdown.

Andy

  • Thinking about digital gardens.
    • Used Drupal to make one.
    • Interested in planted and last tended ontologies, explored that on personal website.

Paul Robert Lloyd

  • Wanted to look at content design of getting started page on IndieWeb wiki, turns out needed to start a bit closer to home with IndieKit instead!
    • So cool to have perspective from someone who is new to IndieKit — Ana Rodrigues gave lots of useful feedback.
    • Paul found bugs in setup. Hard to demo (James: but still meaningful!)
  • Uses GitHub to do some project management for IndieKit
    • Added new tag for onboarding experience
    • Added 4-5 new issues that he needs to look at in more depth
  • Released update to Indiekit to fix image resizing bug and support 11ty
    • Published new version of IndieKit v1.0.0-beta.9
    • Thanks Ana again for her help
    • Paul wants to find more users / people who want to use IndieKit and sit next to them and get feedback on how to improve the onboarding experience

Joschi Kuphal

  • Spent most of the day analyzing the structure of his old website
    • Created a flow chart with all the pieces
    • Identified pieces that he wants to keep and dismiss for the time being
    • For example, there were events and projects on my old website; events were h-events and RSVPs to IWCs and HWCs. All past events. Not planning to publish more. Going to drop these. Will drop open source projects that are unmaintained or have been hadned over to other people.
  • Wants to keep articles, doesn't want to break any URLs. Webmention has been broken for a few years.
  • Will be new things on website. Slides from talks. Were already there but not discoverable.
  • Going to make a static website, plans to create a website from an ASCII Doc document. Going to transform older documents into ASCII Doc documents.
  • Tried to simulate all the things he would need for blog posts; basically text and images. Found embeded YouTube videos. ASCII doc has provisions for this. Made example document with an example of how content would look. ASCII doc produces proper HTML; not perfect, so some transformations will be needed.
  • This is what I planned today, plans to continue in Düsseldorf.

Tantek Çelik

Alex Sirac

  • Goals
    • Get rid of as many blog post drafts as possible, preferably by publishing them.
    • Write a blog post about webmentions (after I inadvertently prompted lots of people to share * interesting thoughts with my « webmentions make me sad » post)
  • Progress
    • Met people! Woo!
    • Wrote and posted https://alexsirac.com/doing-my-part/ (in English)
      • Part of an unofficial series called “I have a dopamine problem”
      • Interesting read. Thanks.
    • Proofread and posted https://alexsirac.com/un-plan-marketing-presque-tout-fait-pour-votre-asso/ (in French)
    • Marketing plan for non-profits that don’t have a marketing team
    • Where do you start with content creation. NB: Don't do it in Instagram stories. Longer post. Opened the draft and had almost written everything -- finished the post today.
    • Wrote and posted Accessibility notes from your headache-prone friend https://alexsirac.com/accessibility-notes/ (in English)
      • Entry for the IndieWeb Carnival. Whatever we do for accessibility, everyone benefits, including people who don’t explicitly need accomodations but who will have a better experience as a result.
    • Had 11 post drafts. Went through a few of them and published them.
    • Liked a post by someone who invented mashed potato pizzas.
    • Read James’ 100 ideas post. Now has 14 drafts. [crowd laughs]

Yousef Amar

  • Wrote blog post on ant farm with photos of the farm.
  • Second post was on springtails on ficus.
  • Third post was about an old game: Cult II: Federal Crime.
  • James: Nice work, Yousef!

David Shanske

  • Wanted to set up a mailing list server to experiment with bringing back my mailing list, only self-hosted instead of a service...well, the mail server will still be a service, but want to try to play with the code to interface with it.
    • Progress: Configured self-hosted mailing list service, now need to generate an HTML and text blog to send out using its API.

Closing Remarks

Paul Robert Lloyd:

  • Thanks to everyone for contributing, gathering.
  • Loved seeing what everyone is working on, demonstrating that you can do anything you like on the web. That's what the IndieWeb is about.
  • Thanks to Joschi Kuphal, for helping out, especially for remote cameras, Jeremy Keith who helped organise sessions on Saturday. Thanks co-organiser Mark Everitt for organising venue, food. [applause from everyone]
  • Apologies if remote experience was not as good as previous events. We are learning as we go. Lots of lessons learned!
  • Before we go, help tidy up. Moving tables back, etc.

Thank you, Paul! [applause from everyone]

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=2024/Brighton/Demos&oldid=93958"