twilio-labs / open-pixel-art

A collaborative pixel art project to teach people how to contribute to open-source

Open Pixel Art by Twilio

This is an art project created with the intention to teach you how to create a pull request.

Visit open-pixel-art.com to see the full artwork!

Anyone who wishes to learn how to create a pull request for a project on GitHub can use this project to contribute a pixel to the canvas. You will only be able to ever create one pixel but you can pick whatever color you prefer as long as it is a valid HEX code. For example: #F22F46 the brand color of Twilio

If you are new to open-source, GitHub or git in general, fear not, we created a tutorial in TwilioQuest for you. It will teach you step by step on how you can get started and will guide you on your quest of creating your pull request. 🕹 Download TwilioQuest

The entire project is automated and is largely maintained by a set of bots that will verify any pixel contributions. However, if you'd like to know more about the project or submit other contributions to the project that are not a pixel, feel free to create a GitHub issue inside the Open Pixel Art project.

Contributing

In order to contribute a pixel to the canvas, you'll have to create a pull request to the Open Pixel Art project on GitHub.

If you are already familiar with git and how to create a pull request on GitHub, you can go ahead and check out the contributing guide.

We understand that contributing to open-source can be intimidating and as a result we created a mission in our interactive coding game TwilioQuest that will walk you step by step through creating a pull request for this project and help you embark on your new quest into open-source!

• Download TwilioQuest
• Check out the Contribution Guides:
  • English
  • Español
  • Deutsch
  • Brazilian Portuguese
  • Chinese Mandarin
  • Dutch

Code of Conduct

We want to make sure that this project is as welcoming to people as possible. By interacting with the project in any shape or form you are agreeing to the project's Code of Conduct:

• English
• Español
• Deutsch
• Brazilian Portuguese

If you feel like another individual has violated the code of conduct, please raise a complaint to [email protected].

Contributors

Thanks goes to these wonderful people (emoji key):

Dominik Kundel 💻 🤔	Amy Kapernick 💻	Kevin Whinnery 💻	Ricky Robinett 💻	André Felipe Scalco 💻	Teddy Gustiaux 💻	Aidan Smith 💻
Scott O'Malley 💻	Todd Moy 💻	Samuel Durkin 💻	ChatterboxCoder 💻	Simey de Klerk 💻	Tilde Ann Thurium 👀	Daniel Peukert 📖
izontm 📖	Carly Robison 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Technology Thank You

This project is powered by various open-source projects. Among others:

• Eleventy for the static site generation
• Danger for the automated code review
• Mergify for automated PR merging
• All Contributors Bot to recognize the contributions of everyone
• Jest for Unit Testing
• NES.css for the CSS styling
• Welcome Bot to welcome new contributors

License

MIT

open-pixel-art's Issues

Grammatical errors in Portuguese texts

The contributing guide has some grammar errors, such as redundancy and wrong punctuation.

Add changed pixels to expected commit message

The Issue

During times of high commit volume like Hacktoberfest, or when the stars align against you, someone else may be working on updating the same pixel as you are. With a generic recommended commit message, you need to dig into every open PR to view the file changes in order to check what pixels were changed in the open PRs that are ahead of yours.

Proposed solution

The contributing guidelines give specific instructions to add your commit with the message feat(pixels): add my new pixel., following the Conventional Commits Standard. By adding your claimed pixel to the commit message (and, therefore, your automatic PR title), one can easily do a visual scan of the PRs waiting to be merged to make sure they aren't about to try to change a pixel that will soon be merged and cause a conflict. For example, feat(pixels): add my new pixel (8, 27). This solution would be loosely implemented by updating that section of the docs.

Somewhat related to #340

Show name of contributor when hovering over pixel

It would be cool to show the username of the person who contributed the pixel when you hover over it. Right now there's not client-side JavaScript running on the page. I won't have time to work on this myself but it would be cool to see this.

Requirements

The page currently does not have any client-side JavaScript and even with this should stay as lightweight as possible. Please do not add a framework for this as this should be possible to be solved with vanilla JavaScript.

The solution can be either a small popup above the canvas or a field below the canvas that gets populated with the right name when you hover/tap on a pixel. That way it would also work on mobile.

Danger is failing for valid PR

Danger failed on the PR #34 even though it was a valid PR stating that the PR was not all on the same line.

