Outline pixel

Select color

Magical Chest
      • I remembered a tutorial video I had watched years ago where the instructor made a 'painting' effect by listening for a mouseDown event and creating a 1px X 1px div element positioned at the mouse location whenever the mouse moved. I always thought the idea was really fun, so I wanted to try making my own version.

        I also used to experiment with making pixel art when I was still in high school, so making a pixel art site seemed like a solid choice.

      • I got an interview with a company interested in my experience with React. However, I hadn't built anything with React for a few months. So I decided to build something fun to refresh my memory on building with React, plus it would give me something to show my interviewer.

      • I had never made a custom context menu before, and I really wanted to experiment with the process. So I had to come up with a purpose for the menu and the most practical thing I could come up with at the time was a color picker.

        I really enjoyed building the menu! It taught me a lot about how to follow event targets and pass information around through seperated elements.

      • After I finished building the tool, I found myself exploring the world of pixel art more and more. To incentivize others to follow along, I thought it would be fun to share some examples that you could recreate with my Pixel Studio tool.

      • Because I just place all the divs next to each other as block elements, and I generate a number of divs as calculated by the viewer height and width upon initialization, that means that any resizing of the window results in the divs scattering about, losing any art that has been drawn on them.

        My first thought was to size them according to viewer width, that way they would scale with the window. This fixed a bit of the problem, but the elements still lost some of their orientation as the window was resized.

      • After playng around with the finished product for a short while, I discovered that it would be far more productive to have a color selector that would change a left-click to then set a color, as opposed to the current solution of applying a color after a right-click and context menu selection.

        However, this tool was really just built for me to experiment, and some day I may come back and build that tracking menu so it would work alongside the context menu.

      • When a user would right-click, it would create an event that would be waiting for the next click. However, if the next click was not a selection of a context menu item, or if it was a click somewhere random, the application would react in obscure ways (from the user's perspective). This issue gave me some great practice with being aware of the event lifecycle and managing listeners so the application reacts predictably.

        After some additional code, I finally got the application in shape so that it reacted predictably regardless of random clicks!