Project 1 Feedback

Code Quality - Excelling

Criteria: Is the code well formatted? Are variable and function names semantic and sensible? Is the code easy to read and understand?

Strengths:

Code is well-formatted with semantic and sensible naming. Good job using semantic HTML elements, and consistently using verbs to begin your JavaScript function names.
Code is easy to read and understand. Good use of commenting in parts of your JavaScript and CSS to explain what the code is doing as well as attributing sources inline.
No commented-out code or console.logs observed in your code files.
HTML and CSS both pass validators with no errors or significant warnings!
Great work modularizing your program into different JS files that handle different aspects of game functionality. You used a mixture of classes and functions in a really effective way that was enjoyable to read through.

Areas for Growth:

In terms of semantic HTML, I notice that you have multiple <h1> elements. Remember that there should only be one highest-priority heading on a page, and it should convey meaning about the overall page content, especially for folks using assistive technology to access your app. Any other headings should use <h2> and below, but can be styled to be as large or even larger than the <h1> as needed.
As a general rule, remember to use classes for styling and ids if needed for DOM element selection. It's harder to maintain and scale styles written using ids.
Saving your files with my auto-formatting caused some indentations and other formatting changes to be applied consistently. Check out your formatting settings and be sure it's enforcing your preferences.

Technical Requirements - Excelling

Criteria: How does the project stack up to the requirements for this project? Is the developer making use of the material we've covered in a way that makes sense?

Strengths:

Your application meets all the technical requirements listed below! The app renders in the browser and no errors were observed in the console. Nice job getting your app deployed to GH Pages, and also having a very extensive history of commits dating back to the start of your project.
Great job working with audio, animations and JavaScript's timing functions to build your stretch features. You used a variety of JavaScript language features in really effective ways to create the logic and functionality you needed. You clearly learned a lot in this process, but more importantly, I can see that your meta-developer skills of researching and implementing new technologies is really getting strong.
Your application is feature-rich, incredibly engaging and also very user friendly. You picked quite a unique game and blew us all away with how you harnessed these frontend technologies to implement it.

Areas for Growth:

GitHub repo shows a good history of commits, but work on both the consistency of your commit message formatting as well as their content. Commit messages should be concise, descriptive , and consistently structured -- 'Code cleanup' is not ideal, though we're all guilty of having messages like that at one point or another. The standard is usually 'present-tense verb + description of what was done' for each and every commit. For example, 'Add styling to card container' or 'Refactor API call'. This is my favorite article on how to write good commit messages and why it's an important focus for developers.
For further feature development and for future projects, definitely make use of Git Branches to work on code without affecting the main branch -- this will keep you from having to worry about breaking the working game, and is an important development practice to get in the habit of doing. When your branch works the way you want it to and you're ready to incorporate it into production code, you can submit a pull request on your repo or use git merge to merge your development branch to the main (we haven't really practiced this yet, but it's pretty straightforward!).

Creativity and Interface - Excelling

Criteria: Is the application easy to navigate? Does it work well in every major browser? Is it responsive? Does it incorporate modern UI Themes?

Strengths:

The application is easy to navigate. All features shown on the page are functional.
The application resizes well to a certain point.
The UI is nice and clean, uncluttered and straightforward. The scrolling feed of features is really quite something. The color palette and organization is on-theme and makes really good use of available desktop browser space vertically and horizontally.
Incredible work getting those animations to work. Game play feels very lifelike!

Areas for Growth

The game does lose some functionality on smaller browser widths, such as the player's dice rolling into the scoring area. Think about writing some media queries to make the application more mobile-friendly when you can.
It looks like you have quite a few stretch goals related to the UI and design of your application -- it would be really cool to see those achieved!

Functionality - Excelling

Criteria: Does the application work without errors or bugs? Does it present a complete app, where every feature is fully implemented in a way that makes sense?

Strengths:

The application works without errors or major bugs observed.
Project presents a complete application, with every feature fully implemented in a way that makes sense.
Application has a clear beginning, middle and end.
Nice job implementing the music board -- I like how the buttons are not clickable during the computer sequence. The buttons are clickable before the game starts -- is this intentional? I do like being able to hear the notes and play around on the keyboard before the game.

Areas for Growth:

The only very minor bug I observed was the one you pointed out in office hours the other day where the five die can be hard to click. I know we talked about selecting for child elements of the "die" div, and that seemed to improve the clickability to some degree -- did you have trouble grabbing the die after that?

Presentation - Excelling

Criteria: Is there adequate documentation? Is the repository well organized and free of clutter?

Strengths:

