A simple listing of plain—‘Vanilla’—Javascript resources. Because sometimes you don't need a big library such as jQuery (which remains awesome IMO).
Have any other resources? Discuss, PR or Tweet @valuedstandards
Thanks, David Hund
P.S. ‘Vanilla’ JS is not ‘better’ than jQuery et. al! jQuery is a very good library. It can be argued that many plugins and functions in the resources below are ‘worse’: less well documented, tested, less cross-browser compatibility, etc. However: sometimes a swiss-army knife monolith such as jQuery is too much. Tiny, reusable & modular modules FTW!
Listing native methods, functions and plugins
Vanilla Plugins and Functions
Vanilla JS snippets for common jQuery methods and functions. Shows IE compatibility.
In addition to youmightnotneedjquery.com this is a list of commonly used plugins without dependencies.
A growing collection of code snippets, helper functions, polyfills, plugins, and learning resources, by Chris Ferdinandi.
Modest and dependency-free components. Built with web standards, compliant, keyboard navigable and properly interpreted by assistive technologies.
Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.
A collection of heavily minified JS snippets. Note: These are more of a coding challenge and probably not the best resource for production code! Inspirational, sure!
Not ‘Vanilla’ per se, but a neat list of HTML5 cross-browser polyfills, by the folks from Modernizr
Don't forget to search NPM when you ‘require
’ a specific JS module! Looking for a ‘Vanilla-version’ of a plugin? Try searching Google or Github directly :)
Articles on moving away from jQuery towards native Javascript
Awesome write-up by Chris Ferdinandi of how he goes about writing vanilla JS. Full of tips and Vanilla equivalents of jQuery functions
Todd Motto describes many native equivalents of jQuery methods and functions
Nicolas Bevacqua (@nzgb) covering the DOM API that libraries such as jQuery often ‘abstract away’ in their neat util functions.
Nicolas Bevacqua again. This time outlining how we could go about creating our own little ‘microlibrary’
James Halliday (substack) points out how a big dependancy like jQuery can make “a tiny frontend module much bigger and more cumbersome than it needs to be.” and is therefore “unattractive” in an ecosystem of “tiny reusable components.”
Sebastian Seitz gives you a crash course in DOM manipulation with vanilla JavaScript, abstracting the more verbose parts into a set of helper functions.
Little Vanilla snippets—or microlibraries—of goodness
A lightweight collection of helper methods for getting stuff done in native JavaScript.
A super tiny JavaScript library to execute simple DOM querying and hooking event listeners by Remy Sharp
Two way data binding for HTML and JavaScript (with node.js compatibility) with additional support for transforming data before it arrives in the DOM. By Remy Sharp
Paul Irish adds $
(qSA) and .on
in a few lines of goodness. Check comments for more (Promise
, etc.)
Again, do you know of other awesome resources? Discuss, PR or Tweet @valuedstandards
Thanks, David Hund