Front End Documentation 2020 π
π₯ π₯ A curated list of awesome useful resources for Front-Endπ₯
For me this is the best WebSite to stay up to date => https://uptodate.frontendrescue.org/
Index
- Angular in general & Angular 5+
- Accessibility - A11Y
- Artificial Intelligence / AGI
- Awesome and mad projects on JavaScript
π± - Automation and Task
- BackBoneJS
- Books
- Bundlers (Webpack)
- Challenges online for JavaScript
- CSS3 & SCSS
- Databases
- Data Visualization D3
- EmberJS
- Freelance Websites
- Functional Programming in JavaScript
- Git
- HTML
- JavaScript
- JavaScript Testing
- Jekyll Templates
- NodeJS
- Monitoring apps and logging messages
- Progressive Web Apps / PWA
- ReactJS & React Native
- RxJs Reactive Programming with Javascript and Redux
- Service Workers
- Security
- Sketching / Wireframing / Mockup template / Images
- Transpiling JavaScript
- UX & UI
- WebTools for Front-End
- Web VR / Virtual Reality
Accessibility - A11Y
| Description | URL |
|---|---|
| ChromeVox Extension | http://www.chromevox.com/ |
| Web Content Accessibility Guidelines 2.0 | https://www.w3.org/TR/WCAG20/ |
| Web Accessibility in mind | http://webaim.org/standards/wcag/checklist |
| Great tool which tell you how accessible is your webpage | http://wave.webaim.org/ |
| WAI - ARIA Patterns | https://www.w3.org/TR/wai-aria-practices/ |
| Plugin for Developer tools in Audits | https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb |
| ARIA roles | https://www.w3.org/TR/wai-aria/roles#abstract_roles |
| Accessibility article | http://adrianroselli.com/2016/03/be-wary-of-accessibility-guarantees-from-vendors.html |
Angular in general & Angular 5+
Animation on HTML + CSS + SVG
| Description | URL |
|---|---|
| Animation with SVG | https://css-tricks.com/guide-svg-animations-smil/ |
| Free 404 illustrations | https://www.kapwing.com/404-illustrations |
| Animations and great styles | https://cssfx.dev/ |
Artificial Intelligence / AGI
| Description | URL |
|---|---|
| Open AI project | https://openai.com/ |
| Open AI Systems | https://openai.com/systems/ |
| An open-source software library for Machine Intelligence | https://www.tensorflow.org/ |
| Tensor Flow in Action :D | https://medium.freecodecamp.com/big-picture-machine-learning-classifying-text-with-neural-networks-and-tensorflow-d94036ac2274 |
| Artificial Intelligence Experiments with Google | https://aiexperiments.withgoogle.com/ |
Awesome and mad projects on JavaScript / CSS π±
| Description | URL |
|---|---|
| Torrents on the Web | https://webtorrent.io/ |
| HyperJS plugins | https://github.com/bnb/awesome-hyper |
| Micro Front Ends | https://micro-frontends.org/ |
| Picture with CSS and multiple layers | http://diana-adrianne.com/purecss-francine/ |
| Mario Kart only with CSS | https://codeburst.io/mario-kart-css-7572bd2ce608 |
Automation and Task
| Description | URL |
|---|---|
| Great article which explains differences between Grunt and Gulp | http://blog.koalite.com/2015/06/grunt-o-gulp-que-uso/ |
| Great generaetor for Gulp files | http://quenchjs.com/ |
| Awesome article for Gulp | https://css-tricks.com/gulp-for-beginners/#article-header-id-11 |
| Good examples for style task with gulp | http://www.sitepoint.com/simple-gulpy-workflow-sass/ |
| Package for Google PageSpeed in Grunt | https://www.npmjs.com/package/grunt-pagespeed |
| 15 Tips for Gulp performance | http://stefanimhoff.de/2014/gulp-tutorial-15-performance-improvements-webp-gzip/ |
| Webpack 2 Getting started | https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783 |
BackBoneJS
| Description | URL |
|---|---|
| BackBoneJs Applications Books | https://addyosmani.com/backbone-fundamentals/#what-is-mvc |
| BackBoneJs Patterns | http://ricostacruz.com/backbone-patterns/bootstrapping-data.html |
| BackBoneJS Single Page ToDo Tutorial | http://code.tutsplus.com/tutorials/single-page-todo-application-with-backbonejs--cms-21417 |
| Snipets and examples with BackBoneJS | https://miguelmota.com/blog/getting-started-with-backbonejs/ |
| BackBoneJS BoilerPlate | https://github.com/tbranyen/backbone-boilerplate.git |
Books
| Description | URL |
|---|---|
| Bookzz | http://es.bookzz.org/ |
| Safari Books | https://www.safaribooksonline.com/ |
| Resilient Web Design | https://resilientwebdesign.com/ |
Bundlers (Webpack)
| Description | URL |
|---|---|
| Webpack and Gulp example | http://stackoverflow.com/questions/33558396/gulp-webpack-or-just-webpack |
| Next-generation ES6 module bundler | https://rollupjs.org/ |
| RollupJS vs WebpackJS | https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c |
| Using Bundler Analyzer | https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a |
| Angular bundler analyzer | https://alligator.io/angular/bundle-size/ |
CSS3 & SCSS
Challenges online for JavaScript
| Description | URL |
|---|---|
| Code fast and code well with JavaScript | http://www.codewars.com/ |
| Try to solve many problems using JavaScript | https://coderbyte.com/ |
| Solve challenges online using JavaScript | https://www.codingame.com/start |
| CodeFights with JavaScript become in a Hero | https://codefights.com/ |
| Formulas for combinatory | http://www.vitutor.com/pro/1/a_f.html |
| HackerRank one of the best pages for challenges | https://www.hackerrank.com |
| Exercism | http://exercism.io/ |
| JavaScript Algorithms | https://mgechev.github.io/javascript-algorithms/ |
| Leet Code | https://leetcode.com/ |
| JavaScript Problem and solutions | https://github.com/jeantimex/javascript-problems-and-solutions |
Crowdfunding sites to achieve the ideas and creative projects.
| Description | URL |
|---|---|
| gofundme | https://www.gofundme.com/ |
| kickstarter | https://www.kickstarter.com/ |
| List of invesment in Startups | https://www.crunchbase.com/#/home/index |
Databases
| Description | URL |
|---|---|
| Mongo GUI Tools | https://scalegrid.io/blog/which-is-the-best-mongodb-gui/ |
Data Visualization / D3
| Description | URL |
|---|---|
| Introduction to D3 in Map | http://maptimeboston.github.io/d3-maptime/#/ |
| D3 official documentation | https://github.com/d3/d3/wiki |
| D3 Fundamentals on Udacity | https://www.udacity.com/course/data-visualization-and-d3js--ud507 |
EmberJS
| Description | URL |
|---|---|
| Official Project | http://emberjs.com/ |
| Comparision Angular 2 vs Ember vs React | https://smashingboxes.com/blog/choosing-a-front-end-framework-angular-ember-react/ |
Freelance Webs or Jobs Search Pages for Tech
| Description | URL |
|---|---|
| TopTal | https://www.toptal.com/ |
| UpWork | https://www.upwork.com |
| Crossover | https://www.crossover.com/#we-build-worldclass-teams |
| Dice | http://www.dice.com/ |
| CodementorX | https://www.codementor.io/freelancer/apply |
Functional Programming in JavaScript
| Description | URL |
|---|---|
| A delightful language for reliable webapps. | http://elm-lang.org/ |
| Guide for ELM Lang | https://guide.elm-lang.org/interop/javascript.html |
| ClojureScript is a compiler for Clojure that targets JavaScript | https://clojurescript.org/ |
| Monads in JavaScript | https://cwmyers.github.io/monet.js/ |
| Ramda JS a JavaScript library for functional programming | http://ramdajs.com/ |
Git
| Description | URL |
|---|---|
| Excelent guide for commons commands using Git | https://githowto.com/ |
| Editor HTML to Markdown for README.MD files | https://domchristie.github.io/to-markdown/ |
| Editor Markdown to HTML for README.MD files | http://dillinger.io/ |
| Great documentation to understand Git Flow | https://leanpub.com/git-flow/read |
HTML5
| Description | URL |
|---|---|
| Things that should know about HTML5 | http://diveintohtml5.info/index.html |
| Great article and examples for Responsive Images | http://cloudinary.com/blog/automatically_art_directed_responsive_images |
| Cool Framework for Responsives Emails | https://mjml.io/ |
| MultiTouch on mobiles Great article with examples | http://www.html5rocks.com/es/mobile/touch/ |
| Free videos cover for your background web pages or header | http://www.coverr.co/ |
| Themes using Bootstrap | https://bootswatch.com/ |
| HTML 5 Cheat sheet | https://websitesetup.org/html5-cheat-sheet/ |
JavaScript / TypeScript
JavaScript Testing
| Description | URL |
|---|---|
| JavaScript Testing for React. | http://airbnb.io/enzyme/ |
| JavaScript Testing library for ReactJS | https://facebook.github.io/jest/ |
| Futuristic JavaScript test runner | https://github.com/avajs/ava |
| Ava configuration | https://hackernoon.com/ava-low-config-testing-for-javascript-71bd2d958745#.99ro16qxe |
| Serenity JS | http://serenity-js.org/ |
Static websites generators
| Description | URL |
|---|---|
| Ramarulandac portfolio based on Indigo Jekyll Template | https://github.com/ramarulandac/ramarulandac.github.io |
| Jekyll | https://jekyllrb.com/ |
| Hugo | http://gohugo.io/ |
NodeJS
| Description | URL |
|---|---|
| Tips for NodeJS | https://hackernoon.com/19-things-i-learnt-reading-the-nodejs-docs-8a2dcc7f307f#.h394dcdc5 |
| NVM repo and documentation | https://github.com/creationix/nvm#install-script |
| Install NVM | http://dev.topheman.com/install-nvm-with-homebrew-to-use-multiple-versions-of-node-and-iojs-easily/ |
| Runkit is a live Node notebook | https://runkit.com/home |
| Advanced, production process manager for Node.js | http://pm2.keymetrics.io/ |
| A progressive Node.js Framework for scalable applications | https://nestjs.com/ |
Monitoring apps and logging messages
| Description | URL |
|---|---|
| Great tool to log the error messages in the app | https://sentry.io/ |
| Great tool for Monitoring for performance apps | https://gtmetrix.com/ |
| Audits Performance apps | https://developers.google.com/web/tools/lighthouse/?hl=es |
| Y Slow Rules | http://yslow.es/ |
Other Interesting Articles or Pages
Performance
| Description | URL |
|---|---|
| Article to improve the performance | https://medium.com/grano/optimizing-angular-application-load-performance-6bb796b1a7c1 |
| Guide to improve the performance with images | https://images.guide/ |
| Nice talk about performance in the Google I/O 2018 | https://www.youtube.com/watch?v=Mv-l3-tJgGk |
| Gzip compresion in apache | https://kinsta.com/es/base-de-conocimiento/habilitar-compresion-gzip/ |
| Tool to check the Web Compression | https://checkgzipcompression.com/ |
| Tool to check the Rich Information | https://richpreview.com/ |
Progressive Web Apps / PWA
Public APIs
| Description | URL |
|---|---|
| Get information about countries, currencies, capitals, etc | https://restcountries.eu/ |
| Get information about highligh places in Foursquare | https://developer.foursquare.com/ , https://vimeo.com/87793635 |
| Get information and ratings about places | https://developers.google.com/places/documentation/ |
| Get PlaceHolders and Mocked Data | https://jsonplaceholder.typicode.com/ |
| Crunchbase API | https://data.crunchbase.com/ |
| One of the biggest collection for Public Apis | https://github.com/toddmotto/public-apis |
RxJs Reactive Programming with Javascript and Redux
| Description | URL |
|---|---|
| Difference between Subject and Observable | https://javascript.tutorialhorizon.com/2017/03/23/rxjs-subject-vs-observable/ |
| Understanding RXJX | https://academind.com/learn/javascript/understanding-rxjs/ |
| Angular ngrx store repo | https://github.com/ngrx/platform |
| ngrx course + effects | https://ultimateangular.com/ngrx-store-effects |
| A great article to understand the selectors in redux | https://toddmotto.com/ngrx-store-understanding-state-selectors |
ReactJS & React Native
Regular Expressions
Service Workers
| Description | URL |
|---|---|
| Service Workers by Google | https://developers.google.com/web/fundamentals/getting-started/primers/service-workers |
| Service Workers by MDN | https://developer.mozilla.org/en/docs/Web/API/Service_Worker_API |
| Service Workers explanation | https://github.com/w3c/ServiceWorker/blob/master/explainer.md |
| Service Workers explanation by Jake (Developer at Google) | https://jakearchibald.com/2014/using-serviceworker-today/ |
| Oficial documentation for Service Workers | https://w3c.github.io/ServiceWorker/ |
| Great documentation from Mozilla | https://serviceworke.rs/ |
| Service Worker Pre Cache Google | https://github.com/GoogleChrome/sw-precache |
| Service Worker Pre Cache webpack | https://www.npmjs.com/package/sw-precache-webpack-plugin |
| Service Worker Polymer | https://elements.polymer-project.org/elements/platinum-sw |
Security
| Description | URL |
|---|---|
| JSON Web Token are an open, undistry standar RFC-7519 | https://jwt.io/ |
| RFC 7519 specification JWT | https://tools.ietf.org/html/rfc7519 |
| JWT vs Cookies | https://ponyfoo.com/articles/json-web-tokens-vs-session-cookies |
Sketching / Wireframing / Mockup template / Images
| Description | URL |
|---|---|
| Sketching and Wireframing | https://moqups.com/ |
| Sketching and Wireframing | https://www.mockflow.com/ |
| Diagrams and Sketching | https://www.gliffy.com/ |
| Sketching and wireframing for iPhone | http://iphonemockup.lkmc.ch/ |
| IF you don't have images but you need a placeholder instead of, this is for you | http://placehold.it/ |
| Conversor images to SVG | http://picsvg.com/sp/ |
| Optimize your images (Available for grunt) | https://imageoptim.com/es.html |
| New Format for Images Webp | https://developers.google.com/speed/webp/ https://caniuse.com/#search=webp |
| Free resources images for web sites | https://www.freepik.com/ |
| Images placeholder random / Unsplash API | https://picsum.photos/ |
| Set of icons free | http://linea.io/ |
Transpiling JavaScript
| Description | URL |
|---|---|
| Google Traceur JavaScript.next-to-JavaScript-of-today | https://github.com/google/traceur-compiler |
| Babel is a JavaScript compiler Use next generation JavaScript, today | https://babeljs.io/ |
| From ES5 to ES6 | http://lebab.io/try-it |
| Online IDE / Compiler / Interpreter | https://repl.it/languages |
| Creating a Typescript library with NPM | https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c |
| Beautiful and useful tutorial for Webpack | https://www.valentinog.com/blog/webpack/ |
UX & UI
| Description | URL |
|---|---|
| Dropbox OnBoard | https://www.useronboard.com/how-dropbox-onboards-new-users/?slide=7 |
| All kind of resources for UI and UX | https://resourcecards.com/ |
| UX style guides pattern | https://ux.mailchimp.com/patterns/ |
| UI patterns | http://ui-patterns.com/ |
| Designs to get inspiration and examples | http://designsnips.com/ |
| Patterns | http://patterntap.com/library |
WebGL
| Description | URL |
|---|---|
| Eye WebGL | http://www.vill.ee/eye/ |
| Experiences with WebGL | https://www.chromeexperiments.com/webgl |
| Library for WebGL | http://www.pixijs.com/ |
Web Components
| Description | URL |
|---|---|
| Components created by the community based on Polymer | https://customelements.io/ |
WebTools for Front-End
| Description | URL |
|---|---|
| Comparision for trends in Front-End based on npm | http://www.npmtrends.com/angular-vs-react-vs-backbone |
| Google Page Speed Insights in improve the speed for your page | https://developers.google.com/speed/pagespeed/insights/ |
| Optimize your images with a perfect balance in quality and file size | https://tinypng.com/ |
| Super useful tool to mock data | https://www.mockaroo.com/ |
| Library to parse CVS to JSON | http://papaparse.com/ |
| TODO MVC for the most popular Frameworks | http://todomvc.com/ |
| Yeoman Scalfolding / Generator | http://yeoman.io/ |
| A powerful templating engine with inheritance, asynchronous control, and more | https://mozilla.github.io/nunjucks/ |
| Uglify JS code online | https://skalman.github.io/UglifyJS-online/ |
| Real HTTP Mocking online | http://www.mocky.io/ |
| Mock response http | https://httpbin.org/ |
| Awesome page with many of snipets on Bootstrap | http://bootsnipp.com/ |
| Autoprefixer Online | https://autoprefixer.github.io/ |
| Review compatibility of features for browsers | http://caniuse.com/ |
| Beautiful placeholders using images from unsplash | https://unsplash.it/images |
| Free sounds in Mp3 / Mp4 | http://soundbible.com/ |
| Useful tool for editing and structure json data | http://www.jsoneditoronline.org/ |
| Flags and information of all countries in the world | http://flagpedia.net/ |
| Videos Free | https://pixabay.com/videos/ |
| Awesome page to download sound effects | http://www.zapsplat.com/ |
| NES sounds videogames | http://themushroomkingdom.net/media/smb/wav |
| Awesome page to review offline documentation for Front End frameworks / libraries | http://devdocs.io/ |
| Awesome dependency management for Windows. Works like homebrew | https://chocolatey.org/ |
| Like the NPM , YARN is a better package manager for Node | https://yarnpkg.com/en/ |
| NVM for windows :D | https://github.com/coreybutler/nvm-windows |
| Another NVM for Windows, can be installed from choco | https://github.com/marcelklehr/nodist |
| Polyfills dynamic according to your browser | https://polyfill.io/v2/docs/ |
| Scape HTML | http://www.freeformatter.com/html-escape.html#ad-output |
| Library to highligh code | https://highlightjs.org/ |
| A Query language for your API | http://graphql.org/ |
| A tool for transforming CSS with JavaScript | http://postcss.org/ |
| Allows to show the work in progress | https://localtunnel.github.io/www/ |
| Static web publishing for front-end projects | https://surge.sh/ |
| Statistics for Browsers usage | http://gs.statcounter.com/ |
| Fantastic free images | https://www.pexels.com/ |
| One of the best enrich editors for web | https://ckeditor.com/download |
| Lorem ipsum for images | http://lorempixel.com/ |
| Restify REST scalable on Node.js | http://restify.com/ |
| Unminify JS, CSS, HTML | http://unminify.com/ |
| Ranking languages in 2017 | https://redmonk.com/sogrady/2017/06/08/language-rankings-6-17/ |
| Minifier and Beautfier | http://minifycode.com/html-beautifier/ |
| SCSS to CSS | http://www.cssportal.com/scss-to-css/ |
| Emojis online | https://emojipedia.org/ |
| Easy way to copy Emojis / Emoticons | https://www.emojicopy.com/ |
| Cornify Easter Eggs | http://www.cornify.com/ |
| Draw and create diagrams online | https://www.draw.io/ |
| A lot of resources for web | http://codingheroes.io/resources/ |
| Text Compare Diff Online | https://text-compare.com |
| Homebrew Formulas | http://brewformulas.org/ |
| Markdown online | https://dillinger.io/ |
| jsPDF library | https://parall.ax/products/jspdf |
| pdf.js library by Mozilla | https://mozilla.github.io/pdf.js/getting_started/ |
| Markdown Online | https://stackedit.io |
| Quotes Fancy with images | https://quotefancy.com/ |
| Install Hooks in the project | https://www.atlassian.com/git/tutorials/git-hooks |
| Build end-points using Front-End | https://hapijs.com/ |
| Youtube videos to Mp3 | http://mp3musicsongs.com/en/download/Q73gUUr8Zlw/terminator-2-hasta-la-vista-baby.html |
| Sounds in MP3 | https://www.albinoblacksheep.com/audio/mp3/300_This_is_Sparta.mp3 |
| Jekyll installation tutorial | https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/ |
| Favicon generator in multiples dimensions | https://www.favicon-generator.org/ |
| Web XML Formatter | http://www.webtoolkitonline.com/xml-formatter.html |
| Another JSON Formatter and converter tool |
https://jsonformatter.org/ |
| Tool to compare content online and resolve conflicts | http://www.mergely.com/ |
| Nice tool to create dynamic interfaces based on JSON objects | http://www.jsontots.com/ |
| Credit Cards Generator | https://names.igopaygo.com/es/tarjetas-de-credito |
| Http Status Codes documentation and examples | https://httpstatuses.com/ |
| Speed reading | http://spritzlet.com/ |
| Speed reading | http://www.readsy.co/ |
| Statistics for Browsers and Internet | http://gs.statcounter.com/ |
| Retrieve the Schema Colors | https://www.schemecolor.com/javascript-logo-colors.php |
| Shields for Git projects | https://shields.io/category/version |
| Http Archive State of Web | https://httparchive.org/reports/state-of-the-web |
| How much is the cost in your website? | https://whatdoesmysitecost.com/ |
| Browser network limitations | https://docs.pushtechnology.com/cloud/latest/manual/html/designguide/solution/support/connection_limitations.html |
| A great tool to understand the atomic design system | https://patternlab.io/ |
| Microsoft Design System - Controls | https://developer.microsoft.com/en-us/fabric/#/ |
| CORS anywhere to use a proxy | https://cors-anywhere.herokuapp.com/ |
| Search Easy Node Modules | https://npms.io/ |
| Has many documentation in one place | https://devdocs.io/ |
| Search TypeScript Easy libraries | https://microsoft.github.io/TypeSearch/ |
| Awesome tool to generate reponsive images | https://www.responsivebreakpoints.com/ |
| Create your own logo | https://hatchful.shopify.com/ |
| Google initiative to measure the performance | https://www.thinkwithgoogle.com/feature/testmysite |
| Mocks created easy with Hoverfly | https://docs.hoverfly.io/en/latest/ |
| Global Statistics for Web | https://gs.statcounter.com/ |
| Front-End Full Stack Course | https://fullstackopen.com/en |
Micro Front-End
| Description | URL |
|---|---|
| One Framework to handle the micro front-ends | https://single-spa.js.org/ |
| Micro Front-End Article | https://martinfowler.com/articles/micro-frontends.html |
Web VR / Virtual Reality
| Description | URL |
|---|---|
| 3 Reasons WebVR Is The Future of Virtual Reality | https://uploadvr.com/3-reasons-webvr-future-virtual-reality/ |
| Share and discover 3D Content | https://sketchfab.com/ |
| React VR | https://facebook.github.io/react-vr/ |
| Show the matrix for current browses supporting webvr | https://webvr.rocks/ |
| Build immersive web VR using Vizor | https://vizor.io/ |
| glTF GL Transmission Format for 3D assets | https://github.com/KhronosGroup/glTF/tree/2.0 |
| Added link to threejs page JavaScript 3D | https://threejs.org/ |