Forem: Ramin (Moon Shadow)

How I Finally Built My Portfolio Site Under 14KB – A Chill Journey Inspired by a Random YouTube Video

Ramin (Moon Shadow) — Tue, 05 Aug 2025 19:35:46 +0000

Hey folks, grab a coffee or whatever you're into, because I'm about to spill the beans on this fun little adventure I had recently. Picture this: It's a lazy afternoon, I've just wrapped up some work stuff, and I'm mindlessly scrolling through YouTube like we all do. Suddenly, this video pops up from ThePrimeTime (check it out here). It's all about website load times and this wild idea that your site should clock in under 14KB to be truly snappy. I mean, come on – 14KB? In 2025, with all these bloated JavaScript frameworks and fancy libraries we're slinging around? I was straight-up baffled. "No way," I thought. "That's gotta be impossible unless you're building a plain HTML page from the '90s."

But curiosity got the better of me, as it always does. The video dives deep into the why behind it, referencing this super insightful blog post over at endtimes.dev. If you haven't read it yet, do yourself a favor and click that link. It's packed with eye-opening stats and explanations on how even tiny delays in loading can tank user experience, especially on slower connections. Like, did you know that in some parts of the world, people are still rocking 2G or spotty Wi-Fi? Yeah, that post really hammered home why size matters in web dev – not just for speed, but for accessibility and keeping folks from bouncing off your site in frustration.

The Spark of Inspiration

Anyway, after watching that video, my brain was buzzing. I'd been putting off making a personal portfolio site for ages. Why? Pure laziness, my friends. I'm that dev who has a million ideas but somehow never gets around to personal projects. But this time, inspiration struck hard. "Alright," I told myself, "let's turn this into a challenge. Build something cool, keep it under 14KB, and make it actually useful – like a portfolio that shows off my skills without all the fluff."

Getting Started: Tools and Choices

So, where did I start? I went with the path of least resistance: Vite.js. If you're not familiar, Vite is this blazing-fast build tool that's perfect for modern web apps. It's simple to set up and handles a lot of the heavy lifting out of the box. But here's the catch – I initially thought about using React because, well, it's my go-to. Turns out, React's bundle size was way too chunky for my goals. No shade to React; it's awesome for complex stuff, but for a lightweight site? Nah.

That's when I remembered Preact. I've tinkered with it before, and man, it's a gem. Preact is basically a super-slim alternative to React – it weighs in at just a few KB, has compatible APIs, so you can drop in your React knowledge without missing a beat. Perfect fit! I fired up a new project, swapped React for Preact, and started building.

Now, to make things even more interesting (and challenging), I decided to throw Tailwind CSS into the mix. Yeah, I know – Tailwind can bloat things if you're not careful, but I wanted to prove I could keep it lean while styling an interactive site. The concept? A terminal-style portfolio. You know, like those old-school command-line interfaces, but web-ified. I vaguely remember seeing something similar years ago – maybe on some dev's GitHub or a tutorial? Can't find the link now, but it stuck in my head as this retro-cool way to present info. Imagine typing commands to navigate my about page, projects, or contact info. It's interactive, fun, and surprisingly engaging without needing heavy animations or libraries.

The Optimization Magic

The real magic happened in optimization. I dove into the vite.config.ts file to tweak things for better chunking – basically splitting my vendors and code into smaller, smarter bundles. This way, the browser only loads what it needs. And after enabling Gzip compression (which most servers do anyway), each file ended up under 13KB. Under 13KB! I was grinning like an idiot when I saw those numbers. It felt like winning a mini-hackathon against myself.

Wanna see it in action? Head over to moonshadowrev.me. Poke around, type some commands – it's all there. And if you're the code-curious type, the full repo is open on GitHub: github.com/moonshadowrev/moonshadow.me-portfolio. I even sprinkled in some basic SEO tricks, like meta tags and semantic HTML. It's not pro-level SEO wizardry, but hey, it's a start. Feel free to fork it, tweak it, or just browse for ideas.

Testing and Real-World Performance

Of course, I didn't stop at building – I had to test this bad boy. Fired up Google's PageSpeed Insights, and the scores were off the charts. Then, for the real torture test, I simulated a 2G connection in dev tools. Holy smokes, it loaded almost instantly. I've built sites before that chug on slow networks, but this? It was like butter. And get this: I'm hosting it on shared Hostinger plans, which aren't exactly known for lightning TTFB (more on that in a sec). Even with static HTML, CSS, and JS files served from a budget host, it performs like a champ. Proves you don't need fancy CDNs or VPS to make things fast if you optimize from the ground up.

