In the interest of closing out some tabs and being able to find stuff later, I'm collecting some of my favorite web design resources or things that have been helpful in building the site here.

Positioning Elements with CSS and HTML (Mostly Flexbox)

• A Complete Guide to Flexbox: The only guide to modern HTML layouts you'll ever need (almost)
• A slightly deeper dive into gap, which specifies how much room is between elements in a flex-container or grid.
• An explanation of when grid is a better alternative to flexbox (hint: Grid works well for navigation elements because it takes less nesting than flexbox, and I've done a piss-poor job of that here.)
• Z-index: for when you need things to overlap in a certain order. (Even more detail here.)
• A comparison of putting stuff on top of other stuff using the old-school position:relative and position:absolute overlaps vs the new-school Grid, which I'm mostly linking because the blessed commentor Chris Coyier tipped me off to negative margins for making stuff overlap. This stackoverflow page has an even better implementation that also shows how to animate the margins
• Using float to anchor an element to a specific edge or corner of the parent.

Links

• Accessible link best practices
• What is a URL/URI hash, fragment, or anchor link?
• Options for dealing with ids & corresponding URL hash fragments with spaces.
• Listening for hash changes with Javascript, since clicking a link that sends you to another element on the same page does not reload the page.

Using Vector Graphics or SVG

• What are Scalable Vector Graphics and how can we specify them with HTML?
• The math behind smooth vector curves (video)
• The spec for SVG paths in HTML (extremely technical)
• Specifying SVG in CSS "pseudo-elements" rather than hand-coding them into the page, which I never got to work the way I wanted.
• Hiding or "clipping" parts of an element to be any vector shapes, including adding pseudo-borders, see also using url() to load in an SVG element specified in the page with HTML tags if you need something that isn't a straightforward polygon, such as something with rounded edges.
• Rescaling a hand-specified SVG path to be a relative path between 0,0 and 1,1 so that the browser can responsively scale it.
• How to cast box-shadows that match the shape of an element after clip-path by taking advantage of the fact that a parent element inherits its alpha mask from its children unless it has a background/content of its own. The comments also have some solutions with pseudo-elements that I couldn't get working.
• A comments section just full of suggestions for how to do animations between arbitrary shapes with rounded edges using CSS instead of the specification with HTML tags described above.

CSS Animations

• Animating a change from overlapping with negative margins to margin:0.
• Moving an element along a vector path
• Basic collapsible div tutorial from w3schools
• Moving, rotating, and/or resizing elements using CSS and the extremely new separate transformation properties that let you stack these for "additive animations"
• A demonstration of different ease values for animations

CSS Selectors

• The unfortunate fact that vanilla CSS does not allow you to apply a style across all possible levels of heading :c
• Lots of stack overflow bickering about the best way to select a "next sibling" that I should look into if anybody complains about the JS in the blog not working as expected in some browsers.
• How the cascade for Cascading Style Sheets actually works, i.e. how to make your code work without !important.

Javascript Event Wizardry

• Shout out to jsfiddle, after all this time. Still provinding a quality service for quick JS prototyping.
• Turns out there's almost no reason to use mouseup/down/move events unless you really need to support old machines, because pointerup/down/move allows for build-in compatibility with mouses, tablets, and touchscreens.
• When I was trying to add mobile compatibility working with the touch events directly, it was somehow turning everything into mouse events, even though there's a separte touch event type that wasn't triggering, and it probably has something to do with browsers trying to be helpful, but in the end thank god for pointer events.
• Technically the ability to disable scrolling for touch-drag when the touch starts on specific elements is a CSS trick, no javascript required (although I'm not sure why you'd want to do it if not to enable your own javascript wizardry.
• At some point I'm going to have to deal with the pace that pointer events are actually reported to the listeners for some of my javascript webapps, and that will be the day I actually read this css-tricks page about the pace of event handlers, and it may well just tell me that I'm doing too much in my event-handling functions. I would deserve that.
• I did not end up successfully using Javascript's spread on an object other than an array, but it does work, and that's kind of insane. This was the reference with the clearest and most useful examples.

Miscellaneous

• Brand new specification to use CSS to specify arbitrary unicode characters for bullets in a list.
• contenteditable attribute to make text editable!!! (Thanks, ribose.zone!)
• Font sizing best practices
• Minimizing resource utilization of your website
• Is it actually possible to render an image with Javascript and then let the browser have it through a download prompt if they click a button, all client-side? Well, yes, but the jury's out on how to do it with vanilla JS. This guy got lightly roasted for his answer on the... design version of stack overflow? But he basically coded up the same thing I independently worked out for my pixel art tool, and was responsible for my realization that you can just right click and copy or save canvas elements as pngs.