events/2025-01-16-front-end-study-hall

Front End Study Hall #019 was an IndieWeb meetup on Zoom held on 2025-01-16.

• Archived from: https://etherpad.indieweb.org/2025-01-16-front-end-study-hall

Front End Study Hall #019

January 16, 2025.

Participants

• Joe Crawford
• Template:Adam
• Vince Aggrippino - https://vaggrippino.github.io
• jo
• gRegor Morrill
• Eric M
• btrem
• Thomas
• Emily
• capjamesg

Notes

• Joe's Background today is https://burnallgifs.org/archives/ - a bit of web history related to patents and GIFs - the web platform thankfully survived that era, and the patent for GIFs expired, and we have many great image formats today

Grab Bag of Topics from the To-Study List

• terrific page enumerating the many ways colors can be defined in CSS from Adam Argyle
• https://lab.artlung.com/root-color-properties-editor/ - bookmarklet editor that exposes colors defined in the :root

Fonts & Typography

• https://developer.chrome.com/blog/css-text-box-trim - feature for Chrome, Edge, Safari to expose font metrics to css for improved typographic rhythm
• Coding Adventure: Rendering Text by Sebastian Lague is a terrific video starting from zero and building software to render text on screen. Along the way one gains an appreciation for how complex font rendering it - there's far more going on than one might. think.
• Much discussion in some circles recently about the fact that There's no such thing as a web-safe font
• capjamesg asked in the indieweb chat this week a seemingly simply question: "How can I set the size of a font such that the text will take up 100% of the parent container without overflowing?"
  • jwz has one answer: Wherein wrapping text remains the hardest problem in computer science
  • Eric M shared an incredible bit of writing and code, utilizing css math to sizing text to fit the available line width: Fit-to-Width Text: A New Technique by Roman Komarov

• sIFR, Cufon (historical font techniques, best forgotten, but a reminder that the goal of great typography has been one people have sought for a long time)
• https://modernfontstacks.com/
• "I can tell you what browsers are supposed to do, but not what they actually do" - Eric
• Before SVG came out, custom fonts were popular for a time (e.g.: a custom font set in such a way that the word "cart" might use ligatures to render a "shopping cart" glyph
• Praise for Ana Tudor's wizardry (her CodePens) e.g. https://codepen.io/thebabydino/pen/PwYRmLN
• Another topic: CSS Grid Areas
  • Recent Wizard Zine about them: https://wizardzines.com/comics/css-grid-areas/
  • Another way to learn about CSS Grids - https://cssgridgarden.com/ - a gamified way
  • There's also Flexbox Zombies https://flexboxzombies.com/p/flexbox-zombies

Discussion: Why React?

• • React was built to make pages and cross-platform (think: web, mobile, tablet, etc) web applications
  • Bootstrap was an internal tool at Twitter, became popular
    • The similarity is bodies of code to accomplish a particular task from a corportate environment
  • Allows for developers to "hit the ground running" when joining a team

Ways to unset values set elsewhere in the. code

• • Cascade Layers: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
• https://developer.mozilla.org/en-US/docs/Web/CSS/unset
• https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi isolate
• Mashups - disparate content from multiple ways, code and content from other places oiught to be isolated and appear and behave as well as they can.

• CSS Reset History
  • https://piccalil.li/blog/a-more-modern-css-reset/ -- maybe?
  • CSS_reset
  • https://meyerweb.com/eric/tools/css/reset/ *starting point*
• https://lab.artlung.com/a-outline-none/ (2001!)
• The Other "C" in CSS: https://youtu.be/ob_M_qXeDVE?si=Tv0USu90PKoGWi6g by Sara Soueidan
• The CSS Day videos are excellent. and worth a watch to see the power and breadth of the web platform: https://www.youtube.com/playlist?list=PLjnstNlepBvO0-I7iwqpkOY_fwAop6Pl-

Digression on Fame

• Aside: update of https://en.wikipedia.org/wiki/On_the_Internet,_nobody_knows_you%27re_a_dog
• "on the internet, no one knows you're an AI" ?
• "He's just zis guy, you know?" - Gag Halfrunt

Options for setting up a site quickly?

• https://tailwindcss.com/
• https://getbootstrap.com/
• 960 grid https://960.gs/
• Classless CSS: https://www.cssbed.com/ - starting point stylesheets
• https://clagnut.com/blog/2433/
• On a deadline, using tools one is most comfortable with will likely be best

Thanks all for great participation! - Joe Crawford