There seems to be some logic issue that requires some investigation and debugging.

Error Message:

Danger: ⅹ Failing the build, there is 1 fail.
## Failures
Please make sure all of your changes are on the same line and that you are only modifying one row.

Steps to reproduce:

1. Setup the project according to the Contributing Guide
2. Run npx danger pr https://github.com/twilio-labs/open-pixel-art/pull/34

You should see the error message outlined above. Instead it should pass as a valid submission.

Add Portuguese translation

Hiya,

As we already have some translations, for instance Deutsch and Spanish, I though to add the translation for Brazilian Portuguese.

I have everything done and all set. Just wanna create an awareness for this one.

Colorize: That pixel was contributed by

When hovering over pixels and seeing "That pixel was contributed by: ${user}" the text is always red. Can the text be updated to match the color of the pixel? There could be visual accessibility concerns with this approach. It could be set up to colorize the username to match the contribution only if the contrast passes a certain threshold using an approach like: https://24ways.org/2010/calculating-color-contrast/

Add test for dangerfile's allPatchesAreForTheSamePixel

Test is currently a placeholder:

describe('allPatchesAreForTheSamePixel', () => {
  test('placeholder', () => {
    expect(true).toBeTruthy();
  });
});

fix typo in mergify.yml

actions:
      comment:
        message: 'This PR touches more than one file and has to be [revied] manually. @dkundel'
      label:
        add:
          - 'needs-review'

Username checks should be lower cased

Right now the validation fails in Danger if your username is differently cased than what you placed in the pixels.json file. Instead when we do the check in the dangerfile.js we should first lower case both the username on GitHub and the one in the pixels.json and then compare the two.

unnecessary scrollbar present at the bottom of webpage

Current Behaviour
There is a horizontal scrollbar present on the website, which of no use as there is no scroll horizontally.

Expected Behaviour
There should be no horizontal scrollbar, unless needed

Would you like to work on the issue?
Yes

Screenshot:

Fix "all pixels are in range" test

The "every pixel should be in the limits of the image" test in data.tests.js currently only validates that x and y are not greater than the width and height of the canvas, but should also validate that x and y are 0 or greater.

Improve hovering over pixels

My screen is not so big, so when I try to hover on the top side of canvas, I can't see who contribute to it, as I need to scroll down to see them, but it would change the name by then. Or, I can see them, but I need to zoom out my browser to do that, and there's no way I would do such thing. So, what if instead of put it below the canvas, we make them as a tooltip, that would always follow mouse position.

I'm interesting on implementing this one, in fact I'm currently try doing it.

That pixel was contributed by and ''AT'' is required.

With 40 by 40 pixel grid, when a new pixel is inserted, the newly added pixel is very difficult to locate.

It requires a new tag At after That pixel was contributed by @username so that it should look like That pixel was contributed by @username at (x,y) where x and y is the pixel value.

Currently user does not know where in the grid is (0,0) to start the count and find the newly added pixel.

• Add At field in the Contributor section
• Display correct associated x and y location for the pixel hove.

prevent decimal pixel coordinates

People started adding decimal pixel coordinates, and we don't want that because it messes up the grid.

community member @dpeukert wrote a unit test to prevent this in #1141 (thanks!) but we should also move the existing decimal pixel coordinates to the next available pixel.

High vulnerability `https-proxy-agent` install should be updated/removed

While following the CONTRIBUTIONS.md instructions, when you run an npm install from the main directory, you get the following warning:

✔ Configured custom merge driver
added 1214 packages from 742 contributors and audited 884553 packages in 15.08s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

After running an npm audit, you get the following message:

                      === npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Machine-In-The-Middle                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ https-proxy-agent                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=3.0.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ danger [dev]                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ danger > https-proxy-agent                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1184                            │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 high severity vulnerability in 884553 scanned packages
  1 vulnerability requires manual review. See the full report for details.

And, last, after running npm audit fix, this is what I get:

up to date in 4.926s
fixed 0 of 1 vulnerability in 884553 scanned packages
  1 vulnerability required manual review and could not be updated

Expected behavior: the main npm install of this package should not include any high vulnerability installations.

Update .gitignore

Add IDE specific folders in .gitignore

Add instructions on keeping fork up to date with upstream repo

The contributing docs are really excellent and beginner-friendly.

One issue that contributors might run into during Hacktoberfest is that new commits by other contributors could make their fork go out of sync with the upstream repository before they have finished their own pull request.

Adding a link to GitHub's instructions on syncing a fork, or a paragraph with similar instructions, could be useful.

Add a unit test that verifies no username has brackets

By default the placeholders have the format <UNCLAIMED>. When people claim those pixels they might be inclined to set their username as <dkundel> for example. It would be nice to have a unit test in __tests__/data.js that checks for this. Otherwise it's only being caught in CI.

This was found by @abdulajet

Hex color REGEX isn't being checked properly on tests

Hi!

The snippet below is matching true when some false "hex code" is inputed.

I've tried with #####AAA0f111a and the tests passed.

test('every pixel should have a hex code color if present', async () => {
    const pixels = await loadJson('pixels.json');

    for (const pixel of pixels.data) {
      const hasColor = typeof pixel.color !== 'undefined';

      if (hasColor) {
        expect(pixel.color).toMatch(/#[0-9a-f]{3,6}/i);
      }
    }
  });

Can I get this one? I already know to fix it.

Needs Party Mode

The website has no party mode. Pixels don't ever move. This needs to be addressed.

typo in contributing.md

'Commiting' should be changed to 'Committing'

Danger should not throw an error for an empty PR

What's the problem?

Right now Danger is failing with an exception for empty PRs like this one: #14

Instead it should just fail letting people know that the PR is empty. This has to be fixed in the dangerfile.js.

The error is the following:

TypeError: Cannot read property 'modified_files' of undefined
    at handleMultipleFileChanges (dangerfile.js:19:18)
    at run (dangerfile.js:145:13)
    at Object.<anonymous> (dangerfile.js:157:1)
    at Module._compile (module.js:652:30)
    at Object.requireFromString [as default] (/Users/dkundel/dev/pixel-project-dev/node_modules/require-from-string/index.js:28:4)
    at Object.<anonymous> (/Users/dkundel/dev/pixel-project-dev/node_modules/danger/distribution/runner/runners/inline.js:144:63)
    at step (/Users/dkundel/dev/pixel-project-dev/node_modules/danger/distribution/runner/runners/inline.js:32:23)
    at Object.next (/Users/dkundel/dev/pixel-project-dev/node_modules/danger/distribution/runner/runners/inline.js:13:53)
    at /Users/dkundel/dev/pixel-project-dev/node_modules/danger/distribution/runner/runners/inline.js:7:71
    at new Promise (<anonymous>)

How to test the fix?

In your local environment run:

npx danger pr https://github.com/twilio-labs/open-pixel-art/pull/14

With the fix applied this should output a fail('This PR is empty and needs a manual review').

Add an issue template

Just recently I found out about ISSUE and PR templates.

This site can generate one with a very interesting structure:
https://www.talater.com/open-source-templates/#/

Maybe we can tailor something along those lines to help out the contribution process when it comes to feature requests and issues/bug reports.

Contribute a Pixel to the Canvas

We want to have as many people as possible contribute a pixel to the canvas on open-pixel-art.com and teach people how to contribute to open source along the way.

How do I contribute a pixel?

In order to contribute a pixel, you'll have to contribute an entry to the _data/pixels.json file. You can pick your favorite color and your preferred coordinates on the canvas.

You can find the exact instructions in the Contributing Guide.

I'm new to open source. How do I contribute?

If you are new to contributing to open-source, check out our mission inside TwilioQuest that will guide you through every step of contributing to this project.

feat: Add pixel search

It's difficult to locate a contributed pixel since the number of pixels are growing. We need pixel search by specifying username or coordinates. Also highlight the matched pixel.

Docker setup

As someone that uses docker a lot I think it would be nice to add one or more Dockerfiles for a local docker setup.

That way, we would minimize the chance of conflicting versions of node and give another alternative for those that want to contribute for something more than one pixel. I am open for ideas about what kind of setup are we looking at, but if this is an approved feature, I'll get to work on this ASAP.

There are a lot of PR rejected

I did my PR and saw that it did not pass the review. However, looking at other recent PRs, I realized that many are being rejected. What appears is that I modified many lines, but only added my pixel

First Download TwilioQuest "a" tag is missing attributes

The Download TwilioQuest a tag in the About the Project section is missing the href, target and rel attributes.

Improving menu

@dkundel Is it possible to change _site/index.html i was trying to update menu so its within container so it aligned with rest of page . but doesn't seem to allow me to?

wrong spelling in readme.txt

There was a spelling mistake in readme.txt. It was written 'pix' instead of 'pick'.

Incorrect grammar and missing punctuations

The Readme.md file has missing punctuations and incorrect grammar.

Make external links open in a new window

Have links to external sites open in a new window so it doesn't fully navigate you off the current page.

Address Duplicates

Right now there is nothing in place to prevent pixels "overwriting" each other.

If this is deliberate then please close this issue.

Ideas to address this:

• Order the existing list (by x,y)
• Add a test to enforce that the list should be ordered by x and y
• Add a test to enforce that there are no duplicates in the list

Update Readme.md

Update the Readme.md for correct grammar and punctuations.

Improve "That pixel was contributed by:" empty state

When a pixel isn't contributed by someone it says "That pixel was contributed by:" without a username.

Could the text be ommitted or updated to say "contribute to this pixel" or something that effect and link to https://open-pixel-art.com/#contributing

I'd be interested in implementing either solution if different functionality is desired.

Add test for dangerfile's evaluatePixelChanges

Test is currently a placeholder:

describe('evaluatePixelChanges', () => {
  test('placeholder', () => {
    expect(true).toBeTruthy();
  });
});

<UNCLAIMED> username references don't exist

In CONTRIBUTING.md, there is a statement that unclaimed pixels have a username reference of <UNCLAIMED>. When I was participating and looking through the _data/pixels.json file, I couldn't find a single line that said this, despite there being plenty of unclaimed pixels when viewing the actual pixel art. I would suggest either rewriting that section, or else updating _data/pixels.json to actually include these unclaimed lines

Add a test to check if a pixel isn't already colorized

Is it possible to add a test to check if a new colorized pixel isn't already colorized by someone else ?

Cannot submit PR number in the game

I am unable to submit my PR number in the open pixel game due to the case sensitive thing.

It took my username as yash-garg but not counting my PR due to case-sensitive issues, please help.

Checkout the screenshot below:

License file returns 404 when clicked on Pull request template

The issue happens because it points to an outdated file and wrong location. It can be reproduced on all new and past pull requests.

#1062 fixes this :)

@dkundel feel free to leave any comments on the PR :)

