DAILY NEWS

Stay Ahead, Stay Informed – Every Day

Advertisement
TECH & AI
Re-Engineering My Portfolio: Moving from No-Code to React & Firebase
jackminion 0



GitHub “Finish-Up-A-Thon” Challenge Submission

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

I built a professional, production-ready React 18 + Vite Engineering Portfolio and Interactive Media Dashboard. As an undergraduate studying Electronic and Telecommunication Engineering, my work constantly jumps between hardware schematic designs, firmware code, web dashboards, and technical writing.

This platform isn’t just a basic resume resume layout; it’s a fully integrated software architecture. It bridges a modern dark UI framework with a robust Firebase 11 ecosystem. The system handles live data mirroring via Firestore, real-time social engagement pipelines (likes, threaded blog comments), dynamic newsletter enrollment tracking, and automated static Open Graph template injections so social platforms scrape perfect image previews whenever my work is shared.

Demo

🌐 Live Production ApplicationExplore the live deployment here: (https://kaushalyamullegama.netlify.app)

1. The Home Page & Background Canvas View

2. The Interactive Skills Bento Grid View

uploads.s3.amazonaws.com/uploads/articles/cqdtrn4w2imknigu2n96.png)

3. The Live CMS Admin Edit View

The Comeback Story

The Problem:The portfolio originally lived as a closed-source, layout-restricted mock-up draft on Wix Studio (Previous Wix Draft- (https://krbmullegama.wixstudio.com/kaushalya)). While it visually captured my style, it lacked real engineering depth. It was completely static, did not allow for any user interaction, could not dynamically display project logs or updates without opening a visual website builder, and lacked proper modern developer ergonomics.

Rebuilding from ScratchI decided to revive this static layout draft and transition it into a maintainable engineering asset. I used an advanced AI workflow to turn this project around. First, I utilized Gemini to scrape the visual assets, text structures, and image links from the original page layout, translating them into a clean Single-Page Application baseline. From there, I expanded the architecture into a full-scale React + Vite software app using GitHub Copilot.

What I changed, fixed, and added to finish it up:

The Cloud Data Layer: Centralized static data configurations in src/data/defaultContent.js with structured, automated fallbacks to local files if Firestore network connections are unavailable.

Real-time Interaction Hub: Added dynamic user spaces utilizing real-time Firestore synchronization tunnels for a live blog commenting system and client post likes.

Pre-rendered Social Previews: Integrated custom shell preprocessing commands inside package.json (npm run build runs a secondary custom script scripts/generate-shares.js) that outputs pre-rendered meta configurations inside an export wrapper. This provides beautiful social card embeds on messaging apps like WhatsApp, Discord, or X.

Responsive Layout Overhaul: Rebuilt the layout sheets with mobile-first CSS grids. The mobile navigation menu collapses smoothly, and the login dialog contextually positions itself under primary viewport coordinates on smaller devices.

My Experience with GitHub Copilot

This project went from an abandoned, locked-down draft layout to a live, production-grade cloud application in record time because GitHub Copilot acted as an experienced engineering peer right inside VS Code. Here is exactly how Copilot accelerated the development process:

Handling complex Firebase Lifecycles: Copilot was incredibly efficient when writing asynchronous state wrappers inside ContentContext.jsx and AuthContext.jsx. It generated clean error boundaries, cleanly initialized the core configurations inside src/lib/firebase.js, and anticipated subscription cleanups (unsubscribe()) to avoid database leaks.

Mathematical Vector Math: Writing custom HTML5 Canvas rendering logic manually can feel tedious. Copilot instantly scaffolded the mathematical bounding box physics for the network nodes, allowing the circuit lines to trace toward the user’s mouse movements smoothly.

Eliminating Asset Font Dependencies: To ensure total layout reliability without massive external font files slowing things down, Copilot swiftly wrote lightweight inline SVGs for all my technical branding icons and social footers.

Vite Optimization Insights: When the compiler threw chunk size optimization alerts, Copilot helped me track down the dependencies, suggesting clean lazy loading paths and code splitting strategies to keep the application lightning fast.



Source link

TECH & AI
TipTap + Yjs + Hocuspocus saves content, but other users only see updates after a page refresh
jackminion 0



Hi everyone, I’m working on a Next.js app with a TipTap editor and I’m trying to enable real-time collaboration with Yjs and Hocuspocus.

Current setup:

Next.js app

TipTap editor using useEditor() and EditorContent

u/tiptap/extension-collaboration

u/tiptap/extension-collaboration-cursor

u/hocuspocus/provider on the frontend

u/hocuspocus/server running separately

Postgres stores normal TipTap JSON content

Postgres also stores a base64 Yjs state

Current behavior:

User A edits a document section.

The edit saves to the database correctly.

User B can see the update only after refreshing the page.

Without refreshing, User B’s editor does not update live.

What we tried:

Started the Hocuspocus server locally.

Added the Hocuspocus WebSocket URL to the frontend.

The editor can switch between normal TipTap mode and Yjs collaboration mode.

When collaboration mode is forced, the editor reads from Yjs state instead of the normal TipTap JSON content.

If the Yjs state is empty or stale, the document appears blank.

Main question:

What is the correct way to initialize a TipTap editor with existing saved TipTap JSON and then move it into Yjs/Hocuspocus collaboration mode without blanking the document?

Specific questions:

Should the existing TipTap JSON be converted into a Y.Doc before the editor is created?

In collaboration mode, should the TipTap editor content option be undefined?

What is the best practice for saving both Yjs state and normal TipTap JSON to a database?

How can I verify that two users are connected to the same Hocuspocus document and receiving updates live?

What are common reasons Hocuspocus/Yjs appears to save correctly but does not broadcast updates to other users?

Any guidance on the correct TipTap + Yjs + Hocuspocus flow would be appreciated.



Source link

TECH & AI
How does VuReact compile Vue 3’s lifecycle hooks to React?
jackminion 0



VuReact is a tool that compiles Vue 3 code into standard, maintainable React code. In this article, we will look at how common Vue 3 lifecycle hooks are mapped into React.

If you write Vue lifecycle hooks, what does VuReact generate on the React side?

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
The discussion assumes you are already familiar with Vue 3 lifecycle hooks such as onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted.

Compilation Mapping

Vue onMounted() -> React useMounted()

onMounted() is Vue 3’s hook for running logic after a component is mounted for the first time. It is commonly used for initialization requests, subscriptions, and DOM-related setup.

script setup>
import { onMounted } from ‘vue’;

onMounted(() => {
console.log(‘component mounted’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useMounted } from ‘@vureact/runtime-core’;

useMounted(() => {
console.log(‘component mounted’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useMounted is the runtime adapter for onMounted(), preserving the same post-mount execution timing.

Vue onBeforeMount() -> React useBeforeMount()

onBeforeMount() is Vue 3’s hook for logic that should run right before the first mount.

script setup>
import { onBeforeMount } from ‘vue’;

onBeforeMount(() => {
console.log(‘component is about to mount’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useBeforeMount } from ‘@vureact/runtime-core’;

useBeforeMount(() => {
console.log(‘component is about to mount’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useBeforeMount is the runtime adapter for onBeforeMount(), preserving the same pre-mount timing.

Vue onBeforeUpdate() -> React useBeforeUpdate()

onBeforeUpdate() runs before a component update, excluding the initial mount. It is useful when you need to inspect or prepare state before the next render is committed.

script setup>
import { reactive, onBeforeUpdate } from ‘vue’;

const state = reactive({ count: 0 });

onBeforeUpdate(() => {
console.log(‘before update, count:’, state.count);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useReactive, useBeforeUpdate } from ‘@vureact/runtime-core’;

const state = useReactive({ count: 0 });

useBeforeUpdate(
() => {
console.log(‘before update, count:’, state.count);
},
(state.count),
);

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useBeforeUpdate is the runtime adapter for onBeforeUpdate(). When the React-side API needs dependencies, VuReact analyzes them during compilation and generates the dependency array automatically.

Vue onUpdated() -> React useUpdated()

onUpdated() runs after a component update. It is commonly used to read the latest rendered result or trigger follow-up synchronization work.

script setup>
import { reactive, onUpdated } from ‘vue’;

const state = reactive({ count: 0 });

onUpdated(() => {
console.log(‘after update, count:’, state.count);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useReactive, useUpdated } from ‘@vureact/runtime-core’;

const state = useReactive({ count: 0 });

useUpdated(
() => {
console.log(‘after update, count:’, state.count);
},
(state.count),
);

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useUpdated is the runtime adapter for onUpdated(), with dependency analysis handled automatically during compilation when needed.

Vue onBeforeUnmount() -> React useBeforeUnMount()

onBeforeUnmount() is Vue 3’s hook for logic that should run right before a component is removed.

script setup>
import { onBeforeUnmount } from ‘vue’;

onBeforeUnmount(() => {
console.log(‘component is about to unmount’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useBeforeUnMount } from ‘@vureact/runtime-core’;

useBeforeUnMount(() => {
console.log(‘component is about to unmount’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useBeforeUnMount is the runtime adapter for onBeforeUnmount(), preserving the expected pre-unmount timing.

Vue onUnmounted() -> React useUnmounted()

onUnmounted() is Vue 3’s hook for final cleanup after a component has been removed.

script setup>
import { onUnmounted } from ‘vue’;

onUnmounted(() => {
console.log(‘component unmounted’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useUnmounted } from ‘@vureact/runtime-core’;

useUnmounted(() => {
console.log(‘component unmounted’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useUnmounted is the runtime adapter for onUnmounted(), preserving the expected unmount timing.

Related Links

Repository: https://github.com/vureact-js/coreVuReact docs: https://vureact.top/en/guide/semantic-comparison/script/lifecycle.htmlRuntime docs: https://runtime.vureact.top/en/guide/introduction.html



Source link