Hacker News Reader

Hacker News

Comment by mg | Hacker News Reader

Parent Full thread

These days, I get by with just two dependencies. One is dqs.js:

https://github.com/no-gravity/dqs.js

Which turns document.querySelector('.some .thing') into dqs('.some .thing').

The other one is Handlebars:

https://github.com/handlebars-lang/handlebars.js/

Which I use for all my frontend templating needs.

View on HN

Instead of importing dsq you can do this

    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);

That's pretty much what that include file does, but with "dqs" rather than "$". I'm not a fan of using the $ as it might confuse others that you're using JQuery.

$ is what I would expect and prefer, because it’s what I’ve been using in my browser dev tools for over fifteen years (ah, Firebug; fond reminiscences). If your document doesn’t use the names, you’ll get implementations roughly equivalent to these:

  function $(selector, element = document) {
      return element.querySelector(selector);
  }

  function $$(selector, element = document) {
      return Array.from(element.querySelectorAll(selector));
  }

Reference on more magic available in the console (there’s a lot of good stuff):

• https://firefox-source-docs.mozilla.org/devtools-user/web_co... (I think “:help” is my new favourite: opens that URL, which is not particularly discoverable)

• https://developer.chrome.com/docs/devtools/console/utilities...

Wouldn't that be a feature? ;-)

That's what I did before I put those lines (and some more) into dqs.js

That's a neat shortcut, I prefer vanilla JS too.

const $ = (query) => document.querySelector(query);

const $$ = (query) => document.querySelectorAll(query);

(How do I write monospace on HN?)

> (How do I write monospace on HN?)

Two-space indentation.

  Thank you

> How do I write monospace on HN?

Line that start with four spaces

    like this

  Looks like 2 spaces are sufficient. But I sympathize with 4-space indentation.

Indeed! I've always thought it was 4, because... Markdown, probably?

Is there a way to make this also work as a function? e.g. myTable.$$('tr').foreach()

    import {qsA} from './dqs.js';

    rows = qsA(myTable, 'tr');

Thanks but the point is being able to chain it:

myTable.qsA('tr')

TypeError: myTable.qsA is not a function

Well, since html elements already have a querySelectorAll function, you could just assign it to a new method "qsA":

    HTMLElement.prototype.qsA = HTMLElement.prototype.querySelectorAll;

Now myTable.qsA('tr') will work. You can try it right here on the HN page in the browser console:

    HTMLElement.prototype.qsA = HTMLElement.prototype.querySelectorAll; 
    document.querySelector('#hnmain').qsA('tr');

Why do you prefer chaining?

You'll have to do this in addition to one of the previously discussed solutions if you want something like document.qsA since document isn't an HTMLElement.

Perfect, thankyou!

I suppose habit plus I find it easier to grok in that order, targetelement->childelements->foreach.

These days? This is what we were using 10 years ago before React came about! It works fine, but performance can be a problem in large apps as handlebars just naively recreates entire DOM trees rather than diffing.

are we really concerned about the shortness of the code for the worse tradeoff of being less readable?

how much is truly saved by this? these seem like the things of a solo dev vs building something for other people to follow

What's wrong with solo devs?

You are talking to me on a site done by one.

This is the frontend code:

https://news.ycombinator.com/hn.js

That's wild, never really looked into it, reminds me how a C programmer thinks. I'm mostly backend but get involved with frontend every now and then. Tried to avoid Angular and React but now trying to teach myself Angular. AngularJS was nice. Angular sucks, very complicated for doing the same things I can do with vanilla HTML/CSS/JS, but that's what companies seem to be hiring for.

I've been a solo dev as well. But unless you're going to live forever, the code should be maintainable by someone else. You can be a solo dev that's impossible to ever work with, or you can maintain good practices so that other people can play along as well.

… is that a good example?

… upvote/downvotes are does by fetching an "image", i.e., it does a GET request with side-effects! … also seems like a trivial CSRF vuln, too…

hn would benefit from the ael library

There's a reason why web developers have the reputation they do.

Combine this with https://github.com/dominictarr/hscrpt and you'll be building websites in no time!

Can you use Handlebars in Cloudflare workers? EJS was not accepted and string literals are string literals.

handlebars.js runs in the browser:

https://plnkr.co/edit/LXb5TOMoyAxdbTxB

Reply on news.ycombinator.com