Awesome frontend

😎 Curated list of awesome all frontend related resources 😎

Learning resources

• Useful Docs and Guides for Frontend devs
• Frontend directory: Find top quality content in the frontend web development field.

Architecture & Design Patterns

• (Video) Scalable Application Architecture, by Minko Gechev
• (Post) Scalable Application Architecture

ES >2015

• ES2015 practical examples on CodePen
• API fetch

Design & CSS

• Flexbox.io
• Flexbox Zombies: Funny alternative way to learn flexbox
• HTML Reference: Features all elements and attributes of HTML
• CSS Reference: Features all elements and attributes of CSS

Performance

• Understanding the Critical Rendering Path

Progressive Web Apps (PWA)

• Treebo, a React and Prect PWA performance case study

Tools

SVG

• SVGO: Nodejs-based tool for optimizing SVG vector graphics files.
• SVG OMG: UI for SVGO
• GruntIcon: Makes it easy to use SVGs for icons, logos, illustrations and background images.
• GrumpIcon: UI for GruntIcon
• Gulp SVGmin: Minify SVG files with gulp.
• SVG Editor: Online SVG optimization tool.

Coding Playgrounds

• CodePen: No presentation needed. ˝Demo or it didn't happen˝.
• JSFiddle: Test your JavaScript, CSS, HTML or CoffeeScript online with these code editor.
• JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...
• Thimble by mozilla: Thimble is an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript.
• Dabblet: An interactive CSS playground and code sharing tool. Dabblet saves to Github gists and offers many conveniences for CSS editing. By the amazing Lea Verou.
• SassMeister: A playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
• PlayCode: Test your JavaScript, CSS, HTML, CoffeeScript or TypeScript online with PlayCode code editor.
• Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers.
• CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers.
• Plunker: An online community for creating, collaborating on and sharing your web development ideas.
• Gomix: Gomix is the easiest way to build the app or bot of your dreams. Editor, instant hosting and deployment.

Challenges

• 30 days js challenge, by @Wesbos

Blogs

• ②ality: JavaScript and more. By Dr. Axel Rauschmayer.
• bitsofcode: Weekly articles on front-end development. By Ire Aderinokun.
• Pony Foo: JavaScript consulting, modularity, front-end architecture, performance. By Nicolás Bevacqua.
• the new code: Web related posts. Just amazing. By Dudley Storey

Events

• Frontend Conferences: List of upcoming frontend related conferences

Frameworks/Libraries

React

• Redux: Predictable state container for JavaScript apps.
• Relay: A Javascript framework for building data-drive react applications.
• Alt: a library that facilitates the managing of state within your JavaScript applications.
• React Axiom: a library to manage models in React.
• React Router: is a complete routing library for React.
• React Router Redux: Ruthlessly simple bindings to keep react-router and redux in sync.
• NuclearJS: Reactive Flux built with ImmutableJS data structures.
• Reselect: Simple “selector” library for Redux.
• React Intl: Internationalize React apps.
• Redux Saga: a library that aims to make side effects in React/Redux applications easier and better.
• Kea: High level abstraction between React and Redux
• Mobx: Simple, scalable state management.
• React Anime: A super easy animation library for React!
• React Mosaic: a full-featured React Tiling Window Manager.
• Blueprint: A React-based UI toolkit for the web.
• React Docgen: a CLI and toolbox to help extracting information from React components, and generate documentation from it.

Javascript

• Flow: a static tipe checker for Javascript.
• Ramda: A practical functional library for JavaScript programmers.
• Lodash: A modern JavaScript utility library delivering modularity, performance & extras.
• Immutable.js: Immutable collections for JavaScript.
• msngr.js: An asynchronous messaging library, written in JavaScript, for node and the web browser.
• yo-yo.js: A tiny library for building modular UI components.
• Blissful.js: is just a collection of helpers and light syntactic sugar over Vanilla JS.
• Page.js: Tiny ~1200 byte Express-inspired client-side router.
• Mnemonist: Curated collection of data structures for the JavaScript language.
• lunr.js: Simple full-text search in your browser
• Preact: Fast 3kB alternative to React, with the same ES2015 API.
• Inferno: An extremely fast, React-like JavaScript library for building modern user interfaces.
• PouchDB: is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

