Skip to content

🔥A curated list of awesome useful resources for Front-End. This list has been updated through my years of experience as Front-End. If you want to add links don't hesitate to reach me.

Notifications You must be signed in to change notification settings

codesandtags/frontend-documentation

Repository files navigation

Front End Documentation 2024 🚀

🔥 🔥A curated list of awesome useful resources for Front-End 🔥

Index

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+

| Description | URL | | -------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------: | --------------------------------- | ---------------------------------------------- | | Good fundamentals and basics for Angular 2 | https://egghead.io/series/angular-2-fundamentals | | Advanced Structure for Angular 1.x projects | https://omarfouad.com/ | | Rangle.io : Angular 2 Training | https://www.gitbook.com/book/rangle-io/ngcourse2/details | | Vaddin = Angular 2 + Material Design + PolymerJS | https://vaadin.com/elements | | Projectes made using Angular | https://www.madewithangular.com/#/ | | Example of sites built with angular | https://builtwith.angularjs.org/ | | Site tu run examples with Angular | http://plnkr.co/ | | Angular best practices | https://scotch.io/tutorials/angularjs-best-practices-directory-structure | | Pluralsigh Angular 2 | https://app.pluralsight.com/library/courses/angular-2-getting-started-update/table-of-contents | | Fetching on Angular 2 | https://namitamalik.github.io/Fetching-Data-in-Angular2/ | | Deploy angular 2 on heroku | https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352#.thginc3zg | | Custom Themes with Angular Material | https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html | Practice Excercises for Angular 2 | https://jcoop.io/angular-2-practice-exercises/ | | Augury to Debug Angular applications | https://augury.angular.io/ | | Deploy Angular 4 on Heroku | https://medium.com/@ervib/deploy-angular-4-app-with-express-to-heroku-6113146915ca | | Using env variables in Angular 4 | http://www.chrisjmendez.com/2017/05/24/using-dotenv-with-angular/ | | Explains what you need to do to update your app | https://angular-update-guide.firebaseapp.com/ | | Working with HttpInterceptors | https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8 | | Checklist for performance in Angular | https://github.com/mgechev/angular-performance-checklist | | Testing Snipets with Angular 4+ | https://medium.com/spektrakel-blog/angular-testing-snippets-httpclient-d1dc2f035eb8 | | Testing HttpClient in Angular 4+ | https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712 | | Angular Material | https://material.angular.io/components/categories | | Angular Flex Layout | https://tburleson-layouts-demos.firebaseapp.com/#/docs | | Angular Google Maps | https://angular-maps.com/ | | One of the most complete Angular Courses | https://ultimateangular.com/ | | How to build a website with angular and github pages | https://scotch.io/@collinl65/deploying-angular4-app-to-github-pages | | Why Angular has chosen Typescript | https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8 | | Added link for Unit Testing in Angular + Karma + Jasmine | https://codecraft.tv/courses/angular/unit-testing/jasmine-and-karma/ | | Write Angular apps live & online | https://stackblitz.com | | NG Conf 2018 Talks | https://nitayneeman.com/posts/all-talks-from-ng-conf-2018/ | | Understanding Angular Material | https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1 | | Scalable Angular Architecture | https://blog.strongbrew.io/A-scalable-angular2-architecture/ | | Scalable Angular Architecture | https://bulldogjob.pl/articles/539-scalable-angular-application-architecture | | Scalable JavaScript Architecture | https://es.slideshare.net/nzakas/scalable-javascript-application-architecture/108 | | Micro Front-Ends approach | https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16 | | Angular Universal + Ngrx | https://blog.upstate.agency/setting-up-angular-universal-with-ngrx-30d97102be4d | | Translating Angular Apps with ngx-translate | https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate | | Setting Angular with ngx-translate | https://medium.com/letsboot/translate-angular-4-apps-with-ngx-translate-83302fb6c10d | | Ivy explanation | https://herringtondarkholme.github.io/2018/02/19/angular-ivy/ | | Understanding Ivy Renderer | https://medium.com/@vyakymenko/understanding-angular-ivy-renderer-c9d07fc01b76 | | Deploying Angular app in nginx with docker | https://youtu.be/1jzztM7qJRY | | Installing nginx with homebrew | https://coderwall.com/p/dgwwuq/installing-nginx-in-mac-os-x-maverick-with-homebrew | | Performance on Angular Apps | https://blog.angular.io/3-tips-for-angular-runtime-performance-from-the-real-world-d467fbc8f66e | | Performance on Angular Apps 2 | https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354 | | Added authentication with Angular and Ngrx | http://mherman.org/blog/2018/04/17/authentication-in-angular-with-ngrx/#.WvzoLtMvzOQ | | Angular 6 complete project and beautiful UI | https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e | | Angular 6 summary features | https://medium.freecodecamp.org/angular-what-is-the-new-briefly-e6837348dd3a | | Angular testing great tutorial | https://blog.realworldfullstack.io/real-world-angular-part-9-unit-testing-c62ba20b1d93 | | Nice courses to review :D rxjs, angular, vue | https://coursetro.com/courses | | Ingrate Angular + Google Analytics | https://codeburst.io/using-google-analytics-with-angular-25c93bffaa18 | | Host listener good practices | https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee | | Angular Routing pattern | https://medium.com/@shairez/angular-routing-a-better-pattern-for-large-scale-apps-f2890c952a18 | | Angular navigation query params | https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e | | Deploy one build with multiple environment files | https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/ | | Compodoc for Angular | https://github.com/compodoc/compodoc | | Performance for your angular projects | https://web.dev/angular | | Angular multilanguage datepicker | https://medium.com/@kristinahertmann/multi-language-date-formats-with-angular-material-b8598415d117 |

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

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

