If you have just stumbled upon my OSD600 series of blog posts, it has been created to document and share my learnings as I progress through my Open Source Development college course.

In this blog post, I’ll share my progress on the course's final assignment, Release 0.4.

A bit about Release 0.4

For our final assignment, we were tasked to leverage the skills and experience we’ve built over the term to work on something meaningful to us in one way or another.

If you missed how I started working on 0.4, check out my /

Setup

install , name your PRs accordingly

Production

Build the application for production:
```
npm run build
```
Locally preview production build:
```
npm run preview
```
Check out the

The project I’m contributing to, AIbyss, uses various tools and technologies, many of which were entirely new to me. Familiarizing myself with the stack was one of the goals I set for Release 0.4, so I took the time to explore the project structure and dive into the documentation for each tool and framework.

Now, I have a basic understanding of building Vue.js apps!

The key components of the stack:

- a "progressive JavaScript framework" focused on building user interfaces. Vue.js piqued my interest for a while, and after finally using it in this project, I can see why it’s so popular in the developer community - it's both intuitive and flexible.

posted on

When I first picked up this issue, I thought it would be straightforward since the repo maintainer provided clear guidance on where to start. However, it turned out to be more challenging than expected. The task involved a lot of debugging and required a deeper understanding of how routing and middleware were set up in the project.

<template> <div class="flex flex-col h-screen w-screen"> <GlobalHeader /> <div class="flex flex-grow p-1 h-[90%]"> <div ref="resizeEditorElement" class="flex min-w-[300px] h-full w-1/2 mr-2" > <CodeEditor /> </div> <div ref="separator" class="w-1 bg-gray-300 cursor-ew-resize" /> <div ref="resizeGameElement" class="flex min-w-[300px] w-1/2 overflow-auto" > <GameScreen /> </div> </div> </div> </template> <script lang="ts"> import { defineComponent, ref, onMounted, onUnmounted } from "vue"; export default defineComponent({ setup() { const isResizing = ref(false); const initialX = ref(0); const initialWidthEditor = ref(0); const initialWidthGame = ref(0); const resizeEditorElement = ref<HTMLDivElement | null>(null); const resizeGameElement = ref<HTMLDivElement | null>(null); const separator = ref<HTMLDivElement | null>(null); const startResize = (e: MouseEvent) => { if (!resizeEditorElement.value) { throw new Error("unexpected: no resizeEditorElement"); } if (!resizeGameElement.value) { throw new Error("unexpected: no resizeGameElement"); } isResizing.value = true; initialX.value = e.clientX; initialWidthEditor.value = resizeEditorElement.value.offsetWidth; initialWidthGame.value = resizeGameElement.value.offsetWidth; }; const handleResize = (e: MouseEvent) => { if (!resizeEditorElement.value) { throw new Error("unexpected: no resizeEditorElement"); } if (!resizeGameElement.value) { throw new Error("unexpected: no resizeGameElement"); } if (isResizing.value) { const dx = e.clientX - initialX.value; const newWidthEditor = initialWidthEditor.value + dx; const newWidthGame = initialWidthGame.value - dx; resizeEditorElement.value.style.width = `${newWidthEditor}px`; resizeGameElement.value.style.width = `${newWidthGame}px`; } }; const stopResize = () => { isResizing.value = false; }; onMounted(() => { if (!separator.value) { throw new Error("unexpected: no separator"); } separator.value.addEventListener("mousedown", startResize); document.addEventListener("mousemove", handleResize); document.addEventListener("mouseup", stopResize); }); onUnmounted(() => { if (!separator.value) { throw new Error("unexpected: no separator"); } separator.value.removeEventListener("mousedown", startResize); document.removeEventListener("mousemove", handleResize); document.removeEventListener("mouseup", stopResize); }); return { resizeEditorElement, resizeGameElement, separator, }; }, }); </script>

Description

Limitations

Checklist

Afterthoughts...

Community-Analysen & Experten-Meinungen 0

Verwandte Story-Cluster & Quellen (Vektor-KI)

Auch interessante Nachrichten The Open Source Finale: Pt. 2

The Gemini desktop app is now available for Windows

Burn Out, Or Fade Away

Windows 11 KB5129195 is out after Microsoft confirms major issues with the September 2026 update, but it won’t fix AMD GPU errors

Erkennen Sie smarte Brillen mit Nearby Glasses und schützen Sie Ihre Privatsphäre

Profi-Edelstahlpfanne von WMF jetzt zum halben Preis erhältlich

Microsoft nervt Office-Nutzer mit Upgrade-Bannern, obwohl diese längst bezahlt haben

tsecurity.de LIVE

TSecurity.de Live Threat Radar

The Open Source Finale: Pt. 2

Hello, Blog

A bit about Release 0.4

Setup

Production

How does this PR impact the user?

🔖 Gespeicherte Artikel

myDraft App

Aktivitäten deiner Analysten

Neues Thema oder Eilmeldung einreichen

Heiß diskutierte Einreichungen

tsecurity.de LIVE

Themen-Radar & Intelligence Matrix

TSecurity.de Live Threat Radar

The Open Source Finale: Pt. 2

Hello, Blog

A bit about Release 0.4

Setup

Production

How does this PR impact the user?

Description

Limitations

Checklist

Afterthoughts...

Community-Analysen & Experten-Meinungen 0

Verwandte Story-Cluster & Quellen (Vektor-KI)

Auch interessante Nachrichten The Open Source Finale: Pt. 2

The Gemini desktop app is now available for Windows

Burn Out, Or Fade Away

Windows 11 KB5129195 is out after Microsoft confirms major issues with the September 2026 update, but it won’t fix AMD GPU errors

Erkennen Sie smarte Brillen mit Nearby Glasses und schützen Sie Ihre Privatsphäre

Profi-Edelstahlpfanne von WMF jetzt zum halben Preis erhältlich

Microsoft nervt Office-Nutzer mit Upgrade-Bannern, obwohl diese längst bezahlt haben

🔖 Gespeicherte Artikel

myDraft App

Community Radar & Live Chat

Aktivitäten deiner Analysten

Neues Thema oder Eilmeldung einreichen

Heiß diskutierte Einreichungen Aktualisieren

Heiß diskutierte Einreichungen