Baseline Buddy

A tool that guides developers using Baseline data

Comment

Inspiration

Making sure that our code works in a variety of browsers is a common challenge for developers. Although Chrome's new Baseline project offers useful compatibility information, bouncing between documents and your IDE disrupts the flow.  In order to help developers stay focused while writing standards-compliant code, Baseline Buddy was created with the goal of bringing this compatibility data directly into Visual Studio Code.

What it does

A VS Code extension called Baseline Buddy makes it easier for developers to write code that works in browsers. It : Uses baseline data to display hover hints about browser support for HTML, CSS, and JS features. 

Provides safe fallbacks or quick-fix ideas to replace unsupported features. 

Tries to cut down on the amount of time spent looking through compatibility tables and troubleshooting cross-browser problems.

How we built it

Framework: TypeScript's VS Code Extension API

Key Features: Command handlers and hover providers were added for quick-fix recommendations.

Data Source: Parsed structured baseline data for insights into browser compatibility.

Cooperation: GitHub and Discord were used to manage tasks and PRs cooperatively.

Testing: Validation and debugging were done using the extension development host for Visual Studio Code.

Challenges we ran into

Effectively parsing and mapping sizable Baseline data sets.

Dynamically managing feature lookup in the editor.

Establishing "quick-fix" flows that have purpose and seem natural to developers.

Coordinating pull requests and contributions across time zones.

Accomplishments that we're proud of

Created a working prototype of a VS Code extension from the ground up.

Successfully incorporated command structure and hover hints.

Outlined a clear project structure and collaboration.

An extensible architecture was created for upcoming enhancements.

What we learned

Practical knowledge of developing VS Code extensions.

How to efficiently use compatibility data and the Baseline API.

Enhanced open-source collaboration, Git workflow, and teamwork.

The significance of UX in developer tools: striking a balance between simplicity and power.

What's next for Baseline Buddy

Increase the number of features and languages that are compatible.

To see feature support across target browsers, add in-editor analytics.

Use machine-learned recommendations to enhance quick-fix suggestions.

Post the extension to the Visual Studio Code Marketplace.

Make a web dashboard to go along with it for increased visibility.

Share this project:

Updates