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

From IndieWeb

Front End Study Hall #013 was an IndieWeb meetup on Zoom held on 2024-10-24.

Front End Study Hall #013

October 24, 2024

Participants

Notes

Styling Links in 2024!

  • Topic today prompted by Al Abut examining how to quantify whether the contrast of the links on his blog are adequate from an accessibility perspective
  • Dr. Matt Lee is now an accessiblity expert at his workplace has access to Cypress based testing tools
  • WebAIM color checker can take two colors to get an initial determination of contrast, does not account for type weight, font size, other background element such as images or text shadows
  • Nick remembers seeing a color contrast checker that uses background, text, and link colors...to check contrast of all 3... will share the link if I find it again. It wasn't this, but: https://contrastwizard.com/
  • Contrast Grid also lets you measure multiple colors: https://contrast-grid.eightshapes.com/
  • Brainstorming alternatives to underline links
    • text-decoration-color
    • sub-pixel length text-decoration-width
    • light color behind only links?
    • underlining may be unattractive, clash with other design and typographical goals, see tweaks to these less well-known CSS attributes, showed off by Eric Meyer:
      • text-underline-offset: 0.15em
      • text-decoration-skip-ink
      • text-decoration-thickness
      • text-decoration-color
    • See https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
  • Cypress testing for accessibility, node-based page testing tooling, they allow for 1 free project, potentially useful for doing automated testing against actual web pages as they run in a browser
  • Contrast
  • Here's Joe Crawford's codepen to explore some styling options for Al, which was a starting point, we then transitioned to...
  • Firefox has excellent development tools, several Eric Meyer reminded us of and showed off in further exploring the style options for links for Al's page, and more:
    • Animation Tab - in DevTools, shows animations that are running
    • Changes Tab - to see a list of all CSS edits made against the current document's CSS
    • Transition Editor is a tool to interactively manipulate a transition using a timeline graph, vs using keywords like linear, ease-out-in
    • Polygon Editor - The polygons for shape-outside and for clip-path can be edited point by point. Look for the icon next to those attributes in Firefox
    • MDN for shape-outside and clip-path
  • When will we get sound synthesis in the browser?
    • We do have speech synthesis: window.speechSynthesis.speak(new SpeechSynthesisUtterance("front end study hall"))


Front End Study Hall (FrESH)
Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend
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 •
Retrieved from "https://indieweb.org/wiki/index.php?title=events/2024-10-24-front-end-study-hall&oldid=97997"