# JavaScript Website Plugins for Fractal Document last updated: 2023-10-01 Plugin Versions last updated: 2023-10-01 See [this Kinsta blog](https://kinsta.com/blog/javascript-libraries/) for a detailed list of 40 plugins and their value. ## JavaScript Frameworks in Use ### Bootstrap Design fast and mobile responsive sites quickly using [Bootstrap](https://getbootstrap.com), one of the most popular open-source toolkits for front-end development. It was released in 2011 and provides developers with great flexibility in customizing various elements tailored to the client’s needs. Dependencies: NONE Installed via: node_modules plugin - baked into vendor.min.js by Gulp Version used on website: v5.3.2 npm: npm install bootstrap ## Plugins In Active Use on [VFN Global](https://vfn.global) Following are plugins that I have reviewed and are currently in use on the website. I have grouped them by: - DOM Manipulation - UI Components - Animations - Data Visualization (maps and charts) - Data Handling - Database - Forms - Image Effects - Utility - Math and String Functions - Fonts ### DOM Manipulation Document Object Model (DOM) represents a web page (a document) as objects and nodes that you can modify using JavaScript. You can change its content, style, and structure. #### jQuery [jQuery](https://jquery.com/) is a classic JavaScript library that’s fast, light-weight, and feature-rich. It makes things simpler for HTML document manipulation and traversal, animation, event handling, and Ajax. **Features/Benefits:** - It has an easy-to-use, minimalistic API. - It uses CSS3 selectors in manipulating style properties and finding elements. - jQuery is lightweight, taking just 30kb to gzip and minify, and supports an AMD module. - As its syntax is quite similar to that of CSS, it is easy for beginners to learn. - Extensible with plugins. - Versatility with an API that supports multiple browsers, including Chrome and Firefox. Dependencies: NONE Installed via: node_modules plugin - baked into vendor.min.js by Gulp Version used on website: v3.7.1 npm: npm install jquery #### Royal Preloader I use [Royal Preloader]() as my preferred page loading overlay and spinner. My implementation displays dancing hexagons and I use it on all my Vertisan websites. Dependencies: NONE Installed via: Manual plugin copy to output directory by Gulp Version used on website: v2.06 ### User Interface Components You can provide a better user experience via web pages by making them more responsive and dynamic, decreasing the number of DOM operations, boosting page speed, and so forth. #### iziModal [iziModal](https://izimodal.marcelodolza.com/) is an elegant, lightweight, flexible, and responsive modal plugin that works with jQuery. It is useful to notify something to your users or ask for information using a popup modal. It is easy to use and comes with many customizations. #### Popper.js [Popper.js](https://popper.js.org/) was created to make it easier to position popovers, dropdowns, tooltips, and other contextual elements that appear close to a button or other similar elements. Popper provides an excellent way to arrange them, stick them to other site elements, and enable them to perform seamlessly on any screen size. #### Masonry [Masonry](https://masonry.desandro.com/) is an awesome JS grid layout library. This library helps you place your grid elements in suitable positions based on how much vertical space is available. It’s even used by some of the popular photo gallery WordPress plugins. #### Granim.js [Granim.js](https://sarcadass.github.io/granim.js/) is a JS library that helps you create fluid and interactive gradient animations. This way, you can make your site stand out with colorful backgrounds. #### Jarallax [Jarallax](https://jarallax.nkdev.info/) is the easiest parallax and video backgrounds. Jarallax is a high-performance smooth parallax scrolling effect for JavaScript. Easily enable parallax on images, Youtube, Vimeo, and mp4 videos. Dependencies: NONE Installed via: node_modules plugin - baked into vendor.min.js by Gulp Version used on website: v2.1.4 GitHub Repository: [https://github.com/nk-o/jarallax/](https://github.com/nk-o/jarallax/) npm: npm install jarallax #### CountTo jQuery [countTo](https://github.com/mhuggins/jquery-countTo) is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element. Dependencies: CountTo requires jQuery v1.8+ Installed via: libman.json Version used on website: v1.2.0 #### Waypoints [Waypoints](http://imakewebthings.com/waypoints/) is used symbiotically with CountTo. It fires when the page is scrolled to a certain point and then CountTo can perform its animated counting. Dependencies: Waypoints requires jQuery v1.8+ Installed via: libman.json Version used on website: v4.0.1 GitHub Repository: [https://github.com/imakewebthings/waypoints](https://github.com/imakewebthings/waypoints#readme) #### Perfect Scrollbar [Perfect Scrollbar](https://perfectscrollbar.com/) is a minimalistic but perfect custom scrollbar plugin. Installed via: node_modules plugin - baked into vendor.min.js by Gulp Version used on website: v1.5.5 npm: npm install perfect-scrollbar ### Animations People love animations, and you can leverage them to make your web page interactive and more engaging. Adding micro-interactions and animations is easy by using JavaScript libraries. #### Animate on Scroll (AOS) Animate On Scroll works great for single-page parallax websites. This JS library is fully open-source and helps you add decent animations on your pages that look sweet as you scroll down or up. It makes your site design a joyful ride by helping you add fade effects, static anchor positions, and more to delight your users. **NOTE**: AOS is a replacement for **Wow**. Do not use Wow for scroll-based animations. Dependencies: Unknown Installed via: node_modules plugin - baked into vendor.min.js by Gulp Version used on website: v3.0.0-beta.6 ### Data Visualization (maps and charts) Data visualization in applications is crucial for users to view the statistics clearly in the admin panel, dashboards, performance metrics, and more. Presenting these data in charts and maps helps you analyze that data easily and make informed business decisions. #### Chart.js Chart.js is a flexible and simple library for designers and developers who can add beautiful charts and graphs to their projects in no time. ### Data Handling With the enormous amounts of data that businesses now deal with daily, handling and managing them properly is essential. Using a JavaScript library makes it easier to handle a document following its content while adding more interactivity. #### D3 #### Datatables.net [DataTables](https://datatables.net/) is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. Includes .[NET 6 Server-Side processing](https://github.com/DavidSuescunPelegay/jQuery-datatable-server-side-net-core) Dependencies: jQuery Installed via: node_modules plugin copied by Gulp Version used on website: v2.1.1 ### Database Effective database management is necessary to read, create, delete, edit, and sort data. You can also use sophisticated queries, auto-create tables, synchronize and validate data, and much more. ### Forms Use JS libraries to simplify form functions, including form validation, synchronization, handling, conditional capabilities, field controls, transforming layouts, and more. #### Parsley [Parsley](http://parsleyjs.org/) is used to easily validate forms. ### Image Effects Users can add effects to images and make them stand out using JS libraries. Effects include blurring, lightening, embossing, sharpening, grayscale, saturation, hue, adjusting contrast, flipping, inverting, reflection, and so on. ### Utility #### JS Cookie [JS Cookie](https://github.com/js-cookie/js-cookie#readme) is a simple, lightweight JavaScript API for handling cookies. It's the defacto standard. Dependencies: NONE Installed via: node_modules plugin - baked into vendor.min.js by Gulp Version used on website: v3.0.5 GitHub Repository: [https://github.com/js-cookie/js-cookie](https://github.com/js-cookie/js-cookie) ### Math and String Functions Adding mathematical expressions, date, time, and strings can be tricky. For example, a date consists of many formats, slashes, and dots to make things complex for you. The same holds when it comes to matrices and vectors. Use JavaScript libraries to simplify these complexities in addition to manipulating and handling URLs effortlessly. #### Moment.js [Moment.js](https://momentjs.com/) helps you manage time and date effectively when working with different time zones, API calls, local languages, etc. #### Voca The idea behind creating [Voca](https://vocajs.com/) is to ease out the pain while working with JavaScript strings. It comes with useful functions that make it easy to manipulate strings like changing case, pad, trim, truncate, and more. #### Underscore.js Underscore is a JavaScript utility library that provides various functions for typical programming tasks #### Lodash Lodash is also a JS utility library that makes it easier to work with numbers, arrays, strings, objects, etc. It was released in 2013 and also uses functional programming design like Underscore.js. **Features/Benefits:** - It helps you write maintainable and concise JavaScript codes. - Simplifies common tasks such as math operations, binding, throttling, decorating, constraining, debouncing, etc. - String functions like trimming, camel case, and upper case are made simpler. - Creating, modifying, compressing, and sorting arrays. - Other operations on the collection, object, and sequence. ### Fonts Users can incorporate any font they wish to make their web page more compelling based on the content type. <hr /> ## Not in Active Use for this Website ### D3 ### Moment ### Parsley Front end form validation ### Modernizr Modernizr is a feature detection JavaScript library. That is to say, it tells you the JS, HTML, and CSS features that your browser has. ### MathJX MathJAX, true to its name, is another efficient JavaScript library that can display math notations in web browsers. ### Socket.IO Socket.IO is a highly reliable library that further allows for event-based two-way communication between the server and the browser window. ### Algolia Places Algolia Places is a JavaScript library that provides an easy and distributed way of using address auto-completion on your site. It’s a blazingly fast and wonderfully accurate tool that can help increase your site user experience. Algolia Places leverages the impressive open-source database of OpenStreetMap to cover worldwide places. ### Bideo.js Incorporate full-screen videos into your site’s background. ### Slick [Slick](http://kenwheeler.github.io/slick/) is a useful JS tool that takes care of your carousel requirements. It is responsive and scalable with its container. Its features include CSS3 support, swipes, mouse dragging, full accessibility, infinite looping, autoplay, lazy loading, and many more.