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]
- 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: contenthttps://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
- taking back CSS Tricks
- 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
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 |
See Also
- popup
- front end
- CSS
- HTML
- Wikipedia:Front-end web development
- Possible discussion topic: how to repair broken links and images. Both from a markup perspective and an information/styling perspective to alert the reader that the post has been changed (perhaps long) after the fact: link repair. Would be interesting to gather both experience (of people practicing link repair) and problems/concerns from those who have encountered this problem on their own sites.
- Possible topic: how is https://bingebuster.net/ doing its Blockbuster VR like view of movies you can actually click on, which zoom toward you, then zoom back to the shelf? And would such a video rental store navigation make sense for say, navigating different categories of your blog posts?
