⭐ Must Read: 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
Sprites on the Web
(color cycling animation technique in the blog Unsung)
x86 CPU made in CSS (Chrome only)
Customizable select that is also a shooting gallery game, no JS (Chrome only)
Let's break some WCAG rules - Elise Kristiansen - NDC London 2026
Web Haptics via capjamesg
Your Browser Can Already Speak a Page
1995: From Batman Forever’s cinematic design to HTML tables
field-sizing: content https://bsky.app/profile/vpon.me/post/3mgrmyzoawc23 h/t Kevin Marks
@media (scripting: enabled) https://ryanmulligan.dev/blog/detect-js-support-in-css/ h/t Murray
details accordion https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/ h/t btrem
A web font strategy size-adjust, ascent-override, descent-override
Getting started with SVG filters
CSS or BS?
Demystifying block formatting contexts by ppk
Motion "A production-grade animation library for the web"
Proposed install element
“Accents are an opportunity, not a burden.”
Document Picture-in-Picture API
Get Clamped: Unwinding Some Difficult CSS History
What's missing in CSS layout
Multi-level navigation: the challenge of identifying parent sections for screen readers
Flex-wrap: balance (coming to Chrome)
Styling mark tag (via Kevin Marks
Bending a Straight Line using Modern CSS via Kevin Marks
capjamesg suggested "One question I didn’t have time to ask at FrESH was I’d love to hear the most creative uses of the :has selector."
suggested topic: fix http://contrast-ratio.org so it works without JS
^ note, it's on GitHub so any fixes could be contributed back: https://github.com/MoritzGlantz/contrast-ratio
Suggested topic: explore some of the cleverness of CSS DOOM: https://cssdoom.wtf/
Possible topic: 3D UIs using web tech, e.g. exploring our stellar neighborhood: https://valhovey.github.io/gaia-atlas/ (h/t [Sophia_wood])
SVG Paths Visualized
The lasting influence of Netscape Time
Nobody clicks your share buttons
Designing for people who are D/deaf
An animated radial gradient mask over text in CSS
GSAP® (JavaScript animation library)
Does your screen reader content need an editor?
Using safe-area-inset to build mobile-safe layouts
accessible QR codes
Syd Mead's timeline page which works without JS: https://www.sydmead.com/timeline
Fontificator previewing fonts
The Infinite Scroll Was a Design Crime. Now Meta is Paying for It.
MJML - a template language exclusively about creating responsive HTML email. Demo collection on codepen (it allows you to set that language)
YouTube’s right click relay (context-click on YouTube toggles between theirs, and the systems)
initial-scale no longer needed from ppk
Experimenting with the new pure CSS random() function
Target Size Tester a11y
US Web Design System (archived) Current iteration is being systematically gutted.
Axe-con "The world’s largest digital accessibility event. Live virtual event: February 23-24, 2027"
Stop Treating CSS Container Queries Like Traditional Media Queries
2026: 2 of the Global Top 200 Websites Use Valid HTML
New HTML and CSS features you should be using in your design system
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?

Frameworks like React, with complex dependency needs tend to be ill suited to FrESH. FrESH has talked about JavaScript libraries related to DOM manipulation (jQuery), server-communication (HTMX), visualization (D3.js) and similar "drop-in" scripts. Meetings contain folks with strong opinions about frameworks, libraries, tools, editors, tutorials. For questions and suggestions, reach out in discuss and mention FrESH, or to Joe Crawford directly.

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

2025

2024

Front End Study Hall (FrESH)
	Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend
2026	01-15 • 01-29 • 02-12 • 02-24 • 03-12 • 03-26 • 04-07 • 05-21 • 06-04 • 06-25 • 07-16 • 07-30 • 08-20 • 09-03
2025	01-02 • 01-16 • 01-30 • 02-13 • 02-25 • 03-11 • 03-27 • 04-08 • 04-24 • 05-08 • 05-20 • 06-03 • 06-17 • 07-01 • 07-17 • 07-31 • 08-12 • 08-28 • 09-18 • 09-30 • 10-14 • 10-30 • 11-13 • 11-25 • 12-11 • 12-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