events/2024-10-24-front-end-study-hall
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
- Joe Crawford
- to2ds
- Dr. Matt Lee
- Nick Simson
- Al Abut
- Eric Meyer
- benji
- Tantek Γelik
Notes
- Joe Crawford's background today is of The W3C CSS Validation Service - it's been around 21 years or so
- How does Joe Crawford's editor prevent validation errors? Uses PHPStorm for editing and keeps SCSS for any CSS. In so doing some validation occurs because missing or extra braces tend not to compile from SASS to CSS
- Wes Bos Video "How is this website so fast?" worth a watch about web performance with the case of an "old" looking site that is nonetheless very fast and explores *why* it's so fast?
- Libre.fm/hacienda project from Dr. Matt Lee under active development
- WebStorm, a web-oriented IDE was just announced as free for noncommercial use
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 forclip-path
can be edited point by point. Look for the icon next to those attributes in Firefox - MDN for
shape-outside
andclip-path
- When will we get sound synthesis in the browser?
- We do have speech synthesis:
window.speechSynthesis.speak(new SpeechSynthesisUtterance("front end study hall"))
- We do have speech synthesis:
- Gradient background for links, example:
background:linear-gradient(rgba(255,255,255,0.5), rgba(128,128,128,0.5));
text-decoration-offset
to move the link text-decoration underline around.
- Gradient background for links, example:
- Help us choose the final syntax for Masonry in CSS
- benji does holiday theming and animation on his site, with cool SVG animations on his links for the fall.
- Classic article from 2002 by Jakob Nielsen about how holiday theming can increase usability of websites: [Celebrating Holidays and Special Occasions on Websites]
- Better Art Direction for WordPress
- Mother Earth Mother Board]β
shape-outside
used on the drop caps in this archival posting of a Neal Stephenson article reposted by Eric Meyer - In the Beginning was the Command Line (also see ['can't load library libX*']), a bug reported to Debian in 1996.
- Lastly! Metal IndieWeb Branding?
- sported by Nick Simson and benji as backgrounds in the group photo today!
- Check 'em out!