FeatureFence

• 

• 

  Help-HTML

• 

  FeatureFence Project UI

• 

  Github-Help-website

• 

  Getting-Started

• 

• 

Inspiration

Web developers often face the painful reality that modern features don’t always work across all browsers. Teams spend hours debugging “it works on my machine” issues, only to discover their feature isn’t supported in Safari, Firefox, or older Chrome versions. With Baseline data now available, we saw an opportunity: what if linting could catch unsupported web features before code ever ships? That’s how FeatureFence was born.

What it does

FeatureFence is an ESLint plugin that integrates with the official Baseline web features data to: Scan your codebase for modern CSS, HTML, or JS features. Check whether those features are supported in your project’s target browsers. Warn or error if a feature isn’t widely supported, helping devs avoid breakage. Suggest alternatives or polyfills when possible. The result: teams write future-proof, cross-browser compatible code without guessing.

🛠️ How we built it

Baseline Data: Pulled in from the web-features npm package for up-to-date feature support info. ESLint Plugin: Custom linting rules built in Node.js to map detected code features to Baseline support status. Config Options: Developers can define their target browsers (via Browserslist or config file) to tailor warnings. Testing: Demo projects in React + Vanilla JS were used to validate FeatureFence in real-world scenarios. Open Source Repo: Public on GitHub with MIT License, easy to install as eslint-plugin-featurefence.

🚧 Challenges we ran into

Mapping Baseline feature identifiers to actual syntax patterns in JS and CSS required careful parsing. Balancing warnings vs. errors—too strict and it annoyed developers, too lenient and it missed real risks. Integrating across multiple toolchains (React, Vue, Next.js) without breaking existing ESLint configs. Keeping the plugin lightweight while still accessing up-to-date Baseline data.

🏆 Accomplishments that we're proud of

Built a working ESLint plugin that actually catches unsupported features in real-world projects. Created a developer-friendly config system that adapts to different teams’ browser support policies. Published the project as open source, making it freely available for the community. Demoed the tool in less than 3 minutes while still showcasing practical developer value.

📚 What we learned

The Baseline dataset is incredibly powerful, but mapping it to real code usage patterns takes creativity. Developers care not just about what’s new but what’s safe to use now—Baseline helps answer that. Designing tools for teams means balancing strictness with usability—developers won’t use tools that are too noisy. Hackathons push you to focus on function over perfection—we learned to ship something useful, fast.

🚀 What's next for FeatureFence

IDE Integrations: VS Code extension to surface warnings inline as you type. Autofix Support: Suggesting safe alternatives or auto-importing polyfills. Docs Mode: Generate compatibility reports for codebases, useful for project audits. Community Contributions: Open the door for community-driven rules and feature mappings. CI/CD Integration: Run FeatureFence as part of CI pipelines to block unsafe code before deployment.

Built With

• browserslist
• eslint
• github
• javascript
• node.js
• npm
• vscode
• web-features