<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Sangio</title>
    <description>The latest articles on DEV Community by Sangio (@sangio4).</description>
    <link>https://dev.to/sangio4</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3833696%2Fdbd1f65c-e2ec-46e5-8d10-ed4b34f30930.png</url>
      <title>DEV Community: Sangio</title>
      <link>https://dev.to/sangio4</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sangio4"/>
    <language>en</language>
    <item>
      <title>I didn't expect a template project to turn into a CMS — meet QuickSite</title>
      <dc:creator>Sangio</dc:creator>
      <pubDate>Wed, 06 May 2026 14:04:23 +0000</pubDate>
      <link>https://dev.to/sangio4/i-didnt-expect-a-template-project-to-turn-into-a-cms-meet-quicksite-4fem</link>
      <guid>https://dev.to/sangio4/i-didnt-expect-a-template-project-to-turn-into-a-cms-meet-quicksite-4fem</guid>
      <description>&lt;p&gt;About six months ago — November 2025 — I started a small "make a clean&lt;br&gt;
HTML/CSS template" side project. Around the same time I gave agentic AI&lt;br&gt;
workflows a serious second look, and the two collided. The template grew&lt;br&gt;
a JSON structure, then an admin panel, then a workflow engine, then a&lt;br&gt;
visual editor, then a JS interaction layer, then BYOK AI integrations…&lt;br&gt;
and somewhere along the way it became a thing.&lt;/p&gt;

&lt;p&gt;That thing is &lt;strong&gt;QuickSite&lt;/strong&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A file-based, API-first website operations platform with a visual&lt;br&gt;
editor and workflow engine for deterministic and AI-assisted site&lt;br&gt;
changes.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;PHP, runs on Apache or Nginx, no database. JSON files on disk are the&lt;br&gt;
single source of truth.&lt;/p&gt;

&lt;p&gt;I'm sharing it now because I genuinely didn't think it would go this far.&lt;br&gt;
The 1.0.0-beta.6 cycle just wrapped — interactions, CSS animations,&lt;br&gt;
client-side BYOK AI dispatch, dark/light theme — and the project has&lt;br&gt;
reached a point where outside eyes would help more than they'd hurt.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What it tries to be (and stay):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Open source forever&lt;/strong&gt; — GNU AGPL v3.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Zero dependencies&lt;/strong&gt; — works without any. The recent BYOK/local LLM
integration is opt-in and ships with a no-AI fallback path so the
promise still holds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No lock-in&lt;/strong&gt; — your project is plain JSON + PHP files in a folder.
Walk away with it whenever you want; no proprietary export, no
database to dump.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reachable beyond developers&lt;/strong&gt; — the visual editor is the primary
surface. You don't need to read PHP to build a site.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multi-layer learning&lt;/strong&gt; — every visual action surfaces the underlying
concept (selectors, events, CSS variables, JSON structures) so curious
users naturally pick up real web fundamentals along the way. Not a
black box.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Frontend-first, API integration coming&lt;/strong&gt; — beta.7 wires pages to
live data; beta.8 makes those pages server-rendered for SEO/AEO.
Yes, AEO — when LLM-driven discovery becomes a meaningful chunk of
traffic, structured server-rendered content matters even more than
it already does.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I post a 1-2 week dev log on YouTube about whatever I just built — no&lt;br&gt;
source code on camera, just enough HTML/CSS/JS literacy to follow along.&lt;br&gt;
The latest one walks through the beta.6 interaction + animation system on&lt;br&gt;
a real "filter the commands list" demo.&lt;/p&gt;

&lt;p&gt;Repo (the README answers most of the obvious questions):&lt;br&gt;
&lt;a href="https://github.com/Sangiovanni/quicksite" rel="noopener noreferrer"&gt;https://github.com/Sangiovanni/quicksite&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Dev log playlist:&lt;br&gt;
&lt;a href="https://www.youtube.com/playlist?list=PLULtElcjV8r-o8uVM9bS86ZYk0rvKuZwL" rel="noopener noreferrer"&gt;https://www.youtube.com/playlist?list=PLULtElcjV8r-o8uVM9bS86ZYk0rvKuZwL&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is openly self-promotion; I won't pretend otherwise. But it's also&lt;br&gt;
genuinely "tell me what breaks" — feedback at this stage is much more&lt;br&gt;
valuable than stars.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>php</category>
      <category>showdev</category>
      <category>sideprojects</category>
    </item>
    <item>
      <title>Oops, I Vibecoded Again. Please Help Me! — A CSS Refiner</title>
      <dc:creator>Sangio</dc:creator>
      <pubDate>Wed, 25 Mar 2026 14:01:07 +0000</pubDate>
      <link>https://dev.to/sangio4/oops-i-vibecoded-again-please-help-me-a-css-refiner-360</link>
      <guid>https://dev.to/sangio4/oops-i-vibecoded-again-please-help-me-a-css-refiner-360</guid>
      <description>&lt;h2&gt;
  
  
  Oops, I vibecoded again
