A humorous but useful tool that strips out all the mess that things like Styled Components and React make out of HTML and lets you properly view the source of a page. (and yeah, I use those same tools and processes, and yeah it still irks me that I'm part of the problem😁)
💩 ➡ 🥇
Whilst accessibility means you largely want to steer clear of autofocus on web forms, sometimes it can be beneficial. In HTML, we can now reach for the handy autofocus attribute, but as I recently learnt that doesn't always do what you expect when dealing with a shadow DOM (in this case, React's equivalent). Daniel's article was by far the best at both describing the issue and offering some solutions, though even here it only works most of the time (Firefox does something which I feel is logical but unfortunately not consistent with either the W3C spec or what most people would want to happen).
So here are the (confusingly more than three) techniques:
autofocus attribute (😉) for input elements that are always present (elements loaded later have some weird cross-browser differences);focus() DOM API that allows you to select an element using JavaScript and force focus on it i.e. element.focus(), which works almost always but can be tricky to target correctly (and reliant on client-side JavaScript);focus() is blur(), and both can be handily combo'd with select() for some even better UX!autoFocus prop, which effectively mimics the HTML autofocus attribute but only triggers it when a component mounts, helping with the cross-browser issues but meaning that if you mount before visually showing an element it can steal focus incorrectly;useRef hook, which is effectively just using the focus() API within React's own life cycle;useCallback hook, which does the same thing as useRef only with more control. This appears to be the most universal option in React right now.I ran into a bug recently where some SVGs on a website were seemingly ignoring a fill request. A quick check in dev tools showed that the CSS was being applied so... what gives? Turns out Firefox has implemented an overly literal interpretation of part of the (I believe) SVG spec, causing it to add additional child <svg> elements in certain circumstances (which are hidden from dev tools by virtue of reasons). Matt does a better job of explaining the why, but the fix is to do something like this:
.class-name,
.class-name use > svg {
fill: #FFFFFF;
}
Or, based on our existing patches when I looked that already including overrides for g > svg and some other variations, perhaps simply:
.class-name,
svg.class-name * {
fill: #FFFFFF;
}A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The tl;dr:
width and height elements are based on the parent's dimensions;top and right;margin and padding attributes inherit from the parent, but only use the width value (even for things like margin-top);transform property uses the element's dimensions.Darrell is one of those authors who really considers the world-building side of their work, so I've long found their blog fascinating. Recently, they've released a series of posts on the background of individual "kindreds" from their world of Saynim (kindred here replacing the problematic use of "race" across a lot of fantasy works), each of which is worth reading, but combined form a series of ideas, mythological tidbits, and even anthropological theories that I wanted to capture. I'll create a list of relevant links at the end. I've skipped taking notes on humans, though I do really like Darrell's take on them as a minority underclass renowned for "outside the box" thinking.
It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and collapse to zero height when not, with a “blank” row in between the sets that pushes them apart.
When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little about using negative row/column indices that I'd not really considered before. Still, I missed this clever trick he's using. By having a set of rows at the top and bottom of the page that may or may not contain content, he creates an "accordion" like layout. If content exists, the row expands to give it space; if it doesn't, the row collapses to nothing. The trick is having one row in-between those groups with a height of 1fr, thereby expanding to fill/fit all the necessary content.
Eric does point out that, in theory, it seems like leaving out that flexible middle row should still work, but he has a niggling suspicion it'll cause issues. Which is funny, because I have the same (unfounded) suspicion 😁 As I was reading down the article, my reaction was initially "you can't do that with rows" and then "aha, that flexi-height row will make it work". I'm just not sure why...
A useful tool for quickly analysing the various combinations of a colour palette and determining which are safe to use from a contrast ratio perspective. I find it particularly useful when used in conjunction with Coolors for quick palette changes.
And at that point, generally the programmer will start to hold their head in their hands and realise what they've got themselves into...
A wonderful recap of why you should just never try to support timezones in any program ever. And that's before you even get into calendar fallacies 😭
(Also, I love that my birthday used to be the British New Year in the middle ages 👍)
A fun list of the all the irritating edge cases that can crop up once you start dealing with dates and timezones. I'm a particular fan of the more obscure information on the Hebrew Calendar, with leap months, months that change length depending on how cloudy it is (moon visibility), and one month that can be shorter than a standard week. Talk about a headache 😂
The <datalist> element is super useful for autocomplete-like functionality, but there's no native way to automatically submit a form when an option is selected. Jeremy has come up with a neat logic flow that can enhance the element to do just that:
There are some issues. Jeremy points out that a selection that is only one character different won't trigger the autosubmit, which seems fair. I can also see potential issues with substring matching that could occur in certain situations. But as he says, it's a great enhancement to native functionality that provides plenty of fallbacks if needed.
He also provides a rough outline of his code, plus there's a Gist if useful:
document.querySelectorAll('input[list]').forEach( function (formfield) {
var datalist = document.getElementById(formfield.getAttribute('list'));
var lastlength = formfield.value.length;
var checkInputValue = function (inputValue) {
if (inputValue.length - lastlength > 1) {
datalist.querySelectorAll('option').forEach( function (item) {
if (item.value === inputValue) {
formfield.form.submit();
}
});
}
lastlength = inputValue.length;
};
formfield.addEventListener('input', function () {
checkInputValue(this.value);
}, false);
});Parents can do their children a favor if, from an early age, kids hear them say “famous college” instead of “good college.”
Because there’s very little data that shows that colleges with big football programs or lots of Nobel prize winners are actually good at doing what a college should do for an undergraduate.
I had no idea that the music lyrics website, Genius, also operated a tool that allows you to comment/annotate on any website, but apparently it does and apparently it's not even that new. It also turns out that some people have used that tool to harass and target others. The lack of a report feature is certainly problematic. Beyond that, I'm not sure what side of the fence I fall on here. Do I like the idea that people may be having secret conversations "on" my website or blog posts? Not particularly, but I also don't see the difference between what an annotation tool like Genius is doing versus reposts to sites like Twitter or Reddit. I also agree that the web could benefit from a "fact-checking" layer, something much like how Genius lyrics work with expanded context, historical information, explanations etc. That element I think is great and only wish it wasn't tied behind a login/restricted service. Though on that last note, apparently a web annotation standard is in the works.
Don’t color in the dark with a yellow crayon and call it criticism.
The law is what people who don’t know how to behave themselves turn to in disputes. Grown-ups find ways to get along.