first commit

concepts/01-event-loop.md

@@ -0,0 +1,38 @@
+# The Event Loop
+
+The event loop is how javascript code is being run in the browser.
+
+The call stack is the order of code. JavaScript is a single-threaded language, which means that only one thing can be run at the time.
+
+The queue is the order of which the code gets run.
+
+Macrotasks and Microtasks.
+
+You can block the single call stack by looping the callstack and then freeze the renders of the UI.
+
+Using Microtasks(I.E Promises), you can kind of stop the blocking, but not entirely. You can flood the microtaskqueue with many concurrent microtask promises. Microtasks is also called the VIP queue.
+
+When yielding to the event loop you will mix the callstack, microtask and macrotask and kind of trick javascript to render more frequent. Making it a smoother UI experience. This is great for handling hard computational data, large datasets, formatting code or processing datastreams.
+
+Yielding can be done by wrapping your promises in a setTimeout(function, 0) inside the concurrenct async loop. This will add to the macrotask loop which clears the queue regularly and lets the UI render.
+
+By using setTimeout you add a MacroTask in between the microtasks queue before adding a new to the macrotask(vip) queue. This opens the callstack for a render.
+
+The best way to create a yielding function in modern JavaScript
+
+```javascript
+// A helper function you can paste into your utils
+const yieldToMain = () => new Promise(resolve => setTimeout(resolve, 0));
+
+// Usage inside your heavy AI loop
+async function processLargeData() {
+  for (let i = 0; i < 10000; i++) {
+    doHeavyMath(i); // Example function
+
+    // Yield every 50 iterations to keep UI buttery smooth (60fps)
+    if (i % 50 === 0) {
+      await yieldToMain(); 
+    }
+  }
+}
+```

concepts/02-generators.md

@@ -0,0 +1,33 @@
+# Generators
+
+Generator functions can be used to yield and use the event loop to your liking.
+
+Meaning that when having to do with heavy functions or large datasets, we can open the event loop by yielding in the loop. This makes the UI i.e render between heavy functions. Combine it with setTimeout(function, 0) for great use. To unblock the UI we await a MacroTask (useTimeout()). This forces the execution out of the call stack and allows the browser to paint before continuing.
+
+Generator functions are great for use when streaming data from a source. This could be token response from an AI.
+
+Great for handling large datasets i.e a 10gb csv file where we can yield each line, which opens up the thread and the event loop. This is called ```Lazy Evaluation```, which means we only keep one line open in memory at a time instead of loading all of the 10gb. This is great for performance.
+
+Frontend wise, it can be used in pagination or when fetching from many URLs with numbered params for example. This could allow for smooth animations when fetching as well.
+
+Below is an example of mocking and processing a datastream using a generator function.
+
+```typescript
+export async function* mockAIStream() {
+
+    const response = "this is a mock response and a lot of text text text, and a lot of text text text,and a lot of text text text,and a lot of text text text,and a lot of text text text,and a lot of text text text,and a lot of text text text lot of text text text,and a lot of text text text,and a lot of text text text,lot of text text text,and a lot of text text text,and a lot of text text text,lot of text text text,and a lot of text text text,and a lot of text text text,lot of text text text,and a lot of text text text,and a lot of text text text,lot of text text text,and a lot of text text text,and a lot of text text text,lot of text text text,and a lot of text text text,and a lot of text text text,lot of text text text,and a lot of text text text,and a lot of text text text,,";
+    const tokens = response.split(" ");
+
+    for (const token of tokens) {
+        // Simulate the delay. Netowrk latency or anything. Process time
+        const delay = Math.floor(Math.random() * 300) + 100; // Random delay between 100ms and 400ms
+        await new Promise((resolve) => setTimeout(resolve, delay));
+
+        // Yield the token. Pass it to the caller.
+        yield token + " ";
+        
+
+    }
+
+}
+```

concepts/03-react-vs-svelte.md

@@ -0,0 +1,70 @@
+# 2025-12-22
+
+Today we are playing around with Svelte and React.
+
+Comparing the runtime and performance.
+
+React and Svelte are both JavaScript frontend-frameworks for building user interfaces. Although they do the same things, they do things very differently.
+
+React uses the Virtual DOM to update the UI. The Virtual DOM is something that React creates and compares to the real DOM. It then changes the real DOM based on the differences it found.
+This approach takes some extra computing/browser power because it causes a lot of renders of the DOM.
+This is not necessarily a bad thing, because the React framework is optimized to do it and can handle complex UIs very well.
+
+Svelte is a little bit different. Svelte is a compiler that compiles your code to optimized JavaScript at build time. This means that there is no Virtual DOM and no extra renders. All functions and logic in the script tags are compiled to be optimized JavaScript that directly manipulates the DOM. Just like Vanilla JavaScript. This makes Svelte faster, causes fewer renders, and uses less browser power.
+This is especially beneficial for smaller applications or applications that need to run on low-power devices.
+But bigger applications can become a bit more complex to manage because of the lack of a Virtual DOM and the management of state can become tricky.
+
+One isn't better that the other, but it is good to know the differences and knowing that there are multiple ways to achieve the same goal.
+
+Know when to use the right framework.
+
+This is an example of Svelte code.
+
+```svelte
+<script>
+  console.log("Svelte Script Ran");
+  // Standard Variables
+  let count = 0;
+  // Reactive Declarations
+  $: doubleCount = count * 2;
+  const increment = () => {
+    count += 1;
+  };
+</script>
+
+<div>
+  count is {count}
+  Double count is {doubleCount}
+
+  <button onclick={increment}> Count </button>
+</div>
+
+
+```
+
+This is an example of React code.
+
+```jsx
+import React from "react";
+import "./App.css";
+
+function App() {
+  const [count, setCount] = React.useState(0);
+  //Derived Variable
+  const doubleCount = count * 2;
+
+  console.log("App Rendered");
+  return (
+    <>
+      <div>
+        <h1>React Double Count</h1>
+        <p>Count: {count}</p>
+        <p>Double Count: {doubleCount}</p>
+        <button onClick={() => setCount(count + 1)}>Increment Count</button>
+      </div>
+    </>
+  );
+}
+
+export default App;
+```