🔥 🔥A curated list of awesome useful resources for Front-End 🔥
- Accessibility - A11Y
- Angular in general & Angular 5+
- Animation on HTML + CSS + SVG
- Artificial Intelligence / AGI
- Awesome and mad projects on JavaScript / CSS 😱
- Automation and Task
- Books
- Bundlers (Webpack)
- CSS3 & SCSS
- Challenges online for JavaScript
- Crowdfunding sites to achieve the ideas and creative projects
- Databases
- Data Visualization / D3
- EmberJS
- Freelance Webs or Jobs Search Pages for Tech
- Functional Programming in JavaScript
- Git
- HTML5
- JavaScript / TypeScript
- JavaScript Testing
- Jekyll Templates
- Micro Front-End
- Monitoring apps and logging messages
- NodeJS
- Other Interesting Articles or Pages
- Performance
- Progressive Web Apps / PWA
- Public APIs
- ReactJS & React Native
- Regular Expressions
- RxJs Reactive Programming with Javascript and Redux
- Security
- Service Workers
- Sketching / Wireframing / Mockup template / Images
- Static websites generators
- Transpiling JavaScript
- UX & UI
- WebGL
- Web Components
- WebTools for Front-End
- Web VR / Virtual Reality
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 |
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/ |
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/ |
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 |
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 |
Description | URL |
---|---|
Bookzz | http://es.bookzz.org/ |
Safari Books | https://www.safaribooksonline.com/ |
Resilient Web Design | https://resilientwebdesign.com/ |
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/ |
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 |
Description | URL |
---|---|
gofundme | https://www.gofundme.com/ |
kickstarter | https://www.kickstarter.com/ |
List of invesment in Startups | https://www.crunchbase.com/#/home/index |
Description | URL |
---|---|
Mongo GUI Tools | https://scalegrid.io/blog/which-is-the-best-mongodb-gui/ |
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 |
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/ |
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 |
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/ |
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 |
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/ |
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/ |
Description | URL |
---|---|
Ramarulandac portfolio based on Indigo Jekyll Template | https://github.com/ramarulandac/ramarulandac.github.io |
Jekyll | https://jekyllrb.com/ |
Hugo | http://gohugo.io/ |
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/ |
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/ |
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/ |
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 |
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 |
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 |
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 |
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/ |
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/ |
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 |
Description | URL |
---|---|
Eye WebGL | http://www.vill.ee/eye/ |
Experiences with WebGL | https://www.chromeexperiments.com/webgl |
Library for WebGL | http://www.pixijs.com/ |
Description | URL |
---|---|
Components created by the community based on Polymer | https://customelements.io/ |
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 👍 awesome! | 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 |
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 |
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/ |