Imaad08
commented
9 months ago CPT Warmup Review Ticket
Project Quick Summary:
- The binary project has gone into complex frontend development with SaaS and complex JavaScript revolving around the binary. The main project consists of 5 features, each one unique in showing a different aspect of how binary is applied in code whether it be through things like encryption or even ASCII.
In-depth Project Demonstration/Overview:
3 Most Valuable Parts of Code:
- Password decrypter/decrypter: The encrypt piece of the code converts an inputted password, converts it to an ASCII character, and then converts it into binary. Similarly, the decrypter goes in the reverse, going to ASCII and then to english characters
-
RGB color code picker: This project allows the user to toggle the binary for the primary colors to create new combinations of color, further exploring the connection between binary and colors
-
Image to ASCII: This project analyzes an inputted image and checks the pixel intensity. Based on that, it assigns each pixel a ASCII character to reconstruct the image with.
Challenges Faced:
-
SASS styling: While trying to add code for universal SASS styling, we had many problems getting the style to apply for all buttons. Some of our original code that used to experiment with the button styling is below:
-
ASCII image sizing: Originally, the ASCII images that were being outputted were very out-of-proportion rendering them hard to recognize and see what they actually were. After a couple tries we finally fixed this by changing the container size for where the image was actually displayed. The code below shows the new added canvas section where the borders, length, and width were set.
-
Lightbulb images not appearing or changing when the buttons were being clicked. For the binary visualization the images that were supposed to go along with the buttons didn't show up. The image below shows the changes made to the code to get the images to show up correctly on the site.
Contributions:
Imaad
-
Binary password encrypter/decrypter: Set up the entire encrypter/decrypter system, including styling and JavaScript logic for encryption/decryption and password view/hide button
-
SaaS: Created default button styles in the SaaS files to be used for every button in the project
-
Helped Tejas troubleshoot minor light bulb project issues
-
A challenge I faced with the password encryption/decryption was getting the two step conversion to work. Often times, it would sometimes give me nothing or a random string of binary that wouldn’t translate to anything
Ronit
-
Logic gates: Created complex JavaScript logic to calculate different outputs based on selected binary number sets and the gate that the set is attempting to pass. Choose between 5 options: AND OR XOR NAND NOR XNOR
-
RGB color codes: Created a color picker that lets users toggle binary numbers for the primary colors. Based on these selected binary values for the primary colors the corresponding color that is a mix is displayed.
-
A challenge I faced was while working on the binary RGB color simulator. The buttons for the binary primary colors would not connect to the color displayed. The color displayed would not correspond to the color displayed:
Tarun
- Image to ASCII: Created code to take an inputted image to analyze each pixel's pixel intensity and assign an ASCII character to each pixel. Then, it reconstructs the image using the ASCII characters.
-Difficult to manage the clarity of the image while making it binary. Doing everything in 1 and 0’s made the image extremely difficult to see. The solution was to use multiple ASCII characters to represent pixel intensities.
Tejas
-
Light bulb: Made a visual representation of binary using light bulbs and dynamically updating their state based on the binary numbers. Also added a feature to do numeric operations on the binary numbers to affect the state of the lights
-
A challenge I faced was working with the images and linking them to the binary code. It initially bugged out and didn't display anything, but working with Imaad helped me debug the issue and get it to work.
Reflection/Takeaways:
-
All in all this was a really good project and we were able to create a solid and interactive learning tool for topics including binary and ASCII. Dividing up the work was really useful because it allowed for us to all focus on our own individual features that come together to make the final product. We allowed ourselves to expand beyond our original plans to add extra features and functions to our project.
-
One tool that was extremely helpful that we discovered this trimester was a vscode extension called Liveshare. This tool allowed for us to collaborate simultaneously and for all of us to work on the same file but on different parts. Normally this would be chaotic because of Githubs Push, Pull, Commit system but with this extension our work was made much easier.
-
Even though this project was only frontend and we have worked with it before, we still learned a lot of new things about how to design better-looking pages. SASS was a really cool tool to work with because it allowed us to style multiple things without having to create multiple style sections. This is a tool we will definitely use again in our future projects.
-
Documentation was also something that we really put a heavy emphasis on this trimester for this project. Because we all (for the most part) were working on our own unique features, adding lots of comments explaining what our code did was really important to make sure that everyone in our team was on the same page.
Areas for Improvement:
-
While we learned a lot from this project about coding, we also have a lot of room to improve and to make our future projects even better.
-
Utilizing Github issues. Even though our job commenting on the code was really good, we could really step up our game when it comes to documentation about issues. We faced a lot of issues (as mentioned in the challenges section) and adding these issues to Github would be really helpful in managing the current state of our problems. We would be able to have a more clear representation of what our state of progress is on certain problems allowing us to solve them faster and more efficiently.
-
Code Reviewing. While we got a lot of good feedback from people who reviewed our code, next time we need to be more clear in wanting more constructive feedback rather than just things like, “good job”. Allowing us to hear this feedback from other people will allow us to fix any potential problems or issues.
-
Improving our plan could also help significantly improve our final product. While we continuously worked, we tended just to work on whatever we were thinking about without actually following a proper schedule. While this was sometimes good, having a more prominent schedule could maybe potentially help us manage our time better in class for future projects.
To-Do Next:
-
Incorporate the following aspects from this project into our next one:
-
Incorporate Feedback (pop-ups, better communication/organization, and utilizing utterances further)
-
SASS styling
-
Heavy emphasis on the user experience (i.e. being able to interact with the site instead of the just scrolling through.
-
VScode Live share Extension
-
Continue to heavily document code in comments to aid in understanding
-
Interactive Frontend Button
-
More prominent scrum boarding and schedule planning
-
Receive feedback more frequently with constructive criticism
Team Review Ticket(Team Grade) Final Team Review