BASELINER

This entire process is driven by a customizable and intelligent rule engine, where every rule can be linked and validated against live Baseline data, ensuring that all actions are grounded in current, stable web standards.

How we built it

BASELINER was intentionally built to be lightweight, portable, and accessible, running as a single, self-contained HTML file with zero dependencies on external frameworks, using Gemini AI as accelerator code.

Core Technology: The entire application is powered by Vanilla JavaScript (ES6+), HTML5, and CSS3. This choice ensures maximum performance and no build steps.

Live Data Integration: We use the native fetch API to connect directly to the webstatus.dev API, which serves the Web Platform Baseline data. This is the heart of the tool's intelligence, allowing for real-time validation of its rules.

Diffing Engine: The powerful "Before/After" preview is rendered using the lightweight and effective diff.js library, which calculates line-by-line differences between the original and refactored code.

Intelligent UI: The user interface provides immediate feedback through dynamically generated elements, including the interactive rule editor with its live validation icons (✅ ❌ ✓) and the color-coded diff view that distinguishes between automatic, detected, and manual changes.

Challenges we ran into

Balancing Automation with Control: The biggest challenge was avoiding the trap of creating a "black box" tool. Blindly replacing code across a large project is dangerous. We solved this by creating the dual-workflow system. "Apply Quick Fixes" is intentionally limited to safe, deterministic substitutions, while more complex patterns are flagged by "detect" rules. This forces a conscious decision to engage the more nuanced LLM workflow, where the developer's expertise is required for supervision.

Making Data Actionable: Simply displaying Baseline data isn't enough. The challenge was to integrate it deeply into the workflow. We overcame this by building the Intelligent Rule Editor. This feature validates a rule's baselineFeatureId against the live API, providing instant feedback. This transforms the rules from a static list of regex patterns into a dynamic, self-validating knowledge base.

Creating a Cohesive Narrative: We had many powerful features, but presenting them as a logical, intuitive workflow was difficult. The initial versions felt like a collection of disconnected tools. We solved this by structuring the UI and the Programmatic Showcase around the Audit → Explore → Act narrative, guiding the user through a natural process of discovery and refinement.

Accomplishments that we're proud of

The Live Baseline Integration: We are incredibly proud of building a tool that is directly powered by the same data trusted by browser vendors and standards bodies. This elevates BASELINER from an opinion-based linter to an objective, standards-driven modernization assistant.

The Hybrid Refactoring Model: Our two-phase approach (Quick Fixes for automation, LLM flow for supervision) is a significant accomplishment. It acknowledges that not all refactoring is equal. It empowers developers by automating the tedious work while providing them with AI-powered assistance for the creative, context-heavy tasks.

The Iterative Workflow: The "Continue with Result" feature embodies our philosophy of progressive enhancement. A developer can run Quick Fixes, take that improved code, and then use it as the input for a more focused LLM prompt. This iterative loop is a powerful and realistic way to tackle complex technical debt.

What we learned

The Power of an Objective Source of Truth: Integrating the Web Platform Baseline API was a game-changer. It taught us that the most valuable assistance a tool can provide is not just what to change, but objective proof of why the change is correct and standards-aligned.

The "Sweet Spot" of AI Integration: We learned that the most effective use of AI in development tools is not to replace the developer, but to augment them. By having BASELINER generate a high-quality prompt and then providing a supervision interface, we place the developer in the role of a pilot, not a passenger.

A Guided Workflow is Key: A powerful engine is useless without an intuitive interface. Through building the programmatic demo, we learned the importance of telling a clear story and designing the UI to naturally lead the user through a logical sequence of actions.

What's next for BASELINER

BASELINER is a powerful foundation, and we have a clear vision for its future:

Deeper IDE and CI/CD Integration: The next major step is to move beyond the browser. We plan to develop a VS Code Extension to bring the entire workflow directly into the developer's editor, and a GitHub Action to run project audits automatically on pull requests, flagging technical debt before it gets merged.

AI-Powered Rule Creation: We want to enhance the "Explore Baseline" feature. In the future, when a user discovers a new web feature, BASELINER could use AI to suggest common legacy patterns and automatically generate a robust find regex for the new rule, dramatically speeding up customization.

Team-Based Rule Sets: We envision a system where teams can create, share, and version their own custom rule sets. A new team member could simply load the project's official baseliner.rules.json file to instantly align with the team's modernization standards.

Quantitative Modernization Metrics: The audit report will evolve to provide not just a list of issues, but a "Modernization Score." This score would quantify a project's compliance with the Baseline, allowing teams to track their progress over time and set concrete goals.