easyteach-howest

Validates HTML and CSS projects using a custom ruleset.

Usage no npm install needed!

<script type="module">
  import easyteachHowest from 'https://cdn.skypack.dev/easyteach-howest';
</script>

README

Easyteach (ET)

Quick start guide

Install Node.js (v6)
Run

$ npm install -g easyteach-howest

This will enable the et command for your terminal.

You can now run et start <path to et.config.json> to start validating projects. Project folders naming patterns should be set in the config file. Reports will be sent to the "reports" folder in the same directory.

et mail <path to output folder> this will mail the results to all students with a student.howest address if the mailing token is set as an environment variable. The token is only available to teachers. The output folder will be deleted upon finishing.
If no paths are specified in the above commands, they will execute from the current folder.

et.config.json

The configuration file consists of a folder_pattern, a negate, an HTML and a CSS part, each containing multiple layers of possible configuration.
If one or more options has your desired value as a default, you don't have to specify it in your config file.

Setting a student's folder pattern

folder_pattern Type: Object, Default:

"folder_pattern": {
  "classname": "-",
  "name": "-",
  "subject": "-",
  "week": "-",
  "lesson": ""
}

The format is always: "attribute": "separator".
The above example (and default) will match folders like "1TI-John.Doe-WEB-week3-lesson2". The full name should be separated by dots. All keys are required.

Negating certain files

negate Type: Array, Default: ["reset.css"]
Any files specified in the array will be skipped on validation.

HTML

allow_style_tag Type: Boolean, Default: false, Reports: error
Allows or disallows the use of <style> tags.

allow_inline_styles Type: Boolean, Default: false, Reports: error
Allows or disallows the use of inline styles on HTML elements.

force_image_title_attribute Type: Boolean, Default: false, Reports: warning
Checks for any image tags missing a title attribute. Adds these up and adds the total to the report.

force_unary_end Type: Boolean, Default: false, Reports: warning
Any unary tags such as <hr> and <img> require an ending slash when set to true.

cleanup_unused_styles Type: Boolean, Default: false, Reports: warning
Any specified styles that were not applied will be copied to the report.

disallow_dom_structures Type: Array, Default: [], Reports: error
Any DOM structures specified in the array (use CSS selectors) will be disallowed.
If you want to prohibit the use of an element on its own, add the respective selector. e.g. ["ol > li > a", "ul"]

HTML Counters

classes ids
Type: Array (int), Default: [], Reports: error/warning
Counters accept an array as an argument, index 0 being the maximum amount, and index 1 being the reporting type. 0 is a warning, 1 is an error.

  • classes: [] unlimited amount of classes, no checks done
  • classes: [2, 0] will warn from 2 classes upwards
  • classes: [1, 1] will error from 1 class upwards
  • classes: [0, 1] will error and report no classes were needed

The program will not check for any counters when they are either left out or empty.

CSS

allow_important Type: Boolean, Default: false, Reports: error
Will report the use of !important is highly discouraged.

allow_positioning Type: Boolean, Default: false, Reports: error
When set to false, using positioning will be disallowed.

CSS Counters

floats comments
See HTML counters for information on these counters
Important note: the comments counter's spec is inversed. Specify a minimum instead of a maximum.

See the default configuration here.