Skip to content

Commit 35ddb2f

Browse files
OluwasetemiOluwasetemi
committed
update
1 parent be77f44 commit 35ddb2f

28 files changed

+3009
-277
lines changed

‎components/AsyncComponent.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<button @click="run">Run Async Iterator</button>
4+
<div v-for="num in numbers" :key="num" class="text-sm animate-pulse text-center">{{ num }}</div>
5+
</div>
6+
</template>
7+
8+
<script setup>
9+
import { ref } from "vue";
10+
11+
let numbers = ref([]);
12+
13+
const run = async () => {
14+
async function* generateAsyncSequence(start, end) {
15+
for (let i = start; i <= end; i++) {
16+
await new Promise(resolve => setTimeout(resolve, 1000));
17+
numbers.value.push(i);
18+
}
19+
}
20+
const iterator = generateAsyncSequence(1, 5);
21+
for await (const num of iterator) {
22+
console.log("Generated:", num);
23+
}
24+
}
25+
</script>

‎components/CharacterClasses.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div>
3+
<h2>Character Classes</h2>
4+
<p>Character classes such as <code>[a-z]</code>, <code>\w</code>, and <code>\d</code> match different sets of
5+
characters.</p>
6+
7+
<div class="visual-placeholder">
8+
<p><strong>Visual:</strong> Illustration of character ranges and classes.</p>
9+
</div>
10+
11+
<div class="tester">
12+
<h3>{monaco-run} Tester</h3>
13+
<pre><code>const regex = /[a-z]/;
14+
console.log(regex.test('Hello'));
15+
console.log(regex.test('123'));
16+
console.log(regex.test('hello'));</code></pre>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script setup>
22+
// Add any script logic here if needed
23+
</script>

‎components/PatternsFlags.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<h2>Patterns and Flags</h2>
4+
<p>Learn about patterns and how flags like <code>g</code>, <code>i</code>, and <code>m</code> can change the way
5+
regular expressions behave.</p>
6+
7+
<div class="visual-placeholder">
8+
<p><strong>Visual:</strong> A diagram illustrating different patterns and modifiers.</p>
9+
</div>
10+
11+
<div class="tester">
12+
<h3>{monaco-run} Tester</h3>
13+
<pre><code>const regex = /pattern/g;
14+
console.log(regex.test('This is a pattern example'));
15+
console.log(regex.test('Another pattern here'));</code></pre>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script setup>
21+
// Add any script logic here if needed
22+
</script>

‎components/PerformanceTips.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<h2>Performance Tips</h2>
4+
5+
<h3>Lazy vs Greedy</h3>
6+
<p>
7+
Greedy quantifiers (e.g., <code>*</code>, <code>+</code>) try to match as much
8+
as possible.
9+
</p>
10+
<p>
11+
Lazy quantifiers (e.g., <code>*?</code>, <code>+?</code>) try to match as
12+
little as possible.
13+
</p>
14+
15+
<h3>Catastrophic Backtracking</h3>
16+
<p>
17+
Be aware of patterns that can backtrack excessively and cause performance
18+
issues.
19+
</p>
20+
</div>
21+
</template>
22+
23+
<script setup>
24+
// Add any script logic here if needed
25+
</script>

‎components/RegExpGolf.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div>
3+
<h2>RegExp Golf Exercise</h2>
4+
<p>Minimize the regular expression pattern to achieve the desired matching.</p>
5+
6+
<div class="exercise">
7+
<h3>Exercise</h3>
8+
<pre><code>.*?example.*?</code></pre>
9+
<p>Can you make this pattern shorter while keeping the same functionality?</p>
10+
</div>
11+
12+
<div v-click class="solution">
13+
<h3>Solution</h3>
14+
<pre><code>.*example.*</code></pre>
15+
<p>Explanation: The greedy quantifiers work just as well here and are shorter.</p>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script setup>
21+
// Add any script logic here if needed
22+
</script>
23+
24+
<style scoped>
25+
.exercise {
26+
margin: 1rem 0;
27+
padding: 1rem;
28+
border: 1px solid #ddd;
29+
border-radius: 4px;
30+
}
31+
32+
.solution {
33+
margin: 1rem 0;
34+
padding: 1rem;
35+
border: 1px solid #28a745;
36+
border-radius: 4px;
37+
background-color: #f8f9fa;
38+
}
39+
40+
pre {
41+
background-color: #f4f4f4;
42+
padding: 0.5rem;
43+
border-radius: 4px;
44+
}
45+
</style>

‎components/UnicodeFlags.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div>
3+
<h2>Unicode: flag "u" and class "\p{...}"</h2>
4+
<p>Explains how the <code>u</code> flag allows Unicode support, and how to match Unicode properties with
5+
<code>\p{}</code>.</p>
6+
7+
<div class="visual-placeholder">
8+
<p><strong>Visual:</strong> Show support for different Unicode categories.</p>
9+
</div>
10+
11+
<div class="tester">
12+
<h3>{monaco-run} Tester</h3>
13+
<pre><code>const regex = /\p{L}/u;
14+
console.log(regex.test('Hello'));
15+
console.log(regex.test('こんにちは'));
16+
console.log(regex.test('123'));</code></pre>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script setup>
22+
// Add any script logic here if needed
23+
</script>

