https://github.com/zgabievi/awesome-fe-resources

Awesome resources, mostly frontend stuff
https://github.com/zgabievi/awesome-fe-resources

List: awesome-fe-resources

angular awesome courses css frameworks frontend javascript optimization react svelte testing tools vue wysiwyg

Last synced: about 1 month ago
JSON representation

Awesome resources, mostly frontend stuff

• Host: GitHub
• URL: https://github.com/zgabievi/awesome-fe-resources
• Owner: zgabievi
• Created: 2020-01-25T17:33:40.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-01T18:58:26.000Z (almost 5 years ago)
• Last Synced: 2024-05-20T01:02:56.316Z (7 months ago)
• Topics: angular, awesome, courses, css, frameworks, frontend, javascript, optimization, react, svelte, testing, tools, vue, wysiwyg
• Homepage:
• Size: 141 KB
• Stars: 4
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• ultimate-awesome - awesome-fe-resources - Awesome resources, mostly frontend stuff. (Other Lists / Monkey C Lists)

README

        
# Awesome FE Resources

List of resources that are well documented, well tested, flexible for many projects and/or reusable. Here you will find frameworks, libraries, helpers, online resources and etc. Feel free to add anything you think it's worth being in this list.

Most of the libraries are for vanilla, but there are som beautiful framework specific libraries too. They will be badged like: **React**, **Vue.js**, **Svelte** or **Angular**. If there is no badge, it means that library is vanilla and can be used anywhere.

