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: flex flex-grow and order with :after to intersperse a middle object.
- flex-grow
- order
- ::after

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
  - Video: https://www.youtube.com/watch?v=loKm4JcT4U4

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 and 2025.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.

Front End Study Hall (FrESH)
	Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend
2025	01-02 • 01-16 • 01-30 • 02-13 • 02-25 • 03-11 • 03-27
2024	04-24 • 05-07 • 05-23 • 06-06 • 06-18 • 07-02 • 07-16 • 08-01 • 08-27 • 09-12 • 09-26 • 10-10 • 10-24 • 11-07 • 11-21 • 12-05 • 12-17 •