Front End Study Hall

🎨 Front End Study Hall (sometimes abbreviated as FrESH) is an HTML and CSS focused IndieWeb popup meeting focused on markup, styling, design, layout, and accessibility in a loose format where participants come to learn and teach.

Planned

View upcoming online Front End Study Hall pop-ups and RSVP!

• https://events.indieweb.org/tag/fresh

To-Study List!

Ideas for the next FrESH? Add below or message Joe Crawford:

• Sustainable Web Design Aesthetics -- Such as System Font Stacks, Tiny SVG Icons https://wsg-facts.netlify.app/ - Morgan M
• What are buttons good for anyway? Jeremy Cherfas
• Via capjamesg transition for the click on the image on https://www.tate.org.uk/art/artworks/blake-the-good-and-evil-angels-n05057 might be worth looking at
• Via capjamesg 2024-10-10: would like to discuss making hamburger menus
  • gRegor Morrill just the other day saw this CSS-only version https://codepen.io/ahaywood/pen/OJXLKEX, via video walkthrough: https://youtu.be/x_VYl7zz1XY
• An animated cookie monster eating a line (via HWC)
• improving the gallery "tag" in mediawiki - suggested by gRegor Morrill
• Subgrid! suggested by capjamesg
• fit-content suggested by capjamesg
• Idea: FrESH session for making your own /linktree or /links page from Tantek Çelik
• From Tantek Çelik https://www.adavanzo.com/articles/2025/the-systemic-failure-of-implementing-css-principles
• From Tantek Çelik https://www.adavanzo.com/articles/2025/css-class-seriously-sprawling
• Interesting new SVG Editor in development: GodSVG https://www.godsvg.com/
• On the joy and whimsy of making websites from Sara Joy https://slides.sarajoy.dev/whimsica11y-sotb2025/
• Avoid "fake" bold and italic. https://adrianroselli.com/2025/03/dont-use-fake-bold-or-italic-in-social-media.html
• 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?
• Revisiting image maps via Paul Watson
• scripting @media query https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting !
• lh line height units: https://webkit.org/blog/16831/line-height-units/
  • https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#line_height_units
• XHTML encoding https://rambo.codes/posts/2025-05-12-cracking-the-dave-and-busters-anomaly
• The future of web development (cheeky)
• Suggested topic from Tantek Çelik: an "eco mode" theme (and switching UI!) in addition to light/dark, see:
  • recent IWC DUS session: Sustainable Web Sites and watch the recording for background.
  • result of the IWC DUS session, Joschi Kuphal's demo (worth watching the video, linked at top of that page, for visual and charts!)
    • with example of page with light/dark/eco-mode switcher at bottom: https://jkphl.is/ecomode/index-2.php
  • more recently, an independently developed freely usable more-sustainable SVG icons set: https://github.com/codewordcreative/susty-icons/tree/main?tab=readme-ov-file#a-work-in-progress-before-initial-release
  • existing background on wiki: green computing
