Merge pull request #22 from hankchizljaw/feature/create-md-generator

Create a generator that converts the json file into the README.md file

README.md

@@ -2,24 +2,24 @@
 
 Aims to be the **biggest** checklist of inclusive design considerations for the web _ever_. Includes items for accessibility, performance, device support, interoperability, and language. Pull requests welcome!
 
-- [ ] [Minify CSS and JS, and remove unused/redundant code](https://developers.google.com/speed/docs/insights/MinifyResources)
+- [ ] Minify CSS and JS, and remove unused/redundant code [Resource #1](https://developers.google.com/speed/docs/insights/MinifyResources)
 - [ ] Maintain terse HTML, without over-reliance on `<div>` scaffolding
-- [ ] [Use screen reader and keyboard accessible HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
-- [ ] [Compress raster images](https://www.html5rocks.com/en/tutorials/speed/img-compression/)
-- [ ] [Optimize SVG path data](https://web-design-weekly.com/2014/10/22/optimizing-svg-web/)
-- [ ] [Make sure heading levels describe a logical section/subsection structure](https://webaim.org/techniques/semanticstructure/)
+- [ ] Use screen reader and keyboard accessible HTML [Resource #1](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
+- [ ] Compress raster images [Resource #1](https://www.html5rocks.com/en/tutorials/speed/img-compression/)
+- [ ] Optimize SVG path data [Resource #1](https://web-design-weekly.com/2014/10/22/optimizing-svg-web/)
+- [ ] Make sure heading levels describe a logical section/subsection structure [Resource #1](https://webaim.org/techniques/semanticstructure/)
 - [ ] Only include heading elements where they introduce sections of content
-- [ ] [Remove potentially insensitive or uninclusive language (use 'singular they')](http://alexjs.com/)
+- [ ] Remove potentially insensitive or uninclusive language (use "singular they") [Resource #1](http://alexjs.com/)
 - [ ] Give video content captions and transcripts
 - [ ] No autoplay video or audio. It can be quite frustrating to try to find and pause with a screen reader.
 - [ ] Provide transcripts for audio content  
 - [ ] [Make sure main body (paragraph) text is no smaller than the default (user agent) size](https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/)
 - [ ] Support 'pinch zoom' (remove `user-scalable=no` if present)
 - [ ] Ensure that page can be resized to at least 200% in the browser and remain legible.
 - [ ] Use relative units (`em`, `rem`, and `ch`), especially for font metrics
-- [ ] [Make sure styles and scripts are not render blocking](https://csabapalfi.github.io/eliminate-render-blocking/)
-- [ ] [Install a service worker and cache all applicable assets](https://css-tricks.com/serviceworker-for-offline/)
-- [ ] [Use content-based, not device-specific, media queries](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#content)
+- [ ] Make sure styles and scripts are not render blocking [Resource #1](https://csabapalfi.github.io/eliminate-render-blocking/)
+- [ ] Install a service worker and cache all applicable assets [Resource #1](https://css-tricks.com/serviceworker-for-offline/)
+- [ ] Use content-based, not device-specific, media queries [Resource #1](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#content)
 - [ ] Provide alternatives and/or descriptions for complex visualizations
 - [ ] Include only clear, meaningful animations
 - [ ] Honor requests to remove animation via the `prefers-reduced-motion` media query
@@ -28,17 +28,17 @@ Aims to be the **biggest** checklist of inclusive design considerations for the
 - [ ] Do not recreate supported and expected browser behaviors with bespoke scripts
 - [ ] Support Windows high contrast mode (use images, not background images)
 - [ ] Provide alternative text for salient images
-- [ ] Apply `alt=""` or `aria-hidden="true"` to decorative images
+- [ ] Apply `alt="` or `aria-hidden="true"` to decorative images
 - [ ] Make sure text and background colors contrast sufficiently
 - [ ] Provide `<title>`s that name the site and the specific page
-- [ ] Provide large touch 'targets' for interactive elements
+- [ ] Provide large touch "targets" for interactive elements
 - [ ] Use data tables (`<table>`) for data only, not visual layout purposes
 - [ ] Make scrollable elements focusable for keyboard users
 - [ ] Do not rely on color for differentiation of visual elements
 - [ ] Use the same design patterns to solve the same problems
 - [ ] Ensure keyboard focus order is logical regarding visual layout
 - [ ] Lazy load large image assets
-- [ ] [Honour DNT (Do Not Track) header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT)
+- [ ] Honour DNT (Do Not Track) header [Resource #1](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT)
 - [ ] Translate / spell out acronyms the first time you use them
 - [ ] Do not hijack standard scrolling behavior
 - [ ] Move focus between dialogs and the controls that invoked them
@@ -48,7 +48,7 @@ Aims to be the **biggest** checklist of inclusive design considerations for the
 - [ ] Provide status and error messages as WAI-ARIA live regions
 - [ ] Provide clear, unambiguous focus styles
 - [ ] Employ well-balanced, highly legible fonts (not too complex or elaborate)
-- [ ] [Do not use very thin font faces](http://www.telegraph.co.uk/science/2016/10/23/internet-is-becoming-unreadable-because-of-a-trend-towards-light/)
+- [ ] Do not use very thin font faces [Resource #1](http://www.telegraph.co.uk/science/2016/10/23/internet-is-becoming-unreadable-because-of-a-trend-towards-light/)
 - [ ] Ensure states (pressed, expanded, invalid, etc) are communicated to assistive software
 - [ ] Match semantics to behavior for assistive technology users
 - [ ] Provide a default language and use `lang="[ISO code]"` for subsections in different languages
@@ -74,17 +74,17 @@ Aims to be the **biggest** checklist of inclusive design considerations for the
 - [ ] [Ensure that content is written as clearly and simply as possible](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html)
 - [ ] Provide descriptive captions for figures
 - [ ] Warn users of links that have unusual behaviors, like linking off-site, or loading a new tab
-- [ ] [Make content easier to find and improve search results with structured data](https://developers.google.com/search/docs/guides/prototype)
+- [ ] Make content easier to find and improve search results with structured data [Resource #1](https://developers.google.com/search/docs/guides/prototype)
 - [ ] Use textual labels to make voice activation cues obvious
 - [ ] Do not mark up subheadings/straplines with separate heading elements
 - [ ] Ensure primary calls to action are easy to recognize and reach
 - [ ] Avoid images of text — text that cannot be translated, selected, or understood by assistive tech
 - [ ] Provide a print stylesheet (single column, with interactive content hidden)
 - [ ] Use well-established, therefore recognizable, icons and symbols
 - [ ] Subset fonts to just the characters needed
-- [ ] Instead of obstructing users with CAPTCHAs, use [honeypots](https://en.wikipedia.org/wiki/Honeypot_(computing))
+- [ ] Instead of obstructing users with CAPTCHAs, use [honeypots [Resource #1](https://en.wikipedia.org/wiki/Honeypot_(computing))
 - [ ] Begin long, multi-section documents with a table of contents
-- [ ] Don't make users perform actions to reveal content unless completely necessary
+- [ ] Don"t make users perform actions to reveal content unless completely necessary
 - [ ] If content is meant to be hidden, ensure it is properly hidden to all users
 - [ ] Make sure controls within hidden content are not focusable
 - [ ] Use `srcset` to tailor images to devices and reduce bandwidth costs

generator/index.js

@@ -0,0 +1,48 @@
+var dataSet = require('../checklist.json');
+var fs = require('fs');
+var path = require('path');
+
+// For storing the main result.
+var result = '';
+
+// Try and load up the intro
+result += fs.readFileSync(path.join(__dirname, '../intro.md')).toString() + '\n';
+
+// Something has gone wrong with the dataset, so throw an error
+if(!dataSet.length) {
+    console.error('Something has gone wrong checklist.json. There doesn\'t appear to be any items :(');
+    return;
+}
+
+// Loop each item and generate a check item 
+dataSet.map(function(data) {
+
+    // Add a checkbox 
+    result += '- [ ] ';
+
+    // Append the content of the item
+    result += data.item;
+
+    if(data.resources) {
+
+        // For storing generated resources
+        var resources = '';
+
+        // Loop each resource and generate a link
+        data.resources.map(function(resource, index) {
+            resources += ' [Resource #' + (index + 1) + '](' + resource + '),';
+        });
+
+        // Remove last comma and any space that follows it
+        resources = resources.replace(/,\s*$/, '');
+
+        // Add resources to the result string 
+        result += resources;
+    }
+
+    // Add a line break 
+    result += '\n';
+});
+
+// Write the new .MD file
+fs.writeFileSync(path.join(__dirname, '../README.md'), result, { encoding: 'UTF-8' });

intro.md

@@ -0,0 +1,3 @@
+# Inclusive Web Design Checklist
+
+Aims to be the **biggest** checklist of inclusive design considerations for the web _ever_. Includes items for accessibility, performance, device support, interoperability, and language. Pull requests welcome!