/awesome-frontend

Curated list of awesome frontend resources :star::sunglasses:

awesome

Awesome frontend Awesome

😎 Curated list of awesome all frontend related resources 😎

Learning resources

Architecture & Design Patterns

ES >2015

Design & CSS

Performance

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

Blogs

Events

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.

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.

CSS

  • CSS Module: 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

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

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.

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.

Image

  • AntiModerate: The progressive image loading library for great good!

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

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...)