Front End Study Hall
(Redirected from fresh)
🎨 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!
To-Study List!
Ideas for the next FrESH? Add below or message 
- 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 capjamesgfit-contentsuggested 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 !
lhline height units: https://webkit.org/blog/16831/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]
- 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 outside the focus for FrESH. We often have strong opinions about frameworks, libraries, tools, editors, libraries, tutorials.
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 | |
| 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 |
| 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 |