events/2024-06-06-front-end-study-hall

Front End Study Hall #004 was an IndieWeb popup on Zoom held on 2024-06-06.

• Archived from: https://etherpad.indieweb.org/2024-06-06-front-end-study-hall

Front End Study Hall #004

June 6, 2024

Participants

• Joe Crawford
• Aaron Klemm
• Al Abut
• Ros
• benji
• Eric Meyer
• Tantek Çelik
• ...

Notes

• Joe Crawford's background today: the CSS Zen Garden, circa 2003 from the Internet Archive
  • https://csszengarden.com/ first appeared in 2003 and accepted submissions through 2013
  • Style State https://stylestage.dev/ started in 2020 with similar goals - link to the codepen: https://codepen.io/5t3ph/pen/PoZQyoa
• Ros shared her new website https://indie.rosalindcroad.com/
  • added comments inline with her CSS to help her (and others!) understand what the CSS doing
  • find people who might be useful, Jeremy Keith gave good advice breaking down "trust me, code it from scratch" and then found IndieWeb Brighton
  • Angela Yu https://www.udemy.com/user/4b4368a3-b5c8-4529-aa65-2056ec31f37e/
  • Kathy Sierra's inspirational talk of learning to code - starting with "coding is really hard"
  • https://cssgridgarden.com/#en
• Portrait of Isla: https://codepen.io/ivorjetski/pen/dBYWWZ/
• Video of Ben doing Isla's mouth in CSS: https://www.youtube.com/watch?v=py8Nl_7Furc
• Video from Ben Evans about drawing with CSS: https://www.youtube.com/watch?v=Ey4ek7GK0OE
• Excel art: https://mymodernmet.com/excel-art/
• Tatsuo Horiuchi - 77 year-old Excel artist: https://www.thisiscolossal.com/2017/12/tatsuo-horiuchi-excel-artist/
• Attempting to create a simlr
• https://codepen.io/benjifs/pen/zYQzMZz
• List to bar graph: https://meyerweb.com/eric/css/edge/bargraph/demo.html (from ~2003, please excuse the [lack of] font styling)
• Table to bar graph: https://meyerweb.com/eric/css/edge/bargraph/demo-table.html (Ibid)
• We tried to use attr() to pull data from an extracted table data- attribute to set opacity for a color but failed, browser support https://developer.mozilla.org/en-US/docs/Web/CSS/attr
• ObservablePlot library: https://observablehq.com/@observablehq/plot-gallery
• D3.js, Plot
• Edward Tufte's sparklines - as used in capjamesg's website - CSS sparklines
• https://www.kevinmarks.com/svgsparklines.html Kevin Marks' games

https://x.com/EdwardTufte/status/389717292621119489

• px2svg: https://github.com/meyerweb/px2svg
• upsizing a small image creates fuzziness, the alternative is to convert the pixel art into an svg made of squares: https://smorgasborg.artlung.com/image-upsizing-with-svg/ - using a library by Eric Meyer
• Joe Crawford writing SVG can be done by hand - there was a tutorial in the last few years which walked you through making SVG by hand but I'm having trouble finding it https://www.nan.fyi/svg-paths
• Please add SVG related links and resources to the SVG page! Thank you
• grid layout using emoji https://codepen.io/var-bin/full/eGwRyj
• https://chat.indieweb.org/2022-01-30#t1643571575449000
• ShareOpenly
• Android multiple pasteboard keyboard

https://ply.io/marketplace/listing/share-the-link-to-the-website-youre-viewing-in-a-s/yN1QlNm/