Add vanilla JS examples to the docs for each Codepen example

[adamjohnson]

Right now, the docs have several examples of how to implement Isotope (fantastic! This is incredibly helpful). Certainly not all, but the majority of these examples require jQuery. In 2022, most of what made jQuery useful is now baked into the browser as native JavaScript APIs (see You Might Not Need jQuery).

It's incredibly useful to have vanilla JavaScript examples of Isotope. I have even converted one of the examples to vanilla JS and added a comment to the original Codepen.

I would love to see Isotope have vanilla JS examples for each Codepen. In my searches, I would be especially grateful to have vanilla JS examples of the following:

• Combination filters & search
• Combination inclusive and exclusive filters with selects and checkboxes
• Combination filters with checkboxes and URL hash
• Filtering with quick search
• Radio input example
• Select Example
• Update filtered item count
• ...many more

You may notice many of the Pens I've listed here include combination filters with #a11y friendly controls (like checkboxes, selects, radios, etc).

Lastly, thank you for building and maintaining Isotope! It's a fantastic project that I have used many times over the years. :clap:

(If you, dear reader, would like to see this too, leave a :+1:!)

[thesublimeobject]

@adamjohnson — I definitely understand this request. I agree that the documentation is pretty comprehensive, but ideally there could certainly be some more vanilla JS examples.

I would need to talk to @desandro, but I would be happy to convert some of these to vanilla JS, especially since I probably have multiple personal examples of some of these ready. That said, many of these examples, while they do use jquery, can easily be converted to using vanilla JS by simply referencing the docs and substituting the vanilla JS Isotope functions for the jquery Isotope functions. It feels like, apart from those conversions, a lot of the examples would be driven by understanding conversions between javascript <==> jquery, which isn't necessarily directly related to the project itself, but I would be more likely to jump on this if it gets some attention.

[adamjohnson]

One thing to consider: it might be strategically wise to include vanilla JavaScript examples on the documentation site seeing as many will (or already have) transitioned away from jQuery on their digital properties.

Having examples in vanilla JavaScript might mean more commercial licenses. 💰

Thank you for your prompt reply!

[thesublimeobject]

@adamjohnson — Haha your points are compelling, no doubt. This might be an interesting little side-project for me to work through anyway. Let me see what I can do and I'll get back to you. If you have any other ideas/suggestions in the meantime, happy to hear them. :)

[exofoliohq]

I'm in the same boat here, trying to convert this Codepen by Desandro (exclusive selects, inclusive checkboxes and reset button) from jquery to vanilla js, and it's, in fact, not that easy, this would be indeed very useful to have those functionalities working in vanilla, and would futureproof the library as a lot of teams are trying to let go of jquery. @thesublimeobject @desandro maybe showing us a codepen with the big features like combination, select, inclusive, exclusive and so on, would lead us the right way. Anyway thanks for this thing, it's mature, reliable and useful !

[adamjohnson]

The more complex, combination filters are naturally the most difficult to convert.

FWIW, I had some luck plugging in some of the jQuery examples and asking ChatGPT to convert the code to vanilla JavaScript. It didn't always get it right, but it's a great place to start/look if you're stuck in the interim.

[thesublimeobject]

@adorebo @adamjohnson — I have not had time to do this personally, unfortunately, but if you can open an issue that shows me what you've tried, I can no doubt help push you in the right direction. If you know JS well enough, the conversion isn't too tedious. It's more about knowing how jQuery maps to javascript functionally than it is about Isotope specifically, if that makes sense.