Awesome Libraries and Resources

Awesome libraries, articles and resources for web development.

Online tools

Online image optimizer: http://optimizilla.com/
Compress and optimize your images: https://compressor.io/
Resume: https://latexresu.me/

Architecture

Simplifying your microservices architecture with Kafka and KafkaStreams: https://dev.to/danlebrero/simplifying-your-microservices-architecture-with-kafka-and-kafkastreams
Design patterns for microservices: https://azure.microsoft.com/en-us/blog/design-patterns-for-microservices/

JS and CSS

Simply beautiful open source icons: https://feather.netlify.com/
Simple tooltips made of pure CSS: https://kazzkiq.github.io/balloon.css/
A functional and reactive JavaScript framework for predictable code: https://cycle.js.org/
A collection of repeatable SVG background patterns for you to use on your web projects: http://www.heropatterns.com/
Simple grid system: http://simplegrid.io/
A JS library that makes it super easy to add fullscreen background videos: https://rishabhp.github.io/bideo.js/
JS animate engine: http://animejs.com/
WEBIX: https://webix.com/?utm_expid=131619688-7.pQhNhHWZRM6xw64tzUE6Zw.0&utm_referrer=http%3A%2F%2Fwebix.com%2Fwidgets%2F
Slider: https://vadimbogomazov.github.io/CrystalSlider/
Modal windows: http://madscript.com/boron/
Burger - Minimal, fullscreen nav: https://codepen.io/mblode/pen/qEGWwB
A fly-out circle menu built with CSS: https://github.com/callmenick/CSS-Circle-Menu
Simple, elegant content placeholder: https://chalarangelo.github.io/mocka/
t - s c r o l l: http://t-scroll.com
Gooey Menu: https://codepen.io/lbebber/pen/rawQKR
Simple & Modern RichText Editor: https://dphans.github.io/Editor/demo/
Sun editor: http://suneditor.com/sample/html/index.html
Lightweight, awesome, vanilla JS image cropper: https://jamesssooi.github.io/Croppr.js/
A tool for making JavaScript code run faster: https://prepack.io
I need JS lib .. : http://microjs.com/#
A pure CSS responsive navigation menu: https://github.com/micjamking/navigataur
Awesome Buttons: https://bttn.surge.sh/
Date formats: http://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript
A JavaScript library to make navigation menus activate the item based on currently in view section.: https://leocs.me/menuspy/
Opensource projects from Google: https://opensource.google.com/projects/list/featured
Pure CSS responsive timeline mockup: https://flouthoc.github.io/timenil/
100+ Free resources for learning Full Stack Web Development: https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer/blob/master/README.md
Statically typed programming language for the JVM, Android and the browser: http://kotlinlang.org/
Animate On Scroll Library: https://michalsnik.github.io/aos/
A tiny async loader / dependency manager for modern browsers: https://github.com/muicss/loadjs
CSS minifier with structural optimizations: https://github.com/css/csso
Cross-browser style inputs: https://codepen.io/jestho/pen/WbRjay
Menu: https://balzss.github.io/luxbar/
Cross-browser style inputs: http://stackoverflow.com/questions/19145504/style-a-checkbox-in-firefox-remove-check-and-border
a small strongly typed programming language that compiles to JavaScript: http://www.purescript.org/
Cross-browser style inputs: https://www.everythingfrontend.com/posts/cross-browser-css3-image-free-custom-checkbox.html
Datepicker: https://crsten.github.io/datepickk/
Building a Morphing Hamburger Menu with CSS: https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css
Mobile online emulator: http://www.mobilephoneemulator.com/
Fela is a fast and modular library to handle styling in JavaScript. It is dynamic by design and renders your styles depending on your application state.: https://github.com/rofrischmann/fela
Iphone resolution: http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/
Apple products resolution: http://iosres.com/
Lightweight and simple carousel with no dependencies: https://pawelgrzybek.com/siema/
Simple browser dialogs: https://alertifyjs.org/
A simple and beautiful wiki for teams: http://matterwiki.com/
UI components for Elasticsearch: http://searchkit.co/
A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices: http://re-view.emmet.io/
From pixel to rem: https://quayzar.com/wordpress/pixels-to-rem-calculator/
Material Design Lite: https://getmdl.io/index.html
The 100% correct way to do CSS breakpoints: https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.tmafddf9r
The JavaScript JSON based Survey Library: http://surveyjs.org/
Control responsive: http://ami.responsivedesign.is/?url=http://starterkit.meteor.com#
Control responsive and browser testing: https://browsersync.io/
Frontends sources: https://uptodate.frontendrescue.org/
Lightweight and simple carousel with no dependencies: https://pawelgrzybek.com/siema/
Custom scrollbars: http://grsmto.github.io/simplebar/
A touch slideout navigation menu for your mobile web apps: https://slideout.js.org
The fast and capable dropdown library: http://github.hubspot.com/drop/docs/welcome/
Simple lightbox script without dependencies (not even jQuery): https://github.com/DxF5H/lightbox
Color generator: https://coolors.co/
Generate hashes from javascript objects in node and the browser: https://github.com/puleos/object-hash
Datetime picker: https://chmln.github.io/flatpickr/
Datetime picker: http://www.dematte.at/tinyDatePicker/
Range: https://rangetouch.com/
CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work.: http://livereload.com/
Modern CSS to all browsers: http://stylecow.github.io/
EXPRESSIVE, DYNAMIC, ROBUST CSS: http://stylus-lang.com/
Presentation Attributes vs Inline Styles: https://css-tricks.com/presentation-attributes-vs-inline-styles/
A lightweight (~2kb) and dependency-free javascript plugin for particle backgrounds: https://marcbruederlin.github.io/particles.js/
A tiny polyfill for HTML5 multi-handle sliders: http://leaverou.github.io/multirange/
Lightweight validation using form element attributes: http://skyefradd.me/attrvalidate
CSS styling of select element without JS, and using inline SVG: https://github.com/carloscabo/pure-css-select-style
A simple, accessible HTML5 media player: https://plyr.io/
Styleable select elements: http://github.hubspot.com/select/docs/welcome/
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects: http://underscorejs.org
Spectacular Test Runner for JavaScript: http://karma-runner.github.io/1.0/index.html
Animations: http://dynamicsjs.com
Presentaion micro framework: http://markdalgleish.com/projects/bespoke.js/
A JavaScript library for Google Analytics: http://boba.space150.com
The JavaScript SVG library for the modern web: http://snapsvg.io
parallax scrolling for the masses: http://prinzhorn.github.io/skrollr/
vivus, bringing your SVGs to life: http://maxwellito.github.io/vivus/
Waypoints is the easiest way to trigger a function when you scroll to an element: http://imakewebthings.com/waypoints/
A general-purpose, web standards-based platform for parsing and rendering PDFs: http://mozilla.github.io/pdf.js/
Create Beautiful Fullscreen Scrolling Websites: http://alvarotrigo.com/fullPage/#firstPage
Offline.js Every app goes offline: http://github.hubspot.com/offline/docs/welcome/
Inputs: http://leaverou.github.io/stretchy/
Simple and elegant component-based UI library: http://riotjs.com
Single Element CSS Spinners: https://projects.lukehaas.me/css-loaders/
A grid framework based on the flex display property: http://timothylong.com/kindling/
A modular, front end framework to easily and quickly help you jumpstart your process in building complex interfaces for the web right out the box: http://danmalarkey.github.io/schema/index.html
mobile friendly css framework: http://chuckcss.io/
Slide Nav Example: https://qmixi.github.io/slide-nav/
Build a Style Guide Straight from Sass: https://css-tricks.com/build-style-guide-straight-sass/
Reducing CSS bundle size 70% by cutting the class names and using scope isolation: https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Pants: A fast, scalable build system: https://www.pantsbuild.org/
Browserify lets you require('modules') in the browser by bundling up all of your dependencies.: http://browserify.org/
A build tool for modern web development: http://mimosa.io/
The static web server with built-in preprocessing.: http://harpjs.com/
High-performance webpack config for front-end delivery: https://www.codementor.io/drewpowers/high-performance-webpack-config-for-front-end-delivery-90sqic1qa?utm_content=buffer61b28&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
A Webpack built, Elastic Beanstalk deployment leveraging AWS S3: https://medium.com/statuscode/a-webpack-built-elastic-beanstalk-deployment-leveraging-aws-s3-as-a-cdn-54d62b851263
sonar a linting tool for the web: https://sonarwhal.com/

