The purpose of this doc is to share useful libraries, snippets, and ideas that the Barrel dev team has either created or collaborated on.
Additionally, these repos are not necessarily complete or production ready, but most probably are. If you want to know more about stability, or want to contribute, reach out to an author via Issues for that repo!
-
Blazed - background image lazy loading
Specify image URLs and breakpoints, just like srcset. Blazed will find the size that fits the current viewport and smoothly load the image.
Tagged: lazy loading, background images, vanilla js – Author: @estrattonbailey
-
conform.js - AJAX form submissions
A simple, unopinionated form submission utility library. Configure custom validation for individual fields and easily handle success and error states. 2.39kb gzipped.
Tagged: ajax, form, submit, validation – Author: @estrattonbailey
-
Frame - sandbox generator
Creates a new folder with a base setup of SCSS, Babel, and a index.html file. Good for testing out an idea, etc.
Tagged: sandbox, generator, vanilla js – Author: @estrattonbailey
-
Lookout - native accessors (getters/setters)
A experiment in accessors – getter and setter functions – with support for callbacks and nested observable objects. Can be used to create reactive data objects (state) for more complex UI functionality. Kinda production ready, but you should probably use Redux.
Tagged: accessors, native, reactive, state, vanilla js – Author: @estrattonbailey
-
loop.js - event emitter
A handy little event emitter for integration with a library.
Tagged: emitter, events – Author: @estrattonbailey
-
acf-mapbox-geojson-field - ACF Mapbox field WP plugin
WordPress plugin which creates an ACF field type of a Mapbox map and saves searched location data.
Tagged: wordpress, maps, acf – Author: @bengodfrey
-
micro-jsonp - JSONp
A hyper-minimal standalone jsonp implementation in ES6.
Tagged: jsonp, form submission, mailchimp, ajax – Author: @estrattonbailey
-
micromanager - manage your bindings
Route-managed client-side binding controller in ES6.
Tagged: bindings, events, routing, SPAs – Author: @estrattonbailey
-
Nab-select -
querySelectorAllwrapper with utilsA tiny DOM selection and traversal library. Needs testing, otherwise ready to use. Better to use as a reference.
Tagged: select, traversal, DOM, closest, find, vanilla js – Author: @estrattonbailey
-
Return a string representing the keypath to a key of a specified value.
Tagged: object, key, keypath, vanilla – Author: @estrattonbailey
-
Overunder - waypoints
A small waypoint library that emits events when you scroll to a specific element(s), or resize to a specified width. Use overunder for sticky elements, lazy loading, element queries, etc.
Tagged: vanilla js, waypoints, scroll, resize – Author: @estrattonbailey
-
operator.js - AJAXify your site
An AJAX + routing library that transforms a normal site into a Single Page Application (SPA).
Tagged: ajax, routing, page transitions – Author: @estrattonbailey
-
Promo Bar (gist) - hello bar
A starting point for a promo bar library. TODO: needs corresponding markup and styles.
Tagged: promo bar, vanilla js – Author: @estrattonbailey
-
putz - progress bar
A tiny progress bar library for AJAX and SPAs in ES6.
Tagged: progress bar, loading bar, ajax – Author: @estrattonbailey
-
paralless - hyper-minimal parallax
Simple parallax powered by CSS3 transitions.
Tagged: parallax – Author: @iamkevingreen
-
raf-scroll.js - Optimized scroll event dispatcher
Utilize animation frames to trigger scroll callbacks in the appropriate render pipeline location of each frame.
Tagged: event management, scroll, vanilla js – Author: @maxrolon
-
Sharable - easy and configurable social share popups
Pulls data from
<head>by default, can be overriden by data on the social link itself. Opens share dialog in small popup window.Tagged: vanilla js, social, sharing – Author: @estrattonbailey
-
Svbstrate - css library
The CSS library we use at Barrel. See its README and docs site for more info.
Tagged: css, atomic, functional - Author @estrattonbailey
-
Shopify Collection Filtering (gist) - as used on gitman.com
Uses tags on individual products to generate an array of filters for the collection page. See gist comments for explanation.
Tagged: Shopify, liquid, filtering, functional - Author @estrattonbailey
-
Shopify Shipper - Shopify shipping calculator
Generates form HTML, sends and receives shipping rates for Shopify themes
Tagged: Shopify, cart, vanilla js, shipping, forms - Author @maxrolon
-
Sub Nav - Simple Anchor Nav
Handles the simple challenge of having a submenu of anchor links
Tagged: WIP, UI, Sticky Nav, ES6, vanilla js, Waypoints, Anchors - Author @maxrolon
-
srraf - scroll/resize handling
Better scroll and resize listeners using requestAnimationFrame.
Tagged: scroll, resize, event management - Author @estrattonbailey
-
scroll-restoration - scroll managment
A tiny scroll management library using native DOM APIs.
Tagged: scroll, history state - Author @estrattonbailey
-
svel - scroll managment
Calculate velocity over an interval for scroll or resize events.
Tagged: scroll, scroll speed - Author @estrattonbailey
-
tarry.js - sequence functions
A really tiny sequencing library with support for delays.
Tagged: sequence, delay, setTimeout – Author: @estrattonbailey
-
up-down - ES6 quantity selector
A quantity selector in ES6.
Tagged: counter, accessors, javascript, ES6 – Author:@estrattonbailey
-
valencia - instagram
A hyper-minimal wrapper to fetch Instagram posts from an authenticated user.
Tagged: instagram – Author: @estrattonbailey
-
video-in-out.js - Scroll to video
Automate the play and pause of videos based on scroll
Tagged: video, javascript, ES6 – Author: @maxrolon