&lt;/h2&gt;

&lt;p&gt;Let me tell you how I ended up here.&lt;/p&gt;

&lt;p&gt;I was working on a big project — the kind where you stay focused on the parts that matter to you (the architecture, the structure, the logic) and you let the AI handle the rest. At some point I needed an admin panel. I had a rough idea in my head, but I figured: let the AI draft it.&lt;/p&gt;

&lt;p&gt;And honestly? The visual was better than what I would have done. The layout ideas were solid, extensible even. So I kept going. I let the AI drive that entire side of the architecture.&lt;/p&gt;

&lt;p&gt;It worked great — until it didn't.&lt;/p&gt;

&lt;h2&gt;
  
  
  When the AI Hits the Wall
&lt;/h2&gt;

&lt;p&gt;After a while, the AI started struggling to add even small features. Things that should have been trivial became painful. So I did what I should have done earlier: I actually looked at the code.&lt;/p&gt;

&lt;p&gt;It was a mess.&lt;/p&gt;

&lt;p&gt;I stepped in and started refactoring. Split the monolithic code into proper files. Did an architecture review. In each file, I reorganized: variables at the top, methods below, sorted logically instead of "wherever the AI decided to append them." It took work, but the codebase became manageable again.&lt;/p&gt;

&lt;p&gt;And then I looked at the CSS.&lt;/p&gt;

&lt;h2&gt;
  
  
  15,000+ Lines of CSS Chaos
&lt;/h2&gt;

&lt;p&gt;The stylesheet had grown to over 15,000 lines. The same color written three different ways. Duplicate blocks everywhere. Empty rules. Media queries for the same breakpoint scattered across the file. It was exactly the kind of mess you'd expect when an AI generates CSS without a style guide.&lt;/p&gt;

&lt;p&gt;That's when the idea hit me: &lt;strong&gt;what if I could vibecode a tool to fix this?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I know CSS, JavaScript, and PHP well enough — I could have built it by hand. But the whole point of working with AI is speed. I focus on the high-level decisions; it handles the implementation. This project was the perfect experiment: give the AI clear guidelines and a focused scope, and see if it could ship something useful, fast.&lt;/p&gt;

&lt;h2&gt;
  
  
  CSS Refiner Was Born
&lt;/h2&gt;

&lt;p&gt;The result: a browser-based CSS analyzer with 7 specialized tools.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Analyzer&lt;/th&gt;
&lt;th&gt;What it catches&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Empty Rules&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Selectors with no declarations&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Color Normalize&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Inconsistent color formats → unified output&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Duplicates&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Identical declaration blocks across selectors&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Media Queries&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Duplicate &lt;code&gt;@media&lt;/code&gt; blocks → merged&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Fuzzy Values&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;14px&lt;/code&gt; vs &lt;code&gt;15px&lt;/code&gt; — close enough to question&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Near-Duplicates&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Selectors sharing 80%+ of their declarations&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Design Tokens&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Repeated values that should be CSS custom properties&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Auto-Refine&lt;/strong&gt; chains the safe analyzers in a loop until nothing changes. One click, done.&lt;/p&gt;

&lt;p&gt;Every change shows a &lt;strong&gt;visual diff&lt;/strong&gt; — you see exactly what's being modified before applying anything.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6mpzfraepujcaodcb2ag.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6mpzfraepujcaodcb2ag.png" alt="CSS Refiner screenshot" width="800" height="425"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Experiment Worked (Mostly)
&lt;/h2&gt;

&lt;p&gt;With clear guidelines — proper file separation, a defined architecture, specific module responsibilities — the AI delivered fast and clean. The key lesson from the previous project applied directly: &lt;strong&gt;the AI is great at implementation, but you have to own the structure.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When I let it freestyle the architecture, it produced a mess. When I gave it boundaries, it was genuinely efficient.&lt;/p&gt;

&lt;p&gt;I documented the full development process in &lt;a href="https://github.com/Sangiovanni/CSS-refiner/blob/main/DEVELOPMENT.md" rel="noopener noreferrer"&gt;DEVELOPMENT.md&lt;/a&gt; — the 7 rounds of iteration, what the AI nailed, what it broke, and what I had to step in and fix.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Stack
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Vanilla JavaScript&lt;/strong&gt; — ES5 IIFEs, no framework, no transpiler&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PHP&lt;/strong&gt; — only for i18n bootstrapping (loads translation JSON)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CSS&lt;/strong&gt; — custom properties for theming&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dependencies:&lt;/strong&gt; zero&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No npm. No build step. It loads fast because there's nothing to load.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://www.sangiostuff.com/tools/css-refiner/" rel="noopener noreferrer"&gt;Live demo&lt;/a&gt;&lt;/strong&gt; — paste your CSS, click Analyze. No login, no install.&lt;/p&gt;

