标签：#react

Today I discovered something I honestly should have explored a long time ago: Google Lighthouse. Funny enough, revamping my portfolio is one of those projects I kept pushing forward with the classic “I’ll do it tomorrow” mindset — and somehow tomorrow kept winning. But today I finally sat down and started improving it, and during that process, I came across Lighthouse. For anyone who hasn’t heard of it yet, Google Lighthouse is an open-source automated tool designed to help developers improve the quality of web pages. You can run it on almost any page — whether it’s public or behind authentication. What immediately caught my attention is that it audits things like: Performance Accessibility SEO Best Practices And probably a few more things I’m still discovering You can run Lighthouse directly inside Chrome DevTools, through the command line, or even as a Node.js module. The process is simple: You give Lighthouse a URL, it scans the page, runs a series of audits, and then generates a detailed report showing how your website performs. What makes it powerful is that it doesn’t just tell you what’s wrong it also explains: _ Why the issue matters How it affects users And how you can fix it _ As a beginner software engineer and developer, I’m slowly realizing that writing code is only one part of building great applications. Performance, accessibility, maintainability, and user experience matter just as much. And honestly, tools like Lighthouse make the learning process feel less overwhelming because they point you in the right direction. One thing I’ll say though don’t fall into the trap of chasing a perfect Lighthouse score instead of building useful projects. A lot of developers start optimizing numbers before validating whether the product itself solves a real problem. Lighthouse is a guide, not the final goal. For my portfolio specifically, Lighthouse exposed a few weaknesses immediately: Large unoptimized images Accessibility issues Slow-loading assets Missing metad

MikuMikuDance still lives mostly on the desktop: PMX models, VMD motion, skirt physics, camera work. We built AnimaStage Lite — an open-source browser studio so you can load assets, preview motion, add FX, and export vertical Shorts without installing MMD. 🔗 Repository: https://github.com/FBNonaMe/animastage-lite 🌐 Live demo: https://animastage-lite.app/ 🎬 Open the studio: https://animastage-lite.app/app Why the browser? Short-form creators need: 9:16 framing and 1080×1920 export Fast PMX + VMD iteration Stable WebGL on everyday laptops AnimaStage Lite is not a full MMD clone — it’s a focused stage : load, animate, light, record. Stack Layer Tech UI React 19 + TypeScript 3D Three.js + React Three Fiber Build Vite 6 Physics Bullet (Ammo.js) HQ video WebCodecs + mp4-muxer Live video MediaRecorder All core features run client-side . What it does Drag & drop PMX/PMD, VMD, textures, HDR Timeline + dopesheet + Bézier curves + VMD export Bullet physics — skirt, hair, accessories RTX Lite — bloom, DOF, weather, style presets MP4 HQ (frame-by-frame) and Live recording Clean capture — no gizmos in the final video 9:16 Lite — lighter render path to reduce WebGL context loss Optional: MediaPipe mocap, Gemini AI keys, Local/WebRTC collab. Try it Online: https://animastage-lite.app/app — drop your PMX + VMD. Locally: bash git clone https://github.com/FBNonaMe/animastage-lite.git cd animastage-lite npm install npm run dev https://animastage-lite.app/ — landing http://localhost:3000/app — studio (local) Optional AI: copy .env.example → .env and set VITE_GEMINI_API_KEY. Open source Star ⭐ the repo, open issues, send PRs: https://github.com/FBNonaMe/animastage-lite MMD models are not bundled — use only content you have rights to publish. What would you use this for — Shorts, VTuber previews, or learning Three.js? Comments welcome. ---