justContext is a simple context menu plugin that doesn’t require jQuery, but kicks ass anyway. Just about 30 lines of JS and a bit CSS produce a slick plugin that enables fast, easy and styleable context menus. Every HTML element can host it’s own menu. Two themes are included.

Why did you build it?

Other context menu plugins are either unusably cryptic or depend on jQuery, a library that is way too big for a problem this small. justContext is “just a context menu”. It won’t get in your way and is easily hacked.

A New, Lightweight, and Easy to Use ES6 Javascript @Mention Plugin from the Zurb crew. It allows you to quickly choose items from an arbitrary list with special characters.

Why did you build this plugin? Why was it needed?
As part of the unification and rebuild of Notable that we’ve been working on over the past year, we were working with 6 different unique application environments. If we were to require rewriting them all to be consistent before we could introduce new features, we’d never make progress. So for cross-application features, increasingly we’re “going native” to make it easier to use the same libraries for new features across applications.

One of the new features we are working on in Notable is @mentions. @mentions, popularized by Twitter, allow you to call out other people in a conversation. We scoured the net for a open source, native, @mention library and came up with nothing. To solve this problem, we built our own and are excited to open source it as Tribute.

Illustration by akselkreis

We’ve accepted the jankiness of page loads as a quirk of the web even though there is no technical reason for it. smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.

SmoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user’s browser doesn’t have the required features, smoothState.js fades into the background and never runs.

Why are page transitions necessary?

Imagine, for a second, how disorienting it would be if touching a doorknob teleported you to the other side of the door. Navigating the web feels like using a teleporting doorknob. Layouts change, elements rearrange or disappear, and it takes time for the user to adjust. Smooth transitions reduce the effort it takes for users to get settled into a new environment.

Javascript SPA frameworks, sometimes referred to as MVC frameworks, are a common way to solve this issue. These frameworks often lose the benefits of unobtrusive code. Writing unobtrusive javascript gives us more resilience to errors, and improved performance and accessibility.

How does smoothState.js work?

smoothState.js provides hooks that can be used to choreograph how elements enter and exit the page during navigation. It uses the time the animations are running to fetch content via AJAX to inject into the page.

smoothState.js doesn’t dictate how things on the page should be animated. It supports CSS animations, as well as JS animation libraries like velocity.js.

Design philosophy and requirements

The project’s main goal is to allow developers to add page transitions without having to add any logic to the backend. We keep things unobtrusive at all times.

smoothState.js initializes on containers, not links. Think of a container as a small window object embedded in the page.

Every URL on your site should return a full layout – not just an HTML fragment
The smoothState container needs to have an id set – a unique hook to tell us what to update on the page
All links and forms on the page should live within the container
These requirements makes the website resilient, since it smoothState.js can abort and simply redirect the user if an error occurs. Making each link return a full page also ensures that pages are created with progressive enhancement in mind.

Illustration by akselkreis

Quick Add to Cart is a handy snippet that allows users customize a product directly from the products gallery, and add it to a shopping cart.

The standard UX for product galleries is that a user clicks on a product, then navigates to the single product page. The user is expected to select options, and finally add the product to the cart. Nothing is broken in this process. However, a returning customer, who’s familiar with the products line, may find it handy to select and buy a product directly from the gallery. That’s what this little plugin does.

It provides a “quick add to cart” panel while users interact with a product preview. The plugin reduces the number of steps that separate a user from purchasing an item, and potentially increases the site conversion rate.

The plugin uses an unordered list HTML structure to make the tool work. You’ll need to add this code and styles to your website for complete functionality. The tool also comes with nifty animation so it works well and looks nice, too.

Tired of JavaScript’s “alert”. Then Sweet Alert is just what you are looking for.

This little plugin automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. And the customization options for this tool are almost limitless.

You can plug in Sweet Alert for almost any standard notification type.

Installation is simple and can be done in-browser, through NPM or with a download of the CSS and JavaScript files. Load the plugin and you are ready to add custom alerts and go!

Make sure to take a good look at the Sweet Alert configuration key chart. There are plenty of values for passing an object into Sweet Alert. The plugin also comes with some simple methods to call as well.

This plugin is a tool that can work for almost any website design. Who wouldn’t want a more custom and beautiful alert option? (And if you’d like to see more Sweet Alert features, make sure to let the developer know on GitHub.)

Payment Info is a one-line, mobile friendly credit card input tool. The idea behind this plugin is to create a more streamlined credit card entry process.

The plugin was inspired by Luke Wroblewski’s thoughts on streamlining the collection of payment information by using input masks:

“Input masks constrain text entries to help people avoid mistakes. For example, a phone number input mask could only accept numeric entries and ignore any alphabetic characters or punctuation. Acceptable numbers could be limited to just a range, a specific pattern, or a combination. Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.”

