Think of creating a node/gulp/grunt plugin

[ausi]

Like @seleckis sugessted https://twitter.com/Seleckis/status/732678685078228993

Please vote via a 👍 or 👎 reaction.

[AurelioDeRosa]

I think there are two ways in which this can be done:

• Create a plugin that parses files containing HTML code including template engine files such as .hbs (Handlebars) files. Such plugin would not have any special requirement.
• Create a plugin that navigate live pages. This has the advantage of processing images that are injected via JavaScript. Such plugin will need the use of PhantomJS

[ausi]

I think number two is the way to go because the linter needs a running browser to get dimensions of images at several viewport sizes.

It shouldn’t be too hard because the test suite already runs via PhantomJS. But the performance could be a problem eventually, because the linter already runs several seconds for a simple page.

[Ambient-Impact]

Alternatively or in addition to this, what about a browser extension? Firefox seems to allow extensions to add functionality to the current dev tools, such as the Vue.js devtools, though I haven't looked into whether Chrome supports this. It would be super useful if you just wanted to check one or two URLs, though node/Gulp/Grunt support would probably be better at crawling a whole set of URLs.

[robots4life]

I was about to ask this and see this issue/suggestion. At the moment, for larger projects, I check a batch of images and then comment those out and check the next badge, since if I check all images on an image heavy page it stalls.

What would be super nice is to be able to integrate this into a development workflow with a task runner. What do I need to know to create something that I can integrate into a dev workflow regardless of the amount of images (well, ok, there would surly be a maximum but perhaps a lot higher than with the bookmarklet) ? If you like help with creating something like this and have a plan I would be too happy to contribute under your guidance. This literally screams "integrate me in your dev workflow" :wink:

Whenever I can I mention this to fellow devs, the ones who care about proper responsive images all :heart: it. :rocket: :muscle: Thank you Martin. :+1:

[ausi]

I’m not sure how valuable it can be in an automated workflow because it takes quite long to compute results and the report most proably needs manual oversight.

But it might make sense to split the bookmarklet into two projects.

One could be a browser dev-tools extension to manually check pages in the browser. This should make the linter much more reliable because it shouldn’t have issues with CORS and the like.

The other one might be a linter as npm package that runs all the fast checks. This would suit it better to be integrated in an automated workflow I think.