The README.md looks great! Super engaging with the emojis and images. I love how you included screenshots of the major views of your application, and you wrote great explanations, including talking about how the game works, technologies used, installation instructions, hurdles, and future plans. Good job incorporating aspects of your planning process here too, such as your user stories and wire-frames. This is the first point of contact to your application, and does a great job of introducing your application.
The repo is overall well-organized and free of clutter. Good job organizing your CSS and JS files into folders to keep related files together.

Areas for Growth:

Installation instructions should include how someone get the game running locally on their machine. For this app it would be as simple as opening index.html, but in our future projects we'll need to include info on how to download dependencies and run development servers.
Also include a planning directory in your repo (and with future projects as well) that includes your user stories and wire-frames. This is a great practice for project management skills, and shows your methodological approach to building out an application.

Hard Requirements - Complete:

[x] Render in the browser
[x] Include separate HTML / CSS / JavaScript files
[x] Use Javascript for DOM manipulation
[x] Be deployed online, using Github Project pages and/or to a custom domain.
[x] Use semantic markup for HTML and CSS (adhere to best practices)
[x] Show a good commit history with frequent commits

Necessary Deliverables - (Almost) Complete:

[x] A hosted copy of your game, built by you, hosted on Github Pages
[x] Your HTML/CSS should pass the HTML5 Validator and CSS Validator
[x] A git repository hosted on Github with frequent commits dating back to the very beginning of the project
[ ] A link to your hosted project in the URL section of your Github repo ❌ this is a quick fix ... check out the gif here!
[x] A readme.md file, including explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

Grade: Pass

Jordan, I'm so blown away by what you achieved in a five-day sprint. You took this concept and really ran with it, and made it fit into the mold of what we've learned so far. I'm impressed that you were able to implement this sophisticated game after just one unit of frontend development, and all the determination, drive, and resourcefulness you've shown here is going to take you far. Most importantly, you seem to really enjoy the process of development and working on solving interesting problems with code -- when you get into that flow state, it doesn't really feel like work, anymore, does it? So proud of everything you've accomplished -- congrats on completing project 1, and looking forward to seeing what you build for us next!

Feel free to delete this issue once you're done reviewing my feedback.

Esin,

Thank you so much for the detailed feedback on my dice game! I really appreciate you taking the time to take an in-depth look at it. I’ll take your advice to heart and will make sure to use it going forward. I’m in the process of making the game mobile-friendly, fixing the “5’s” bug, and adding new features. Bring on the Unit 2 project—I’ll be ready!!

Jordan S

