Software engineer roadmap

Skills for engineer

Basics Fundamentals

Algorithms

• canvas for algo

• math algorithms

• some interview algorithms

• algorith categories like brute, dynamic etc

• Big-O perf

• big-o with javascript

• Training algorithms

  • https://leetcode.com/
  • https://www.hackerrank.com/interview/interview-preparation-kit?h_l=domains&h_r=hrw&utm_source=hrwCandidateFeedback

• Interesting list for coding http://dhruvbird.com/61.html

• Tips interview: https://qr.ae/pN2HUa quora algorithms

Reading code

• read code

Maths for Computer science

Data structures

• arrays
  • how memory and array works

  • Common functions

  • Common algorithms

    common interview questions list of algorithms for array by categories Intersection in array
• linked list

  • video https://www.youtube.com/watch?v=njTh_OwMljA)

  • introductions https://www.tutorialspoint.com/data_structures_algorithms/linked_list_algorithms.htm

    https://www.geeksforgeeks.org/data-structures/linked-list/

    • lists dynamic time complexity https://medium.com/@sherryhsu/js-objects-and-arrays-which-one-is-faster-cfcdb1281704#:~:text=On%20the%20other%20hand%2C%20Insert,time%20complexity%20of%20Amortized%20Constant.
    • https://medium.com/@satorusasozaki/amortized-time-in-the-time-complexity-of-an-algorithm-6dd9a5d38045
    • Difference array and linked list
• stack, queue
• hash
• binary search
  • implementation with javascript
• Trees
  • implementation of tress and most common functions
  • depth-first search and breadth-first search with graph but i can be used with tress
  • binary tree 101
• Sorting
  • all algorithms of sorting
• Graphs

Key concepts

• KISS: https://thevaluable.dev/kiss-principle-explained/
• YAGNI
• SOLID
• DRY: https://thevaluable.dev/dry-principle-cost-benefit-example/

Design Patterns

• gang of four - 4 principal dessign patterns introduction

• strategy

  • good introduction to strategy

• singleton

  • great introduction - essentials
  • why not to use see consequences
  • global used dependency danger point of view
  • implementation javascript
  • singleton is used as global variable/instance what is the bad side ? check first and second answer
  • questions

• builder

  • introduction

• adapter

  • introduction english
  • two ways of implement (js)

• prototype

• decorator

• visitor

• abstract factory

  • guru introduction
  • french introduction

• factory

  • french video real C# example

• facade

• observer

  • guru introduction

• [ ]

• proxy

• delegate

• command

• state

  • guru introduction

• memento

• iterator

• composite

• flyweight

Testing

• types of test https://medium.com/swlh/levels-of-software-testing-b943ce41a2c7
• good practices https://dzone.com/articles/unit-testing-best-practices-how-to-get-the-most-ou
• practices
• Mock or real API calls: https://www.confluent.io/blog/choosing-between-mock-api-and-real-backend/
• About Stubs and Mocks for API testing: https://www.valentinog.com/blog/fake/

Debug

• why to debug
• how to debug
• practice in langage/ide

Computer world

• components
  • Database
  • API
  • serveurs
• how component interacts
• memory ram
• stock/data
• threads
• serveurs
• browser
• bash

Web World

• components https://medium.com/@wereheavyweight/how-were-using-component-based-design-5f9e3176bab
• how they interact
• difference internet and web

Terminal commands

• linux install/unistall packages https://docs.cumulusnetworks.com/cumulus-linux-36/Installation-Management/Adding-and-Updating-Packages/
• how package manager works https://en.wikipedia.org/wiki/Package_manager
• file, copy, cat, remove, create https://documentation.its.umich.edu/node/295
  • sot, grep, cat, awk, sed, sort
• basic scripts
• manager process
  • ps, top, htop, isof
• change permissions and owner folders/files
• network
  • ping, tcp dump https://www.howtogeek.com/108511/how-to-work-with-the-network-from-the-linux-terminal-11-commands-you-need-to-know/
  • nmap
  • traceroute

Performance Big-O

