Web Linter

• 

  WebLinter capturing errors and warnings

• 

  WebLinter without errors

• 

  WebLinter NPM page

Inspiration

As a backend developer, I’ve always been focused on performance, scalability, and clean server-side logic, but I’ve also seen the frustration that frontend teams face when features behave differently across browsers.

I became interested in the Web Platform Baseline initiative and realized there was no easy way for developers to automatically catch usage of non-baseline features — especially in plain HTML/CSS projects.

That’s when I decided to build WebLinter: a simple CLI tool to help developers catch those issues before they reach production.

How I Built It

Despite not being a frontend dev myself, I learned a lot about the frontend ecosystem to build WebLinter.

It uses:

• web-features — the same dataset used by MDN and Chrome DevRel.
• PostCSS — to deeply parse CSS files.
• Parse5 — to analyze HTML.
• Commander.js — for CLI interaction.
• Globby — for fast file discovery.
• Custom caching logic — to improve performance and reduce redundant scans.

WebLinter is built in Node.js, and my focus was on making the tool easy to set up, efficient, and useful even in large codebases.

Challenges I Faced

• Understanding how CSS and HTML parsing works was a new challenge for me coming from a backend background.
• Connecting real-world feature usage (like backdrop-filter) to structured identifiers like css.properties.backdrop-filter required building a matching system around the web-features dataset.
• Making the tool fast and repeatable meant building a caching layer that tracks the last scan date and avoids reprocessing unchanged files.

What I Learned

• I got hands-on experience with frontend tooling and browser compatibility challenges.
• I learned how browser features are standardized and rolled out — and why even “standard” features might not be safe to use yet.
• I realized how important baseline support is for building robust, accessible user experiences.

Future Plans

• Add support for JavaScript/TypeScript with Babel
• Recognize features inside modern frameworks (React, Vue, Svelte)
• Integrate with popular build tools (Webpack, Vite)
• Develop a VS Code extension for real-time feedback

Even though I’m a backend developer, I built WebLinter to help frontend teams ship more reliable code. It’s a reminder that we all benefit when the whole stack works well — from the server to the browser.

Built With

• node.js
• parse5
• postcss
• typescript
• web-features