GraphQL

Create GraphQL schema from typescript class: https://github.com/prismake/typegql
Coursera’s journey to GraphQL: https://dev-blog.apollodata.com/courseras-journey-to-graphql-a5ad3b77f39a
Moving existing API from REST to GraphQL: https://medium.com/@raxwunter/moving-existing-api-from-rest-to-graphql-205bab22c184
How to Wrap a REST API in GraphQL: https://nordicapis.com/how-to-wrap-a-rest-api-in-graphql/
From REST to GraphQL: https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b
Building a GraphQL API in Rails — Part 2: Start Coding: https://medium.com/@DrawandCode/building-a-graphql-api-in-rails-part-start-coding-8b1de6d75041

Webpack, build process, etc

Webpack plugins, etc.: https://www.npmjs.com/package/webpack
Error with webpack 2 and mapbox: mapbox/mapbox-gl-js#4348
Error with webpack 2 and mapbox: mapbox/mapbox-gl-js#4359
Using Google’s closure library with webpack: https://medium.com/@allycw/using-googles-closure-library-with-webpack-b944e2a4be3a

Typescript

Quick start: https://www.typescriptlang.org/docs/tutorial.html
TypeScript Tutorial: https://www.tutorialspoint.com/typescript/index.htm
Getting Started with TypeScript: http://blog.teamtreehouse.com/getting-started-typescript
Getting Started with TypeScript: https://code.tutsplus.com/tutorials/getting-started-with-typescript--net-28890
TypeScript Tutorial: https://www.youtube.com/watch?v=-PR_XqW9JJU
The repository for high quality TypeScript type definitions: http://definitelytyped.org/directory/learn.html
Learn TypeScript in 30 Minutes: http://tutorialzine.com/2016/07/learn-typescript-in-30-minutes/
TypeScript Crash Course: https://www.youtube.com/watch?v=rAy_3SIqT-E
(CZ) MS Fest 2013 Praha: Typescript - konečně vás přestane JavaScript štvát (Tomáš Herceg): https://www.youtube.com/watch?v=fZsdEiTgv6o
Writing a Node.js module in TypeScript: https://dev.to/dkundel/writing-a-nodejs-module-in-typescript
Building a Node.js App with TypeScript Tutorial: https://medium.com/the-node-js-collection/building-a-node-js-app-with-typescript-tutorial-edbb3a874590

