Skip to content

Commit b19278f

Browse files
leonardomsoleonardomso
committed
feat(beyond-33): add navigation structure and getting started overview
- Add Beyond 33 tab with all 29 concept pages organized by category - Add What's Next section linking to Beyond 33 from main concepts - Add Beyond 33 overview page explaining the extended curriculum - Update scope-and-closures to link to hoisting deep dive - Update gitignore for project configuration
1 parent 1b08687 commit b19278f

4 files changed

Lines changed: 257 additions & 5 deletions

File tree

‎.gitignore‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,3 @@ typings/
6262

6363
# webstore IDE created directory
6464
.idea
65-
66-
# OpenCode local files (keep skills tracked)
67-
.opencode/node_modules/
68-
.opencode/bun.lock
69-
.opencode/package.json

‎docs/beyond/getting-started/overview.mdx‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
title: "Beyond 33: Extended JavaScript Concepts"
3+
sidebarTitle: "Overview"
4+
description: "Go deeper into JavaScript with 29 advanced concepts that build on the original 33. Master topics like hoisting, proxies, observers, and performance optimization."
5+
---
6+
7+
You've learned the fundamentals. Now it's time to go deeper.
8+
9+
**Beyond 33** is an advanced extension of the original 33 JavaScript Concepts. These 29 additional concepts cover topics that experienced developers encounter in real-world applications — from memory management to browser APIs, from metaprogramming with Proxies to performance optimization patterns.
10+
11+
<Info>
12+
**Prerequisites:** Before diving into Beyond 33, make sure you're comfortable with the [original 33 concepts](/getting-started/about). These advanced topics build directly on that foundation.
13+
</Info>
14+
15+
---
16+
17+
## What's Covered
18+
19+
Beyond 33 is organized into 9 categories:
20+
21+
<CardGroup cols={2}>
22+
<Card title="Language Mechanics" icon="gear" href="/beyond/concepts/hoisting">
23+
Hoisting, Temporal Dead Zone, Strict Mode
24+
</Card>
25+
<Card title="Type System" icon="code" href="/beyond/concepts/javascript-type-nuances">
26+
Advanced type behavior, null vs undefined, Symbols, BigInt
27+
</Card>
28+
<Card title="Objects & Properties" icon="cube" href="/beyond/concepts/property-descriptors">
29+
Property descriptors, getters/setters, Proxy, Reflect, WeakMap/WeakSet
30+
</Card>
31+
<Card title="Memory & Performance" icon="bolt" href="/beyond/concepts/memory-management">
32+
Memory management, garbage collection, debouncing, throttling, memoization
33+
</Card>
34+
<Card title="Modern Syntax" icon="wand-magic-sparkles" href="/beyond/concepts/tagged-template-literals">
35+
Tagged template literals, computed property names
36+
</Card>
37+
<Card title="Browser Storage" icon="database" href="/beyond/concepts/localstorage-sessionstorage">
38+
localStorage, sessionStorage, IndexedDB, Cookies
39+
</Card>
40+
<Card title="Events" icon="bell" href="/beyond/concepts/event-bubbling-capturing">
41+
Event bubbling/capturing, delegation, custom events
42+
</Card>
43+
<Card title="Observer APIs" icon="eye" href="/beyond/concepts/intersection-observer">
44+
Intersection, Mutation, Resize, and Performance observers
45+
</Card>
46+
</CardGroup>
47+
48+
<Card title="Data Handling" icon="file-code" href="/beyond/concepts/json-deep-dive">
49+
JSON deep dive, Typed Arrays, Blob/File API, requestAnimationFrame
50+
</Card>
51+
52+
---
53+
54+
## Who Is This For?
55+
56+
| If you are... | Beyond 33 will help you... |
57+
|---------------|---------------------------|
58+
| **A mid-level developer** | Fill knowledge gaps and understand how JavaScript really works under the hood |
59+
| **Preparing for senior interviews** | Master advanced topics that interviewers love to ask about |
60+
| **Building complex applications** | Learn patterns for performance, memory management, and browser APIs |
61+
| **A curious developer** | Explore the deeper parts of JavaScript you've always wondered about |
62+
63+
---
64+
65+
## The Complete List
66+
67+
### Language Mechanics
68+
69+
| # | Concept | Description |
70+
|---|---------|-------------|
71+
| 34 | [Hoisting](/beyond/concepts/hoisting) | How JavaScript hoists variable and function declarations |
72+
| 35 | [Temporal Dead Zone](/beyond/concepts/temporal-dead-zone) | Why accessing `let`/`const` before declaration throws errors |
73+
| 36 | [Strict Mode](/beyond/concepts/strict-mode) | How `'use strict'` catches common mistakes |
74+
75+
### Type System
76+
77+
| # | Concept | Description |
78+
|---|---------|-------------|
79+
| 37 | [JavaScript Type Nuances](/beyond/concepts/javascript-type-nuances) | null vs undefined, short-circuit evaluation, typeof quirks, Symbols, BigInt |
80+
81+
### Objects & Properties
82+
83+
| # | Concept | Description |
84+
|---|---------|-------------|
85+
| 38 | [Property Descriptors](/beyond/concepts/property-descriptors) | writable, enumerable, configurable attributes |
86+
| 39 | [Getters & Setters](/beyond/concepts/getters-setters) | Computed properties with `get` and `set` |
87+
| 40 | [Object Methods](/beyond/concepts/object-methods) | Object.keys(), values(), entries(), freeze(), seal() |
88+
| 41 | [Proxy & Reflect](/beyond/concepts/proxy-reflect) | Intercept object operations for metaprogramming |
89+
| 42 | [WeakMap & WeakSet](/beyond/concepts/weakmap-weakset) | Weak references and automatic garbage collection |
90+
91+
### Memory & Performance
92+
93+
| # | Concept | Description |
94+
|---|---------|-------------|
95+
| 43 | [Memory Management](/beyond/concepts/memory-management) | Memory lifecycle, stack vs heap, memory leaks |
96+
| 44 | [Garbage Collection](/beyond/concepts/garbage-collection) | Mark-and-sweep, generational GC, writing efficient code |
97+
| 45 | [Debouncing & Throttling](/beyond/concepts/debouncing-throttling) | Optimize event handlers and reduce API calls |
98+
| 46 | [Memoization](/beyond/concepts/memoization) | Cache function results for performance |
99+
100+
### Modern Syntax & Operators
101+
102+
| # | Concept | Description |
103+
|---|---------|-------------|
104+
| 47 | [Tagged Template Literals](/beyond/concepts/tagged-template-literals) | Custom string processing and DSLs |
105+
| 48 | [Computed Property Names](/beyond/concepts/computed-property-names) | Dynamic keys in object literals |
106+
107+
### Browser Storage
108+
109+
| # | Concept | Description |
110+
|---|---------|-------------|
111+
| 49 | [localStorage & sessionStorage](/beyond/concepts/localstorage-sessionstorage) | Web Storage APIs for client-side data |
112+
| 50 | [IndexedDB](/beyond/concepts/indexeddb) | Large-scale structured client-side storage |
113+
| 51 | [Cookies](/beyond/concepts/cookies) | Read, write, and secure cookie handling |
114+
115+
### Events
116+
117+
| # | Concept | Description |
118+
|---|---------|-------------|
119+
| 52 | [Event Bubbling & Capturing](/beyond/concepts/event-bubbling-capturing) | The three phases of event propagation |
120+
| 53 | [Event Delegation](/beyond/concepts/event-delegation) | Handle events efficiently with bubbling |
121+
| 54 | [Custom Events](/beyond/concepts/custom-events) | Create and dispatch your own events |
122+
123+
### Observer APIs
124+
125+
| # | Concept | Description |
126+
|---|---------|-------------|
127+
| 55 | [Intersection Observer](/beyond/concepts/intersection-observer) | Detect element visibility for lazy loading |
128+
| 56 | [Mutation Observer](/beyond/concepts/mutation-observer) | Watch DOM changes in real-time |
129+
| 57 | [Resize Observer](/beyond/concepts/resize-observer) | Respond to element size changes |
130+
| 58 | [Performance Observer](/beyond/concepts/performance-observer) | Measure page performance and Core Web Vitals |
131+
132+
### Data Handling
133+
134+
| # | Concept | Description |
135+
|---|---------|-------------|
136+
| 59 | [JSON Deep Dive](/beyond/concepts/json-deep-dive) | Replacers, revivers, circular references, custom toJSON |
137+
| 60 | [Typed Arrays & ArrayBuffers](/beyond/concepts/typed-arrays-arraybuffers) | Binary data handling for WebGL and file processing |
138+
| 61 | [Blob & File API](/beyond/concepts/blob-file-api) | Create, read, and manipulate binary data |
139+
| 62 | [requestAnimationFrame](/beyond/concepts/requestanimationframe) | Smooth 60fps animations synced with browser repaint |
140+
141+
---
142+
143+
## Ready to Begin?
144+
145+
<CardGroup cols={2}>
146+
<Card title="Start with Hoisting" icon="arrow-right" href="/beyond/concepts/hoisting">
147+
Begin your Beyond 33 journey with the first concept
148+
</Card>
149+
<Card title="Back to Fundamentals" icon="arrow-left" href="/getting-started/about">
150+
Review the original 33 concepts first
151+
</Card>
152+
</CardGroup>

