Scanora

Inspiration

Web developers often introduce cutting-edge features without realizing that some may not yet be fully supported across all browsers. This can lead to broken experiences or fallbacks for users on older platforms. We wanted to create a tool that automatically scans codebases to detect such features and informs developers about their browser support status. The goal: make it easier to build resilient, future-proof web apps that align with the Web Platform Baseline guidelines.

What it does

Scanora is a command-line tool that scans JavaScript, CSS, and HTML files in a project to detect usage of modern web features. It maps those features to compatibility data from the web-features database and reports whether they are safe to use based on current browser support.

Key features: -Scans .js, .css, and .html files recursively. -Detects modern and experimental web features. -Reports which features are safe or unsafe, including browser version support. -Outputs a detailed JSON report and a log file. -Handles JavaScript parsing errors gracefully with Acorn. -Extensible via keyword mappings and overrides.

How i built it

-JavaScript + Node.js: Built as a CLI tool to run in Node environments. -Acorn + Acorn-walk: Parses JS files to extract AST nodes representing modern JS features. -String scanning: For HTML/CSS features using regexes and line-by-line analysis. -Web-features: Uses the open-source web-features package from the Google Chrome team for accurate, up-to-date browser compatibility data. -Chalk: Adds color to CLI output for easier readability. -Strip-ansi: Cleans CLI output for clean log files. -Glob: Recursively scans project directories for files to analyze.

Challenges i ran into

-Incomplete feature detection via AST: Many modern features can be tricky to detect reliably with ASTs, especially when used dynamically or in non-standard patterns. -Balancing false positives/negatives: Overly aggressive detection could trigger on comments or unrelated content; we had to strike a balance. -Browser compatibility variance: Not all features in web-features include full support matrices, requiring fallbacks or manual intervention.

Accomplishments

-Accurate feature mapping: Combined automatic extraction with manual overrides to improve detection accuracy. -Integrates real browser data: Taps into live browser support data through web-features for practical insights. -Resilient error handling: No crash-on-fail behavior—logs and reports are always saved, even when parsing fails. -Well-structured reports: JSON output allows integration with CI pipelines or dashboards.

What i learned

-How to walk ASTs effectively to find syntactic patterns for feature usage. -The complexity of browser support and how "support" can vary between engines. -The importance of precise keyword mapping and fallback logic for incomplete or missing feature data. -Why human intervention is still often needed in automated scanning tools. -How to design a tool that’s both developer-friendly and machine-readable in output.

What's next for Scanora

-Improved CSS/HTML parsing: Move from line-based matching to proper parsers (like PostCSS or parse5). -Machine learning assistance: Detect patterns or usage that suggest risky feature adoption. -Interactive dashboard: Visualize scan results and trends over time. -GitHub Action/CI integration: Provide ready-to-use actions to enforce baseline in PRs.

It is also available as npm install or a docker pull (package/Image: scanora)