Baseline Buddy

Baseline Buddy: Instantly see which modern web features are safe to use, get docs, and smart suggestions—all inside VS Code.

Comment

About the Project

Baseline Buddy was inspired by the challenges web developers face when trying to adopt modern web features safely. Often, developers use APIs or CSS features without knowing if they are fully supported across major browsers, which can lead to subtle bugs or inconsistent user experiences. We wanted to create a tool that integrates directly into the developer’s workflow and provides real-time guidance.

What I Learned

Building this project taught me:

  • How to create a fully functional VS Code extension using the VS Code Extension API.
  • How to integrate with external datasets, specifically the web-features dataset.
  • How to provide interactive developer experiences: hover tooltips, popup suggestions, and squiggly diagnostics.
  • How to handle asynchronous JavaScript and manage editor events for live feedback.

How We Built It

We built Baseline Buddy in several steps:

  1. Data Integration – Used the web-features npm package to get browser baseline data for web APIs and CSS features.
  2. Commands – Added commands to check a feature from the Command Palette.
  3. Hover Provider – Implemented hover tooltips to show baseline status and documentation links in the editor.
  4. Diagnostics – Added squiggly warnings for features not fully supported.
  5. Popup Suggestions – Suggested safer alternatives when a feature is not part of the baseline.
  6. UI/UX polish – Ensured concise messages, clear links to MDN or CanIUse, and smooth interactions inside VS Code.

Challenges Faced

  • Data inconsistencies: Some features in the dataset lacked MDN or CanIUse links, requiring fallback logic.
  • Hover behavior: Getting the hover provider to trigger only on relevant JS/TS symbols and ignore unrelated variables took some iteration.
  • Feature mapping: Some web APIs like AbortController didn’t have straightforward baseline entries, requiring careful searching and fuzzy matching.
  • Extension packaging: Ensuring the extension works locally and is ready for VS Code Marketplace submission took attention to package.json and folder structure.

Impact

With Baseline Buddy, developers can instantly know whether a feature is safe to use, explore official documentation, and receive suggestions for alternatives. This helps reduce browser compatibility issues and speeds up adoption of modern web technologies.

Built With

  • caniuse-tools-/-libraries:-node.js
  • github
  • languages:-javascript
  • mdn-web-docs
  • npm-editors-/-ides:-visual-studio-code-version-control-/-hosting:-git
  • typescript-frameworks-/-platforms:-vs-code-extension-api-apis-/-datasets:-web-features
Share this project:

Updates