1
4 Comments

Tips for writing more concise/Ruby-like vanilla Javascript?

I recently implemented Stimulus JS in our app and it's opened my eyes to some really nice, concise, snappy Javascript methods/operators that I wasn't using before. Such as:
element.classList.toggle('info-notice')
element.hidden = true
elements.forEach( x => { console.log(x.id) } )

Whilst I adore Ruby and am probably moving more towards live-updating server-rendered HTML (i.e. Hotwire) for our main app. We run a script on customers stores which is vanilla JS. I'd love to hear any suggestions on tight modern vanilla JS. Like the methods, patterns I mentioned above.

Thanks,
Oli

P.S. oh and am I right in thinking there isn't a less verbose version of document.getElementById('element') or document.querySelector('element')? It just seems super long-winded for such a common line.

  1. 3

    You can create a function to get elements -
    const getElement = (selection) => { const element = document.querySelector(selection); if (element) return element; throw new Error("no element selected"); };

    Then use it whenever required by calling it with the element name being the argument.
    getElement('.element')
    This shortens it significantly.

    Do let me know your thoughts on this approach.

    1. 1

      That looks great! I’ll be stealing that for sure 👌
      I’m not at a computer at the moment to play around with it, but I might tweak it to return null instead of an error. Just so I can use it in a truthy way too

    1. 1

      That’s lovely. Super compact. Thanks for the tip

Trending on Indie Hackers
Link to your product & tell IH how you came up with your idea 105 comments Share your product or landing page, and I'll give you product design advice 47 comments Does anyone actually use productivity software? Which one? 25 comments Can you try my side project? I'm looking for some feedback 🙂 24 comments Copywriting Examples — The world's best copy. In one place. 13 comments Working towards an MVP 7 comments