Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

TinyJS – Shorten JavaScript QuerySelect with $ and $$

github.com

Post reply on HN
Print view View original

31–40 of 94 posts

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#31

Post by xPaw »

hoten wrote: post #18
123yawaworht456 wrote: post #7

may I ask what's the point of `const tagNames =`? removing it would make no difference, as far as I can tell - just make sure the previous line ends with a semicolon (or add it at the same line as the opening square bracket)

Well, it's polluting the global window scope with all those helpers. That's a reason to never use this imo. There are plenty of other jquery-lite helper libraries out there. 95 percent the utility with hardly any cost in terms of script size. Converting querySelectorAll to an array is honestly most of the benefit of these libraries.

You don't need to convert querySelectorAll to an array, you can directly iterate it, or use forEach.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#32

Post by alexjplant »

no_wizard wrote: post #19
alexjplant wrote: post #9

jQuery II: The Quickening! I recently built a toy Golang SSR project using Zepto, a jQuery-like library, and felt like I was 17 again (**EDIT: it's unmaintained - don't use it). Also of note is that "Highlander II" takes place in the year 2024 [1]. It's a sign! Everything old is new again! `$` is immortal! [1] https://en.wikipedia.org/wiki/Highlander_II:_The_Quickening

Zepto is unmaintained, which isn’t good for security issues or bugs, unfortunately. jQuery proper is both maintained and has actively been working on a 4.0 release and still gets security and bug fixes

Thanks for bringing this up. Edited my OP - there's no impression as such on their front page and it seemed fairly ergonomic. My bad on that one.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#33

Post by [deleted] »

tomp wrote: post #25

Why 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 $$

#34

Post by spullara »

tomp wrote: post #25

Why 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…

you should probably worry about untrusted data in text and use a tagged template function that sanitizes its inputs for insertion in html.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#35

Post by wruza »

franciscop wrote: post #28
tomp wrote: post #25

Why 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…

One big difference and why I've been experimenting with JSX[1] is that in that example, if the `text` comes from an untrusted source it can lead to XSS, which TinyJS prevents (I checked)! [1] https://x.com/FPresencia/status/1838176000267452704

Even if it comes from a trusted source, you usually want a good distinction between html interpolation and just-text chunks.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#36

Post by meow_catrix »

xPaw wrote: post #31
hoten wrote: post #18

Earlier quoted context omitted.

Well, it's polluting the global window scope with all those helpers. That's a reason to never use this imo. There are plenty of other jquery-lite helper libraries out there. 95 percent the utility with hardly any cost in terms of script size. Converting querySelectorAll to an array is honestly most of the benefit of these libraries.

You don't need to convert querySelectorAll to an array, you can directly iterate it, or use forEach.

Not if you want to map or reduce it.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#37

Post by meow_catrix »

iudqnolq wrote: post #23
synergy20 wrote: post #15

Earlier quoted context omitted.

window['$'] = selector => document.querySelector(selector) window['$$'] = selector => Array.from(document.querySelectorAll(selector)) is really what I want to have

I'm quite fond of a little helper like so: createElement({ className: 'p-2 flex justify-end', contents: createElement({ tag: 'img', src: '/os-logo-maps.svg' }), }); I got the idea from Lea Verou's blissfuljs. When you're creating a bunch of nested elements it comes in handy.

That’s React without the JSX sugar.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#38

Post by nikeee »

tomp wrote: post #25

Why 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…

You can use tagged template functions to escape `${text}`. The result is pretty close to lit-html [1].

[1]: https://lit.dev/docs/v1/lit-html/introduction/

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#39

Post by luismedel »

alexjplant wrote: post #9

jQuery II: The Quickening! I recently built a toy Golang SSR project using Zepto, a jQuery-like library, and felt like I was 17 again (**EDIT: it's unmaintained - don't use it). Also of note is that "Highlander II" takes place in the year 2024 [1]. It's a sign! Everything old is new again! `$` is immortal! [1] https://en.wikipedia.org/wiki/Highlander_II:_The_Quickening

IIRC, I used Zepto with Phonegap around ~2012. What a blast from the past.

"There can be only one"

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#40

Post by Nickersf »

tomp wrote: post #25

Why 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…

This is exactly what I was thinking. I'm always trying to have fewer third-party dependencies in my codebase no matter how tiny, especially if it's solving problems that already have platform/system native solutions.
Post reply on HN