Developer-Roadmap-with-Resources

Goal: Filling my skill gaps to become a Fullstack Javascript Developer

I compiled this opinionated roadmap from the following sources:

• Developer Roadmap
• Freecodecamp
• State of JS 2018
• The Complete Web Developer in 2018 Zero to Mastery
• The Complete Junior to Senior Web Developer Roadmap
• React Developer Roadmap
• Node Developer Roadmap
• Front-end Developer Handbook 2019
• Developer Survey Results 2019
• State of CSS 2019

The Roadmap is not 100% correct, but sufficient accurate for my purpose.

General Development Skills

-1x Engineer
-Getting a Gig

Learn to search for solutions

Git & Github

• JAMstack Conf Git
• Gitflow Workflow
• Learn git concepts, not commands
• How to callaborate on GitHub
• Git Standup
• Trunk based Dev vs Git Flow
• .gitignore CLI
• Git Explorer
• https://github.com/nvie/gitflow
• https://nvie.com/posts/a-successful-git-branching-model/
• https://github.com/tiimgreen/github-cheat-sheet#readme
• https://learngitbranching.js.org/
• https://github.com/UnseenWizzard/git_training
• https://rachelcarmena.github.io/2018/12/12/how-to-teach-git.html
• https://dev.to/chrisachard/confused-by-git-here-s-a-git-crash-course-to-fix-that-4cmi

Agile Development

• https://www.atlassian.com/agile
• https://github.com/davebs/AgileLite

UX/UI Basics

• Degreeless Design

• Checklist Design

• Front End Design Checklist

• Roadmap

  • https://github.com/togiberlin/ui-ux-designer-roadmap/blob/master/README.md
  • https://dev.to/emmawedekind/ux-engineering-3hem

• Colors

  • Van Schneider
  • Culrs
  • Colorbox
  • https://color.adobe.com/create
  • Happy Hues

• Font

  • Font Pairings by People
  • Font Pairings

• Inspiration

  • Web Design Trends 2019
  • Hall of Fame
  • One Page Love
  • Uplabs
  • https://twitter.com/i/moments/994601867987619840

• Icons
  • Feathericons
  • Unicons
  • Boxicons
  • SVG Icons
  • Icons8 - Line Awesome

• Resources & Tools
  • uplabs.com
  • https://mailgo.js.org/
  • https://www.designcurated.io/
  • http://www.uigoodies.com/
  • https://github.com/LisaDziuba/Awesome-Design-Tools
  • Illustrations ManyPixel
  • Beautiful Screenshot Mockups
  • Evernote.Design
  • SVG Porn
  • https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/
  • https://icons8.com/vector-creator/

Semantic Versioning

