Raulen/learning

Roadmap for software engineer, sandbox, algorithms training, it also contains my daily task dashboard

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

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

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

• 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
  • hooks https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/
  • 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.
• 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
• Debug tools
• Deployment
• Packaging
• create API without frameworks

Backend middle

• oauth

• basic authentication

• JWT

• openId

• SSO

• Take a framework

• Websockets

• Dependendy Injection

• Database

  • ORM

• security

  • CORS
  • XSS
  • CSRF

Backend advance

• Serverless
• Microservices
• 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
• 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

Network

• skills
• cryptography

Technology

• Singlepage SPA
• PWA

Design UX

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

Useful links

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