9 ms·
Browsers have become so nice to work with, that these days, I get away with just the following two lines of code to simplify DOM manipulation: dqs = docum
by mg 2y ago
Browsers have become so nice to work with, that these days, I get away with just the following two lines of code to simplify DOM manipulation:
dqs = document.querySelector.bind(document);
dqsA = document.querySelectorAll.bind(document);
So instead of
country = document.querySelector('#country');
cities = document.querySelectorAll('.city');
I can write
country = dqs('#country');
cities = dqsA('.city');
For everything else, I am fine with just using the native browser functions.
I usually import the two functions from a module like this:
import { dqs, dqsA } from '/lib/js/dqs.js';
This is the module:
https://github.com/no-gravity/dqs.js https://github.com/no-gravity/dqs.js
- nashashmi 2y agoI really wish it was a native script to use qs and qsa, rather than something I have to add. FYI: I know you meant to give an example, but element tags with ID are DOM variables as well.
- wmanley 2y ago> Browsers have become so nice to work with, that these days, I get away with just the following two lines of code to simplify DOM manipulation: > > dqs = document.querySelector.bind(document); > dqsA = document.querySelectorAll.bind(document); Sounds useful and reasonable. > I usually import the two functions from a module like this: > > import { dqs, dqsA } from '/lib/js/dqs.js'; Utterly absurd. Just copy and paste. It’s only two simple lines, how could it be worth a dependency?
- brightball 2y agoIncluded in multiple places?
- 0xCMP 2y agomodern browsers support the import syntax natively, so it really shouldn't be a lot of overhead to import it.
- notpushkin 2y agoThe overhead here would be the need to make another request just for these two functions. On the other hand, with bundling though it’s totally fine to have a module just for these two helpers. (Even better if it can be inlined, but I haven’t seen anything supporting this since Prepack, which is still POC I think.)
- mg 2y agoAFAIK modern HTTP versions like HTTP/3 can request multiple files in a single network packet. So it is basically free to do "another request". As the data request goes out and the data comes in in packets with other "requests".
- theandrewbailey 2y agoA network request isn't free, only less costly than it used to be. Even with HTTP 3, your JS execution is stalled for however long the RTT is back to the server. That could be 500+ ms if its on the side of the world and doesn't have a CDN.
- mg 2y agoDepends on the import tree. The way I understand it, this: import { x } from '/a.js'; import { y } from '/b.js'; Does not take longer than this: import { x } from '/a.js'; Because the message to the server "Give me b.js" goes out in the same network packet as "Give me a.js" and the data of b.js comes back in the same packet(s) as the data of a.js.
- Cyphase 2y agoIt looks like it's intended to be copied and pasted into your codebase, not be an external dependency.
- 0x457 2y agoI guess it's meant to be processed by some bundler later.
- kfajdsl 2y ago/lib/js/dq.js is part of their codebase.
- Kiro 2y agoBizarre comment. Why would you copypaste this into every file when you can do it once and import it? What's the problem exactly?
- mrweasel 2y agoEvery file? You have one .js file per project, if you're like me. So just throwing those two lines in the top and never having to worry about it ever again seems like a nice option.
- NoahKAndrews 2y agoHow big are your projects? It's very strange to me that you would want to have just a single JS file per project. Even if you want to avoid bundlers, ES modules make it easy to import code from other files.
- mrweasel 2y ago> How big are your projects? In terms of Javascript, as little as I can possibly get away with. The web stuff that I do is mostly CRUD type apps, which can be done entirely server side. The Javascript is only where it make the user experience better, so basic form help or to do a modal, things like that.
- niutech 2y agoImporting an ES module without a bundler involves making a HTTP request, which costs time. Better KISS and fit all of JS in a single script.
- mg 2y agowhich costs time No sure this holds true anymore. When you go to a site like reddit.com which uses HTTP/2, you see a gazillion of requests for JS files, many starting at the same time and ending at the same time. I think that is because newer HTTP versions can put multiple requests in the same data packet. And even HTTP/3 is now supported by over 90% of browsers.
- fragmede 2y agoBecause if it ever needs to change, you're in for a world of hurt. Because useful stuff like that is worth sharing elsewhere. It starts with 2 lines, but then theres another useful function you'd like in another file. So you just copy and paste those two lines. But then you want that in a third file. Pretty soon you have this almost-library you're carrying around you've spread across a bunch of files, and now what started with two simple lines is now a mountain of tech debt. Maybe you'll never write enough JavaScript to have additional utility functions. You'll probably never need to modify those two lines. But copying and pasting like that makes for quite the code smell. Because if you're copying and pasting that, the question that someone may never actually verbalize to you is what else in the code is copy and pasting instead of being turned into a shared function in a libray?
- kccqzy 2y agoI recently attempted to remove React as a dependency just to see what would happen. It turns out different browsers are still incredibly inconsistent when it comes to event handling. For example the select event on an <input> element somehow doesn't fire at all on Safari during my test, and doesn't fire when the caret is merely moved on some browsers. Using just the native browser functions isn't just fine, even if you don't need all the React features like components or state or props. It turns out React DOM is valuable as it papers over browser differences.
- divbzero 2y agoI haven’t tested myself, but according to MDN the select event on <input> elements should be supported by Safari? https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputEl...
- kccqzy 2y agoThe MDN page you linked to includes a nice selection logger example. It just doesn't work on my Safari (iOS).
- chrismorgan 2y agoAnd does an equivalent in React work? Because I don't believe React does any of the papering-over you describe. My understanding (as a non-user) is that React does, logically, essentially nothing special around event handling.
- kccqzy 2y agoI don't remember off the top of my head whether this specific example works in React as I'm not next to a computer. But I remember reading React source code and finding a whole lot of code to handle the select event. (Just found it by doing a GitHub code search on my phone https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js#L137 https://github.com/facebook/react/blob/7c8e5e7ab8bb63de91163...) In general React has its own event handling code. For one in React the user doesn't even deal with the browser native DOM events but React synthetic events. React also readily creates brand new synthetic events from other browser events. React also sometimes gives different names or behaviors to browser events; the most famous example is that the React onChange event is roughly equivalent to the browser onInput event, but absolutely different from the browser onChange event.
- theandrewbailey 2y agoLooks like bling.js https://gist.github.com/paulirish/12fb951a8b893a454b32 https://gist.github.com/paulirish/12fb951a8b893a454b32
- namanyayg 2y agoThis is my favorite trick that I've been using for a long time ...I just checked and it turns out I first blogged[0] about it 12 years ago. Time flies. [0] https://nmn.gl/blog/javascript-shortcut-for-getelementbyid-and-more https://nmn.gl/blog/javascript-shortcut-for-getelementbyid-a...
- cr125rider 2y agoYour “ct” ligatures in your headings have a fun little loop connecting them!
- namanyayg 2y agoHaha I'm glad you noticed :) I'm a huge typography nerd. The css to do that comes from the Normalize-OpenType.css [0] library [0] https://kennethormandy.com/journal/normalize-opentype-css/ https://kennethormandy.com/journal/normalize-opentype-css/
- efilife 2y ago> Just look at it’s size! Should have been its. Now you are aware of a 12 year old typo
- gardenhedge 2y agoHow do people you work with recieve this? I'd imagine it could get messy6if every dev has their own little things like this
- nedt 2y agoquerySelectorAll() isn't live. So you could do what I very often do and already convert the result to an array, i.e. dqsA = s => Array.from(document.querySelectorAll(s)); Reason why I do that very often is because it allows all array methods to be used on the result, like .map() or .filter(), which makes it feel very much like jQuery. YMMV
- theandrewbailey 2y agoNodeList.prototype.__proto__ = Array.prototype; Problem solved without Array.from().
- cr125rider 2y agoDoes the underlying data structure work okay with that? I would assume there is some sort of lazy iterator involved that may not work with array methods, or only work once. This is JavaScript though…
- jazzypants 2y agoPrototype pollution is bad. We learned this over a decade ago.
- mg 2y agoGood point! I wonder what I would have to look for in my codebase in terms of what could break when dqsA starts returning an array instead of a NodeList?
- WorldMaker 2y agoThe versions of those methods (map/filter/reduce/etc) that support any iterator (including upgrading NodeList "for free") have passed Stage 4 of the process, which means they will be in the next version of the standard and already starting to show up in some browsers. https://github.com/tc39/proposal-iterator-helpers https://github.com/tc39/proposal-iterator-helpers
- sekLabs 2y agoyou can use `$(queryGoesHere)` or `$$(queryGoesHere)` too from the devtool console.
- niutech 2y agoNot every utility function is a one-liner. For example $.fn.one() or $.fn.on() with multiple events is easier to write with jQuery/Cash. Have a look under the hood: https://github.com/fabiospampinato/cash/blob/master/src/events/on.ts https://github.com/fabiospampinato/cash/blob/master/src/even...