DEV Community

Cover image for They Say Frontend is Easy
Syed Muhammad Ali Raza
Syed Muhammad Ali Raza

Posted on

They Say Frontend is Easy

They say becoming a front-end dev is easy...

Then, I have to show them the reality:

Beginner Level

  1. div
  2. button
  3. i
  4. b
  5. font-size: 16px
  6. index.html

Intermediate Level

  1. script
  2. img
  3. form
  4. iframe
  5. $(function(){...});

Advanced Level

  1. useEffect
  2. center a
  3. unit tests
  4. responsive layouts
  5. linting
  6. CSS cascade
  7. float
  8. Expert Level

    1. CORS
    2. E2E tests
    3. input validation
    4. Hydration errors
    5. font-size 14px safari zoom
    6. filter views
    7. @media print
    8. img srcSet
    9. pagination
    10. NaN / undefined / null

    Master Level

    1. infinite scroll
    2. layout shift
    3. calendar UI
    4. cache busting
    5. email CSS
    6. CSS selector perf
    7. event loop
    8. OAuth2
    9. user agents
    10. WASM
    11. this

    God Mode Difficulty

    1. caching headers
    2. "0 results found"
    3. WebRTC
    4. regex
    5. SameSite cookie
    6. closures
    7. CJS / ESM
    8. drag and drop UI
    9. rewrite it in Rust
    10. CSS full height on mobile
    11. mobile dialogs
    12. websockets
    13. cookie banners
    14. v8 stack traces
    15. dates
    16. localization
    17. local first
    18. rewrite it back in JavaScript
    19. new Response(new ReadableStream(...))
    20. microtask queue
    21. typeof [1, 2, 3]; // 'object'
    22. source maps
    23. WYSIWYG editor
    24. Samsung browser
    25. 2023 IE support
    26. time zones

    (Beyond God Mode)

    1. T extends [any, ...any[]] ? (T extends [...any[], infer _] ? 0 : 1):1

    And if that's not enough here is more 😅.

    1. Quantum Computing Integration
    2. WebAssembly (Wasm) Optimization
    3. Micro Frontends Architecture
    4. WebGPU Programming
    5. State Machines and Statecharts (XState)
    6. Advanced Compiler Techniques
    7. CRDTs (Conflict-Free Replicated Data Types)
    8. Advanced Accessibility Techniques
    9. Neural Network Integration in Frontend
    10. Edge Computing with Service Workers
    11. Blockchain-Based Web Applications
    12. Advanced Static Site Generation (SSG)
    13. Custom Rendering Pipelines
    14. Virtual and Augmented Reality (VR/AR) Frontend Development
    15. Multi-Threading in JavaScript
    16. Custom Browser Engines

    These topics push the boundaries of frontend development and require a deep understanding of both frontend and backend technologies.

    Still easy, you tell me?

    frontend #dev #webdev #developer #software

Top comments (2)

Collapse
 
anitaolsen profile image
Anita Olsen • Edited

How can img be on Intermediate Level? I have known and actively used the img tag since I started learning HTML at age 16!

Also the number 5. on the Advanced Level list is empty.

You can forget about 25. on God Mode Difficulty. Internet Explorer has retired and is officially out of support.

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

Basically img is intermediate I'm saying wrt this one srcset , size etc

Some comments may only be visible to logged-in visitors. Sign in to view all comments.