Angular

Use React tools for better Angular apps: https://medium.com/@martin_hotell/use-react-tools-for-better-angular-apps-b0f14f3f8114
Handling data from server error: http://stackoverflow.com/questions/37230545/angular2-oninit-values-returned-from-service-subscribe-function-does-not-ge
Building an Angular Application for Production: http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
Connecting Angular 2 to a Phoenix API: https://medium.com/@Oxyrus/connecting-angular-2-to-a-phoenix-api-75ede7f58bdf
Supercharge your Angular2 event handling: https://github.com/kryops/ng2-events#readme
Web analytics for AngularJS applications: http://angulartics.github.io/
Lightweight drag to scroll directive for Angular2: https://github.com/bfwg/angular2-drag-scroll
Cool angular2 wrapper for LocalStorage and SessionStorage: https://github.com/Hacklone/angular2-cool-storage#readme
How does Angular teach you to be a better a Software Engineer: https://blog.ngconsultant.io/learn-angular-software-enginner-patterns-architecture-4836ef304b40
Angular 2 slide show: https://github.com/marek1/angular-2-slide-show
Responsive carousel: https://embed.plnkr.co/VKLszgqJtobyVruBj3Op/
Carousel: https://embed.plnkr.co/ScE0uqfd0ZvL6T9j1XjL/
Page Slider: https://www.npmjs.com/package/ng2-page-slider
Angular 2 module that implements Loaders.css spinners: https://github.com/moff/angular2-loaders-css
How to implement stateless authentication: http://youknowriad.github.io/angular2-cookbooks/stateless-authentication.html
Persisting user authentication with BehaviorSubject in Angular: https://netbasal.com/angular-2-persist-your-login-status-with-behaviorsubject-45da9ec43243
Authentication to an Angular 2: https://github.com/auth0-blog/angular2-authentication-sample
Simple authentication: http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/
PROTECTING ROUTES USING GUARDS IN ANGULAR: https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html
Angular 2+ and Ruby on Rails user authentication: https://medium.com/@avatsaev/angular-2-and-ruby-on-rails-user-authentication-fde230ddaed8#.nf9zw23p6
Hash routing: angular/angular#6595
Setup Angular and Dotnet: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/
Child routing: http://onehungrymind.com/named-router-outlets-in-angular-2/
Deploy: https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352#.b71z1zjr8
Animations: https://blog.thoughtram.io/angular/2016/09/16/angular-2-animation-important-concepts.html
Animations: https://www.npmjs.com/package/ng2-page-transition
Animations: https://angular.io/docs/ts/latest/guide/animations.html
Animations: https://github.com/bbottema/ng2-simple-page-scroll
Animations: https://npmdaily.com/pkg/ng2-scrollimate
Angular cli commands: https://www.sitepoint.com/ultimate-angular-cli-reference/
Routing: https://scotch.io/tutorials/routing-angular-2-single-page-apps-with-the-component-router
Resources: https://github.com/AngularClass/awesome-angular2
Ecosystem: http://slides.com/magyarsrac/universal-angular-intro-1-1#/
Angular CLI complete guide: https://www.sitepoint.com/ultimate-angular-cli-reference/
Getting Started with Angular 2 using TypeScript: https://www.sitepoint.com/getting-started-with-angular-2-using-typescript/
Create angular 2 page: https://houssein.me/angular2-hacker-news
Introduction to the Angular 2 CLI - Tutorial for Beginners: https://www.youtube.com/watch?v=wppBd-52LT0
Simple Angular 2 App With Angular CLI: https://www.youtube.com/watch?v=QMQbAoTLJX8
Angular 2 CLI (Command Line Interface) — Introduction: https://medium.com/codingthesmartway-com-blog/angular-2-cli-command-line-interface-introduction-841e3e8092bf#.itup92wc4
How to Create Angular 2 Application using Angular 2 CLI: http://tektutorialshub.com/create-first-angular-2-application/
Angular 2 Tutorial: Create a CRUD App with Angular CLI: https://www.sitepoint.com/angular-2-tutorial/
Use the Angular CLI For Faster Angular 2 Projects: https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects
Popup: http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview
ngif and click: http://jilles.me/ng-click-and-ng-if-in-angular2/
ngif: http://lishman.io/angular-2-built-in-directives
UI library: http://www.primefaces.org/primeng/#/
Angular and SASS: http://www.angulartypescript.com/angular-2-sass/
Angular 2 UI Framework: http://www.angulartypescript.com/angular-2-ui-framework/
Angular 2 Starter Kit: http://angular2starterkit.com/
Angular Material: https://material.angular.io/
LEARN BY EXAMPLE - ANGULARJS, NODEJS, AND TYPESCRIPT: http://www.software-architects.com/devblog/2014/06/04/Learn-by-Example-AngularJS-NodeJS-and-Typescript
Changing route doesn't scroll to top in the new page: angular/angular#7791
The internationalization (i18n) library for Angular 2+: https://github.com/ngx-translate/core
A loader for ngx-translate that loads translations with http calls: https://github.com/ngx-translate/http-loader
Translate app example: https://plnkr.co/edit/JEXgj8WcISYGtDg75VoR?p=preview
Angular architecture patterns: https://medium.com/netmedia/angular-architecture-patterns-detailed-project-architecture-27bda0334f16
Angular Model Pattern: https://medium.com/@tomastrajan/model-pattern-for-angular-state-management-6cb4f0bfed87
The Guide to Building Quality Angular 2+ Components: https://blog.wishtack.com/2017/05/05/the-guide-to-building-quality-angular-2-components/
NgUpgrade with Closure Compiler: http://www.syntaxsuccess.com/viewarticle/ngupgrade-with-closure-compiler
Exploring The New Meta Service in Angular Version 4: https://netbasal.com/exploring-the-new-meta-service-in-angular-version-4-b5ba2403d3e6
Angular + Jest + Wallabyjs why it is the ideal combination! And how to configure: https://blog.cloudboost.io/angular-jest-wallabyjs-why-it-is-the-ideal-combination-and-how-to-configure-b4cbe2eff4b3
Testing Angular 2 and Continuous Integration with Jest: https://semaphoreci.com/community/tutorials/testing-angular-2-and-continuous-integration-with-jest
Unit testing Angular applications with Jest: https://izifortune.com/unit-testing-angular-applications-with-jest/
How to make your Angular 4 app SEO friendly: https://blog.pusher.com/make-angular-4-app-seo-friendly/
Server-Side Rendering In Angular With Angular Universal: https://www.dunebook.com/server-side-rendering-angular-universal/