‎components/canvas.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<canvas
3+
ref="webApiCanvas"
4+
width="300"
5+
height="150"
6+
class="border border-gray-300 mt-4"
7+
></canvas>
8+
9+
<button @click="demoWebAPIs" class="play-btn mt-2">
10+
▶️ Demo Web APIs
11+
</button>
12+
13+
</template>
14+
15+
<script setup>
16+
import { ref, onMounted } from "vue";
17+
18+
const webApiCanvas = ref(null);
19+
20+
const demoWebAPIs = () => {
21+
const canvas = webApiCanvas.value;
22+
const ctx = canvas.getContext("2d");
23+
24+
// Canvas API demo
25+
ctx.fillStyle = "#3498db";
26+
ctx.fillRect(10, 10, 80, 80);
27+
28+
ctx.fillStyle = "#e74c3c";
29+
ctx.fillRect(100, 10, 80, 80);
30+
31+
ctx.fillStyle = "#2ecc71";
32+
ctx.fillRect(190, 10, 80, 80);
33+
34+
// Text API demo
35+
ctx.fillStyle = "black";
36+
ctx.font = "16px Arial";
37+
ctx.fillText("Web APIs in Action!", 50, 120);
38+
39+
// Web Storage API demo
40+
localStorage.setItem("demo_timestamp", Date.now());
41+
42+
// Notification API demo (if permission granted)
43+
if (Notification.permission === "granted") {
44+
new Notification("Web API Demo", {
45+
body: "Canvas and Storage APIs demonstrated!",
46+
icon: "🎨",
47+
});
48+
}
49+
};
50+
</script>

‎components/click-hack.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
2+
<template>
3+
<button @click="openSecurePopup" class="btn-primary">
4+
🔒 Open Secure Popup
5+
</button>
6+
7+
<div v-if="popupMessage" class="message-box">
8+
{{ popupMessage }}
9+
</div>
10+
11+
<canvas
12+
ref="securityCanvas"
13+
width="300"
14+
height="200"
15+
@click="demonstrateClickjacking"
16+
class="border border-gray-300 cursor-pointer"
17+
></canvas>
18+
19+
<button @click="playSecurityDemo" class="play-btn">
20+
▶️ Play Security Demo
21+
</button>
22+
</template>
23+
24+
<script setup>
25+
import { ref } from "vue";
26+
27+
const popupMessage = ref("");
28+
const securityCanvas = ref(null);
29+
30+
const openSecurePopup = () => {
31+
const popup = window.open("", "_blank", "width=400,height=300");
32+
popup.document.write(`
33+
<html><body>
34+
<h3>Secure Popup</h3>
35+
<p>This popup demonstrates secure communication.</p>
36+
<button onclick="parent.postMessage('Hello from popup', '*')">Send Message</button>
37+
</body></html>
38+
`);
39+
};
40+
41+
const demonstrateClickjacking = () => {
42+
const canvas = securityCanvas.value;
43+
const ctx = canvas.getContext("2d");
44+
45+
// Draw clickjacking visualization
46+
ctx.fillStyle = "red";
47+
ctx.fillRect(0, 0, canvas.width, canvas.height);
48+
ctx.fillStyle = "white";
49+
ctx.font = "16px Arial";
50+
ctx.fillText("Clickjacking Protection Active", 10, 100);
51+
};
52+
53+
const playSecurityDemo = () => {
54+
const canvas = securityCanvas.value;
55+
const ctx = canvas.getContext("2d");
56+
57+
// Animate security demonstration
58+
let frame = 0;
59+
const animate = () => {
60+
ctx.clearRect(0, 0, canvas.width, canvas.height);
61+
62+
// Draw frame border
63+
ctx.strokeStyle = frame % 60 < 30 ? "green" : "red";
64+
ctx.lineWidth = 3;
65+
ctx.strokeRect(5, 5, canvas.width - 10, canvas.height - 10);
66+
67+
ctx.fillStyle = "black";
68+
ctx.font = "14px Arial";
69+
ctx.fillText(
70+
`Frame Security: ${frame % 60 < 30 ? "SAFE" : "BLOCKED"}`,
71+
10,
72+
30
73+
);
74+
75+
frame++;
76+
if (frame < 120) requestAnimationFrame(animate);
77+
};
78+
79+
animate();
80+
};
81+
82+
// Listen for popup messages
83+
window.addEventListener("message", (event) => {
84+
popupMessage.value = event.data;
85+
});
86+
</script>

0 commit comments

Comments
 (0)