• SemVer
• [Primer on SemVer](https://nodesource.com/blog/semver-a-primer/]
• Semantic Release

HTTP/HTTPS

-https://kamranahmed.info/blog/2017/03/14/quick-guide-to-http-caching/ -HTTP2
-HTTP3 https://kamranahmed.info/blog/2016/08/13/http-in-depth/

• How HTTPS Works

Web Security

https://www.freecodecamp.org/news/a-quick-introduction-to-web-security-f90beaf4dd41/ https://github.com/vasanthk/web-security-basics https://martinfowler.com/bliki/CQRS.html

SOLID, KISS, YAGNI

VS Code

• Awesome VS Code
• Microsoft - VS Code Tips and Tricks
• Setup VS Code + ES Lint + Prettier
• https://coder.com/
• Settings Sync
• EnvInfo
• Full Stack VS Code

Character Encodings

APIs

How Browsers work

https://github.com/vasanthk/how-web-works

DNS

• DNS in One Picture
• Web Devs Guide to DNS
• How DNS works

Browser Dev Tools

Productivity & Soft Skills

• Learn in public
• I am a mediocre Developer
• 8 am
• https://97-things-every-x-should-know.gitbooks.io/97-things-every-programmer-should-know/en/
• https://github.com/elsewhencode/project-guidelines

Markdown

• Resources:
  Cheatsheet
  Emojis

SSH

• Egghead - Create a new ssh public and Private key set

Licenses

• tl;dr Legal
• Choose a License
• CLI Licensed

JSON

Basic Terminal Usage

• The Art of Command-line
• https://explainshell.com/
• You dont't need GUIs

Regular Expressions

-Learn Regex

Frontend

Front-End Checklist
Can I use

HTML

• HTML Interview Questions

• Basics

  • Favicon Generator
  • Favicon Checker
  • HTML Head

• Semantics HTML

  • https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i

• Basic SEO

  • https://web.dev/
  • Metatags.io
  • HeyMeta.io
  • Schmea.org
  • Unfurls - Metatag as a Service

• Accessebility

  • Accessibility Manifesto
  • Web Accessibility Guide

CSS

• CSS Interview Questions

• CSS Basics

  • Tympanus CSS Reference
  • CSS Reference
  • Font Inpection - Browser Extension
  • https://getcssscan.com/
  • https://github.com/vasanthk/css-refresher-notes

• CSS3

  • freefrontend.com
  • Clip Path Maker
  • CSS FX
  • Blend Mode
  • Gradient Borders
  • Codyhouse
  • Codrops
  • Multi Line
  • Stripe Background Gradient
  • Shapes
  • general http://animista.net general https://daneden.github.io/animate.css/ general https://ianlunn.github.io/Hover/ Buttons, hover, inputs, and loaders https://cssfx.dev Spinners https://tobiasahlin.com/spinkit/ Burgers https://march08.github.io/animated-burgers/ Burgers http://negomi.github.io/react-burger-menu/ Layout https://github.com/aholachek/react-flip-toolkit Hover and loaders: https://www.csswand.dev/

• Media Queries

  • https://sizzy.co/

• Media Layout https://every-layout.dev/

  • Display
  • Positioning
  • Floats
    • MDN
  • CSS Flexbox
    • http://flexbox.malven.co/
  • CSS Grid
    • Complete Guide to Grid - CSS Tricks
    • http://grid.malven.co/

  https://codyhouse.co/library

SVG

• https://svgjs.com/docs/2.7/

Javascript Basics

http://javascript.info/
https://github.com/getify/You-Dont-Know-JS/ https://github.com/leonardomso/33-js-concepts https://eloquentjavascript.net/ https://github.com/goldbergyoni/javascript-testing-best-practices

=======

• https://javascript.info/

• https://github.com/getify/You-Dont-Know-JS/

• https://github.com/leonardomso/33-js-concepts

• https://eloquentjavascript.net/

• https://github.com/mbeaudru/modern-js-cheatsheet

• JS Interview Questions

• http://codingheroes.io/resources/

• Airbnb Javascript Style Guide

• Clean Code

• Quiz

• WTF.js

• Syntax & Basic Constructs

• DOM Manipulation
  https://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/
  http://youmightnotneedjquery.com/

• Scope

• ES6

• Hoisting

• Fetch API / Ajax(XHR)

• Modular JS

• Event Bubbling

  • !https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing#4616720

Package Managers

• NPM
  • Beginner Guide
  • NPM update Win
  • Execute npm Package Binaries with the npx Package Runner
  • NPM Check Updates
• Yarn
• PNPM

CSS Processors

• SASS
• PostCSS
  • https://cssnano.co/

CSS Frameworks

• Tailwind CSS
• Bootstrap
• Semantic UI
• Materialize CSS

CSS Architecture

• BEM

Build Tools

https://github.com/verekia/js-stack-from-scratch https://github.com/wesbos/dotfiles https://github.com/lerna/lerna

• Task Runner
  • NPM Script
    • https://github.com/kentcdodds/cross-env
• Module Bundler
  • Webpack
  • Parcel
• Linter
  • ES Lint
    • Setup VS Code + ES Lint + Prettier
    • https://github.com/wesbos/eslint-config-wesbos
• Formatter
  • Prettier
    • https://css-tricks.com/prettier-beautify/

React

• React Interview Questions
• Learn React in 10 Tweets (with hooks)
• What are SPAs?
• Pros & Cons of SPAs?

https://reacttraining.com/blog/javascript-the-react-parts/

State Management

• Redux
  • Redux-Saga
• Apollo
• Component State / Context + Hooks

CSS in JS

• Styled Components

Testing

https://github.com/goldbergyoni/javascript-testing-best-practices
Testing Javascript

• Learn the different types of testing & how to write these with tools below

  • Unit
  • Integration
  • Functional

• You can fulfill all your testing needs with the following 3 tools

  • Jest
  • Enzyme
  • Cypress

• Storybook
  • https://egghead.io/lessons/react-introducing-design-systems-with-react-and-typescript-in-storybook
  • https://www.learnstorybook.com/

Type Checking

What is it?
Interpreted vs Compiled Languages

• Proptypes
• Typescript

Libraries

• Routing
  • React-Router
• i18n
  • React Int
• Forms
  • Redux Form
  • Formik
• Utility
  • Moment
  • Lodash
• Data Viz
  • D3
• Animations
  • React Spring
• WebGL
  • Three.js

API CLients

• REST
  • Fetch(native)
  • Axios
• GraphQL
  • Apollo

Progressive Web Apps

Calculating, measuring & improving Performance

• REPL Pattern
• Performance
  • https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/#download-the-checklist
  • Front-End Performance Checklist
  • https://web.dev/
  • https://instant.page/
  • https://imagecompressor.com/
  • https://caniuse.com/
  • https://squoosh.app/
  • https://www.purgecss.com/
• RAIL Model
• Using Light House
• Critical Rendering Path
• Using Dev Tools

Learn different Web APIs used in PWAs https://whatwebcando.today/

• Storage
• Web Sockets
• Service Workers
• Location
• Notifications
• Pyments
• Device Orientation
• Credentials

Static Site Generators

Pros & Cons

• Gatsby

Server Side Rendering

SPA vs SSR

• Next.js

Platforms

• Mobile
  • React Native
    • Expo
  • PWA
• Desktop
  • Electron
  • Carlo
  • Progressive Desktop Apps
• Virtual Reality
  • React 360
• Browser Extensions

Advanced Javascript

Constantly improve your JS Skills along the way https://github.com/getify/You-Dont-Know-JS/ https://developers.google.com/search/docs/guides/javascript-seo-basics
leetcode.com
https://github.com/azl397985856/leetcode/tree/master/daily

• OOP
• Inheritance
• Functional Programming
• Closures
• Typescript
• Debugging
• Algorithms & Data Structures
  • https://github.com/trekhleb/javascript-algorithms
  • https://github.com/jamiebuilds/itsy-bitsy-data-structures/blob/master/itsy-bitsy-data-structures.js
  • https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript
• ES7+
• Design Patterns
  • https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Web Assembly

Web Assembly or WASM is the binary instructions generated from high level languages such as C, C++, Rust, Go.
It is faster than JS and has already shipped in all major browsers

Backend

Node.js Basics

NVM Windows

• Basics
  • Event Emitters
  • Callbacks
  • Filesystem
  • Webhook
  • REST
  • Buffer
  • Process Object
  • Module System
• NPM
  • Create + Publish Package
• Contribute to Open Source
  • FCC - How to contribute to Open Source
  • First Contributions
  • Opensource Guide
• Security
  • OWASP / NodeGoat
• Community Standards & Best Practices
  • https://github.com/i0natan/nodebestpractices

Testing

At the moment learn Unit & Integration testing & learn testing terminologies, like Mocks, Stubs etc.

Frameworks

• Express
  • Template Engines
    • Pug
• Next.js

Databases

Pros & Cons & Use Cases: SQL vs NoSQL vs Graph vs In-Memory

• SQL
  • PostgreSQL
  • MySQL
• NoSQL
  • MongoDB
• Graph Database
• In-Memory Database
  • Redis (NoSQL)

RESTful APIs

Understand REST & how to make RESTful APIs (read ROY Fieldings original paper)

Authentication & Authorization

Learn about the differences & how to implement them

• OAuth
• OpenID
• JWT
• Basic AuthN
• Token AuthN

Performance

• CDN
• Brotli or GZIP
• DB Scaling
• Load Balancing
• Caching
  • node-cache
  • Distributed Cache
    • Redis

Practical Time

Write RESTful CRUD app with registration and login (e.g. blog) + testing + cache

WebSockets

What & how ?

• Socket.io

Message-Broker

What & how ?

• RabbitMQ

Search Engine

What & how ?

• Elastic Search

GraphQL

• Prisma
• ?????

Useful Libraries

• Nodemon
• Nodemailer
• PM2
• Async.js
• node-cron
• Agenda
• pkg
• Puppeteer
• Passport
• Commander.js

Serverless

https://serverless.css-tricks.com/ https://3factor.app/

• FaaS
  • AWS Lambda
• Serviceful
  • Firebase
  • Stripe
  • Snipcart
  • Algolia
  • Contentful
  • Auth0
  • MUX
  • many more

DevOps

DevOps Guide

Understand different OS Concepts

Components of an OS

• Process Management

  • https://www.coursera.org/lecture/technical-support-fundamentals/process-management-fWidx

• Threads & Concurrency

  • https://www.coursera.org/lecture/technical-support-fundamentals/process-management-fWidx

• Sockets

• File Systems

  • https://www.coursera.org/lecture/technical-support-fundamentals/files-and-file-systems-5n8dt

• I/O Management

  • https://www.coursera.org/lecture/technical-support-fundamentals/i-o-management-AeNE4

• Virtualization

• Memory / Storage

  • https://www.coursera.org/lecture/technical-support-fundamentals/memory-management-CKcxg

Learn about Managing Servers

• Learn to live in the Terminal
• Operation System
  • Linux
    • Linux Subsystem for Windows

Networking & Security

• DNS
• OSI Model
• HTTP & HTTPS
• FTP
• SSL/TLS

What is and how to setup a ___

• Reverse Proxy
• Caching Server
• Forward Proxy
• Load Balancer
• Firewall
• Web Server
  • Nginx
  • Apache

Learn Infrastructure as Code

• Containers
  • Docker
    • https://nodedock.io/#/
• Configuration Management
  • Ansible
• Container Orchestration
  • Kubernetes
• Infrastructure Provisioning
  • Terraform
  • Cloud Formation

Learn some CI/CD Tool

What is CI/CD?

• TravisCI -> Linux, OSX, Windows
  • https://lab.github.com/githubtraining/continuous-integration-with-travis-ci
• Jenkins
• CircleCI
• Appveyor (Win)

Learn how to monitor Software & Infrastructure

• Log Management
  • ELK Stack
  • Graylog
  • Splunk
  • Papertrail
• Application Monitoring
  • New Relic
  • Sentry?
  • AppDynamics
• Infrastructure Monitoring
  • Datadog
  • Nagios
  • Icinga
  • Zabbix

Cloud Providers

• AWS
• Azure
• Google Cloud
• Heroku
• Digital Ocean
• Zeit
• Netlify
• Render

Keep Learning

Additional: Computer Science

Teach yourself CS
Udacity - Intro to Computer Science
Super Tiny Compiler
Software Design & Architecture Map
Software Architecture