events/2024-04-24-front-end-study-hall

Front End Study Hall was an IndieWeb popup on Zoom held on 2024-04-24.

Archived from: https://etherpad.indieweb.org/2024-04-24-front-end-study-hall

Popup: Front End Study Hall
When: 2024-04-24 12:00 to 13:35

Participants

If you have a chat-name set up on the wiki, add it like {{this}} otherwise include your name/website

Joe Crawford (facilitator)
gRegor Morrill
Kevin Marks
Pablo Morales
Mark Sutherland
to2ds
meyerweb.com
benji
Al Abut
Anthony Ciccarello https://www.ciccarello.me
Nick Simson https://nicksimson.com
mossymaker
Adrian Roselli @aardrian
Add yourself here… (see this for more details)

Agenda

✅ Short introductions!
✅ Group photo
✅ Let's learn some stuff

Topics to Discuss

✅ Flexbox vs Grid
- "Flex"
- Practical examples of take apart ("live in the wild")
✅ Sticky Position
✅ Basic HTML tags
Microformats
Things they wish they could do in CSS but can't - holes they can't do:
- Sidenotes and footnotes in CSS and markup
- Endnotes
- imagemaps
What kind of links are there - trick, security, rickrolling, things you can link to: email, telephones

Notes

CSS Is Awesome
- Origin story: https://css-tricks.com/css-is-awesome/#comment-1609829
- Joe Crawford's overengineered homage: https://codepen.io/artlung/pen/YzMBaQB
- Theme song? "Float On" by Modest Mouse

Cheers, Kevin!

Flexbox vs CSS Grid

Codepen for this topic, demonstrating CSS techniques with markup from Mark Sutherland's website.

Anthony Ciccarello explanation of CSS grids and flexbox
- Grids are for 2-dimensional layouts
  - https://css-tricks.com/snippets/css/complete-guide-grid/
- Flex does 1-dimensional, either vertically or horizontally
  - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Can combine flexboxes by nesting within them (alabut would love to see examples!)
- Mark Sutherland and Al Abut are transitioning their sites from Bootstrap to pure CSS, Mark with Grid+Flex, Al w/ just Grid
<base href> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Coming soon: Nested CSS
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
- Some browsers don't support nested selectors that don't start with a symbol, so consider using the "&" syntax
- Handy tool for browser support: https://caniuse.com/?search=nested%20css
Recently updated version of Revenge.CSS - https://heydonworks.com/article/testing-html-with-modern-css/
- (technique for QA and highlighting errors or bad practices)
padding-inline: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline
clamp(): https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
units: rem vs em vs ch vs...
- gRegor Morrill I don't do a lot of different units, but I tend to prefer rem (especially for text) to avoid the inheritance issues of em.
- https://zellwk.com/blog/rem-vs-em/ I haven't reviewed this in a while, originally from 2016, but may still have good info
- Al Abut still using px for personal work and wondered why it's fallen out of favor? Especially since his site works fine for zooms, even on mobile.
- Kevin Marks made a compelling point about mixing CSS frameworks and components which might be using rem units, then conflicts and issues can arise.
- Joe Crawford worthwhile to experiment with CSS Units - I find keeping a consistency in the unit I use makes it easier to reason about a design
- Opinionated and over-simplified post I referenced in the call: The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet
- I was wrong about adactio - his https://resilientwebdesign.com/ uses font-size: calc( 1em + (2 - 1) * ( (100vw - 20em) / ( 100 - 20) ));
- Not forcing default font sizes to prevent overriding the web visitors browser/system? settings.

Sticky Position

https://css-tricks.com/position-sticky-and-table-headers/
Using flexbox on <body> to keep footer at the bottom
- https://www.ciccarello.me/privacy/ (short content)
- https://www.ciccarello.me/posts/ (long content)

https://www.igalia.com/ has a sticky navbar/header
- Also https://www.atomicarchive.com/resources/documents/effects/glasstone-dolan/chapter1.html (and all other chapters)

Table row|column headers: https://adrianroselli.com/2020/01/fixed-table-headers.html

Can you get rid of Bootstrap and other CSS frameworks?

For layouts:

https://every-layout.dev/ "Learn to write better, resilient CSS", recommended by Kevin Marks
- Some of the layouts/docs are free on the site, $ for the full

Fantastic interactive guide to Grids: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
Introductory tutorial for a common blog wishlist item - images that break out of content columns into full bleed: https://www.joshwcomeau.com/css/full-bleed/

For components & typography (that could replace libraries like Tailwind):

comparing classless css layouts - stylesheets that style only semantic HTML https://classless-css-demo.deno.dev/

Introductory tutorial on creating component libraries: https://dev.to/prankurpandeyy/making-your-own-css-component-library-k0j

Basic HTML Tags

MDN is a good resource in general: https://developer.mozilla.org/en-US/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

The HTML Accessibility API mappings (where "semantics" actually matter, because this is what gets exposed programmatically to assitive technologies): https://www.w3.org/TR/html-aam-1.0/

Microformats Showcase

Pizza website made on Glitch

Clicking on regular text, it's a sneaky link that shows the ingredients and instructions
Showing the source code, there are h-recipe with `p-ingredient` and `e-instruction` classes
Demos parsing it via pin13.net
Kevin Marks showed unmung parsing and displaying the recipe as a card
- https://unmung2.appspot.com/indiecard?url=https%3A%2F%2Fsharp-wakeful-light.glitch.me%2Fpizza.html

also https://unmung2.appspot.com/indiecard?url=https%3A%2F%2Faaronpk.com%2Frecipes