events/2025-04-24-front-end-study-hall

Front End Study Hall #026 was an IndieWeb meetup on Zoom held on .

• Archived from: https://etherpad.indieweb.org/2025-04-26-front-end-study-hall

Front End Study Hall #026

Apr 24, 2025 6:00pm

Participants

• Joe Crawford
• Template:vanderwal
• Kevin Marks
• Mark Sutherland
• benji
• Mike Kupietz
• Eric M
• Emily N
• James
• Yonatan
• Ricardo C

Examining Ben Evan's Artwork

• Joe Crawford's background today is the landscape from the work of artist Ben Evans: Pure CSS Landscape - An Evening in Southwold with the sun1 set to #ff0000 (red).

• Ben Evans links:
  • tinydesign.co.uk)
  • YouTube: ivorjetski
  • CodePen: ivorjetski

• apps.artlung.com/landscape adapts Ben's Code to allow for a query string of 6 hex digits to allow differing sun colors
  • Initial plan was to adapt the SCSS functions to modify color--darken(), desaturate(), darken(), adjust-hue(), rgba() and adapt them to color-mix() and oklch() both of which are available in the browser. With css custom variables $sun1 could be adapted to be defined as --sun1.
  • In lieu of that a partial change was made to use that for a subset of the colors then use a server-side compiler in PHP: Composer package (ScssPhp)
  • The result is not particularly fast but does allow a modified result based on an edited query string with a 6 digit hex color
• Original CodePen: https://codepen.io/ivorjetski/pen/xxGYWQG
  • Adaptation by Joe Crawford
    • https://apps.artlung.com/landscape/?color=00ff00
    • https://apps.artlung.com/landscape/?color=cccccc
    • https://apps.artlung.com/landscape/

Exhibition at Leicester's Phoenix Gallery

• Mark Sutherland attended Paint by Stylesheet - shared some photos of the exhibits which featured CSS code front and center written on the wall

• Possibly the first in the world CSS-forward art exhibition.
• Description:
  • New Media Art Club’s exhibition Paint by Style Sheet features works created during their fourth artist bootcamp – an intensive, two-day residency that brought together artists to explore the creative potential of CSS (Cascading Style Sheets) as a medium for drawing.
  • phoenix.org.uk/events/paint-by-style-sheet/
• https://www.phoenix.org.uk/events/paint-by-style-sheet/
• Ben Evan's explanation: https://frontend.horse/articles/realistic-art-with-css/
• Interview with Ben Evans by Kevin Powell from last year
• Exhibition runs through 25 July 2025'

A Terrific Talk about AI in an Accessibility Context

• Shared by Joe Crawford talk about using "discriminative AI" for providing good alt descriptions of an image, but generative AI is pretty much garbage
• AI and Accessibility: the Good, the Bad, and the Bollocks / Léonie Watson / FFConf 2024 https://www.youtube.com/watch?v=Ij-GLix2QUQ
  • Leonie is great and has been part of w3c for many years - her website is tink.uk

Discussion: Sound in a web page must be the result of a use event

• Sounds generated by a page must be initiated by a user - why?
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices
• if you want midi - have a look at https://feross.org/bitmidi/ which has a WebASM midi player
• <embed> vs <audio> tag
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/embed
• <embed> vs <object> vs <audio> vs <video>

Watching new browser capabilities roll out into browsers

• BCD Watch: https://bcd-watch.igalia.com
• anchor positioning, color mixing
• "baseline project" - puts the
• Tiers of "not very available", "newly available" - fewer than 30 months, "widely available"
• How long does it take to deploy things out to the world

On The Humble <hr>

• Inspired by a skeet from bleeptrack.de
  • I just set an <hr> tag. I think, I haven't done this in 20 years. Did they get out of fashion or is it just me? (src}
• It's not a top 20 used tag
• But it is very useful!
• https://www.advancedwebranking.com/seo/html-study
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr
• Eric M and Michael has terrific styled ones, and Mark Sutherland styles his as candy canes at Christmastime

More widely available shape()

• shape() https://codepen.io/artlung/pen/ZYYGLmy
• https://developer.mozilla.org/en-US/docs/Web/CSS/shape not quite in Firefox, but coming
• if you can look at a clip-path polygon you can read a shape code syntax
• similar to SVG code but more readable to a human

Other Fun Stuff

• https://geocities.live/ turn your site into a Geocities-looking site
• LQIP placeholder images

Vectors, Vectors Everywhere

• SVG is coming, server-side generated flash
• SMIL - interactive media
• inline graphs
• Kevin Marks Nunjucks or Jinja to generates chunks of SVG
• ObservableHQ's Plot library - Mike Bostock's D3.js
  • Plot is much more declarative and nicer to write
  • Making graphs

• Sophia is playing with D3 - see fractalkitty on CodePen
  • showed off several art, word, data visualizations using D3 and other tools
  • gravity, inertia
  • Vornoi diagrams are built in.
  • D3+ P5
  • https://codepen.io/fractalkitty/pen/QwWbGjd
  • https://bettercatastrophe.com/ (example presentation with nice SVG paths) (example Sophia found)
• Mark Sutherland showed off an older client work that used SVG + animated isometric backgrounds to show birds in an environment along with data/words
  • https://aescripts.com/bodymovin/?
  • https://airbnb.io/lottie
• Michael K showed off https://www.kupietz.com/filemaker-ddr-analyzer/ - interactive database dependency charts with WASM port of GraphViz
  • Useful for visualizing database dependencies: tables and stored procedures in a Filemaker which can be complicated to understand and untangling when administering a database
  • Visual tools can help us understand complex structures
  • Graphviz art from Michael of social graphs - https://michaelkupietz.com/?p=29448
• Mark S showed a photo of The Tate's flash deprecation notice (tate.org.uk)
• https://ruffle.rs/
• "we are living in a scroll economy"
• Fractalkitty was asked about a written piece of hers that lacked photos where typically there would be photos - she was making a deliberate choice to share in a particular way
• "All websites should have a pigeon"
• I will replace my pigeon with a flying toaster" (e.g.: https://codepen.io/fractalkitty/live/BawKOeP )
• https://www.bryanbraun.com/after-dark-css/all/flying-toasters.html
• https://hypertext.tv/
• https://jcs.org triggers after left idle for a minute

Thanks for supporting FrESH for a year

• A word from Joe Crawford:
  • This marks the 26th Front End Study Hall - today was the one year anniversary
  • Everyone ought to make a web page
  • We are all carrying around web browsers which are our window into the world and we need much larger views of the wide world
  • I remember being able to walk up to a small home computer at Sears or Radio Shack and typing
    • 10 PRINT "HELLO"
    • 20 GOTO 10
  • and having a feeling that a computer was something that was subject to my control. And human beings all ought to have a bit of that feeling, that computers are tools that we can learn to use, not be magical machines we are subject to or mere tools to doomscroll with.