Ruby and Ruby on Rails

Error with capybara gem: https://github.com/thoughtbot/capybara-webkit/wiki/Installing-Qt-and-compiling-capybara-webkit#os-x-mavericks-109-and-mountain-lion-108
Ember.js and Rails API: https://emberigniter.com/modern-bridge-ember-and-rails-5-with-json-api/
React and Rails Starter Kit: https://github.com/spark-solutions/spark-starter-kit
React and Rails Tutorials: https://hackhands.com/react-rails-tutorial/
Building a JSON API with Rails 5: https://blog.codeship.com/building-a-json-api-with-rails-5/
Build a Restful JSON API with Rails 5: https://scotch.io/tutorials/build-a-restful-json-api-with-rails-5-part-one
Building a RESTful API in a Rails Application: https://www.airpair.com/ruby-on-rails/posts/building-a-restful-api-in-a-rails-application#4-a-basic-rest-api-in-rails
Find by SQL: http://guides.rubyonrails.org/active_record_querying.html#finding-by-sql
Setup ActionMailer: https://sendgrid.com/docs/Integrate/Frameworks/rubyonrails.html
How to send automated email in Ruby on Rails (with Mailgun): https://www.leemunroe.com/send-automated-email-ruby-rails-mailgun/
Sending Emails in Rails Applications: https://launchschool.com/blog/handling-emails-in-rails

