Frontend development

[Security2431]

Good to know:

• [ ] https://gist.github.com/dypsilon/5819504?permalink_comment_id=1763305
• [ ] Free courses https://www.youtube.com/@freecodecamp/videos

[Security2431]

Javascript

• Variables: declarations (var, let, const), scope (block, functional, global), hoisting
• Data Types: primitive types (strings, number, boolean, undefined, null, Symbol), Object, typeof operator
• Type Casting: explicit casting, implicit casting, type conversion vs coercion
• Operators: assignment, comparison, arithmetic, bitwise, logical, conditional
• Equality Comparisons: ==, ===, Object.is
• Control Flow: if, else, switch
• Loops: for, for…in, for…of, while, do...while, break, continue
• Functions: function declaration, function expression, arrow functions, parameters, return values
• Arrays: creation, methods (push, pop, shift, unshift, map, filter, reduce)
• Objects: creation, properties, methods, this keyword
• Classes
• Data Structures: Map, WeakMap, Set, WeakSet, JSON
• Error Handling: try, catch, finally, throw, Error objects
• Asynchronous JavaScript: Promises, async/await, callbacks, callback hell
• DOM Manipulation: document.getElementById, document.querySelector, addEventListener, innerHTML, style
• Events: click, submit, load, change, focus, blur, event propagation (bubbling and capturing)
• Working with APIs: fetch
• Browser Storage: local storage, web storage
• Modules: CommonJS, ECMAScript Modules
• OOP
• SOLID
• Generator use cases
• Getters Setters
• Deep cloning
• Higher order functions
• new operator
• Class Inheritance
• Super keyword
• Async await
• Constructors
• Static methods
• Immutability
• Pure functions
• typeof / instanceof
• Краткое руководство по ооп в js
• Принципи ООП Javascript
• Цикл подій
• Event Loop, Callbacks, Promises, and Async/Await in JavaScript
• Разбираемся с Async/Await в JavaScript на примерах
  • Event loops (browser)
  • Event loops (server)
  • Render page in browser
  • Closures
  • Sets and maps
  • Iterators and generators
  • Metaprogramming
  • Microtask vs Macrotask

Typescript

• Basics Types: string, number, boolean, array, tuple, enum, any, void, null, undefined, never, unknown
• Type Assertion: as keyword, <> syntax
• Interfaces: defining, extending, optional properties, readonly properties, dynamic keys
• Classes: properties, methods, constructors, inheritance, access modifiers (public, private, protected)
• Functions: type annotations, optional and default parameters, rest parameters
• Generics: generic functions, generic classes
• Modules: import, export, namespaces
• Utility types: Partial, Pick, Omit, Readonly, Record, Exclude, etc

Frameworks

• ReactJS
  • Animation
  • Hooks
  • Routing
  • Form validation
  • Higher-Order Components
  • Performance
  • Unit testing
  • Isomorphic React Applications
  • Offline application
  • Internationalization
  • Memory leaks
  • Portals
  • Class Components
  • State & Lifecycle Hooks (useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback)
  • Handling Events
  • Forms
  • Component composition
  • Custom Hooks
  • Context
  • Render Props
  • Refs
  • Error Boundaries
  • Props and State
  • Lists and Keys
  • Building Simple Forms
  • Function Components
  • Reconciliation
  • Life cycle
  • Hooks under the hood
  • Hooks React 19+
  • Project architecture
  • Notifications
  • WebWorker
  • ServiceWorker
  • Optimization
• NextJS
  • SSR
  • Cache
  • Optimization
  • Next vs React

  • Redux

• Middlewares
• Reducers
• Thunks
• Action Creators
• Style Guide
• Static Typing
• Redux Saga
• [React и Redux 4. Redux Saga, Генераторы, Redux Thunk.](https://www.youtube.com/watch?v=DG9rXV1kI0o
• Сага о редаксе: redux-saga
• Accessing the Store
• Redux
• React Best Practices
• Zustand
• Redux-saga
• MobX
• Other frameworks

API

• RestFull API
• GraphQL
• gRPC
• WebSocket
• SSE
• TanStack Query
• CORS
• Cache

• Cloud solutions

• Docker
• Kubernetes
• Jenkins
• Terraform
• Ansible
• RabbitMQ
• AWS
  • AWS Labda
• Cloudfront
• Azure

Architecture

• Design Patters
  • SOLID
  • GOF
  • FP
• Algorithms
  • Big O Annotation
• Serverless
• MicroFrontend
• Microservices
• Frontend system design
• Software Architecture
  • DDD/Clean/Hexagonal/Layered
• FE architecture
• System Design Concept
  • ❗ System Design
  • Scalability https://blog.algomaster.io/
• Scale Software Development
• BFF
• PWA

Networking:

• HTTPS vs HTTP
  • Headers
  • Status Codes
  • Content Negotiation
  • HTTP caching
• DNS & IP protocols
• Reverse-proxy

CI/CD

• Github Actions
• Jenkins
• https://railway.app/

Database

• Redis
• PostgreSQL

Testing

• Playwright
• Cypress

Languages

• Python

AI

• OpenAI

Mobile (2 months)

• React Native
  • Basics: View, Text, Image, Touchables, Button, Alert, platform-specific code
  • Layouts: dimensions, detecting orientation, Flexbox, absolute and relative
  • Styling: StyleSheet, borders, shadows, padding, styling text, icons, platformspecific styles
  • Input Components: TextInput, Switch, Picker, custom pickers
  • Navigation: React Navigation, stack navigator, tab navigator, drawer navigator
  • Native Modules: linking native code, using third-party libraries
  • Offline Support: detecting network status, caching, AsyncStorage
  • Authentication: auth providers
  • Notifications: push notification services
  • Distribution: optimizing assets, building, error reporting, environment
  • management