This is the concept employed by this simple plugin. The tool helps to seamlessly guide the user through the needed inputs to complete a transaction, but without having to navigate through multiple fields to accomplish this task.

Payment Info results in an easy tool that contributes to usability for your website.

The Flight Indicators plugin allows you to display high-quality flight indicators using HTML, CSS3, jQuery and SVG images. The methods make customization and real time implementation easy. And since all the images are vector SVG, you can resize everything without having to worry about any loss of image quality.

The plugin supports indicators for altitude (artificial horizon), heading, vertical speed, air speed and altimeter. The use for this plugin can vary but is a great tool for anyone with travel, flight or airport-based websites.

There are a couple of methods you can use to update the indicators and use a real-time interface. (You can see this process step-by-step in the plugin documentation.) The code is fairly simple and easy to understand if you want to make adjustments.

In addition to being useful, this plugin has a sleek interface design. Each of the indicators looks nice, features clean lines and can be implemented in almost any project. The included animation in the SVG files is also pretty seamless and really helps you to visualize changes to the included indicators. (You can also adjust some of the animation settings based on the graphic size you use in your applications for this tool.)

This plugin might be the most fun you’ve had all day; traceit allows you to trace page elements. You can draw arrows or rings or animated bits around images to provide users with a visual cue as to what they are supposed to do or where they are supposed to look on the screen.

The example is a great way to showcase the application of traceit. In the preview are diagrams of cat tails and in the sidebar are specific actions. If you click an action name, the appropriate tail image is circled so you can match action and visual.

Now that you know this is the right plugin for your project, download and include the script and its dependencies in your code. Select the traceable element and call the animation. That’s it!

You can create customizations as well for almost any aspect of the plugin. Change the color, stroke with, opacity, full, gap point and more as best suits your overall design. And just like magic use of the ESC key or changing the browser size will rest everything back to the start. It does not get much easier than this to use a plugin.

Create colorful triangle meshes with SVG images and CSS backgrounds for any website design. The Trianglify plugin uses an algorithm to create beautiful triangle backgrounds so that you don’t have to pull your hair out trying to imagine a randomized design.

And you have complete control over the final rendering using a few simple tools. (You can download and install using NPM, Bower or CDNJS or try the Triangle Generator if you are concerned about the code.)

Start with the variance tool to determine the amount of randomness in the pattern. Then set a cell parameter to show how large or small each triangle can appear. Finally pick a color combination that works with your website hues. The plugin comes with a large number of preset options from the colorbrewer palette set that are ready to use. The colors range from monotone palettes to contrasting sets of color.

The final pattern can be output in canvas, SVG or PNG formats for ease of use no matter what your project type. And if you are still not quite satisfied, there are a few extra options as well in the code that you can adjust — such as background size, strokes, variance in triangle sizes in relation to one another and x and y color patterns.

For generating attractive random colors, randomColor is a tiny and effective script. The focus of this tool is to generate plenty of random colors; the featured hues are bright and have high saturation.

There are some fun extras here too that allow you to create a colors based on a monotone concept, as light or dark colors, with grays or as a truly random color set.

The options you can control include hue, luminosity, count (number of colors to generate), seed and format.

The script is available minified on cdnjs; it is also distributed on NPM and Bower.

Movie credits inspired plugin for websites.

Have you ever wondered what software is installed on your computer? There’s a plugin for that. Software Detect uses jQuery and Flash to show users exactly what they have installed.

Here’s how it works: Whenever you install any major software package, you will usually end up with a bunch of new fonts on your system. These fonts are almost always unique to, not only the software package, but also to the particular version of that software package. Extracting this “font signature” through the users browser can help you detect the kinds of software that a user has installed on their computer— and it doesn’t require any additional permissions from the user.

The return results are shown on a simple screen that show the name and version of installed software packages. It’s a quick and easy way to help see what versions you are using — and if an upgrade might be in order.

Generic Data Binder (GDB) for jQuery is a framework agnostic and extremely easy to use as a two-way data binder. GDB binds views and models in real time with live two-way binding and no hefty framework is necessary.

Here’s how and why GDB can work for you:

• Works on all element types including contenteditable elements.
• Works with very complex models, even circular structures.
• Is template engine agnostic. Use your favorite client side template engine.
• Is framework agnostic. Use a framework? Don’t use a framework? Doesn’t matter. GDB will seamlessly integrate either way.
• Can be updated in real time. Not just onkeyup, but as you type. It works with context menu options such as cut, paste and delete.
• Just 3.77KB when gzipped and minified.
• Updates to elements, immediately update the model.
• Updates to the model, immediately update the bound and watching elements.

The documentation is packed with options for you to try and examples of how to use this tool. If you are on the fence about this tool, viewing the examples will provide plenty of reason to try it out. It really is a useful element.

Plugin to play and stop animated gifs.