events/2024-05-23-front-end-study-hall
Front End Study Hall #003 was an IndieWeb popup on Zoom held on 2024-05-23.
Participants
Joe Crawford
capjamesg
Al Abut
Todd Presta
gRegor Morrill
Jeremy Cherfas
Reilly Spitzfaden
pcarrier.com
Notes
- Al has a flex question - how does the flex: 1 0 0 layout in this Threads post work: https://www.threads.net/@mengto/post/C7DZG0YvKei
- CodePen for Flex exploration: https://codepen.io/artlung/pen/RwmRyXX?editors=1100
- Context - there's a photo layout in Figma that he has in mind, will figure out how to post here to the etherpad in a minute.
- My post I'd like to apply it to: https://alabut.com/writing/coffeeforpics/
- https://solomon.io/jekyll-island-2024/ (examples)
- gRegor Morrill I've referenced this a lot in the past: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Al for James: great description of the "inline magic" of images getting extra padding and also other layout issues: https://www.joshwcomeau.com/css/understanding-layout-algorithms/
- Chrome's web inspector has fun little UI hints and controls that almost look like Webflow, if you hover over a display: grid property in CSS. You can click on diagrams of different values to change the layout.
- Firefox does a cool thing where you if you choose different values for align-items from the autocomplete, it will update the main viewport in real time. (Chrome does this too)
- gRegor Morrill for Al: on https://indiebookclub.biz/ I've used the shorthand `flex: 0 0 [some measure]` like in the masthead with logo and text. I don't fully remember *why* but I think I was just trying to use flex-basis, which is the third parameter. Also some context: this is flex progressively enhanced with CSS Grid if supported, because at that time CSS Grid wasn't as widely supported. So you'll see a mix of flex and grid (and they share some properties, which is nice) (Thank you Gregor 👏)
- Joe finds min-content to be too aggressive for text but to be useful for non-text content. Al wants to play with it for the header design of his blog, i.e. to make sure the description or date fields don't go longer than the main headline.
units: rem vs em vs ch vs...
- some previous discussion in: events/2024-04-24-front-end-study-hall
- An older (short) explanation of `ch`: https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/
- Joe: loves the singlediv website for learning:
- https://a.singlediv.com/ - after 10 years of illustrations she is calling a halt on the project
- Creator: https://lynnandtonic.com/
And more single div drawings: https://cssdrawings.com/ And this! CSS! https://css-art.com/pure-css-portrait-isla/
Chrome Function
- Joe showed a cool demo of scroll-based animation: https://codepen.io/artlung/pen/abrZLwX
- The CSS color-mix function is very fun and powerful: https://developer.chrome.com/docs/css-ui/css-color-mix
- Chrome docs is unusually helpful in showing the previous implementations of the similar effect.
- Great use of these animations in the wild are the NY Times infographics: https://www.nytimes.com/spotlight/graphics
- Using a JavaScript shim https://css-tricks.com/books/greatest-css-tricks/scroll-animation/
- https://codepen.io/artlung/pen/GRaqzMo
- https://www.theguardian.com/lifeandstyle/ng-interactive/2024/feb/29/jay-shetty-self-help-empire
- Example of both vertical and horizontal scroll-based animation: https://daylightcomputer.com/ and https://daylightcomputer.com/product
Joe's Never Mind The Bollocks codepen which uses transform https://codepen.io/artlung/pen/qBvaePM
- Al: my most common use of transform for practical work is when working with absolutely positioned elements that need to be centered, rather than the default top left. Use css transform: translate(-50%, -50%) to center the "grab point" in the element.