Description URL
Viewer in real time for multiple devices https://browsersync.io/
Google Fonts for your website https://www.google.com/fonts
Page where you can ask for the pixel density of viewports http://pixensity.com/
Ellipsis and truncate multiline text https://imageoptim.com/es.html
Show the properties which use prefix http://shouldiprefix.com/
Great things about Flex Box and Support http://www.slideshare.net/zomigi/leveling-up-with-flexbox-smartwebconf140923
CSS3 responsive layouts http://www.slideshare.net/zomigi/css3-layout
Bourbon lightweight mixing library for SASS http://bourbon.io/
Tool to calculate Px to EM using a base http://pxtoem.com/
Colour Palettes with ideas http://www.colourlovers.com/
Super tool to design palettes https://coolors.co/
Color palettes best fitted for branding https://branition.com/colors/
Complete guide for FlexBox :D https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox explained in Gifs https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.xwc1sdfnm
Responsive layout toolkit for Sass http://susy.oddbird.net/
Great article about how works susy https://css-tricks.com/build-web-layouts-easily-susy/
Gallery 3D just using CSS https://css-tricks.com/creating-a-3d-cube-image-gallery/
Some Input styles for Forms http://callmenick.com/post/various-css-input-text-styles
Tips about lengths in CSS https://css-tricks.com/the-lengths-of-css/
Scroll Down effects https://codyhouse.co/demo/page-scroll-effects/gallery.html
Namespace and scalable CSS - BEM http://getbem.com/introduction/
Namespace and scalable CSS - SMACSS https://smacss.com/
Namespace standard for CSS - OOCSS http://oocss.org/
Namespace and scalable CSS - SUITCSS http://suitcss.github.io/
Manifesto motion UX https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
Font Awesome Icons http://fontawesome.io/
Great Icons just using fonts http://weloveiconfonts.com/
Youn can customize your font icons here :D https://css-tricks.com/examples/IconFont/
Icons free https://icomoon.io/#icons
Icons and more Icons in SVG :D https://thenounproject.com/
Search more than 1.9 Millions of Icons https://www.iconfinder.com/
Search more than 500k of Icons https://www.flaticon.com/
Game to understand Flexbox http://flexboxfroggy.com/
CSS prefixer online tool http://pleeease.io/play/
Awesome tutorial for CSS Animations https://learn.shayhowe.com/advanced-html-css/transitions-animations/
CSS Animation library https://daneden.github.io/animate.css/?
Tool to create clip-path in CSS http://bennettfeely.com/clippy/
BEM - SMACSS advices https://www.sitepoint.com/bem-smacss-advice-from-developers/
SOLID CSS : Open/Closed https://csswizardry.com/2012/06/the-open-closed-principle-applied-to-css/
SOLID CSS : Single Responsability https://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/
POST CSS http://postcss.org/
Microinteraction examples :-) http://inspire.blufra.me/css-examples-16-animations-effects-snippets/
Brand Colors Palette https://brandcolors.net/
Images based on color https://pixnio.com/images/40a0e0
Explained Flex with GIFs https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053
Atomic Design Approach http://atomicdesign.bradfrost.com/
How to handle fallbacks and compatiblity in CSS https://modernweb.com/using-css-fallback-properties-for-better-cross-browser-compatibility/
Atomic Design Book Online http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design, why we should use it? https://platzi.com/blog/por-que-atomic-design/
Style Guides patterns http://styleguides.io/
One execelent course for CSS Grid https://cssgrid.io/
SASS to CSS online https://www.sassmeister.com/
CSS Animation Course https://courses.cssanimation.rocks/
CSS Fundaments Animation Course https://www.sitepoint.com/premium/courses/animating-with-css-2941
Playground for CSS in live http://dabblet.com/help/index.html
Great explanation for EM vs REM and their usages https://zellwk.com/blog/rem-vs-em/
CSS3 Background Pattrns http://lea.verou.me/css3patterns/#
Common errors with BEM https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
CSS good styles guidelines https://github.com/chris-pearce/css-guidelines#state-hooks
Airbnb Style Guidelines https://github.com/airbnb/css
OOCSS Guide https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
All timing examples with CSS transitions https://easings.net/
Cubic Bezier transitions testing online http://cubic-bezier.com/#.17,.67,.83,.67
Architecture for CSS https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization
Comparison for SASS Bourbon and Compass https://stackshare.io/stackups/bourbon-vs-compass-vs-sass
BEM CSS validator https://torleif.nz/bem/
Understanding EM and REM https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

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