• Painting with the Web from Matthias Ott at Beyond Tellerrand
• What happens to a CSS animation when a tab is closed? What rules define the behavior?
• interpolate-size: allow-keywords
• https://stackoverflow.com/questions/27433399/same-color-text-looking-different-color/79646300
• https://cybercultural.com/p/web-design-1997/
• is there a way to randomize the order of display of an set of display of elements without JavaScript? https://thoughts.uncountable.uk/displaying-static-html-randomly/
• That One Time a CSS Variable Took Down Production https://dev.to/abhinavshinoy90/that-one-time-a-css-variable-took-down-production-mnn
• Ana Rodrigues presentation from CSS Day is terrific! Many great pointers to tools to understand existing CSS on a project: https://noti.st/anarodrigues/abfj0M/slides https://noti.st/anarodrigues/abfj0M/refactoring-css https://front-end.social/@anarodrigues/114648051248841464
• https://www.canidev.tools/
• https://css-tricks.com/color-everything-in-css/
• really lovely and interesting shapes with conic-gradients, no JavaScript, no SVG filters: https://codepen.io/hexagoncircle/pen/wBBwmqo
• terrific accessibility bookmarklet! https://sa11y.netlify.app/bookmarklet/
• linter for css compatibility https://github.com/anandthakker/doiuse (via pierre)
• Tantek Çelik had a question in indieweb chat: "are people creating new projects and using Bootstrap?"
• https://specifishity.com ~ using, uh, sea creatures and ocean things to describe rules about CSS selector specificity differences?
• A Friendly Introduction to SVG https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/
• https://dev.to/alvaromontoro/interview-with-ben-evans-3o3b
• https://github.com/TetraLogical/screen-reader-HTML-support
• svgs can be written to contain javascript which can execute malicious code https://arstechnica.com/security/2025/08/adult-sites-use-malicious-svg-files-to-rack-up-likes-on-facebook/
• Details/summary lightboxes in pure HTML + CSS
• https://piccalil.li/guest-authoring/
• https://gradient.style https://nerdy.dev/gradient.style-is-out-of-beta
• Lightweight HTML editor designed to be fun and work on mobile and export to Codeberg https://wwwobble.org
• View Transitions: What Could Possibly Go Wrong https://vtbag.dev/tips/view-transition-fails-and-fixes/
• Apple has a private CSS property to add Liquid Glass effects to web content
• The “Most Hated” CSS Feature: cos() and sin()
• Primarium is a groundbreaking educational effort by TypeTogether to document different models of handwriting that are taught to primary school students around the world.
• Single color gradients
• <output> tag, use cases
• CSS to ape the look of ancient MacOS
• UX so bad that it's illegal
• Adam Argyle - 25 new & rad feature of CSS
• Annotating designs using common language (accessibility-wise)
• Simplify some very nice short snippets of CSS for formatting images in-page
• Crafting Generative CSS Worlds
• DOCTYPE magazine
• Springs and Bounces in Native CSS The magic of the linear() timing function
• Chrome only demo page for corner-shape
• SVGs that feel like GIFs, asciinema svg-term-cli
• TAC CSS Methodology
• MathML and interop "MathML Core"
• 3D stacked text https://frontendmasters.com/blog/how-to-create-3d-images-in-css-with-the-layered-pattern/
• Pausing a CSS animation with getAnimations()
• Validators! What can they and what can't they tell us? (came up in context of RSS <guid isPermalink> conversation)
• That Time I Tried Explaining HTML and CSS to My 5-Year Old Niece (via Jeff Bridgforth)
• ReliCSS - detect CSS hacks (underscore hack, vendor prefixes) (does not detect Tantek Çelik’s box-model hack).
• “Form validation could be an interesting topic to explore in FrESH!” capjamesg
• The Secret Life of Custom Elements Brian Kardell
• Not All Browser APIs Are "Web" APIs
• Respecting the No-JS Choice: Making Your Site Work for Everyone
• suggested topic: favicons via link rel=icon, quirks, strategies, and lessons learned https://en.wikipedia.org/wiki/Favicon see also 88x31
• possible discussion topic / example to dig into and learn from: accessible flowchart in SVG! https://www.ashleysheridan.co.uk/blog/Creating+Accessible+Flowcharts cc: [KevinMarks]
• The Incredible Overcomplexity of the Shadcn Radio Button suggested by Kevin Marks
• text-scale meta tag
• Why does HTML think "chucknorris" is a color (in a bgcolor attribute) (2011 stack overflow question) via CodePen
• Styling ::search-text and Other Highlight-y Pseudo-Elements
• geolocation tag (Chrome only for now)
• Performance-Optimized Video Embeds with Zero JavaScript css and details element
• The CSS Selection: The state of real-world CSS usage, 2026 edition via Murray
• How an accessibility designer adds keyboard shortcuts to a web app
• How to Create a CSS-only Elastic Text Effect
• autocapitalize attribute
• add more…

FAQ

When?

• Every two weeks or so, see events.indieweb.org/tag/fresh and subscribe to the iCal feed

Do you talk about things like React?

• React and anything reliant on JavaScript (or TypeScript, or other higher level programming languages) are *usually* outside the focus for FrESH. We often have strong opinions about frameworks, libraries, tools, editors, libraries, tutorials. JavaScript will come up periodically.

How do I get notified of new FrESH events?

• Follow the “fresh” tag on events.indieweb.org as an iCal feed: events.indieweb.org/ics/tag/fresh/

Do I have to turn on my camera? My Mic?

• No. But participation is encouraged! Each FrESH includes a Notes real time wiki page called an etherpad. These pages get archived to indieweb dot org.

Some commonly discussed topics?

• accessibility or a11y, CSS, HTML, RSS, audio, SVG, blogroll, fonts, design concepts, getting started

Meetings

During Front End Study Hall the group takes collective notes using etherpad. These are archived below.

2026