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

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

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

Front End Study Hall

April 8th, 2025

Participants

• capjamesg
• Joe Crawford
• rye
• seana
• benji
• Reilly Spitzfaden
• Eric M
• Marty M
• Emily N

Notes

• Welcome to Front End Study Hall!
• Ideas of things to study today
  • Idea list: Front_End_Study_Hall
  • James would love to know when you would use subgrid
  • Open question: Can you do a dark mode toggle in only HTML/CSS that persists between pages?
    • adding these to the main FrESH page

Joe's Background Today

• Hampster Dance! web throwback 30 years or so
  • https://gist.github.com/artlung/ccf527d69c8d4a0e9c62efcf49c5712a
  • https://web.archive.org/web/19991128125537/http://www.geocities.com/Heartland/Bluffs/4157/hampdance.html
  • <center> tag! Forensics on old pages, what does that old markup tell us about the page?
  • Fun pages have the capacity to inspire us and view source let's us believe maybe we can make a web page too!

Transforming XML / RSS / Atom with XSLT

• Reilly is styling his feeds using XSLT and has trouble debugging
• First: validate?
  • https://validator.w3.org/feed/#validate_by_input
  • https://feedvalidator.org/
• https://developer.mozilla.org/en-US/docs/Web/XML/XSLT
• Unfortunately XML and XSLT, being XML are hard to debug, suggestion is to make a base use case of a date and doing a value-of seletor to try and isolate why the date transforms are not working, browsers lack tooling to give feedback on why something is failing

When did we first get dev tools in browsers?

• Joe spitballs that it was the open source architecture of Firefox which allowed for plugins to be added to the browser created that opportunity. Recall that prior to Firefox browsers were mostly closed-source and highly competive. The browser makers absolutely wanted other browser companies to die, interop was NOT presumed. It got so bad that The Web Standard Project came into being to try to pressure them to support at least a baseline of standards.
• Thanks Marty for remembering it was "Firebug"
• Firebug - Joe Hewitt - https://getfirebug.com/index.html - 2006?https://en.wikipedia.org/wiki/Joe_Hewitt_(programmer) -- https://en.wikipedia.org/wiki/Firebug_(software)
• John Alsopp's bookmarklets e.g, https://westciv.com/xray/ which allowed for inspecting elements
• 3-D view of a web pages component elements:
  • https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html
  • Thanks benji for showing off this great current simulation of the 3D view:
  • 3D View bookmarklet: https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca

Discussion: Use px units for padding and spacing

• https://ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques
  • Consider whether you're serving the user
  • Makes a solid case
  • WCAG increase text size 200% guideline - basically the layout ought not shift to unusability when text size is adjusted upward
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

New Clip-Path support for shape() in Chrome

• available in Chrome and Safari (and maybe Edge?)
• https://developer.chrome.com/blog/css-shape?hl=en
• https://codepen.io/web-dot-dev/pen/YPzgNrL
  • https://codepen.io/artlung/pen/wBvbepx
  • how to do the colors on the flag there? gradients. If you're interested in watching Joe Crawford stumble through css battles he records videos of the daily targets. https://artlung.com/cssbattles/
  • https://cssbattle.dev
• how would one bend the actual colors of the object itself
  • Matrix transforms? https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
  • https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform/matrix
    • Kevin Marks has a friend who developed an iOS app that does a 3-d transform on a flag, flapping. https://apps.apple.com/ru/app/flagwaver/id553055931
  • Check out the work of Ana Tudor! Amazing creative web developer who kicks at the boundaries of what's possible with current tools

Misc

• https://www.ferryhalim.com/orisinal/ - look to other disciplines such as animation, nature for inspiration when creating new websites - originally were Flash games with utterly unique look and feel, not following trends of any sort
• Seek out the work of Ana Tudor
• Subscribe to the CodePen newsletter / blog to see the kind of amazing things that can be done in CSS

Layout of menu items? Experimenting!

• Thanks Rye for providing some sample markup to experiment with
• Question: can one run template code in a codepen?
  • • https://codepen.io/rye-dotcom/pen/dPyEJNm
  • Simplified and reworked the markup with some current CSS applied (uses SCSS syntax)
    • https://codepen.io/artlung/pen/QwWRQNp