Description URL
JavaScript Design Patterns Book https://addyosmani.com/resources/essentialjsdesignpatterns/book/index.html
Eloquent JavaScript http://eloquentjavascript.net/
Javascript - The good parts http://bdcampbell.net/javascript/book/javascript_the_good_parts.pdf
Recopilation and good concepts for JavaScript http://jstherightway.org/
Trends in libraries https://www.javascripting.com/
Compress your JavaScript Code http://jscompress.com/
ELM course for beginners http://courses.knowthen.com/courses/elm-for-beginners/
One of the best tutorials for Promises in JavaScript ES6 http://www.html5rocks.com/en/tutorials/es6/promises/
Dynamic validation of password using JavaScript http://mlitzinger.com/blog/password-validator-js/
Best JS Books - Free http://jsbooks.revolunet.com/
Understanding Closures https://jherax.wordpress.com/2015/02/13/javascript-closures/
Compatibility Table for ES6 in browsers http://kangax.github.io/compat-table/es6/
Differences between Apply and Call http://hangar.runway7.net/javascript/difference-call-apply
Show the key pressed in ASCII number code http://keycode.info/
List of Unicode Emoji characters http://www.fileformat.info/info/emoji/images.htm
You Might Not Need JQuery http://youmightnotneedjquery.com/
Super great explation about fetch API https://jakearchibald.com/2015/thats-so-fetch/
Understanding Modules system in JavaScript https://auth0.com/blog/javascript-module-systems-showdown/
Airbnb JavaScript style guide https://github.com/airbnb/javascript
How Airbnb use react http://devnacho.com/2016/03/20/how-airbnb-uses-react/
ECMASCRIPT 2017 Draft https://tc39.github.io/ecma262/#sec-intro
Generate massive amounts of fake data in Node.js and the browser https://github.com/marak/Faker.js/
TSLint rules for TypeScript https://palantir.github.io/tslint/usage/rule-flags/
Tool for manage multiple projects with packages https://github.com/lerna/lerna
Library to use Promises http://bluebirdjs.com/docs/api-reference.html
Library to create Intros in the Web Sites as onboarding processs https://introjs.com/
AST explorer to understand how works JavaScript https://astexplorer.net/
Visual example how works the event loop in JavaScript Go to link
Creating a custom JS library https://hackernoon.com/a-complete-workshop-build-your-es6-code-into-a-library-using-webpack-80295faeb833
Create Typescript library https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c
Practice JavaScript exercises https://practicejs.com/
Intl NumberFormat in JavaScript https://www.samanthaming.com/tidbits/30-how-to-format-currency-in-es6
Intl DateTimeForm https://devhints.io/wip/intl-datetime

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