‎docs/concepts/scope-and-closures.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1088,6 +1088,9 @@ cleanup(); // Removes listener, allows memory to be freed
10881088
<Card title="Call Stack" icon="layer-group" href="/concepts/call-stack">
10891089
How JavaScript tracks function execution and manages scope
10901090
</Card>
1091+
<Card title="Hoisting" icon="arrow-up" href="/beyond/concepts/hoisting">
1092+
Deep dive into how JavaScript hoists declarations
1093+
</Card>
10911094
<Card title="IIFE, Modules and Namespaces" icon="box" href="/concepts/iife-modules">
10921095
Patterns that leverage scope for encapsulation
10931096
</Card>

‎docs/docs.json‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,9 +138,111 @@
138138
"concepts/design-patterns",
139139
"concepts/clean-code"
140140
]
141+
},
142+
{
143+
"group": "What's Next?",
144+
"icon": "arrow-right",
145+
"pages": [
146+
"beyond/getting-started/overview"
147+
]
141148
}
142149
]
143150
},
151+
{
152+
"tab": "Beyond 33",
153+
"groups": [
154+
{
155+
"group": "Getting Started",
156+
"icon": "rocket",
157+
"pages": [
158+
"beyond/getting-started/overview"
159+
]
160+
},
161+
{
162+
"group": "Language Mechanics",
163+
"icon": "gear",
164+
"pages": [
165+
"beyond/concepts/hoisting",
166+
"beyond/concepts/temporal-dead-zone",
167+
"beyond/concepts/strict-mode"
168+
]
169+
},
170+
{
171+
"group": "Type System",
172+
"icon": "code",
173+
"pages": [
174+
"beyond/concepts/javascript-type-nuances"
175+
]
176+
},
177+
{
178+
"group": "Objects & Properties",
179+
"icon": "cube",
180+
"pages": [
181+
"beyond/concepts/property-descriptors",
182+
"beyond/concepts/getters-setters",
183+
"beyond/concepts/object-methods",
184+
"beyond/concepts/proxy-reflect",
185+
"beyond/concepts/weakmap-weakset"
186+
]
187+
},
188+
{
189+
"group": "Memory & Performance",
190+
"icon": "bolt",
191+
"pages": [
192+
"beyond/concepts/memory-management",
193+
"beyond/concepts/garbage-collection",
194+
"beyond/concepts/debouncing-throttling",
195+
"beyond/concepts/memoization"
196+
]
197+
},
198+
{
199+
"group": "Modern Syntax & Operators",
200+
"icon": "wand-magic-sparkles",
201+
"pages": [
202+
"beyond/concepts/tagged-template-literals",
203+
"beyond/concepts/computed-property-names"
204+
]
205+
},
206+
{
207+
"group": "Browser Storage",
208+
"icon": "database",
209+
"pages": [
210+
"beyond/concepts/localstorage-sessionstorage",
211+
"beyond/concepts/indexeddb",
212+
"beyond/concepts/cookies"
213+
]
214+
},
215+
{
216+
"group": "Events",
217+
"icon": "bell",
218+
"pages": [
219+
"beyond/concepts/event-bubbling-capturing",
220+
"beyond/concepts/event-delegation",
221+
"beyond/concepts/custom-events"
222+
]
223+
},
224+
{
225+
"group": "Observer APIs",
226+
"icon": "eye",
227+
"pages": [
228+
"beyond/concepts/intersection-observer",
229+
"beyond/concepts/mutation-observer",
230+
"beyond/concepts/resize-observer",
231+
"beyond/concepts/performance-observer"
232+
]
233+
},
234+
{
235+
"group": "Data Handling",
236+
"icon": "file-code",
237+
"pages": [
238+
"beyond/concepts/json-deep-dive",
239+
"beyond/concepts/typed-arrays-arraybuffers",
240+
"beyond/concepts/blob-file-api",
241+
"beyond/concepts/requestanimationframe"
242+
]
243+
}
244+
]
245+
},
144246
{
145247
"tab": "Community",
146248
"groups": [

0 commit comments

Comments
 (0)