Jan 26, 2023, 6:45 PMIf like me you miss the jQuery days it's useful to know that between Array.from(document.querySelectorAll(...)) and fetch() a lot of the conveniences you used to use jQuery for can be done without a library at all now
Also AI tools like GitHub Copilot and ChatGPT are really good at helping avoid have to look up less ergonomic DOM methods when you need them - like el.parentNode.insertBefore(otherEl, el)
Jan 26, 2023, 7:00 PMOh... and JavaScript string template literals plus innerHTML are a fabulous templating language built right into the core language https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Jan 26, 2023, 7:25 PM@simon But that doesn't offer any safety against XSS (or the other reasons to escape text inside HTML), does it?
Jan 26, 2023, 7:28 PM@matt that's the great thing about tagged template literals... you can roll your own auto-escaping in a few lines of code! See https://github.com/simonw/datasette-search-all/blob/5b5f1926d7634ae3ed39f7eaf3fa74325e5d842b/datasette_search_all/templates/search_all.html#L97-L106 line 97 - then you get to write this:
el.innerHTML = autoescape`<p>
<a href="${search_url}">${Number(more_count).toLocaleString()} more result${more_count == 1 ? '' : 's'}</a>
</p>`;
(I also love that backticks give you multiline strings)
@simon @matt It's not supported elsewhere at the moment, but Chromium has shipped a bit-in HTML Sanitizer API: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API
Jan 26, 2023, 9:54 PM@lmorchard @matt oh that's neat
@simon you really shouldn't be doing innerHTML + string template literals.. especially if there's anything user controllable there, given the potential for XSS & similar attacks... using the DOM isn't too bad either!
@simon there’s been a recent slew of great convenience methods in DOM APIs that often get overlooked. .prepend() .append() and .replaceChildren(), .closest(), .matches() all spring to mind!
Jan 26, 2023, 7:30 PM@keithamus wow, I'd missed most of those! I wonder what the best way to catch up on them is
@simon yeah they kind of appear wildly. One way I try to keep up to date is reading browser release notes, and also https://caniuse.com/ciu/news.
I’ve found whatwg to be very perceptive too! If something feels like it should exist I’ll search for it in their repos and usually find the breadcrumb trail, or add my input and end up with cool new APIs!
@simon oh also https://web.dev and https://dev.to can be good resources, although they also cover older APIs, so less pulse and more zeitgeist.
@keithamus @simon I'm not typically into ESLint rules that grumble about formatting but I've found this plugin to be a huge help with nudging me into using more modern DOM APIs.
@keithamus @simon There's more than just this single (appropriately named) rule, but as an example: https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-modern-dom-apis.md
Also reminds me that `.dataset` exists and other good stuff like that. 😅
Jan 26, 2023, 8:13 PM@simon @keithamus soon: setHTML()!
Jan 26, 2023, 9:07 PM@keithamus @simon same 🤞
@keithamus @simon I love closest()
@keithamus @simon `classList` as well! https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Jan 26, 2023, 7:03 PMI agree. I am more and more convinced that most of JS tooling is already obsolete if you only support evergreen browsers and HTTP/2. If you use ES modules, you have most of the good without any of the bad. Babel is a crutch we don't need anymore.
Libraries are indeed the main hurdle. But searching for "nameoflib cdn" works fine for most of the main ones.
Jan 26, 2023, 7:04 PM@simon ChatGPT was teaching me LibCST last night. It took about 8 to 10 stack trace pastes for it to eventually correct itself to a valid non-made-up solution, but it was 100x faster than my previous fumblings.
@simon No need for that. Even DOM API:s have been modernized to match jQuery (sort of):
https://developer.mozilla.org/en-US/docs/Web/API/Element/before
@simon It was bittersweet yesterday when I removed my blog's dependency on Prototype in search of a better Lighthouse score.
95% of the features I used it for now have obvious analogs that are available in all browsers.
@simon
Is there a reason to migrate away from jQuery for new code? I know vanilla JS has most of the same functionality now, but I know jQuery better, and I'm not going to go back and rewrite all my old code (plus I user jQuery-ui) so it's not like that dependency is going to go away.
We've never used a build system -- our website has been around since the mid-90s!
Jan 27, 2023, 5:13 AM@smpaley I don't see any reason at all to rewrite old jQuery stuff that works just fine - it's not like jQuery is a very heavy dependency
@sxpert @simon
So what are the cool people using for widgets these days? I'm currently using jquery-ui for tabs, autocomplete, etc. We have multiple generations of old libraries for various stuff that seemed like the right thing at the time, but are no longer being maintained, so for new code we either use old, out-of-date libraries, or we add something new. There's no budget for completely refactoring everything. I was thinking that jquery-ui at least would stick around for a while, but maybe that's not a safe assumption?
Jan 27, 2023, 5:53 AM@smpaley @sxpert I'm finding it really hard to find good standalone widgets, because so many things want you to be fully bought into React or similar
https://vanillalist.top looks like it could be good - and https://github.com/davidhund/awesome-vanilla-js
@smpaley @simon this site is handy if you know the jquery idiom and not the new js features https://youmightnotneedjquery.com/