Description URL
Using browserify https://carlosazaustre.es/blog/browserify-desarrollando-tu-frontend-como-en-node-js/
Best pracitces for the web by Google https://developers.google.com/web/#follow-best-practices
Comparision for testing frameworks in Javascript https://glebbahmutov.com/blog/picking-javascript-testing-framework/
Google Web Free Courses https://developers.google.com/training/web/?hl=es-419
Logging in errors in clients https://www.sitepoint.com/logging-errors-client-side-apps/
Interview Questions Front-End Fork https://github.com/codesandtags/Front-end-Developer-Interview-Questions
Collection of snippets for RegExo http://snipplr.com/all/language/regex
Tables vs Divs https://www.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/
Why use tables is stupid https://www.hotdesign.com/seybold/
Responsive emails in Gmail https://gsuite-developers.googleblog.com/2016/09/your-emails-optimized-for-every-screen-with-responsive-design.html
Why to become in a Fullstack Developer using JavaScript https://www.toptal.com/javascript/guide-to-full-stack-javascript-initjs
Using nodeJS on Google Cloud https://cloud.google.com/nodejs/getting-started/hello-world
Great articles for angular and other stuffs https://scotch.io/tag/angular-js
Understanding the source maps in JavaScript + Browser https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
Great resume and comparation about JavaScript Frameworks/Libraries in 2016 https://risingstars2016.js.org/#framework
How to become in Google Developer Expert https://www.quora.com/What-does-it-take-to-be-a-Google-developer-expert
Coding style guide for some famous languages https://medium.freecodecamp.com/the-100-correct-coding-style-guide-5b594a1655f0
Gherkin Notation Template http://docs.behat.org/en/v2.5/guides/1.gherkin.html
JavaScript Tair, Podcast abaout Javascript https://javascriptair.com/
JavaScript statistics and anothers topics with Front-End https://stateofjs.com/2016/introduction/
Guide to success open source projects https://opensource.guide/
Great article about Angular in 2017 https://malcoded.com/posts/angular-top-2017
Timeline Web of Browsers https://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg

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

Description URL
WEB Real Time Communications https://webrtc.github.io/samples/
PWA example https://app.ft.com
Web App install banner https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/
Web App Manifest https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
Added short tutorial for PWA with Angular CLI https://medium.com/@amcdnl/service-worker-pwas-with-the-angular-cli-98a8f16d62d6
Is service worker ready? https://jakearchibald.github.io/isserviceworkerready/
PWA directory https://pwa-directory.appspot.com/
Credential Management API https://developers.google.com/web/fundamentals/security/credential-management/?hl=es
Web Payments API https://developers.google.com/web/fundamentals/payments/?hl=es
Deep explanation for fetch API https://davidwalsh.name/fetch
Detail offline cache persistence https://jakearchibald.com/2014/offline-cookbook/#cache-persistence
Advance concepts about caching https://afasterweb.com/2017/01/31/upgrading-your-service-worker-cache/
Dexie to work with IndexDB http://dexie.org/
Responsive Design by Google https://developers.google.com/web/fundamentals/design-and-ux/responsive/
Responsive Images https://css-tricks.com/responsive-images-css/
Understanding Background Sync https://developers.google.com/web/updates/2015/12/background-sync
Google Cloud Messaging Tool https://developers.google.com/cloud-messaging/
Background Sync implementation https://ponyfoo.com/articles/backgroundsync
Firebase Functions as backend https://firebase.google.com/docs/functions/
Geolocation API https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
User Media API https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Collection of JavaScript Libraries for PWA https://github.com/GoogleChrome/workbox
Browser Storage Limits https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
Indexed DB Storage on Chrome https://developer.chrome.com/apps/offline_storage#temporary
App Manifest Generator Online https://app-manifest.firebaseapp.com/

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

Description URL
Examples for React in CodePen https://medium.com/@sgroff04/how-i-learned-react-and-how-you-can-too-6714a48e984a#.ngks752s7
React Advance course on Pluralsight https://app.pluralsight.com/library/courses/react-redux-react-router-es6/table-of-contents
Handle immutables states on your JavaScript objects https://facebook.github.io/immutable-js/
React Developer Tools for Chrome https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Redux Developer Tools for Chrome https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=es
How to test React Redux Components http://ericnish.io/blog/how-to-unit-test-react-redux-components/
Redux mock store for Testing http://arnaudbenard.com/redux-mock-store/
10 tips for better redux apps https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44#.yy7kbasb6
Optimizing React when is slow https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba
So far the best free React Course https://reacttraining.com/online/react-fundamentals
React Hooks https://usehooks.com/
Components building blocks in React https://bit.dev/
Talk about using CSS in JS in React https://speakerdeck.com/vjeux/react-css-in-js
Styling components in React https://blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b
React Developer Tools Facebook Project https://github.com/facebook/react-devtools
React Lifecycle hooks examples https://stackblitz.com/edit/react-lifecycle-hooks-example?file=index.js
React Memoization https://medium.com/@sdolidze/react-hooks-memoization-99a9a91c8853

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 👍 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

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/

About

🔥A curated list of awesome useful resources for Front-End. This list has been updated through my years of experience as Front-End. If you want to add links don't hesitate to reach me.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages