If you want to help the project by contributing the code, you're welcome. Any improvements are very appreciated.

There are three main projects:

• pixelgrid - the main project that contains core functionality to build the grid and add it to a website layout. Distributed as an npm package.
• pixelgrid-browser - the project that contains UI for browser extensions (react/redux stack is used).
• pixel-grid.github.io - the repo that contains source code of pixelgrid.zwezdin.com website. If you found a typo on the website, feel free to contribute to this repo.

Common rules

All active development is in development branch. master branch used for released code only.

All codes based on Typescript. Please, don't try to skip it by using any.

To contribute your code use following approach:

1. Fork and clone the repository
2. Do all work in development branch. If necessary, create a new branch from development.
3. Use NPM to manage the packages. Run npm install to install packages for the appropriate project.
4. Make your changes. If there are bugs or new functionality, create unit tests to cover it.
5. Ensure that everything is still working by running npm run lint and npm run test.
6. Format your code by running npm run format.
7. Commit and push your changes to the forked repo.
8. Create a pull request into the main repo.

Follow the best practices while you working on your changes:

• Update README.md file, if necessary. Mention in your PR that Wiki should be updated as well.
• Write an informative commit message.
• Do single thing per pull request. If you want to contribute a few features or bugfixes, create separate pull request for each.
• Do not update version in package.json - it will be updated during publishing.

PixelGrid main package

There are test page inside the main project to test functionality on the fly. You can also use unit tests while working on the code.

To run and open test page, start npm run start command. It will use Webpack Dev Server to serve the content of the page.

To produce a final bundle, use npm run build command. Once it has done, the dist folder will contain result package content.

PixelGrid browser extension

Browser extension based on React/Redux. To run it, use npm run start command. It will open the UI, but adding the grid to the pack will not work in this mode.

To debug the browser extension, you'll need to create a package. Use the following commands to build it:

• npm run package:chrome to build Chrome extension
• npm run package:firefox to build Firefox extension
• npm run package:opera to build Opera/Yandex browser extension
• npm run package:edge to build Edge extension

Once it's built, load to extension into the browser to debug it.