&lt;p&gt;Want to self-host it? It's just PHP 7.4+ with zero dependencies — &lt;a href="https://github.com/Sangiovanni/CSS-refiner#installation" rel="noopener noreferrer"&gt;installation instructions on GitHub&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;It does what I needed it to do. But if you try it and think "this should also do X" — &lt;a href="https://github.com/Sangiovanni/CSS-refiner/issues" rel="noopener noreferrer"&gt;open an issue&lt;/a&gt;. Or a PR. Or just star it so I know someone out there also has messy CSS.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Links:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🔗 &lt;a href="https://www.sangiostuff.com/tools/css-refiner/" rel="noopener noreferrer"&gt;Live demo&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;💻 &lt;a href="https://github.com/Sangiovanni/CSS-refiner" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📖 &lt;a href="https://github.com/Sangiovanni/CSS-refiner/blob/main/DEVELOPMENT.md" rel="noopener noreferrer"&gt;How it was built (DEVELOPMENT.md)&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;The AI writes the code; I make the decisions. Sometimes that works out great.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>css</category>
      <category>webdev</category>
      <category>opensource</category>
      <category>ai</category>
    </item>
    <item>
      <title>Are CMSes becoming pointless now that AI can just code websites? I built one anyway — here's my reasoning.</title>
      <dc:creator>Sangio</dc:creator>
      <pubDate>Thu, 19 Mar 2026 12:37:20 +0000</pubDate>
      <link>https://dev.to/sangio4/are-cmses-becoming-pointless-now-that-ai-can-just-code-websites-i-built-one-anyway-heres-my-2oik</link>
      <guid>https://dev.to/sangio4/are-cmses-becoming-pointless-now-that-ai-can-just-code-websites-i-built-one-anyway-heres-my-2oik</guid>
      <description>&lt;p&gt;I've been seeing the "just let AI code it" sentiment a lot lately, and honestly, it crossed my mind too. AI is getting scary good at generating full pages. So why would anyone use a CMS?&lt;/p&gt;

&lt;p&gt;Here's where I landed after thinking about it for months (and building something to test the idea):&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The problem with "just let AI code it"&lt;/strong&gt;: You get a page, sure. But then you want to change the font, restructure a section, translate it, deploy it somewhere else. You're back to prompting, re-generating, copy-pasting, merging. Every change is a full round-trip through the AI. It's like having a brilliant architect who redraws the entire blueprint every time you want to move a door.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Now, I'll be honest&lt;/strong&gt;: this problem is shrinking fast. When I started building in November, agentic AI was clunky — you'd lose context, get inconsistent outputs, waste tokens on back-and-forth. Today, with models like Claude Opus, the "just let it code everything" approach is genuinely viable for more and more cases. The architect is getting better at remembering the blueprint.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So why still bother with structure?&lt;/strong&gt; Because even the best architect is faster when you hand them a clear brief instead of saying "make something nice." Structured workflows use fewer tokens, produce more predictable results, and give you a system that works after the AI is done — a visual editor, consistent builds, export/import. The question isn't "can AI do it without structure?" anymore. It's "is the structured approach still worth the trade-off in control and efficiency?"&lt;/p&gt;

&lt;p&gt;That's what I've been building since November. I started by splitting the project into commands (web creation, build &amp;amp; deploy, user and project management). Then I added "workflows" — batches of commands that accomplish predetermined constructions. Then I used that concept to create specialized workflows that explain to the AI how commands work and what format to respond in, so the AI returns a sequence of commands itself. It makes the AI very focused — one narrow direction, no freestyling. And since the AI builds in a structure the project defines, a visual editor can offer easy manual changes afterward.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Some honest notes&lt;/strong&gt;: I've been coding since I was 15 (I'm 33 now), but coding with AI in an agentic way — that's new. I started using GitHub Copilot in November 2025 and it changed how I work. Before that, sure, copy-pasting from ChatGPT like everyone else. But the agentic workflow is a different beast. I tested GPT, Gemini, and Claude. Landed on Claude — Opus specifically blew me away for structured output. Which loops back to my opening question: if AI keeps getting this good, does a structured approach still make sense, or will raw generation just outpace it?&lt;/p&gt;

&lt;p&gt;I'm not here to drop a link (happy to share if anyone's curious). I'm genuinely wondering: does this reasoning hold up? Is "structured AI direction" worth pursuing, or is raw AI code generation going to make it irrelevant?&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Transparency note: I wrote the ideas, AI helped me structure and write this post. I'm better at building things than writing Reddit posts — figured I'd use AI for what it's good at.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>discuss</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
