I’m so envious of Paul Hebert’s Generating Random Mazes with JavaScript. Paul designed a random maze generator in some pretty easy to reason about JavaScript. It’s on CodePen, naturally.
I’m envious because I love mazes. I’d draw them constantly as a kid. The square corner ones or weird wobbly organic ones or perfect circle ones. They just look cool. A number of years ago I bought a book on programming mazes to tap into a bit of personal nostalgia. It was in Ruby, which is fine, but I figured I’d do kinda mental translation into JavaScript because I’m just so firmly a visual web guy I wanted to see the output there.
Then I donated the book. I was seriously too dumb to figure it out. There were all these named algorithms based on like famous mazematitions or whatever. While I followed along conceptually for the most part I really struggled to get working maze creation going and ultimately gave up. Now here’s Paul just kinda winging it and crushing it. It’s even drawn in SVG which makes it look super nice.
Mathias Schäfer has a good point in Responsive bar charts in HTML and CSS. SVG is great for charts on the web particularly for complex designs. But SVG doesn’t have media/container queries that can re-do layout nearly as easily as HTML/CSS does. It’s kinda like everything in SVG is absolutely positioned.
If you can get away with a pure HTML/CSS chart, there tends to be a lot of advantages like better accessibility potential, complete layout control with major adjustments at breakpoints, and easier internationalization.
Adrian Roselli beefed up a <details>/<summary> arrangement to make it into an accordion. That is, a set of “disclosure widgets” in which only one can be open at a time. That’s… what an accordion is.
I feel strongly that an accordion means only one in the set can be open at a time. Otherwise this is just a group of adjacent
<details>elements that probably does not need to be in a grouping context.
The full setup here has a proper grouping context, some custom design, a solution for “find in page”, and some keyboard fixes. The “one open at a time” thing is handled here in JavaScript, but that actually works with the name attribute in HTML alone now.
Michelle Barker got awfully clever in Radial Gradients and CSS Trigonometric Functions. I find these shapes actually fairly practical:
Those shapes are pleasant but also remind me of “callout” shapes used in design forever. She pulled it off by using multiple circles (via radial-gradient()) then placing them with the relatively new cos() and sin() functions in CSS.
This component needed to be incredibly portable, looking great on any third-party website, in any position, at any viewport, with any amount of content. It had to be a “hyper-responsive” component.
Just linking up a script is too messy. An iframe is too rigid for sizing. Baby bear’s porridge? A web component.
I loved seeing the container-sized typography. This is the perfect use case for that if you ask me.