Pixels are not linted causing tests to fail on linted pull requests

#455 Should address this, but it was detected as if I'm claiming multiple pixels, but I'm just moving other people's claims to different positions.

Remove username when hovering unclaimed pixel

Right now when you hover a taken pixel it shows the contributor username on the contributor box. But when you move to an unclaimed pixel the last username is still on the box.

I think the box should show the contributor only when it has one.

format:json run script does not exist

The contributing guide refers to format:json which does not exist. It should instead be format:sort-pixels.

npm run test doesn't work if you don't have prettier installed globally

The tests use prettier, but this doesn't work if you don't have it installed globally. Here's a screenshot:

Add test for dangerfile's isValidPixelUpdate

Test is currently a placeholder:

describe('isValidPixelUpdate', () => {
  test('placeholder', () => {
    expect(true).toBeTruthy();
  });
});

`.screenreader-only` element cover up the canvas

When you try to hover the top left pixel, some pixel doesn't show up the tooltip. I try to search where the problem is, and found out that .screenreader-only element cover up some of the pixels. This can solve easily by adding z-index: -1; to .screenreader-only styles, but is it fine to do that? It wouldn't changes the accessibility, right?

Without z-index: -1;

With z-index: -1;

Idea: enhancing UX

There exists the potential to improve the UX of this website by adding the simple ability to visit another person's GitHub profile by simply clicking on that person's pixel. I would like to work on this idea if it is available for execution.

Show coordinates on pixel hover if it's unassigned

I think It will be a good addition to the participants' experience if on pixel hover if it's unassigned, the box would display that pixel's coordinates. That way it would be easier for people to pick the available pixel spots they like. I'd like to work on this feature.

CONTRIBUTIONS.md clarification

I added a section to CONTRIBUTIONS.md which explains how to ensure that your forked branch is up to date and can be merged successfully.

No links to facebook, twitter and linkedIn in the footer of the application

Application has links to github and twilio at the footer.But links to facebook, twitter and linkedIn are missing.