• definitions
  • https://www.bigocheatsheet.com/
• How to find
• Time Complexity of arrays/list
• amortized time https://yourbasic.org/algorithms/amortized-time-complexity-analysis/

Encoding

• basic http://kunststube.net/encoding/

Links

cs standford some posts

System/Networking basics

• database architectures: https://dzone.com/articles/database-architectures-amp-use-cases-explained?edition=620294&utm_source=Weekly%20Digest&utm_medium=email&utm_campaign=Weekly%20Digest%202020-08-05

• OSI

• HTTP

• UDP

• SSL

• web server

  • Ngnix
  • Apache

• FTP

• TLS

• DNS

• NTP

• SDN

• database

  • MySQL
  • MariaDB
  • PostGres
  • Mongo

Systems middle

• loadbalancer
• firewall
• reverse proxy
• security
• coching server
• forward proxy

Frontend basics

Knowlage

• rendering in web

HTML

• HTML structure
• Links, buttons
• forms
• evolutions
• good practices

CSS

• definition
  • https://dev.to/emmabostian/css-specificity-1kca
• value unit
• override points
• model box https://www.w3schools.com/css/css_boxmodel.asp
• position
• display
• float https://developer.mozilla.org/fr/docs/Web/CSS/float
  • see also clear it's useful https://developer.mozilla.org/fr/docs/Web/CSS/clear
• overflow
• index
• selector
  • https://dev.to/emmabostian/css-specificity-1kca
  • https://dev.to/ibrahima92/6-powerful-css-selectors-that-will-really-help-you-write-clean-css-4bab
• debug in browser
• others skills
  • outline vs border: check html/border-outline page of this repo

JavaScript

• DOM
  • intruction and difference DOM - view
  • introductin see levels parts
  • more precisly introduction with w3 org
  • French description
• road map
• project to train - snake game -datatable forms
• selectors
  • Parents, children
  • Nodes
• change dom
• events
• AJAX
• InnerHTML
  • Difference Inner et TextContent
• Object vs New Object
• strict mode
• Tricky parts
  • Concatenation
  • Compair number string
  • Triple equals
  • Convert String to Number
  • Floats
  • Callbacks
  • Binding function
    • intrd
  • apply and call
  • Invoked function
• ES6
  • Shadow DOM
  • This word
  • hosting
  • scope
  • prototype
  • class
  • strict
  • asyncronous
    • callbacks/promises
    • event loop async
    • setimeout 0
    • schema tick a tick is an iteration
    • nexttick vs settimeout, immediate
    • process
• Testing
  • test tools comparator
• [ ]
• Debug in JS
  • use some debug and for vs code ide use extension chrome debug
  • use live server extension for vs code

Javascript projects ideas

• Card / Accordeon
• Pagination table
• Steper
• Tabs
• Loader before images
• Modals
• Sub/Override words when searching (dom search)

Frontend middle

JavaScript

• Learn a framework 'React'

  • about super, good blog

  • tools to debug

  • react hooks basics mistakes: https://medium.com/better-programming/3-mistakes-junior-developers-make-with-react-function-component-state-8a744ab99a0d

  • hooks https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/

  • useEffect https://medium.com/swlh/useeffect-4-tips-every-developer-should-know-54b188b14d9c

  • tips

    • Pouvez-vous la calculer en vous basant sur le reste de l’état ou les props de votre composant ? Si oui, ce n’est pas de l’état.
    • penser react
    • passer etat: Il ne doit y avoir qu’une seule « source de vérité » pour toute donnée qui change dans une application React. En général, l’état est d’abord ajouté au composant qui en a besoin pour s’afficher. Ensuite, si d’autres composants en ont également besoin, vous pouvez faire remonter l’état dans l’ancêtre commun le plus proche. Au lieu d’essayer de synchroniser les états de différents composants, vous devriez vous baser sur des données qui se propagent du haut vers le bas.
    • scale https://medium.com/javascript-in-plain-english/setting-up-a-large-scale-react-application-2d50bc8a5ddb
    • tutorial hooks

  • structure:

