alcantariel/front-end-engineer

WIP: topics every front-end engineer should know

Front-end Engineer

Topics every front-end engineer should know.

Topics

• HTML
  • Anatomy of an HTML Element
  • Block vs Inline
  • Empty Elements
  • Attributes
  • Anatomy of an HTML Document
  • Semantics
• CSS
  • Semantics
  • Methodologies
    • CSS-in-JS
    • BEM
  • styled-components
  • CSS Modules
  • Themes
  • Layout
    • Flexbox
    • Grid
• JavaScript
  • Semantics
• Accessibility
• Package Managers
  • npm
  • yarn
  • pnpm
• Build Tools
  • Task Runners
    • npm scripts
  • Linters
    • ESLint
  • Formatters
    • Prettier
  • Transpilers
    • Babel
• Module Bundlers
  • webpack
  • Rollup
• Frameworks
  • React
  • Next.js
• Rendering
  • Web Vitals
  • Client-Side Rendering
  • Server-Side Rendering
  • Static Site Generator
• Mocks
  • Mirage JS
  • Mock Service Worker
• Tests
  • Jest
  • React Testing Library
    • Components
    • Hooks
    • Integration
  • Cypress
• Documentation
  • Storybook
  • Docusaurus
• TypeScript
• Progressive Web App
• Service Worker
• Web Sockets
• Performance
  • Caching
  • CDN
  • Lazy Loading
  • Dynamic Import
  • Memoization
  • Images
• Security
  • Open Web Application Security Project (OWASP)
  • HTTP Headers
  • Cross-Origin Resource Sharing (CORS)
  • Clickjacking
  • Cross-Site Scripting (XSS)
  • Cross-Site Request Forgery (CSRF)
  • Distributed Denial of Service (DDoS)
  • Man-in-the-Middle (MitM)
  • SQL Injection
  • Unrestricted File Upload
• Web Storage API
  • Local Storage
  • Session Storage
• Cookie
  • Attributes
  • Cookies and Security
• SEO
  • Semantics in HTML
  • Meta Tags
  • manifest.json
  • robots.txt
• Architecture
  • Micro Front-end
• Monorepo
  • Turborepo
  • NX
  • Yarn Workspaces
• Principles
  • SOLID
  • Test-Driven Development (TDD)
  • Don't Repeat Yourself (DRY)
  • Keep It Simple, Stupid (KISS)
  • You Aren't Gonna Need It (YAGNI)
• WebAssembly