Table of Contents

• JavaScript

  • Dropzone.js - DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
  • 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.
  • Uppy - Sleek, modular open source JavaScript file uploader. Uppy fetches files locally and from remote places like Dropbox or Instagram. With its seamless integration, reliability and ease of use, Uppy is truly your best friend in file uploading.
  • Muuri - Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable).
  • Glide.js - A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
  • spacetime - A lightweight javascript timezone library
  • Tornis - Taking its name from the forest watchtowers of Latvia, Tornis is a minimal JavaScript library that watches the state of your browser's viewport, allowing you to respond whenever something changes. Think of Tornis as a store for your viewport.
  • mark.js - mark.js is a text highlighter written in JavaScript. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.
  • PhotoSwipe - JavaScript image gallery for mobile and desktop.
  • Video.js - Make your player yours with the world's most popular open source HTML5 player framework
  • MockServiceWorker - is an API mocking library that operates by intercepting production requests.
  • Muuri - Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable).
  • Spotlight.js - Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
  • Croppie - Croppie is a fast, easy to use image cropping plugin with tons of configuration options!
  • Drift - This is Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from [imgix](http://imgix.com). Move your mouse over the image (or touch it) to see it in action.
  • Siema - Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said "do that shit yourself". It is 100% open source and available on Github. It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project.
  • localForage - localForage is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, localStorage-like API. It allows developers to [store many types of data](https://localforage.github.io/localForage/#data-api-setitem) instead of just strings.
  • Headroom.js - Give your pages some headroom. Hide your header until you need it.
  • Croppie - Croppie is a fast, easy to use image cropping plugin with tons of configuration options!
  • React - Created by Facebook, the React framework has earned popularity within a short period. It is used to develop and operate the dynamic User Interface of the web pages with high incoming traffic. It makes the use of a virtual DOM, and hence, the integration of the same with any application is more straightforward.
  • Dropzone.js - DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
  • Uppy - Sleek, modular open source JavaScript file uploader. Uppy fetches files locally and from remote places like Dropbox or Instagram. With its seamless integration, reliability and ease of use, Uppy is truly your best friend in file uploading.
  • Quill - Your powerful rich text editor.
  • anime.js - Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
  • Formik - Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often have a significant performance cost associated with them.
  • Muuri - Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable).
  • Glide.js - A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
  • Flickity - Touch, responsive, flickable carousels.
  • spacetime - A lightweight javascript timezone library
  • Tornis - Taking its name from the forest watchtowers of Latvia, Tornis is a minimal JavaScript library that watches the state of your browser's viewport, allowing you to respond whenever something changes. Think of Tornis as a store for your viewport.
  • mark.js - mark.js is a text highlighter written in JavaScript. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.
  • PhotoSwipe - JavaScript image gallery for mobile and desktop.
  • Drift - This is Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from [imgix](http://imgix.com). Move your mouse over the image (or touch it) to see it in action.
  • howler.js - Audio library for the modern web. howler.js makes working with audio in JavaScript easy and reliable across all platforms.
  • Video.js - Make your player yours with the world's most popular open source HTML5 player framework
  • Mirage JS - Mirage JS is an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend services.
  • MockServiceWorker - is an API mocking library that operates by intercepting production requests.
  • Sal - Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies!
  • Rellax - Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library.
  • BundlePhobia - find the cost of adding a npm package to your bundle
  • Dinero.js - is a library for working with monetary values in JavaScript.
  • Jest - Delightful JavaScript Testing Framework by Facebook. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more.
  • Cypress - An open source, front-end E2E testing tool, built for the modern web.
  • tiptap - This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.
  • Editor.js - Next generation block styled editor. Free. Use for pleasure.
  • Draggable JS - Draggable is a modern drag and drop JavaScript library. Lightweight, modular and accessible.
  • Cleave.js - Format your <input/> content when you are typing
  • Overlay Scrollbars - A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

• Tools

  • @pika/pack - @pika/pack connects pre-configured plugins to build and optimize your package for you. Plugins wrap already-popular tools like Babel and Rollup with options already optimized for npm. This lets @pika/pack build your package without much (if any) configuration required on your part.
  • Sentry - Sentry is an open-source company, providing an application monitoring platform that helps you identify issues in real-time. Here we cover everything about the product, the platform integrations, and self-hosted Sentry.
  • @pika/pack - @pika/pack connects pre-configured plugins to build and optimize your package for you. Plugins wrap already-popular tools like Babel and Rollup with options already optimized for npm. This lets @pika/pack build your package without much (if any) configuration required on your part.

• ONLINE Resources

  • Vanilla List - The Vanilla JavaScript Repository. Coz' sometimes you feel guilty for using jQuery.
  • State of JS - JavaScript is always changing. New libraries, new frameworks, new languages… It's part of the fun, but it can also feel overwhelming sometimes. That's where the State of JavaScript survey comes in: this year, we surveyed over 20,000 JavaScript developers to figure out what they're using, what they're happy with, and what they want to learn. And the result is a unique collection of stats and insights that will hopefully help you make your own way through the JavaScript ecosystem.
  • State of CSS - In the web development family, JavaScript has developed a bit of a reputation as the angry, rebellious teenager going through a new phase every year and telling you you're just too old to understand. CSS on the other hand has always been the studious, well-behaved kid who always stays polite and never makes a rash decision. But don't take things for granted: despite being over 20 years old, there's signs that CSS might be going through the same tumultuous teenage years that JavaScript just went through. Flexbox! Grid! CSS-in-JS! In 2019, CSS is finally dyeing its hair pink and getting a tattoo just like it's always secretly wanted. Parenting books won't help much with this one, but that's where we come in: we've surveyed over 10,000 developers in this first ever State of CSS survey. So join us to find out which CSS features are used the most, which tools are gaining adoption, and much more.
  • javascript.info - The Modern JavaScript Tutorial. From the basics to advanced topics with simple, but detailed explanations.
  • Tiny Helpers - A collection of free single-purpose online tools for web developers.
  • JavaScript Questions - From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview!
  • JavaScript Algorithms and Data Structures - This repository contains JavaScript based examples of many popular algorithms and data structures. Each algorithm and data structure has its own separate README with related explanations and links for further reading (including ones to YouTube videos).
  • Clean Code JavaScript - Software engineering principles, from Robert C. Martin's book [Clean Code](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882), adapted for JavaScript. This is not a style guide. It's a guide to producing [readable, reusable, and refactorable](https://github.com/ryanmcdermott/3rs-of-software-architecture) software in JavaScript.
  • Vanilla List - The Vanilla JavaScript Repository. Coz' sometimes you feel guilty for using jQuery.
  • State of JS - JavaScript is always changing. New libraries, new frameworks, new languages… It's part of the fun, but it can also feel overwhelming sometimes. That's where the State of JavaScript survey comes in: this year, we surveyed over 20,000 JavaScript developers to figure out what they're using, what they're happy with, and what they want to learn. And the result is a unique collection of stats and insights that will hopefully help you make your own way through the JavaScript ecosystem.
  • State of CSS - In the web development family, JavaScript has developed a bit of a reputation as the angry, rebellious teenager going through a new phase every year and telling you you're just too old to understand. CSS on the other hand has always been the studious, well-behaved kid who always stays polite and never makes a rash decision. But don't take things for granted: despite being over 20 years old, there's signs that CSS might be going through the same tumultuous teenage years that JavaScript just went through. Flexbox! Grid! CSS-in-JS! In 2019, CSS is finally dyeing its hair pink and getting a tattoo just like it's always secretly wanted. Parenting books won't help much with this one, but that's where we come in: we've surveyed over 10,000 developers in this first ever State of CSS survey. So join us to find out which CSS features are used the most, which tools are gaining adoption, and much more.
  • Service Workies - Learn Service Workers inside and out with the new game of Service Worker mastery. A collaborative project by [geddski](https://gedd.ski) & [Google Developers](https://web.dev)
  • Grid Critters - Completely learn CSS Grid once and for all by playing Grid Critters: the game of Grid mastery. Your journey begins on the mysterious planet Grideros. Your mission is to use your ship's powerful Grid tool to save alien critters from extinction.
  • Flexbox Zombies - This is an Educational Game. Each section unravels part of the plot, gives you expertise over a new flexbox concept, and presents zombie survival challenges that force you to solidify your new skills like your life depends on it.

• Optimization

  • SVGOMG - SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files. SVGOMG is SVGO's Missing GUI.

• Favorites

  • Inertia.js - Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.