From: Esin Saribudakmailto:notifications@github.com Sent: Wednesday, March 3, 2021 1:10 PM To: mrjordantanner/throw-sixmailto:throw-six@noreply.github.com Cc: Subscribedmailto:subscribed@noreply.github.com Subject: [mrjordantanner/throw-six] Project 1 Feedback (#1)

Project 1 Feedback Code Quality - Excelling

Criteria: Is the code well formatted? Are variable and function names semantic and sensible? Is the code easy to read and understand?

Strengths:

Code is well-formatted with semantic and sensible naming. Good job using semantic HTML elements, and consistently using verbs to begin your JavaScript function names.
Code is easy to read and understand. Good use of commenting in parts of your JavaScript and CSS to explain what the code is doing as well as attributing sources inline.
No commented-out code or console.logs observed in your code files.
HTML and CSS both pass validators with no errors or significant warnings!
Great work modularizing your program into different JS files that handle different aspects of game functionality. You used a mixture of classes and functions in a really effective way that was enjoyable to read through.

Areas for Growth:

In terms of semantic HTML, I notice that you have multiple
elements. Remember that there should only be one highest-priority heading on a page, and it should convey meaning about the overall page content, especially for folks using assistive technology to access your app. Any other headings should use
and below, but can be styled to be as large or even larger than the
as needed.
As a general rule, remember to use classes for styling and ids if needed for DOM element selection. It's harder to maintain and scale styles written using ids.
Saving your files with my auto-formatting caused some indentations and other formatting changes to be applied consistently. Check out your formatting settings and be sure it's enforcing your preferences.

Technical Requirements - Excelling

Criteria: How does the project stack up to the requirements for this project? Is the developer making use of the material we've covered in a way that makes sense?

Strengths:

Your application meets all the technical requirements listed below! The app renders in the browser and no errors were observed in the console. Nice job getting your app deployed to GH Pages, and also having a very extensive history of commits dating back to the start of your project.
Great job working with audio, animations and JavaScript's timing functions to build your stretch features. You used a variety of JavaScript language features in really effective ways to create the logic and functionality you needed. You clearly learned a lot in this process, but more importantly, I can see that your meta-developer skills of researching and implementing new technologies is really getting strong.
Your application is feature-rich, incredibly engaging and also very user friendly. You picked quite a unique game and blew us all away with how you harnessed these frontend technologies to implement it.

Areas for Growth:

GitHub repo shows a good history of commits, but work on both the consistency of your commit message formatting as well as their content. Commit messages should be concise, descriptive , and consistently structured -- 'Code cleanup' is not ideal, though we're all guilty of having messages like that at one point or another. The standard is usually 'present-tense verb + description of what was done' for each and every commit. For example, 'Add styling to card container' or 'Refactor API call'. Thishttps://chris.beams.io/posts/git-commit/ is my favorite article on how to write good commit messages and why it's an important focus for developers.
For further feature development and for future projects, definitely make use of Git Branches to work on code without affecting the main branch -- this will keep you from having to worry about breaking the working game, and is an important development practice to get in the habit of doing. When your branch works the way you want it to and you're ready to incorporate it into production code, you can submit a pull request on your repo or use git merge to mergehttps://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging your development branch to the main (we haven't really practiced this yet, but it's pretty straightforward!).

Creativity and Interface - Excelling

Criteria: Is the application easy to navigate? Does it work well in every major browser? Is it responsive? Does it incorporate modern UI Themes?

Strengths:

The application is easy to navigate. All features shown on the page are functional.
The application resizes well to a certain point.
The UI is nice and clean, uncluttered and straightforward. The scrolling feed of features is really quite something. The color palette and organization is on-theme and makes really good use of available desktop browser space vertically and horizontally.
Incredible work getting those animations to work. Game play feels very lifelike!

Areas for Growth

The game does lose some functionality on smaller browser widths, such as the player's dice rolling into the scoring area. Think about writing some media queries to make the application more mobile-friendly when you can.
It looks like you have quite a few stretch goals related to the UI and design of your application -- it would be really cool to see those achieved!

Functionality - Excelling

Criteria: Does the application work without errors or bugs? Does it present a complete app, where every feature is fully implemented in a way that makes sense?

Strengths:

The application works without errors or major bugs observed.
Project presents a complete application, with every feature fully implemented in a way that makes sense.
Application has a clear beginning, middle and end.
Nice job implementing the music board -- I like how the buttons are not clickable during the computer sequence. The buttons are clickable before the game starts -- is this intentional? I do like being able to hear the notes and play around on the keyboard before the game.

Areas for Growth:

The only very minor bug I observed was the one you pointed out in office hours the other day where the five die can be hard to click. I know we talked about selecting for child elements of the "die" div, and that seemed to improve the clickability to some degree -- did you have trouble grabbing the die after that?

Presentation - Excelling

Criteria: Is there adequate documentation? Is the repository well organized and free of clutter?

Strengths:

The README.md looks great! Super engaging with the emojis and images. I love how you included screenshots of the major views of your application, and you wrote great explanations, including talking about how the game works, technologies used, installation instructions, hurdles, and future plans. Good job incorporating aspects of your planning process here too, such as your user stories and wire-frames. This is the first point of contact to your application, and does a great job of introducing your application.
The repo is overall well-organized and free of clutter. Good job organizing your CSS and JS files into folders to keep related files together.

Areas for Growth:

Installation instructions should include how someone get the game running locally on their machine. For this app it would be as simple as opening index.html, but in our future projects we'll need to include info on how to download dependencies and run development servers.
Also include a planning directory in your repo (and with future projects as well) that includes your user stories and wire-frames. This is a great practice for project management skills, and shows your methodological approach to building out an application.

Hard Requirements - Complete:

[X] Render in the browser
[X] Include separate HTML / CSS / JavaScript files
[X] Use Javascript for DOM manipulation
[X] Be deployed online, using Github Project pages and/or to a custom domain.
[X] Use semantic markup for HTML and CSS (adhere to best practices)
[X] Show a good commit history with frequent commits

Necessary Deliverables - (Almost) Complete:

[X] A hosted copy of your game, built by you, hosted on Github Pages
[X] Your HTML/CSS should pass the HTML5 Validator and CSS Validator
[X] A git repository hosted on Github with frequent commits dating back to the very beginning of the project
[ ] A link to your hosted project in the URL section of your Github repo ❌ this is a quick fix ... check out the gif herehttps://git.generalassemb.ly/SEIR-201/project-1#required-deliverables!
[X] A readme.md file, including explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

Grade: Pass

Feel free to delete this issue once you're done reviewing my feedback.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/mrjordantanner/throw-six/issues/1, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AL5WNLHGUEOZTFU4SQCIC6DTB2CTDANCNFSM4YRZ2UDA.

mrjordantanner / throw-six