• React Libraries

  • https://medium.com/swlh/usefetch-a-custom-react-hook-36d5f5819d8

• React advance

  • Fragments
  • Hooks
  • Context
  • Composition
  • Refs
  • Optimization
  • Flow

• Testing Unit/Integration/E2E

• Babel

• Assyncronous

• Closures

• Types

• TypeScript

CSS

• Bootstrap
• Flexbox
• Bulma
• Pre processor

Tools

• light house
• performance
• debug in browser

Backend basics

• GO/Java/Python
• Testing
  • https://dev.to/jackcaldwell/mocking-es6-class-methods-with-jest-bd7 Class mock
• Debug tools
• Deployment
• Packaging
• create API without frameworks

Backend middle

• oauth

• basic authentication

• JWT

• openId

• SSO

• Take a framework

• Websockets

• Dependendy Injection

  • https://www.youtube.com/watch?v=EPv9-cHEmQw
  • https://www.freecodecamp.org/news/a-quick-intro-to-dependency-injection-what-it-is-and-when-to-use-it-7578c84fa88f/

• Database

  • ORM

• security

  • CORS
  • XSS
  • CSRF

• Nodejs

  • Libraries

Backend advance

• Serverless
• Microservices
  • introduction
  • https://blog.dreamfactory.com/microservices-vs-web-services/
• GraphQL

Backend advance

• Message broker
• Search engine
• APNs
• Location
• Payments
• Service workers

Devops

• Docker
  • Containize
  • Docker composer
  • Manage commands
• Runners
  • Jenkins
  • Circle CI
• Configuration
  • Ansible
  • Puppet
• Concepts
  • Process Management

Devops middle

• Cloud
  • AWS
  • Google Cloud
  • Heroku
  • Azure
  • Digital Ocean
• Orchestration
  • Kubernetes
  • Docker Swarm
• Insfra provisioning
  • Terraform
• Logs Splunk

Tools basics

• git
  • commits
  • merges
  • history
  • useful link
  • http://schacon.github.io/git/user-manual.html
  • http://www-cs-students.stanford.edu/~blynn/gitmagic/ch08.html
  • write message: https://dev.to/chrissiemhrk/git-commit-message-5e21
• VS code/IDE
• linters
• webpack
• loggers

Tools middle

• git

  • reset, rollback
  • conflicts
  • gitflow

• redux

• gulp

programming

• fonctionnal
• declarative
• procedural
• oop
• patterns
  • MVC

practices

• Test-driven
• CI
• Behavior-driven

Clean Code

• First introduction to clean code by Uncle Bob: https://www.youtube.com/watch?v=7EmboKQH8lM

Network

• skills
• cryptography

Technology

• Singlepage SPA
• PWA

Design UX

• buttons https://www.24joursdeweb.fr/2019/et-tu-cliques-a-cote-du-bouton/

DDD (Domain Driven Design)

Links

• Book

Clean Architecture

Links

• D'une architecture web MVC à une architecture Clean Hexagonale - Céline Gilet

• Simple french intro

• Uncle Bob clean architecture

• https://leandeep.com/clean-architecture/

TDD (Test Driven Design)

Links

• Interesting

• Uncle bob about TDD

Programming Books

• Clean Architecture: A Craftsman's Guide to Software Structure and Design: A Craftsman's Guide to Software Structure and Design (Robert C.
• Growing Object-Oriented Software, Guided by Tests
• The Web Application Hacker's Handbook: Finding and Exploiting Security Flaws
• Refactoring: Improving the Design of Existing Code
• Test Driven Development: By Example
• Design Patterns: Elements of Reusable Object-Oriented Software
• Implementing Domain-Driven Design
• Domain-Driven Design: Tackling Complexity in the Heart of Software

Useful links

• html icons unicode/hex + examples : https://www.htmlsymbols.xyz/

• Accessibility web: https://webaim.org/intro/

• What i learn from senior

• Work routine: https://levelup.gitconnected.com/the-16-hour-developer-workout-6a9e10afa8c2

• runtimes v8 vs chakra

• why is nodejs single thread