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
6. linting
7. CSS cascade
8. float

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

Comments

[Anita Olsen]

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.

[Syed Muhammad Ali Raza]

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