Baseline Buddy

AI-powered developer companion that eliminates 20+ mins of compatibility research by integrating official Baseline data directly into CLI & VS Code workflows. No more jumping between MDN & Can I Use!

Comment

Inspiration

As a developer, I've been frustated with the much needed action of needing to check the different CSS features' usability issues- safe for use, safe for production using Can I Use, MDN Accessibility sites, or good-old Google Search. 5-10 mins later, I'd have the complete updated knowledge needed for my project, but with a broken flow of mind.

The breaking point came during a team code review when a senior developer rejected my modern CSS because "we don't know if it's widely supported yet." That's when I discovered Baseline- Google's initiative to clearly define web feature readiness. But the data was scattered, hard to access, and not integrated into our daily workflows.

I thought: "What if I could get instant Baseline compatibility answers right where I code?" That thought sparked to life this project- "Baseline Buddy".

What it does

Baseline Buddy eliminates the compatibility research tax that every web developer pays daily. It's a comprehensive ecosystem that brings official Baseline data directly into our development workflow:

🖥️ CLI Tool: Searches 519 web features instantly, creates projects with Baseline-safe defaults, analyzes existing codebases for compatibility scores, and injects polyfills automatically.

🔧 VS Code Extension: Real-time hover tooltips showing Baseline status, instant warnings for risky features, and educational recommendations - all the while we're coding.

📊 Project Analysis: Automated compatibility scoring with actionable insights, helping teams make informed decisions about modern web features.

Instead of spending 20+ mins researching if CSS Container Queries are production-ready, developers get the answer in 2 secs with context about browser support and safer alternatives.

How I built it

This project was a rollercoaster of technical challenges and breakthrough moments.

The Foundation: I started with Node.js and the official web-features npm package - Google's official documentation of 519 web features with real Baseline data. Getting this integrated was surprisingly tricky because the data structure kept changing between versions.

CLI Development: Built with Commander.js for professional command handling and Chalk for beautiful terminal output. The hardest part was making the search fast and relevant - I implemented fuzzy matching and had to optimize for sub-second response times.

VS Code Extension: This nearly broke me. TypeScript compilation, VS Code APIs, hover providers, diagnostic collections - it felt like learning a new language. I had to spend the most time on getting it working right, just getting the extension to load without crashing VS Code. The breakthrough came when I realized I needed to properly handle async web-features imports.

Real Data Integration: The biggest challenge was ensuring everything used REAL Baseline data, not mock data.

Project Scaffolding: Creating the init command that generates projects with modern but safe features required careful curation of which CSS and JavaScript features to include by default.

Challenges I ran into

The VS Code Extension Nightmare: Spent an entire day debugging why the extension wouldn't compile. Turns out I was mixing CommonJS and ES modules incorrectly. The error messages were cryptic, and I almost gave up on the extension entirely.

Data Structure Hell: The web-features package structure changed between versions. My code expected feature.status.baseline.status but it was actually feature.status.baseline. Took hours to debug because the errors were silent failures.

Performance Issues: Initial searches took 5+ seconds because I was loading all 519 features on every query. Had to implement smart caching and lazy loading to get sub-second responses.

Real-time Analysis: Making the check command actually detect CSS Grid and Flexbox in HTML files required writing custom regex patterns and file parsing logic. Getting the compatibility scoring algorithm right took multiple iterations.

Accomplishments that I'm proud of

🎯 It Actually Works: This isn't a prototype, but a fully functional tool that developers can install and use immediately. The CLI handles edge cases gracefully, the VS Code extension compiles to a clean 13KB, and everything uses real Baseline data.

⚡ Lightning Fast: Sub-2-second response times for feature searches across 519+ web features. The performance optimization work paid off.

🔄 Complete Workflow: From learning (search) to building (init) to analyzing (check) to deploying (polyfill) - it covers the entire developer journey.

📊 Real Impact: The compatibility scoring system gives teams concrete data to make decisions. "75% Baseline score with 3 safe features" is way more actionable than vague compatibility concerns.

🎨 Beautiful UX: The CLI output is genuinely pleasant to use - colored output, clear icons, professional formatting. It feels like a tool you'd want to use daily.

🏗️ Extensible Architecture: Built with clean separation between CLI, VS Code extension, and shared utilities. Adding new templates or integrations would be straightforward.

What I learned

Technical Lessons:

• VS Code extension development is harder than it looks, but incredibly rewarding when it works.

• Real data integration requires constant validation - assumptions break quickly.

• Performance matters more than features - a slow tool won't get adopted.

• Error handling and edge cases separate good tools from great ones.

Product Lessons:

• Developers want solutions that fit their existing workflow, not just new workflows to learn

• Instant feedback beats comprehensive features; speed is a feature

• Educational value is as important as functional value - developers want to learn while they work

Personal Growth:

• I can build more complex systems than I thought possible

• Breaking down overwhelming problems into small, testable pieces works

• The satisfaction of solving a real problem we personally experience is incredible

What's next for Baseline Buddy

🚀 Immediate Roadmap:

• Webpack/Vite Plugins: Build-time compatibility checking and warnings

• React/Vue Templates: Expand beyond HTML to modern framework scaffolding

• GitHub Actions Integration: Automated compatibility reporting in CI/CD

• Browser Extension: Bring Baseline insights to web inspector tools

🔮 Vision:

• AI-Powered Recommendations: "Based on your target browsers, here are 3 safer alternatives to CSS Container Queries"

• Team Dashboards: Track modern feature adoption across projects and teams

• Community Templates: Let developers share and discover Baseline-optimized project templates

🌍 Impact Goals:

• Help developers adopt modern web features confidently

• Reduce average compatibility research time from 20 minutes to 20 seconds

• Become the go-to tool for Baseline integration in developer workflows

Baseline Buddy isn't just a tool, it's a bridge to the modern web for every developer. 🌉

Built With

Share this project:

Updates