CSS in JS

• Styled-Components: Use ES6 and CSS to styled your components.

CSS

• CSS Modules: is a CSS file in which all class names and animation names are scoped locally by default.
• SASS: is the most mature, stable, and powerful professional grade CSS extension language in the world.
• LESS: is a CSS pre-processor, meaning that it extends the CSS language.
• Compass: is an open-source CSS Authoring Framework.
• Pure.css: A set of small, responsive CSS modules that you can use in every web project.
• PostCSS: A tool for transforming CSS with JavaScript.
• LostGrid: is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
• RxCSS: very small library for manipulating CSS Custom Properties.
• Emotion: The Next Generation of CSS-in-JS
• Styled Components: Visual primitives for the component age.

Web Components

• Polymer: is a JavaScript library for building web applications using web components.
• Skate.js: is a library built on top of the W3C web component specs.

Frameworks and Other languages

• Scala.js: A safer way to build robust front-end web applications.
• Elm: A delightful language for reliable webapps.
• TypeScript: is a typed superset of JavaScript that compiles to plain JavaScript.
• Aurelia.js: is a JavaScript client framework for mobile, desktop and web
• Svelte: The magical disappearing UI framework
• Moon: A minimal, blazing fast user interface library.

Test

• Mocha: is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
• Sinon.js: Standalone test spies, stubs and mocks for JavaScript.
• Enzyme: is a JavaScript Testing utility for React
• Jest: Painless JavaScript Testing

Tools

• Webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
• Babel: is a JavaScript compiler.
• Gulp: a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
• Browserify: Javascript bundler.
• Grunt: The JavaScript Task Runner
• npm: is the package manager for JavaScript
• Yarn: fast, reliable, and secure dependency management.
• Bower: A package manager for the web.
• codemod: is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occassional intervention.
• Format.js: Internationalize your web apps on the client & server.
• Storybook: a development environment for UI components.
• Remixer for JavaScript: is a framework to iterate quickly on UI changes.
• Critical: A minimal, blazing fast user interface library.
• Pingy CLI: A simple frontend build tool.

Animations

• Choregrapher.js: a simple library to take care of complex CSS animations.
• Rebound.js: is a simple library that models Spring dynamics for the purpose of driving physical animations.
• tween.js: JavaScript tweening engine for easy animations.
• Velocity.js: Accelerated JavaScript animation.
• Matter.js: 2D physics engine for the web.
• anime.js: is a lightweight JavaScript animation library.

Image

• AntiModerate: The progressive image loading library for great good!
• Image Trace Loader: Loads images and exports traced outlines as image/svg+xml URL-encoded data.

Audio

• Tone.js: is a framework for creating interactive music in the browser

Graphics

• Three.js: A JavaScript 3D Library which makes WebGL simpler.
• PixiJS: A 2D JavaScript Renderer.
• D3.js: is a JavaScript library for manipulating documents based on data.
• Mo.js: Motion Graphics For The Web
• pt: An experimental library on point, form, and space.
• Noise.js: is a simple library for 2d & 3d perlin noise and simplex noise in javascript
• Aquarelle: An open source library for Intro Watercolor Effect
• GraphicsJS: A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.
• whs.js: Super-fast 3D framework for Web Applications 🥇 & Games 🎮.
• Luma.gl: High-performance WebGL2 components for GPU-powered data visualization and computation.
• Deck.gl: a WebGL-powered framework for visual exploratory data analysis of large datasets.

Contributors

• Open PR with your links
• Try to keep them organized and categorized
• Use h2 for categories (ex: frameworks) and h3 for subcategories (ex: react, angular...)