Elixir and Phoenix

Elixir lang: http://elixir-lang.org/
Phoenix framework: http://www.phoenixframework.org/
Build and test a blazing fast JSON API with Phoenix, an Elixir framework: https://robots.thoughtbot.com/testing-a-phoenix-elixir-json-api
Elixir and Phoenix: The Future of Web APIs and Apps?: http://blog.carbonfive.com/2016/04/19/elixir-and-phoenix-the-future-of-web-apis-and-apps/
Elixir School: https://elixirschool.com
PHOENIX 1.3 AND GRAPHQL WITH ABSINTHE: https://seanclayton.me/post/phoenix-1-3-and-graphql-with-absinthe/?utm_content=bufferbf422&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
Introducing ReactPhoenix - Render React.js components in Phoenix views: http://geoffreylessel.com/2017/introducing-react-phoenix/?utm_content=buffer8a8e0&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
Serving a Bare Bones Angular 2 App from Phoenix: https://medium.com/@zkayser/serving-a-bare-bones-angular-2-app-from-phoenix-d3f9d8ad52e5
Using Bootstrap and Sass with Phoenix Framework and Brunch: https://medium.com/@b1ackmartian/using-bootstrap-and-sass-with-phoenix-framework-and-brunch-6568e7a66ca9
Getting Started with RethinkDB and the Phoenix Framework — Introduction: https://medium.com/@ryanswapp/getting-started-with-rethinkdb-and-the-phoenix-framework-f55d767b9b07
Building a REST API with Phoenix and Elixir: https://becoming-functional.com/building-a-rest-api-with-phoenix-and-elixir-b12dcec302c5
JWT Auth with an Elixir on Phoenix 1.3 API and React Native: https://medium.com/@njwest/jwt-auth-with-an-elixir-on-phoenix-1-3-guardian-api-and-react-native-mobile-app-1bd00559ea51

Crystal

Crystal Lang: https://crystal-lang.org
A collection of awesome Crystal libraries, tools, frameworks and software: https://github.com/veelenga/awesome-crystal
A web framework for Crystal: https://razecr.com
Lightning fast, super simple web framework written in Crystal: http://kemalcr.com
Amber is a web application framework written in Crystal inspired by Kemal, Rails, Phoenix and other popular application frameworks: http://www.amberframework.org