events/2025-05-08-front-end-study-hall

From IndieWeb

Front End Study Hall #027 was an IndieWeb meetup on Zoom held on 2025-05-08.

Front End Study Hall #027

May 8, 2025

Participants

Joe's Zoom Background Today

  • jQuery website, 2006
    • Developed by John Resig, launched with a website, blog, mailing list, and plugin architecture
    • jQuery made writing JavaScript more accessible to amatuer programmers
    • Used CSS selectors as a means to choose and manipulate items on a page
    • Still very popular library deployed on the web 19 years later. Still in active development jquery.com
    • Influenced CSS development and improvements; and CSS development influenced jQuery's development (here's discussion of CSS selector implementation on www-style mailing list, 2008.
    • Introduced a fluent "chained" programming style
      • Example code:
$("p.surprise").addClass("ohmy").show("slow");
      • In vanilla JS today:
document.querySelectorAll('p.surprise')
 .forEach(function(element) {
  element.classList.add('ohmy');
  element.style.display = 'block';
  element.style.opacity = '1';
});
  • Joe Crawford posits that we have :has() today because it was implemented in jQuery
  • Eric M: :has() date back to the late 1990s, although the first widespread implementation of :has() may have been in jQuery
  • Browsers got better, more efficiently
  • "Someone had to do it natively and performantly" (adblocker company hired ogalia to implement has ad proved it could work to the other browser makers)
  • We would not have gotten document.querySelectorAll(); we got a whole lot of DOM tools from jQuery
  • Notes on how modern browser APIs do what jQuery used to: You Don't Need jQuery
  • See also jQuery

Grab Bag of Topics

Text Shadow Performance

  • Mike Kupietz removed multiple text shadows from home page
    • working on improving Google PageSpeed
    • Largest contentful paint - PageSpeed
    • was: Fancy 12-14 text-shadows
    • Using Firefox - to toggle the styles to see results

PNG with Alpha vs light JPG / dark JPG

  • Joe Crawford Joe made a header with a <picture> element and multiple image editions to avoid a heavy PNG which could do alpha to support light and dark backgrounds - multiple jpeg images with black or white backgrounds were lighter.

Color Modifications

  • Webkit is shipping <input type=color alpha>
  • Will also store color using the native color space (not reset to srgb)
  • Mike Kupietz has a tool to play with his colors on hit site
  • does not use oklch, but does use JavaScript and jQuery:

Pope Note 1

  • Announced during meeting: Habemus papam! And he's American

Joe Blogged about CSS Battle and FrESH

Trek

  • Eric's background? Star Trek: TOS
  • LCARS (from ST: TNG) thelcars
  • Dan Hon has done some design with LCARS
  • Joe attended Dan Hon's Hallway Track 006 Star Trek and Design in January 2024
  • In other venues, Mike will happily argue you into the ground that TNG is not Star Trek

List Item Icon Taking Too Much Memory?

Speaking of Popes, Typography!

Nuance with text-wrap: balance and non-English languages

ul,ol,dl,dt,dd,p,figure,blockquote {
  hanging-punctuation: first last;
  text-wrap: pretty;
}
/** And maybe this for headings, 
  * if they’re being centred: */
h1,h2,h3,h4,h5,h6 {
  text-align: center;
  text-wrap: balance;
}
  • we need a better term for "widows and orphans" - words hanging after a headline

This is Reilly: Wi-Fi is down, phone hotspot isn't fast enough to connect to Zoom audio

  • Joe has breaks on a <A> tags on home page to force long urls in-line from blowing out elements with a finite width
main ul li:has(p) a {
  overflow-wrap: break-word;
  word-break: break-all;
}
    • implemeted because pulled in html which included very long http links and would cause elements to be too wide
    • text-wrap: balance suggestion on a parent element (it works!)

On Linking every element, <a> around larger content

  • xhtml - allowed anchors on anything
  • html5 - anchors can surround anything and be valid!
    • Blame Eric M!
  • MichaelKupietz showed off https://michaelkupietz.com Page appearance - color modifications - color calculations in javascript, used jQuery

Reilly's goal: non JS hierarchical nav menu

Joe wants to work on this

  • NAV MENU:
    • WORK ON MOBILE
    • TABS SHOULD WORK TO EXPOSE EVERY NAVIGABLE PART OF MENU
    • ACCESSIBLE
    • NO JAVASCRIPT
    • ARROW KEYS (STRETCH GOAL)

calc(infinity)! and beyond!

  • calc(infinity)
  • to set maximum z-index?
  • or to set a maximum text-indent or margin-left to push things off screen?

Thanks for coming!

Got to go now; thanks everyone



Front End Study Hall (FrESH)
Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend
2025 01-02 • 01-16 • 01-30 • 02-13 • 02-25 • 03-11 • 03-27 • 04-08 • 04-24 •
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 •
Retrieved from "https://indieweb.org/wiki/index.php?title=events/2025-05-08-front-end-study-hall&oldid=101395"