2019/SF/Demos

Demos for IndieWebCamp SF 2019 took place December 8, 2019.

Jeremy Keith

Tantek Çelik, https://tantek.com
worked on improving offline support
loads the page over https so service worker loads
caches at least homepage and a couple other pages
now turns off the network
clicks a permalink while offline, it shows a message about not being cached
turns wifi back on, reloads
browses a bunch of pages
not sure how long it takes on chromebook to cache each page. in theory each nav should be caching
turns wifi back off
goes back to previous post, shows a list of pages it cached
it did actually cache quite a few pages
thanks to Jeremy Keith for help

gRegor Morrill, https://gregorlove.com (remote demo)
goal to get off Facebook by the end of the year
worked on getting an email subscription working (to his site)
ability to subscribe by email to several of his feed coming soon!
and other places you can follow him (not FB)
also worked on some behind the scenes stuff for the email subscription, login with one-time password

http://bradleyallen.info/
was going through the wiki, partially to see if he could follow it, anything he's stuck with
has beginning of an h-card
section for latest posts
has a question about p-summary
Tantek Çelik: "everything is optional" (with microformats)
needs to template-ize, could be Eleventy or something else
some live code feedback from the room

https://jensimmons.com/
showing a CSS Grid demo
problem with this demo right now is that it's not accessible
if you look the HTML, you'll see each letter wrapped in a span
feels ikcy, feels wrong
vague memory from a decade ago
shows Firefox Accessibility inspector
you have to turn it on
you can inspect accessibility properties
this heading is no longer the word "graphic design" but rather the individual letter g r a p h etc.
experimented with fixing this with ARIA roles
got a recommendation from Marco at Mozilla
put aria role="none" on each of the individual spans
it has the effect of removing those span letters
all those span containers are gone, now its just text leafs of the letters
not sure if a screenreader will do the right thing here
best way to do it would be rewrite the HTML
put aria-hidden = true on the individual letters
and aria-label on the heading itself
Accessibility inspector helps you see what's going on with ARIA etc.
it is off by default, you have to turn it on which activates the whole accessibility engine
you can also check color contrast, color blindness etc.