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!) Edit: as of 2024dec15, the bulbs are now interactive, you can knock them around a little by moving your mouse over them. Codepen link updated. - 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: flexflex-growandorderwith:afterto 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
2025.scssand2025.jsfiles in particular)
paotsaq was wondering whether it relied on js — guess I have the answer 😄. thanks for the meeting! great stuff.
- *