A simple listing of plain — ‘Vanilla’ — Javascript resources. Because sometimes you don't need a big library such as jQuery (which remains awesome IMO).
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!
aka Collapsible
- Vanilla JS Accordion - Vanilla JavaScript accordion - accessible and super tiny.
- SwiperJS - "The most modern mobile touch slider"
- Flickity - "Touch, responsive, flickable carousels"
- Vanilla JS Carousel - "Tiny JavaScript carousel with all the features most of us will ever need."
- SortableJS - JavaScript library for reorderable drag-and-drop lists
- Slim Select - Slim advanced select dropdown.
- tail.select - A multiselect component with a lot of options.
- Choices - A lightweight, configurable select box/text input plugin.
- Vanilla JS Dropdown - Tiny JavaScript replacement for
<select>that makes styling easy and consistent.
- Filepond - "A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience."
- Micro Modal - A lightweight, configurable and a11y-enabled modal.
- Gumshoe - Update a nav list based on scroll position.
- Simple Switch - Simple, accessible, performant implementation of the Switch UI element.
- Tocbot - Generate a table of contents based on the heading structure of an html document
- Tabby - Lightweight, accessible vanilla JS toggle tabs.
- Vanilla JS Tabs - Vanilla JavaScript Tabs - simple and awesome.
aka Popovers
- TippyJS - "The complete tooltip, popover, dropdown, and menu solution for the web"
- Vanilla JS Tooltip - Vanilla Javascript tooltip. Accepts plain text and fancy HTML.
Listing native methods, functions and plugins
- plainjs.com - Vanilla Plugins and Functions
- youmightnotneedjquery.com - Vanilla JS snippets for common jQuery methods and functions. Shows IE compatibility.
- youmightnotneedjqueryplugins.com - In addition to youmightnotneedjquery.com this is a list of commonly used plugins without dependencies.
- The Vanilla JavaScript Toolkit - A growing collection of code snippets, helper functions, polyfills, plugins, and learning resources, by Chris Ferdinandi.
- Frend.co - Modest and dependency-free components. Built with web standards, compliant, keyboard navigable and properly interpreted by assistive technologies.
- Microjs.com - 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.
- 140byt.es - 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!
- HTML5 Cross Browser Polyfills - Not ‘Vanilla’ per se, but a neat list of HTML5 cross-browser polyfills, by the folks from Modernizr
- Search NPM, Github or Google - 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
- “Ditching jQuery for Vanilla JS” - Awesome write-up by Chris Ferdinandi of how he goes about writing vanilla JS. Full of tips and Vanilla equivalents of jQuery functions
- “Essentials to learning JavaScript from a jQuery background” - Todd Motto describes many native equivalents of jQuery methods and functions
- “Uncovering the Native DOM API” - Nicolas Bevacqua (@nzgb) covering the DOM API that libraries such as jQuery often ‘abstract away’ in their neat util functions.
- “Getting over jQuery” - Nicolas Bevacqua again. This time outlining how we could go about creating our own little ‘microlibrary’
- “The Basics of DOM Manipulation in Vanilla JavaScript” - 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
- Buoy - A lightweight collection of helper methods for getting stuff done in native JavaScript.
- Min.js - A super tiny JavaScript library to execute simple DOM querying and hooking event listeners by Remy Sharp
- Bind.js - 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
- Bling.js - Paul Irish adds
$(qSA) and.onin 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