With that name I'd expect a tiny implementation of JavaScript.
TinyJS – Shorten JavaScript QuerySelect with $ and $$
51–60 of 94 posts
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#52Why would this make any sense? const myDiv = div( {id: 'container', className: 'my-class'}, h1('Hello World'), p('This is a dynamically generated paragraph.') ); document.body.appendChild(myDiv); That's completely unnecessary these days with template strings. It's gonna be much faster as well to use browser's native parsing. const div = document.createElement('div'); let text = 'This is a dynamically generated paragr…
Generally, I would recommend avoiding directly setting the innerHTML property, since it's vulnerable to XSS and other injection attacks. If you do, make sure you HTML-escape each variable you interpolate. Here's a way to do that with a tagged template function (named it `htmlFragment` to make it super clear what it's for): // a couple of functions to help const sanitizeHTML = (unsafeStr) => { const div = document.cre…
> Unfortunately, to my knowledge there isn't yet a close-to-the-metal solution for templating and data binding in HTML/JS
I'm hoping for this one:
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#53I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…
If you like brittle things, the id attribute is already made into an attribute on the window for legacy reasons
Edit: My tone may have indicated that parent's solution was brittle. It's not!
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#54I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…
Element IDs are automatically attached to the window object
document.addEventListener('DOMContentLoaded', () => {
window.thing.innerHTML = 'Hello, World!';
});
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#55Why would this make any sense? const myDiv = div( {id: 'container', className: 'my-class'}, h1('Hello World'), p('This is a dynamically generated paragraph.') ); document.body.appendChild(myDiv); That's completely unnecessary these days with template strings. It's gonna be much faster as well to use browser's native parsing. const div = document.createElement('div'); let text = 'This is a dynamically generated paragr…
[deleted]
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#56Related:
Show HN: Tiny JS – A Tiny JavaScript Library for Easy DOM Creation - https://news.ycombinator.com/item?id=41462817 - Sept 2024 (4 comments)
Show HN: A better way of writing HTML via JavaScript? - https://news.ycombinator.com/item?id=41451559 - Sept 2024 (9 comments)
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#57I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…
If you like brittle things, the id attribute is already made into an attribute on the window for legacy reasons Edit: My tone may have indicated that parent's solution was brittle. It's not!
The id attribute can take on values that are already present or reserved in window. "fetch", "opener", etc..
The reason to have a separate system that correctly calls getElementById() is to avoid this issue.
So, it's actually a _less_ brittle mechanism that doesn't rely on legacy mechanisms and lacks the surprises that come with that.
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#58I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…
If you like brittle things, the id attribute is already made into an attribute on the window for legacy reasons Edit: My tone may have indicated that parent's solution was brittle. It's not!
Nah, i rather skip brittle :) But what's not brittle in JS? Elm? (TS to some extend)
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#59I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…
Element IDs are automatically attached to the window object document.addEventListener('DOMContentLoaded', () => { window.thing.innerHTML = 'Hello, World!'; });
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#60I use this: export const $ = document.querySelector.bind(document); export const $$ = document.querySelectorAll.bind(document); When using TypeScript the types for querySelectorAll are a bit hairy to map but by defining the consts like above the types "just work". for (const tag of $$ ("p")) ... I don't use Array.from in the result of $$ because sometimes creating an Array is not necessary. The NodeList returned can…
You're a wizzard!
JS keeps amazing me. It reminds me of Perl somehow. If Perl and Lua had a child, with some browsers APIs sprinkled on top.