[](https://inertiajs.com)

[](https://tailwindcss.com)

[](https://miragejs.com)

[](https://jakearchibald.github.io/svgomg/)

[](https://www.dropzonejs.com)

[](https://pqina.nl/filepond/)

[](https://svelte.dev)

[](https://reactjs.org)

[](https://vuejs.org)

[](https://angular.io)

[](https://mithril.js.org)

[](https://tiptap.scrumpy.io)

[](https://quilljs.com)

[](https://vanillalist.top)

[](https://web.dev)

[](https://stateofjs.com)

[](https://stateofcss.com)

[](https://javascript30.com)

[](https://serviceworkies.com)

[](https://gridcritters.com)

[](https://flexboxzombies.com)

[](https://animejs.com)

[](https://mciastek.github.io/sal/)

[](https://mjml.io)

[](https://shopify.github.io/draggable/)

[](https://tornis.robbowen.digital)

[](https://glidejs.com)

[](https://www.cypress.io)

[](https://jestjs.io)

[](https://javascript.info)

[](https://uppy.io)

[](https://markjs.io)

[](https://pawelgrzybek.github.io/siema/)

[](https://www.chartjs.org)

[](https://flickity.metafizzy.co)

[](http://foliotek.github.io/Croppie/)

[](https://jaredpalmer.com/formik/)

[](https://sentry.io)

[](https://tiny-helpers.dev)

[](https://github.com/lydiahallie/javascript-questions)

[](https://www.pika.dev/blog/introducing-pika-pack/)

[](https://howlerjs.com)

[](https://videojs.com)

[](https://bundlephobia.com)

[](https://redd.gitbook.io/msw/)

[](https://sarahdayan.github.io/dinero.js/)

## Table of Contents

- [Favorites](#favorites)

- [CSS](#css)

  - [CSS Frameworks](#css-frameworks)

- [JavaScript](#javascript)

  - [JS Frameworks](#js-frameworks)

  - [JS Libraries](#js-libraries)

    - [JS File Uploaders](#js-file-uploaders)

    - [WYSIWYG](#wysiwyg)

    - [JS Motion](#js-motion)

    - [JS Forms](#js-forms)

    - [JS Layout](#js-layout)

    - [JS Carousels](#js-carousels)

    - [JS Misc](#js-misc)

  - [Testing](#js-testing)

- [Optimization](#optimization)

- [Tools](#tools)

- [ONLINE Resources](#online-resources)

### Favorites

- [Inertia.js](https://inertiajs.com) - Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

### CSS

#### CSS Frameworks

- [Tailwind CSS](https://tailwindcss.com) - Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

### JavaScript

#### JS Frameworks

- [React](https://reactjs.org) - 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.

- [Vue.js](https://vuejs.org) - Though developed in the year 2016, this JavaScript framework has already made its way into the market and has proven its worth by offering various features. Its dual integration mode is one of the most attractive features for the creation of high-end SPA or Single Page Application. It is a much reliable platform for developing cross-platform.

- [Angular](https://angular.io) - One of the most powerful, efficient, and open-source JavaScript frameworks is Angular. Google operates this framework and is implemented to use for developing a Single Page Application (SPA). It extends the HTML into the application and interprets the attributes to perform data binding.

- [Svelte](https://svelte.dev) - Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

- [Mithril.js](https://mithril.js.org) - Mithril is a modern client-side JavaScript framework for building Single Page Applications. It's small (< 10kb gzip), fast and provides routing and XHR utilities out of the box.

#### JS Libraries

##### JS File Uploaders

- [Dropzone.js](https://www.dropzonejs.com) - DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

- [FilePond](https://pqina.nl/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](https://uppy.io) - 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.

##### WYSIWYG

- [tiptap](https://tiptap.scrumpy.io) **Vue.js** - This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.

- [Quill](https://quilljs.com) - Your powerful rich text editor.

- [Editor.js](https://editorjs.io/) - Next generation block styled editor. Free. Use for pleasure.

##### JS Motion

- [anime.js](https://animejs.com) - 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.

- [Sal](https://mciastek.github.io/sal/) - Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies!

- [Draggable JS](https://shopify.github.io/draggable/) - Draggable is a modern drag and drop JavaScript library. Lightweight, modular and accessible.

##### JS Forms

- [Cleave.js](https://nosir.github.io/cleave.js/) - Format your  content when you are typing

- [Formik](https://jaredpalmer.com/formik) **React** - 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.

##### JS Layout

- [Muuri](https://haltu.github.io/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).

##### JS Carousels

- [Glide.js](https://glidejs.com) - A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

- [Siema](https://pawelgrzybek.github.io/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.

- [Flickity](https://flickity.metafizzy.co) - Touch, responsive, flickable carousels. 

##### JS Misc

- [localForage](https://localforage.github.io/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.

- [Overlay Scrollbars](https://kingsora.github.io/OverlayScrollbars/) - A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

- [spacetime](http://spacetime.how) - A lightweight javascript timezone library

- [Headroom.js](https://wicky.nillia.ms/headroom.js/) - Give your pages some headroom. Hide your header until you need it.

- [Spotlight.js](https://nextapps-de.github.io/spotlight/) - Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

- [Tornis](https://tornis.robbowen.digital) - 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](https://markjs.io) - 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.

- [Chart.js](https://www.chartjs.org) - Simple yet flexible JavaScript charting for designers & developers

- [Croppie](http://foliotek.github.io/Croppie/) - Croppie is a fast, easy to use image cropping plugin with tons of configuration options!

- [Rellax](https://dixonandmoe.com/rellax/) - Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library.

- [PhotoSwipe](https://photoswipe.com) - JavaScript image gallery for mobile and desktop.

- [Drift](https://imgix.github.io/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](https://howlerjs.com) - Audio library for the modern web. howler.js makes working with audio in JavaScript easy and reliable across all platforms.

- [Video.js](https://videojs.com) - Make your player yours with the world's most popular open source HTML5 player framework

- [BundlePhobia](https://bundlephobia.com) - find the cost of adding a npm package to your bundle

- [Dinero.js](https://sarahdayan.github.io/dinero.js/) - is a library for working with monetary values in JavaScript.

#### JS Testing

- [Mirage JS](https://miragejs.com) - 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.

- [Jest](https://jestjs.io/) - Delightful JavaScript Testing Framework by Facebook. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more.

- [Cypress](https://www.cypress.io/) - An open source, front-end E2E testing tool, built for the modern web.

- [MockServiceWorker](https://redd.gitbook.io/msw/) - is an API mocking library that operates by intercepting production requests.

### Optimization

- [SVGOMG](https://jakearchibald.github.io/svgomg/) - SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files. SVGOMG is SVGO's Missing GUI.

- [web.dev](https://web.dev) - Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.

### Tools

- [MJML](https://mjml.io) - MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.

- [Sentry](https://sentry.io) - 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](https://www.pika.dev/blog/introducing-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

- [javascript.info](https://javascript.info/) - The Modern JavaScript Tutorial. From the basics to advanced topics with simple, but detailed explanations.

- [Vanilla List](https://vanillalist.top) - The Vanilla JavaScript Repository. Coz' sometimes you feel guilty for using jQuery.

- [State of JS](https://stateofjs.com) - 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](https://stateofcss.com) - 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 30](https://javascript30.com) - Build 30 things with vanilla JS in 30 days with 30 tutorials

- [Service Workies](https://serviceworkies.com) - 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](https://gridcritters.com) - 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](https://flexboxzombies.com) - 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.

- [Tiny Helpers](https://tiny-helpers.dev/) - A collection of free single-purpose online tools for web developers.

- [JavaScript Questions](https://github.com/lydiahallie/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](https://github.com/trekhleb/javascript-algorithms) - 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](https://github.com/ryanmcdermott/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.