FGAUTREAULT / cheatsheets-frontend

It's a repository gathering resources about frontend.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Welcome to cheatsheets-frontend

It's a repository gathering resources about frontend.

πŸ“° Blogging πŸ“°

Regular DOM vs Virtual DOM
https://indiepen.tech/ // Embedded code IDE
https://github.com/slidevjs/slidev // Presentation slides based on markdown

πŸ’» Coding πŸ’»

πŸŽ“ Learning πŸŽ“

Path

https://github.com/google/WebFundamentals
https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer
https://2020.stateofjs.com/en-US/?s=03
https://github.com/kamranahmedse/developer-roadmap
https://www.webfx.com/web-design/
https://www.geeksforgeeks.org/
https://github.com/lauragift21/awesome-learning-resources
https://devdocs.io/css/css_animations
https://hackdesign.org/lessons
https://github.com/30-seconds/30-seconds-of-code?s=03

Coding challenge

https://100dayscss.com/?dayIndex=01
https://www.codewars.com/
https://www.hackerrank.com/
https://coderbyte.com/
https://leetcode.com/
https://www.codingame.com/start

JS

https://github.com/getify/You-Dont-Know-JS
https://github.com/30-seconds/30-seconds-of-code
https://jsbeginners.com/javascript-projects-for-beginners/
https://bestofjs.org/

HTML

https://github.com/h5bp/html5-boilerplate

CSS

https://github.com/FGAUTREAULT/cheatsheets-css/blob/main/README.md#learning

Examples

https://github.com/gothinkster/realworld
https://www.whatruns.com/
https://github.com/tuvtran/project-based-learning
https://dev.to/alexmercedcoder/1-backend-5-frontends-todo-list-with-rails-react-angular-vue-svelte-and-jquery-18kp?s=09
https://github.com/webgems/webgems

Code snippets

https://webcode.tools/
https://css-tricks.com/snippets/
https://www.w3schools.com/howto/
https://snipplr.com/
https://codepen.io/collection/DYpwPE

GIT

https://github.com/pcottle/learnGitBranching

Chrome extension

https://github.com/keithclark/css-feature-toggle-devtools-extension

Sharing Platform & tools

https://marketplace.visualstudio.com/items?itemName=lostintangent.thinking-in-code&s=03
https://carbon.now.sh/

Algorithms

https://github.com/trekhleb/javascript-algorithms

Editor & Tools

VSCode

https://github.com/microsoft/vscode-tips-and-tricks πŸ‘ // VSCode tips & plugins for efficient ussage
https://www.kite.com/ // AI powered code completions to your code editor

UI Visualization

https://ui.dev/javascript-visualizer/ // Execution Context, Hoisting, Closures, and Scopes in JavaScript

Image

https://jakearchibald.github.io/svgomg/ // Tool for optimizing SVG vector graphics files
https://squoosh.app/ // Compress images but keep quality

Video

https://www.unscreen.com/ // Remove video background

Formats

https://transform.tools/ // Transform from one format to another

Regex

https://regexper.com/ // Visualize regex composition

CSS

https://github.com/FGAUTREAULT/cheatsheets-css/blob/main/README.md#editor--tools // Css resources & tools

Testing

https://www.iterspace.com/ // Record screen, add comments, collect logs from your browser

Database

https://github.com/mgramin/awesome-db-tools // Collection of database tools

Chrome

https://www.smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts/ // Tips using chrome devtools

Generators

https://www.json-generator.com/ // Json model generator

Cheatsheets

https://github.com/LeCoupa/awesome-cheatsheets
https://devhints.io/

JS

https://github.com/iLoveCodingOrg/javascript-cheatsheet/blob/master/js-cheatsheet.pdf

HTML

https://htmlcheatsheet.com/js/

CSS

https://github.com/FGAUTREAULT/cheatsheets-css/blob/main/README.md#cheatsheets

Angular

https://angular.io/guide/cheatsheet?s=03
https://itnext.io/clean-code-checklist-in-angular-%EF%B8%8F-10d4db877f74?s=03

Unicode

https://mathiasbynens.be/notes/javascript-unicode?s=03

Code style

JS

https://github.com/airbnb/javascript // Airbnb style guide
https://google.github.io/styleguide/jsguide.html // Google style guide

Build library

https://github.com/storybookjs/storybook // Build a library of components - repo
https://medium.com/loftbr/angular-storybook-6d8ae099ab96?s=09 // Explanation of storybook with angular exmaple

Animation

https://greensock.com/ // Animations
https://github.com/michalsnik/aos // // Animate on Scroll
https://splidejs.com/ // Slider JS & carrousel
https://threejs.org/ // 3D Webgl

REST API

https://blog.octo.com/designer-une-api-rest/ // How to design a REST API step by step
https://dzone.com/articles/rest-api-best-practices-with-design-examples-from // Best pratices

UI

https://github.com/FGAUTREAULT/cheatsheets-ui-ux // Gathering resources around UI/UX

⚑️ Performance ⚑️

https://github.com/thedaviddias/Front-End-Performance-Checklist // Design and code with performance in mind
https://www.smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals/ // Web core vital explanantion and examples
https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/ // List of frontend axis for performance
https://www.smashingmagazine.com/search-engine-optimization-checklist/ // Optimize for SEO

JS

https://perf.link/ // Calculate performance of bit of JS code, for tuning perf
https://philipwalton.com/articles/idle-until-urgent/ // Idle Until Urgent stategy example to deal with webpage perf

Angular

https://t.co/HSi1qcePBu // Bundle optimization
https://t.co/XlYJqfurP6 // Profiling apps in @ChromeDevTools
https://t.co/ete6KJtpXE // Using the Angular extension for @ChromeDevTools
https://t.co/d6uF14KjOi // Angular performance checklist

Production

Tips

https://github.com/thedaviddias/Front-End-Checklist // Exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

Hosting

Dynamic

https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#0
https://vaiz10.medium.com/deploying-for-free-an-angular-application-to-heroku-b223728e8ebb
https://www.heroku.com/
https://infinityfree.net/
https://vercel.com/guides/deploying-angular-with-vercel
https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=angular&WT.mc_id=javascript-0000-wachegha

GitHub Based

https://www.netlify.com/blog/2019/09/23/first-steps-using-netlify-angular/
https://www.npmjs.com/package/angular-cli-ghpages
https://angular.schule/blog/2020-01-everything-github
https://angular.io/guide/deployment#deploy-to-github-pages

Static

npm install --global surge
surge

https://surge.sh/ // Static web publishing for Front-End Developers

Productivity

https://opensource.builders/ // Find open-source alternatives for your favorite apps
https://timemachine.betamode.dev/ // Top rated apps

Other resources

https://github.com/tommcgurl/frontend-resources // Collection of frontend resources
https://github.com/dypsilon/frontend-dev-bookmarks // Manually curated collection of resources for frontend web developers
https://github.com/public-apis/public-apis // Public APIs for data & mocks
https://nocodeapi.com/ // API Generator for famous third party app without code

About

It's a repository gathering resources about frontend.