Breaking Down the Jargon: Server Response Time and TTFB

Speaking of TTFB and all that jargon, let's break it down real quick because it's key to understanding why this matters. Server response time is basically how long your server takes to chew on a request and start spitting back data. It's the behind-the-scenes hustle before anything shows up on the user's screen. TTFB, or Time to First Byte, is a bit broader – it measures from the moment the browser sends the request until it gets that very first byte of response. This includes stuff like DNS lookup (finding the server's address), establishing a secure connection (handshakes and all), and the initial server processing. Why care? Because a snappy TTFB makes your site feel responsive right away, even if the full load takes a second. High TTFB can kill conversions, SEO rankings, and user patience. In my tests, keeping everything lightweight shaved off precious milliseconds here, making the whole experience smoother.

Wrapping It Up

Looking back, this project was a blast – a reminder that sometimes, constraints breed creativity. It pushed me out of my lazy rut and taught me a ton about performance without overcomplicating things. If you're a dev reading this, give it a shot. Optimize that next project, chase those low KB goals, and see how it feels.

What about you? Ever obsessed over TTFB or load times in your apps? Got tips, stories, or even critiques of my site? Drop 'em in the comments below – I'd love to chat and learn from ya. Let's keep the web fast and fun! 🚀

AI Revolution & Critical RCEs: A Dev's Digest on GitHub Spark & SharePoint Exploits (23/24-July-2025)

Ramin (Moon Shadow) — Thu, 24 Jul 2025 05:53:54 +0000

What a wild 24 hours in tech. On one hand, we're getting game-changing AI tools that feel like they're straight out of science fiction. On the other, CISA is sounding the alarm on critical vulnerabilities being actively exploited by state-sponsored actors.

Welcome to the life of a developer in 2025. You're building the future while defending it from the present.

Let's break down everything you need to know from July 23, 2025. We'll cover the incredible new releases that will supercharge your workflow and then dive into the critical security threats you need to patch right now.

🚀 The Innovation Front: New Releases to Supercharge Your Workflow

The pace of innovation is staggering, with a clear focus on AI, accessibility, and efficiency. Here are the major updates that should be on your radar.

GitHub Spark Release

Microsoft just dropped a nuke in the low-code world. GitHub Spark is a brand-new tool that lets you build full-stack applications using natural language. Yes, you read that right. Describe your idea, and its AI-powered core helps you scaffold a deployable app. This is a massive leap for rapid prototyping and could change how we turn ideas into code.

The Gist: Turns ideas into deployable apps effortlessly.
Release Date: July 23, 2025

Hailo Tappas v5.0.0

For all the devs working on IoT and edge devices, this one's for you. The Hailo Tappas open-source library just hit version 5.0.0. It now officially supports Ubuntu 24.04 and Python 3.12, making it easier than ever to build and deploy high-performance AI applications that run locally on embedded systems.

The Gist: Enhances real-world, on-device AI deployment with better performance.
Release Date: July 23, 2025

Higgsfield AI Steal Feature

This is wild. Higgsfield AI just launched a "Steal" feature that lets you replicate the exact pose and composition of any image from the web without writing a single prompt. Integrated with their "Soul ID" for maintaining character consistency, this gives content creators an unprecedented level of control and precision.

The Gist: Revolutionizes content creation with precise reference control.
Release Date: July 23, 2025

PakePlus Repo Launch

Tired of complex wrappers for your web apps? PakePlus is a new open-source project that promises to package any webpage, Vue, or React app into a lightweight desktop or mobile app (under 5MB!) in minutes. This is a game-changer for anyone looking to build efficient, cross-platform applications without the bloat.

The Gist: Simplifies cross-platform development for lean and efficient builds.
Release Date: July 23, 2025

auto.fun Platform Update

For the Web3 and decentralized community, auto.fun pushed a next-gen release for its platform. It includes features like custom bonding curves, sniper mitigation, and MeteoraAG integration. If you're looking to launch a project, a "cult," or a token, these tools give you better control over fees and a smoother launch.

The Gist: Empowers creators with better fees and control in decentralized SaaS.
Release Date: July 23, 2025

🚨 The Security Red Alert: Top CyberSecurity Headlines

Now, let's pivot to the dark side. While we were getting shiny new toys, threat actors were hard at work. Here’s the critical news.

Chinese Hackers Exploit Microsoft SharePoint Flaws for Espionage

This is the big one. CISA has added two SharePoint vulnerabilities to its Known Exploited Vulnerabilities (KEV) catalog. Chinese state-sponsored groups like Linen Typhoon and Violet Typhoon are actively using these to breach on-premises servers.

Vulnerabilities: CVE-2025-49704 and CVE-2025-49706
Impact: Critical. Active espionage campaigns are underway.

SysAid IT Support Software Flaws Under Active Attack

If you use SysAid, drop what you're doing. CISA is warning about two actively exploited flaws (CVE-2025-2775 and CVE-2025-2776) that allow for remote file access, Server-Side Request Forgery (SSRF), and even full administrator account takeover.

Impact: High. Your admin accounts are at risk.

Sophos Patches Multiple Critical Vulnerabilities in Firewall Products

Your network's guardian might have a hole in it. Sophos released urgent fixes for five high-severity flaws in its firewall products. These affect versions prior to v21.0 and v21.5 and include remote code execution (RCE) risks.

Impact: High. A compromised firewall is game over.

Lynx Ransomware Claims Attack on iBUYPOWER

The Lynx ransomware crew has added gaming PC manufacturer iBUYPOWER to its list of victims. They claim to have disrupted internal systems and are threatening to leak stolen data on their site.

Impact: Medium. A major supply chain and data breach risk.

Threat Actor Mimo Targets Magento and Docker for Crypto Mining

A threat actor dubbed "Mimo" is exploiting N-day vulnerabilities in Magento and misconfigured Docker instances. Their goal is to deploy crypto miners and proxyware, but these footholds could easily be escalated into more severe attacks.

Impact: Medium. Drains resources and opens the door for bigger intrusions.

🔓 CVE Deep Dive: The Vulnerabilities You Need to Know

Let's look closer at the specific CVEs making headlines.

CVE-2025-49704
- Description: A spoofing vulnerability in Microsoft SharePoint. It's the key that opens the first door.
- Status: Actively exploited by state-sponsored actors.
- Priority: 1 (Critical). Patch this yesterday.
CVE-2025-49706
- Description: A remote code execution (RCE) vulnerability in Microsoft SharePoint. When chained with the one above, it gives attackers full control.
- Status: Actively exploited in the wild for espionage.
- Priority: 1 (Critical). This is a full-blown crisis for unpatched servers.
CVE-2025-2775
- Description: A path traversal flaw in SysAid that allows for remote file access and SSRF.
- Status: High severity, under active exploitation.
- Priority: 2 (High). Attackers are using this right now.
CVE-2025-2776
- Description: The second SysAid vulnerability, enabling a full administrator account takeover.
- Status: High severity, actively exploited.
- Priority: 2 (High). Leads to complete compromise of the platform.
CVE-2025-7705
- Description: Active debug code left in ABB Switch Actuator products, allowing for unauthorized access.
- Status: High severity, with potential for exploitation.
- Priority: 3 (Medium). An accident waiting to happen.

🛠️ The Defender's Arsenal: New & Trending Security Tools

The community is fighting back. Here are the tools and repos you should check out to bolster your defenses.

Google OSS Rebuild
- What it is: A new tool from Google designed to expose malicious code in open-source packages. It provides build provenance for Python, npm, and Crates.io, helping you verify that the code you're installing hasn't been tampered with.
- Relevance: Critical for preventing software supply chain attacks.
Timesketch (with Sec-Gemini)
- What it is: Google's open-source tool for collaborative forensic timeline analysis just got an AI upgrade. It now uses Sec-Gemini to provide agentic capabilities, automating parts of the investigation process.
- Relevance: Massively accelerates incident response by handling initial log analysis for you.
gchq/CyberChef
- What it is: The "Cyber Swiss Army Knife" isn't new, but it's trending for a reason. This web app is essential for any kind of data manipulation, encoding/decoding, and analysis.
- Relevance: A must-have for malware analysis, forensics, and everyday dev tasks.
cisagov/cset
- What it is: CISA's Cybersecurity Evaluation Tool (CSET) helps organizations assess their security posture in a systematic way.
- Relevance: Invaluable for critical infrastructure and any organization wanting a structured approach to hardening their systems.

🎯 The Bottom Line: Your Immediate Action Plan

The last 24 hours highlight escalating state-sponsored threats and opportunistic attacks... Impacts include intellectual property theft, operational downtime, and financial losses—action is critical as unpatched systems face immediate compromise.

Here’s your checklist. No excuses.

[ ] Patch SharePoint Now: Apply the emergency patches for CVE-2025-49704 & CVE-2025-49706. After patching, rotate your ASP.NET keys to invalidate any stolen session tokens.
[ ] Update SysAid Software: Immediately update to the latest version to fix CVE-2025-2775 & CVE-2025-2776. Review all admin accounts for suspicious activity.
[ ] Secure Sophos Firewalls: Patch to the latest versions (v21.0+ or v21.5+). Hunt for any indicators of compromise related to potential RCE.
[ ] Scan for Mimo: Check your Magento and Docker environments for IoCs related to the Mimo cryptomining campaign. Harden your Docker configurations and enable MFA everywhere.
[ ] Review ABB Devices: If you use ABB hardware, check for exposure to CVE-2025-7705 and disable any unnecessary debug modes.

Stay safe out there, and happy coding.

📚 References

Microsoft SharePoint Exploitation: https://thehackernews.com/2025/07/cisa-orders-urgent-patching-after.html
SysAid Flaws: https://thehackernews.com/2025/07/cisa-warns-sysaid-flaws-under-active.html
Sophos Firewall Patches: https://www.securityweek.com/
Lynx Ransomware on iBUYPOWER: https://social.cyware.com/cyber-security-news-articles
Mimo Threat Actor: https://thehackernews.com/2025/07/threat-actor-mimo-targets-magento-and.html
CVE-2025-49704/49706: https://www.cisa.gov/news-events/alerts/2025/07/22/cisa-adds-two-known-exploited-vulnerabilities-catalog
CVE-2025-2775/2776: https://thehackernews.com/2025/07/cisa-warns-sysaid-flaws-under-active.html
CVE-2025-7705: https://social.cyware.com/cyber-security-news-articles
Google OSS Rebuild: https://thehackernews.com/2025/07/google-launches-oss-rebuild-to-expose.html
gchq/CyberChef: https://github.com/gchq/CyberChef
cisagov/cset: https://github.com/cisagov/cset
Timesketch: https://blog.google/technology/safety-security/cybersecurity-updates-summer-2025/
https://x.com/satyanadella/status/1948101877486452897
https://github.com/hailo-ai/tappas/releases/tag/v5.0.0
https://x.com/higgsfield_ai/status/1948067020588921115
https://github.com/Sjj1024/PakePlus
https://x.com/autodotfun/status/1948097405603254700

My Journey Building FCMPanel: A Simple Dashboard for Firebase Notifications

Ramin (Moon Shadow) — Wed, 23 Jul 2025 04:54:37 +0000

Hey everyone! Recently I've Just tinkering with mobile apps lately, and I wanted to share this little project I whipped up. It’s called FCMPanel, and it’s basically my way of scratching an itch that Firebase left me with. If you’ve ever tried sending push notifications to your Android or iOS apps, you know what I’m talking about — it’s not always as straightforward as it should be, especially if you’re juggling multiple apps or just starting out.

The Backstory: Why I Even Bothered Making This

So, picture this: A few months ago, I decided to dive into building native apps for both Android and iOS. Nothing fancy — just some personal projects to keep my skills sharp. But then came the part where I needed to send notifications to users who’d subscribed to my apps. You know, like “Hey, new update!” or “Check out this cool feature!”

I started looking around for an open-source admin dashboard that could handle this. Something simple where I could manage devices and blast out messages. Turns out, there’s zilch out there that’s truly beginner-friendly and free. Firebase Console does have notification tools, but man, it’s a bit overwhelming if you’re new to it.

All those settings, the JSON payloads, targeting options — it’s powerful, sure, but I spent hours fumbling around just to send a test message.

Then it hit me:

What if I have multiple apps? Like, one for fitness tracking, another for a recipe sharing thing, and maybe a third for something else. Running campaigns across all of them would mean logging into different Firebase projects, copying credentials, and hoping I don’t mess up the targeting. That sounded like a nightmare. I wanted one spot to rule them all — log in once, pick my Firebase accounts, select devices or topics, and hit send. Easy peasy.

That’s how FCMPanel was born. It’s an open-source web dashboard I built to make Firebase Cloud Messaging (FCM) less of a headache. You can check it out on GitHub:

https://github.com/moonshadowrev/FCMPanel. I kept it simple because, honestly, I hate complicated tools myself.

What Makes FCMPanel Cool (In My Humble Opinion)
I’m not gonna bore you with a sales pitch — this isn’t some enterprise software. It’s just a dashboard that does what I needed it to do. Here’s the rundown on what it offers, straight from my experience using it:

Multi-Account Magic: This was the big one for me. You can hook up multiple Firebase projects in one place. No more switching tabs or remembering which credential goes where. Just add your service accounts, and boom — you’re managing everything from a single dashboard.
Easy Notification Sending: Send messages to specific devices, topics, or even broadcast to everyone who’s subscribed. I made sure the interface is intuitive — pick your target, type your message, add some data if you want (like a link or image), and send. It’s way simpler than wrestling with Firebase’s console.
Device Tracking: It keeps tabs on registered devices. When users install your app and opt-in for notifications, their FCM tokens get stored securely. You can see who’s active, group them by app, and target campaigns accordingly.
History and Analytics: I added a section to track what you’ve sent — success rates, opens, that kind of stuff. Nothing super advanced yet, but it’s helpful for seeing if your campaigns are landing.
Security Stuff: Look, I’m paranoid about data, so I baked in JWT auth, encrypted storage for credentials, and role-based access. If you’re running this for a team, you can set up admins and viewers. Plus, it’s got rate limiting and all that to keep bad actors out.
API for Extra Fun: There’s a RESTful API if you want to integrate it programmatically. Like, register devices from your app backend or trigger sends via scripts.
It’s built with Node.js, Express, Sequelize for the database, and EJS for the frontend — nothing too bleeding-edge, just solid stuff that works. And yeah, it’s licensed under GPL-3.0, so feel free to fork and tweak it.

How I Got It Running (And How You Can Too)
Setting this up was pretty straightforward, even for me on a weekend coding binge. Here’s the quick guide, pulled from my README but with my personal tips:

Grab the Code:

Clone the repo with git clone
https://github.com/moonshadowrev/FCMPanel.git and hop into the folder.
Install Dependencies: Run npm install. I use npm, but yarn works too if that's your jam.
Set Up Your Env: Copy .env.example to .env and fill in your secrets. The big ones are your JWT secret, encryption key (make it 32 chars for AES-256), and optionally your Firebase creds. I recommend generating strong keys – don't be lazy like I almost was!
Database Magic: Fire up npm run migrate to set up the tables, then npm run seed to add default data. You'll get an admin account with username "admin" and password "Admin123!" – change that ASAP, trust me.

Launch It:

npm run dev for development (with hot reload, which saved my butt during testing) or npm start for production. Head to http://localhost:3000 and log in.
If you’re like me and want to test with real Firebase projects, enable FCM in your Google Cloud console and grab the service account JSON. Plug those into the dashboard, register some test devices (there’s an API endpoint for that), and start sending.

Pro tip:

If you’re deploying this live, use something like PM2 or Docker to keep it running smoothly. I threw it on a cheap VPS for my own use, and it’s been rock solid.

The Bumps Along the Way (Because Nothing’s Perfect)
Building this wasn’t all smooth sailing. I hit snags with encrypting the Firebase keys — turns out Node’s crypto module is picky about key lengths. And integrating the Firebase Admin SDK? I spent a whole evening debugging why messages weren’t delivering, only to realize I forgot to enable FCM in one project. Facepalm moment.

Also, the UI isn’t fancy — it’s functional with Bootstrap vibes, but if you’re a designer, contributions welcome! I focused on the backend first because that’s where the pain was.

On the plus side, using it for my own apps has been a game-changer. I ran a quick campaign across two apps last week, and it took minutes instead of hours. Feels good, man.

What’s Next? And How You Can Jump In

I’m not done yet — roadmap includes better analytics (maybe some charts), multi-language support (for my non-English speaking friends), and webhook integrations for automation. If you have ideas, hit up the issues on GitHub or start a discussion.

If this sounds useful, give it a star on GitHub — it motivates me to keep improving. Or better yet, contribute! Fork it, fix bugs, add features — I’m all for community help. Check the contributing guidelines; I tried to make them newbie-friendly.

Thanks for reading my ramble. If you’re struggling with FCM like I was, give FCMPanel a shot. It’s free, open-source, and made by someone who’s been in your shoes. Drop a comment if you try it out — I’d love to hear how it goes!

(Oh, and if you want more deets, the full docs are at https://moonshadowrev.github.io/FCMPanel/. Back to coding for me!)