Kevin

Posted on Oct 11

Web Check CI: Catch Browser Compatibility Issues Before They Break Production

#hacktoberfest #webdev #devchallenge #opensource

Hacktoberfest: Maintainer Spotlight

This is a submission for the 2025 Hacktoberfest Writing Challenge: Maintainer Spotlight

The Problem That Started It All

Picture this: You've just deployed a beautiful new feature, but within hours, support tickets start flooding in. Safari users can't see your popover menus. Older Chrome versions throw JavaScript errors. Your team spends the next day debugging compatibility issues that could have been caught before deployment.

This exact scenario inspired me to build Web Check CI - an automated browser compatibility scanner that integrates directly into GitLab CI/CD pipelines.

What Makes Web Check CI Special

Web Check CI stands out because it is the first CI/CD module of its kind available for GitLab! It's built on Google's Baseline initiative, the new standard for web platform compatibility. Instead of guessing which features are safe to use, developers get authoritative answers based on real browser support data.

Key Features:

One-line setup in GitLab CI/CD pipelines
Scans JavaScript, CSS, and HTML for compatibility issues
Configurable baseline years (2023, 2024, 2025)
Smart feature detection using regex patterns, not just keyword matching
Inline merge request comments showing exactly where issues exist
Allow/deny lists for team-specific rules

Example of Web Check CI running on a real GitLab repo

How It Works Under the Hood

Web Check is both a CI component for GitLab and a powerful CLI tool. The architecture combines three powerful Node.js libraries:

Commander.js - Clean CLI interface with automatic validation
Glob - Smart file discovery that skips node_modules and test files
Web-Features - Google's comprehensive database of 1000+ web platform features

The scanning process is sophisticated yet fast. It checks every web feature against actual code usage, not just mentions in comments or documentation.

Here's some sample output you can expect from WebCheck CI:

❌ Found 2 baseline issues:
🚫 Explicitly Denied Features:
  app.js:11 - document-write
    document.write('<p>This should be caught</p>');
    → Explicitly denied

⚠️  Baseline Compatibility Issues:
  app.js:14 - popover
    element.popover = 'auto';
    → Not in baseline 2024 (available from 2025)

Real-World Impact

Since launching this month, Web Check CI has:

500+ weekly downloads from NPM
Published to GitLab Component Catalog for seamless integration
Achieved high test coverage

Why I'm Passionate About This Project

Web compatibility shouldn't be an afterthought. Every developer has experienced the frustration of browser compatibility issues breaking user experiences. Web Check CI transforms this reactive debugging into proactive prevention. Not every developer has time to track which features work where. This tool brings Google's authoritative compatibility data directly into everyday workflows.

How You Can Contribute

Web Check CI is actively seeking contributors! Here are some ways to get involved:

Try it out: Run npx @kevinloeffler/web-check on your projects
Add it to your GitLab CI: Use our component for automated scanning. You can add it with just a few lines!
Report issues: Found a bug or false positive? Open an issue!
Improve feature detection: Better regex patterns for CSS/JS features
Platform integrations: GitHub Actions, for example
Documentation: Examples, tutorials, use case guides

Getting Started

NPM Package: @kevinloeffler/web-check or click here
GitLab Component: loefflerlabs/web-check-ci/templates/web-check.yml@v1.0.8 or click here
Repository:

Kevin Loeffler / Web Check CI · GitLab

Web Check CI automatically enforces Google's Baseline web compatibility standards in your GitLab pipelines. It scans your JavaScript, CSS, and HTML for unsupported features and reports issues directly...

gitlab.com

Basic GitLab Integration in your GitLab CI YAML file:

stages:
  - lint

include:
  - project: 'loefflerlabs/web-check-ci'
    ref: 'v1.0.8'
    file: 'templates/web-check.yml'

variables:
  BASELINE_YEAR: 2024
  SEVERITY: major
  DENY: "document-write"

What I've Learned as a Maintainer

Building Web Check CI taught me that developer experience is everything. The tool needed to be:

Zero-configuration for basic use cases
Highly configurable for advanced needs
Fast and reliable for CI/CD environments
Clear and actionable in error reporting

The most rewarding part? Seeing developers discover compatibility issues they never knew existed in their codebases.

Join Our Community

You can find the repo and contribution guide on GitLab!

Let's build a more compatible web together.

DEV Community