events/2024-06-06-front-end-study-hall
Front End Study Hall #004 was an IndieWeb popup on Zoom held on 2024-06-06.
Front End Study Hall #004
June 6, 2024
Participants
Joe Crawford
- Aaron Klemm
Al Abut- Ros
benji- Eric Meyer
Tantek Çelik- ...
Notes
- 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
there was a tutorial in the last few years which walked you through making SVG by hand but I'm having trouble finding ithttps://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/