events/2025-01-30-front-end-study-hall

From IndieWeb

Front End Study Hall #020 was an IndieWeb meetup on Zoom held on 2025-01-30.

Front End Study Hall #020

January 30, 2025

Participants

Notes

  • Joe Crawford's background today is from 1997. A piece of web history involving a creative use of HTML frames: https://fray.com/hope/meeting/
    • I asked on Bluesky and Mastodon:
      • I am trying to find a very old example of HTML Frames being used in a creative way on a page. I feel like it replicated a stage play look and feel using the resizable attribute of <frameset> and <frame> -- curtains opening. Does anyone remember this old usage?
    • I received a reply from Fray creator Derek Powazek with the link! He also alluded to Salon using the same technique and it being a kerfuffle in the early web design community
    • I've been able to find evidence of the direct comparison in blogs including several blog archives.
    • Thomas Vander Wal suggested archives for HotWired may include more detail if those are archived. It may have been discussed on Webmonkey or early Webmonster lists.
  • Prior to wide adoption of tables and CSS Frames were often used to create designs. Their searchability and accessibility were always low, and once tables and scripting were available they fell away.
  • More about frames:

Dark Mode

    • Article about dark mode

https://css-tricks.com/come-to-the-light-dark-side/

Picture Element, srcset, media attribute

  • Note that multiple images multiplies the work to assure that image paths are correct and puts an onus to check for the various media query points each time there are changes

Issue with header

Updated HTML

<h1>
    <a href="https://mandarismoore.com/" title="Mandaris Home Page" style="display: inline-flex;outline: 1px solid red; /*! max-width: min-content; */padding-inline-end: 3em;">
        <img src="/svg/UserIcons_Mandaris_02.svg" class="logo" alt="">Mandaris</a>
</h1>

Changed CSS: 

/* Element | https://mandarismoore.com/ */

header.site-header h1 a {
  display: inline-flex;
  outline: 1px solid red;
  padding-inline-end: 3em;
}

/* thanks Vince for driving our CSS debugging; and all for discussing block, vs inline, vs inline-block elements and Manny for sharing his site! */

Elsewise

Discussion, Design!

Design is intimidating, design for oneself even moreso!

Finding what you want with your site

    • Homer's crazy car is of course comedy, but also manages in its humor to express the truth of "featuritis" in a design and product context!
  • Emily sometimes will start with font, or a set of https://coolors.co/
    • Explore color combinations and save them to get at colors one likes
  • Design is often subject to fleeting fancies, trends, "blingy"
  • Start with a goal, it might be a feeling or mood you want to support, that can guide the decisions you make
  • So much can be done with design, it's not easy, and it's very vulnerable to open oneself up to criticism
  • Lots of variation - hard to do design
  • As Manny noted, the aphorism is useful --

Comparison is the thief of joy

  • One always wants to do quality assurance on sites, including for accessibility, Vince recently encountered the writings from Adrian Roselli and are well-worth perusing

Thanks all who joined and participated in then discussion


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 •
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-01-30-front-end-study-hall&oldid=99778"