UI

Dragula is my most recent creation. It provides a simple API to manage drag & drop across containers. You can set it up to remove elements from the DOM when they’re dropped outside of the desired containers, tell it to move or clone elements, and listen for events at a few crucial points in the drag & drop lifecycle. It handles sorting, displays a nice shadow for visual feedback that follows the mouse cursor around, and you also get a shadow on the containers that shows where an element would get dropped. It’s also drastically small and simplistic.

Rome is a full featured date and time picker that you can attach to an input or render inline. It supports IE7+ out the box, and comes with minimal styling so that you can style it to match your designs. It has extensive validation and formatting support and also comes with a flexible API to cater for many different use cases. Calendars can also be linked to each other to validate date ranges.

Insignia is an enhancement for text based inputs where the user will get a fancier representation of tags. They’ll still be able to edit tags using plain text input, and you’ll be able to render tags however you want, matching the styling tags have in other parts of your site.

Horsey is an autocompletion component that allows you to lazy load suggestions. Given that it only cares about providing relevant suggestions, it plays really well with others. It can be paired with Insignia to suggest tags. You can customize the appearance of suggestions as well as the values that’ll be sent to the input. You decide whether the suggestions should be appended to the input value or replace it altogether, among other options.

Hint is a minor component to display pretty tooltips using pure CSS. You can add a small piece of JavaScript to add a few more improvements to the tooltips such as adjusting them to the viewport size and fading them in with a nice transition animation.

Flexarea creates a barely useful full-width drag handle that lets you resize a text area or any other DOM element. It was one of the first small components I developed when redesigning Pony Foo.

MVC

Taunus is an MVC library that enables shared rendering and empowers progressive enhancement. The server-side rendered application is immediately ready for human consumption and deferring JavaScript is recommended. It’s highly modular and encourages you to keep your views and controllers in individual files. Taunus has solutions for versioning a single page application even when the user doesn’t navigate away after a deployment, lazy loading of views, caching, and prefetching when links are hovered over. Learn more about Taunus by reading through its documentation.

Ruta3 is the client-side router used by Taunus. It’s really small and flexible. You can pass in routes and handlers, and then figure out what handler should be used for a given URL. The routes support named parameters, wildcards, and optional parts.

Utilities

Contra is a utility library similar in spirit to async but tuned for cross browser support and a tiny footprint. Contra provides the usual asynchronous flow control suspects such as serial or concurrent flows, as well as an asynchronous queue implementation that actually underlies most of Contra. It also comes with a tiny event emitter implementation that’s used in many of the other libraries I described here.

Fuzzysearch is the default engine used by Horsey to provide relevant search results. It partially matches user input to produce interesting results. It’s blazing fast and hilariously small.

But is a functional utility that helps you omit wrapper functions to “chew up” arguments.

Estimate calculates the time it would take to read the contents of a DOM element or piece of text. You can also use it to figure out how much of that element has been read, according to the user’s scroll position.

DOM

Diferente leverages the virtual-dom module to easily diff a DOM element and an updated piece of HTML.

Bullseye is a tiny library that’s able to inform you of the viewport position for the text selection caret or a particular DOM element, and report on changes to that position. This is used by both Horsey and Rome, among others, to display elements in the correct place on screen.

Kanye makes it easy to deal with keyboard shortcuts by allowing you to declare them in a human way. For example you can specify a shortcut with just 'cmd+shift+x' and a callback. It allows you to group shortcuts in different contexts which you can then remove at once. This comes in handy when dealing with view-based shortcuts in single page applications.

Poser is an interesting experiment where you get a reference to objects in different execution contexts. In the browser, you can use Poser to get a reference to an Array from an <iframe>, and then extend that Array to create libraries that extend true native array functionality, without interfering with the Array everyone else is using.

Sektor is a tiny DOM selection library with an API that’s identical to Sizzle. The difference is that Sizzle implements an entire selection engine in pure JavaScript, while Sektor mostly leverages document.querySelectorAll. Sizzle’s implementation fixes bugs that hardly ever come up in the context of regular web applications, and comes at the price of a much larger footprint than that of Sektor, which sits at 824 bytes.

Dominus leverages the last two libraries that I’ve mentioned, Poser and Sektor, to provide a lean jQuery-like API. It differs from jQuery in that it extends real Array objects with poser. It provides more consistency in regards to API method naming and expected outputs.

Crossvent is a tiny library to bind, unbind, and synthesize DOM events. It’s used by Dominus to provide cross-browser event handling.

local-storage provides a simple cross-browser solution to access the localStorage API. It provides a stub even when localStorage isn’t available, and simplifies the API to handle 'storage' events.

insert-rule is a tiny cross-browser library that allows you to insert CSS rules into the document programatically using JavaScript.

Sell makes text selection simpler across browsers. It returns an object indicating the start and end positions of the text selection, and it also allows you to use those objects to update the text selection on an input.

Markdown

Megamark builds upon markdown-it adding built-in syntax highlighting, HTML sanitization, a trimmed down client-side implementation, a simplified tokenization API, and prettified text.

Insane is the HTML sanitizer used by Megamark. It follows a whitelist-based approach where you can specify which tags, attributes, CSS class names, and URL schemes are allowed. Everything else gets stripped away. You can also define a filter that determines whether a DOM element should be discarded based on any conditions you need.

Domador parses a DOM tree or HTML into Markdown. It is intended mostly for use when developing two-way Markdown editors that are able to deal with Markdown or HTML input. You can define custom transformers so that extensions to the Markdown language are properly parsed back into the syntax you originally intended.

Awkward Microsites

Hubby is a single page site that shows some more information about a GitHub user than their GitHub profile will show. Mildly useful when stalking developers with tons of starry repositories. Here’s an example: @sindresorhus.

Cube is a ridiculous game which will most definitely make you throw up. Includes sounds, trashy seizure-inducing graphics, and a thoroughly unenjoyable gaming experience. Hacked together at CampJS.

Wheew. That’s quite a few modules. Here’s hoping you’ve found something you could use in there. As a bonus for getting this far, consider checking out js and css, a pair of quality guides I’ve put together for developing better front-end codebases.