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

From IndieWeb

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

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

Cheers, Kevin!

Flexbox vs CSS Grid

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

Sticky Position

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:

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

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!




Front End Study Hall (FrESH)
Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend
2025
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 β€’