BCD use "in the wild": šŸ£ compat-tester on NPM šŸ£

MDN
1

Hi there,

Just a quick word that before Parisā€™ Hack on MDN and thanks to BCD, inspiration, existing ideas and tools (using other MDN data), Iā€™ve released compat-tester on NPM :slight_smile:

For now, this tool is in alpha-stage and analyzes HTML / CSS files (following <style>or <link rel="stylesheet"> versus a ā€œbrowser scopeā€ JSON file.

Basically: scope.json contains:

{
    "ie": "8",
    "firefox": "35",
    "chrome": "50"
}

and you could run:

compat-tester index.html scope.json

to report possible compatibility issues in the HTML and related CSS files. Itā€™s also possible to target one HTML/CSS file or string.
Running this, you would get something like:

1e134bab3ea6ef94
1e134bab3ea6ef94934Ɨ442 23.2 KB

As an alpha, feature set is still limited and CSS detection only targets properties now, JS detection is inexistant at the time.

Hope this will prove useful, looking forward to merging ideas with others :slight_smile:

:bird:Tweet:bird:

6 Likes
2

Nice! This is some really cool work Sphinx.

2 Likes
3

THIS is so ace! I can see many devs finding this package super useful.

1 Like
4

:notes: compat-tester 0.2.4 is out and you can now check the compatibility of a given webpage like

compat-tester https://developer.mozilla.org/en-US/ scope.json
compat-tester https://myfav.site.com scope.json

We can now see that the MDN homepage uses <link sizes> when the data states this isnā€™t available for anyone :face_with_raised_eyebrow: :slight_smile:
We might also see that the CSS of the site uses align-self which is, a priori, not available for Safari (it might be worth a visual test on this browser to check if nothingā€™s broken or it might be worth checking if the data reflects the current state of implementation :slight_smile:).

Enjoy!
P.S. doesnā€™t work (yet) behind a proxy.

1 Like