Baseline Pro

Instant web feature compatibility checks.

Comment 1

Inspiration

I was tired of the endless cycle every web developer faces: "Is this feature safe to use yet?" The constant context-switching between MDN, CanIUse, and Stack Overflow was draining. I'd spend (45) minutes researching features like Container Queries, only to find conflicting browser support information.

When I discovered the Baseline initiative - a joint effort by Google, Microsoft, Apple, and Mozilla to provide authoritative compatibility data - I realized: why should this critical information live outside our development environment? The solution had to be right where developers code: in VSCode.

What it does

Baseline Pro is a VSCode extension that gives instant answers about web feature compatibility. It:

🔍 Detects 45+ modern web features in JavaScript, TypeScript, HTML, and CSS

🎯 Shows real-time visual feedback with color-coded underlines:

💚 Green = Widely available & production-ready

💛 Yellow = Newly baseline & safe for modern apps

❤️ Red = Not baseline - avoid or provide fallbacks

📊 Calculates Baseline Score ((0-100%)) for your project

📋 Generates comprehensive reports with actionable recommendations

🌐 Provides browser support data for Chrome, Firefox, Safari, and Edge

How we built it

Technical Architecture:

text VSCode Extension API (TypeScript) ↓ Baseline Analysis Engine
↓ web-features@2.48.0 (Official Data) ↓ Regex Pattern Detection ↓ Real-time Developer Feedback Key Components:

Detection Engine with regex patterns:

typescript const patterns = new Map([ ['optional-chaining', /\?./g], ['nullish-coalescing', /\?\?/g], ['container-queries', /container-type|@container/g] ]); Scoring Algorithm:

Baseline Score

W × 3 + N × 2 + L × 1 T × 3 × 100 Baseline Score= T×3 W×3+N×2+L×1 ​ ×100 Where (W) = Widely available, (N) = Newly available, (L) = Limited support, (T) = Total features

VSCode Integration:

Tree views for feature listing

Diagnostic collections for underlines

Commands for analysis and reporting

Status bar for quick score visibility

Challenges we ran into

  1. TypeScript Type System Conflicts:

Official web-features package returned boolean values while our interface expected literal false

Solution: Enhanced type safety with union types

  1. VSCode Extension Learning Curve:

Understanding activation events and lifecycle management

Solution: Deep dive into VSCode Extension API documentation

  1. Performance Optimization:

Naive implementation scanned entire files on every keystroke

Solution: Implemented debouncing and efficient data structures for (O(1)) lookups

  1. Regex Pattern Accuracy:

Balancing comprehensive detection with false positives

Solution: Iterative testing and refinement of pattern matching

Accomplishments that we're proud of

First VSCode extension integrating official Baseline data

Real impact - actually stopped myself from switching tabs to check compatibility

Professional UX with intuitive color-coded feedback system

Mathematical scoring that quantitatively measures project health

Production-ready architecture that's extensible and maintainable

Most proud moment: Seeing that first green underline appear instantly as I typed ?. and knowing we'd created something truly useful.

What we learned

Technical Insights:

VSCode Extension API is powerful but has a steep learning curve

TypeScript generics and advanced types are essential for robust applications

Regex optimization requires careful balancing of precision and performance

Product Insights:

Developer experience trumps features - fast feedback beats comprehensive analysis

Progressive disclosure works best - simple info first, details on demand

Context is king - inline diagnostics are more valuable than separate reports

Team Insights:

Documentation is crucial when working with rapidly evolving standards

Community standards like Baseline make interoperability possible

Open source collaboration requires clear communication and version management

What's next for Baseline Pro

Short-term (Next 3 months):

Expand feature detection to 100+ web features

Add AST-based parsing for more accurate detection

Implement team dashboard for project analytics

Create CI/CD integration for build pipeline checks

Medium-term (Next 6 months):

AI-powered suggestions for code modernization

Polyfill recommendations based on target browsers

Custom rule creation for team-specific standards

VS Marketplace publication for easy installation

Long-term vision:

Multi-editor support (WebStorm, Sublime, etc.)

Enterprise features for large organizations

Machine learning to predict feature adoption curves

Global compatibility database with real usage statistics

The ultimate goal: Make web standards accessibility as fundamental as syntax highlighting in every developer's workflow.

Built With

Share this project:

Updates