events/2024-04-24-front-end-study-hall
Front End Study Hall was an IndieWeb popup on Zoom held on 2024-04-24.
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
Todd Presta- 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
- 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
- Flex does 1-dimensional, either vertically or horizontally
- 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:
remvsemvschvs...- 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.
- 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/
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
also https://unmung2.appspot.com/indiecard?url=https%3A%2F%2Faaronpk.com%2Frecipes
Sidenotes/Endnotes
For Kevin Marks: https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/
Future Events
Galactic Homebrew Website Club coming up Saturday: https://events.indieweb.org/2024/04/galactic-bonus-homebrew-website-club-cFBLfoV2C2fW
Upcoming Homebrew Website Clubs: https://events.indieweb.org/tag/hwc
The next Front End Study Hall will be on May 7, 2024: https://events.indieweb.org/2024/05/front-end-study-hall-002-5oY7I2XFCyLV
Thanks for joining Front End Study Hall!