Awesome ‘Vanilla’ Javascript

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!

Contents

• Components
  • Accordion
  • Carousel
  • Drag and Drop
  • Dropdowns
  • File Uploaders
  • Modals
  • ScrollSpy
  • Switches
  • Table of Contents
  • Tabs
  • Tooltips
• Lists
• Articles
• Code

Components

Accordion

aka Collapsible

• Vanilla JS Accordion - Vanilla JavaScript accordion - accessible and super tiny.

Carousel

• 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."

Drag and drop

• SortableJS - JavaScript library for reorderable drag-and-drop lists

Dropdowns

• 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.

File Uploaders

• 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."

Modals

• Micro Modal - A lightweight, configurable and a11y-enabled modal.

ScrollSpy

• Gumshoe - Update a nav list based on scroll position.

Switches

• Simple Switch - Simple, accessible, performant implementation of the Switch UI element.

Table of Contents

• Tocbot - Generate a table of contents based on the heading structure of an html document

Tabs

• Tabby - Lightweight, accessible vanilla JS toggle tabs.
• Vanilla JS Tabs - Vanilla JavaScript Tabs - simple and awesome.

Tooltips

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.

Lists

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

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.

Code

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 .on in a few lines of goodness. Check comments for more (Promise, etc.)

Your turn!

Again, do you know of other awesome resources? Discuss, PR or Tweet @valuedstandards

Thanks, David Hund