https://github.com/agathebadia/colorblind-emulator
This project is a Colorblidness emulator, recreating 8 different types of colorblindness, using Ember & SVG Filter for the emulation
https://github.com/agathebadia/colorblind-emulator
a11y accessibility colorblind colorblindness colorblindness-simulator ember emberjs emulator javascript
Last synced: about 1 month ago
JSON representation
This project is a Colorblidness emulator, recreating 8 different types of colorblindness, using Ember & SVG Filter for the emulation
- Host: GitHub
- URL: https://github.com/agathebadia/colorblind-emulator
- Owner: Agathebadia
- Created: 2021-04-12T15:09:48.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-19T17:15:13.000Z (about 3 years ago)
- Last Synced: 2025-03-23T19:39:13.967Z (about 2 months ago)
- Topics: a11y, accessibility, colorblind, colorblindness, colorblindness-simulator, ember, emberjs, emulator, javascript
- Language: JavaScript
- Homepage: https://colorblindness-emulator.netlify.app/
- Size: 12.5 MB
- Stars: 7
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# colorblind-simulator
Using SVG Filter created by hail2u
With the help of NullVoxPopuli and lean8086
This project is a Colorblidness emulator, recreating 8 different types of colorblindness, using Ember & SVG Filter for the emulation
Check out my talk at EmberConf, presenting the application! [Accessibility & Ember: Learning about Colorblidness](https://noti.st/agathebadia/DTySgu/accessibility-ember-learning-about-colorblindness#sKc0uBX)
## Ongoing
* Create content to describe each colorblindness & styling
## TO DO
* Refactor main page with component for each colorblidness, see the forum
* Masonry on the above page?
* Use Ember Data with public API as part of the masonry?
* Accessibility check and refactor
## Prerequisites
You will need the following things properly installed on your computer.
* [Git](https://git-scm.com/)
* [Node.js](https://nodejs.org/) (with npm)
* [Ember CLI](https://ember-cli.com/)
* [Google Chrome](https://google.com/chrome/)
## Installation
* `git clone ` this repository
* `cd colorblind-simulator`
* `npm install`
## Running / Development
* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).
* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
### Code Generators
Make use of the many generators for code, try `ember help generate` for more details
### Running Tests
* `ember test`
* `ember test --server`
### Linting
* `npm run lint:hbs`
* `npm run lint:js`
* `npm run lint:js -- --fix`
### Building
* `ember build` (development)
* `ember build --environment production` (production)
### Deploying
Specify what it takes to deploy your app.
## Further Reading / Useful Links
* [ember.js](https://emberjs.com/)
* [ember-cli](https://ember-cli.com/)
* Development Browser Extensions
* [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)