events/2024-12-05-front-end-study-hall
Front End Study Hall #016 was an IndieWeb meetup on Zoom held on 2024-12-05.
Front End Study Hall #016
December 5, 2024
Participants
Notes
- Joe's background today is from from 2001 and showcases how powerful CSS was in 2001, and also how well good markup absent CSS still renders readably and legibly
- FrESH Recap - fancy list with connected graphical bullets we did last time
For examination: Christmas Lights!
- Christmas lights!
- Christmas lights variant, bulbs wired in serial from Eric:
- Some visual enhancements: shading for 3d effect, twisty wires and a touch of motion to make it look less stiff, added by Mike Kupietz (great job Michael! and a broken bulb!)
- see also holiday theme
Dot Leaders
- Somewhat related: https://nerdy.dev/css-wrapped-2024
- https://sqkhor.medium.com/css-dot-leaders-in-table-of-content-db26614665df
- https://codepen.io/paulobrien/pen/gGPrvQ
- Our CodePen: uses
display: flex
flex-grow
andorder
with:after
to intersperse a middle object.
James' mock markup for trying out dot leaders:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>Front End Study Hall</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Fun!</li>
</ol>
</body>
Dot Leaders in 2001, 2010, 2024
- Tantek Γelik, 2001: https://tantek.com/CSS/Examples/dotleaders.html
- w3.org 2010: https://www.w3.org/Style/Examples/007/leaders.en.html
- FrESH, 2024: https://codepen.io/artlung/pen/RNbryMr
Elsewise
- benji: had to run to a meeting. (Thanks for joining Benji! - Joe Crawford)
- benji added really cool animated decorations https://www.benji.dog/articles/december-adventure-2024/ inspired by today!
- Terrific inspiring talk about better tech in the browser from Config 2024: Design engineering
- From design to engineer (Jhey Tompkins, Vercel) | Figma
- Joe Crawford added theming on https://lab.artlung.com/ that persists for you the reader - all the code is open source on github if you're curious as to how it works https://github.com/artlung/lab.artlung.com (look at the
2025.scss
and2025.js
files in particular)- paotsaq was wondering whether it relied on js β guess I have the answer π. thanks for the meeting! great stuff.
- * Joe Crawford recently was watching https://www.youtube.com/watch?v=nn3vYS_msc0 which mentioned how the browser development teams do ask for bug reports, comments. Comment: If we have concerns as authors on the web we ought to claim our voice and be heard when we see problems or features we wish worked differently.