events/2025-02-13-front-end-study-hall

Front End Study Hall #021 was an IndieWeb meetup on Zoom held on 2025-02-13.

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

Front End Study Hall #021

February 13, 2025

Participants

• Joe Crawford
• Joshua
• Ross A. Baker
• Jeremy Cherfas
• capjamesg
• jo
• Eric M
• benji
• Template:vanderwal
• Tantek Çelik

Joe's Zoom Background

• Joe Crawford's background today is a screenshot of the article that popularized the term "Ajax" in web development circles: https://web.archive.org/web/20151008003352/http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
• https://en.wikipedia.org/wiki/Ajax_(programming)
  • Ajax "asynchronous JavaScript and XML"
  • XMLHttpRequest https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest https://en.wikipedia.org/wiki/XMLHttpRequest made it possible
  • Makes webpages able to pull server resources and enables web applications that don't require a page refresh
  • Today, the Fetch API is widely available and far simpler to program with https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Topics Today?

New Open Source Font

• Ross A. Baker has been building custom fonts and pondering the readability of "quasi-proportional" for body text: https://typeof.net/Iosevka/
  • https://xeiaso.net/blog/iaso-fonts/
  • https://protesilaos.com/emacs/aporetic-fonts-pictures
  • https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis

Accessibility?

• More general principles of accessbility from Heydon Pickering
  • * https://github.com/Heydon/principles-of-web-accessibility

Reviewing "What HTML element" Quiz

• James made a "What HTML element are you (a quiz)" https://jamesg.blog/2025/02/13/html-quiz
  • I wouldn't mind a quick check to see if I am using the right HTML elements!
  • HTML validation: https://validator.w3.org/nu/?doc=https%3A%2F%2Fjamesg.blog%2F2025%2F02%2F13%2Fhtml-quiz

• • • CodePen to play with the form itself https://codepen.io/artlung/pen/WbNbKJm
• https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
  • https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
  • checkValidity and reportValidity

• https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid
• https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid

• reset button -- resets to initial state of the form https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset
  • kind of annoying without error prevention but useful?
• Tantek Çelik's homework question:
  • Which came first? [required] or aria-required ?

/* example code that leaves brighter questions which are unanswers, Thanks Thomas for talking about expected UX flow -- namely, to *encourage* users to interact with the fields they have not yet interacted with - that is, to complete the quiz */

body {
  background: #aaa;
}
fieldset {
  outline: 10px solid green;
  background: transparent;
}
fieldset:not(:has(input:checked)) {
  background: white;
  outline: 10px solid red;
}

• Designing the interaction,

• Tantek brings up Indeterminate as a CSS pseudo-class that can mark form elements that have not been interacted with https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

History

• Introduction of :indeterminate pseudo-class in a CSS draft: https://www.w3.org/TR/2000/WD-css3-userint-20000216#pseudo-indeterminate (note previous draft asked the question of should we have :indeterminate, for the first public mention of the idea)
• Radio and checkbox inputs (tested in Safari) that are part of a form are marked as :user-valid no matter their :checked state when the form is submitted