Project 1 Feedback

[esin87]

Project 1 Feedback

Code Quality - Performing

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 mostly well-formatted with semantic and sensible naming for the most part.
• Code is easy to read and understand.
• HTML and CSS both pass validators with no errors! HTML has no errors or valid warnings, which is great. CSS has no errors or warnings. Great job validating your code.
• Really nice use of comments in your JavaScript file to explain what the different parts of your code are doing!

Areas for Growth:

• How could you refactor your event listeners on the answer choices, so that you have one event listener that can handle any of the clicks? When you find yourself hard-coding options and writing the same pattern in event handlers, there's usually a DRY-er way to write the code.
• Remove the commented-out code in your index.html file. To see where the project was previously, we use a good history of git commits that capture the code of the project at that moment in time. No need to include old, non-used code.
• Saving your JS file in my instance of VS Code caused it to reformat. Be sure your Prettier extension is auto-formatting when you save! If you have your preferences set differently from mine, that's no problem, as long as it's consistent.

Technical Requirements - Performing

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 during regular game play. Nice job getting your app deployed to GH Pages, and also having an extensive history of commits dating back to the start of your project.
• Your application is a complete product, with interactivity built in using DOM manipulation.

Areas for Growth:

• GitHub repo shows a good history of commits, but continue to work on both the consistency of your commit message formatting as well as their content. Commit messages should be concise, descriptive, and consistently structured -- 'sunday updates' is not very descriptive, though we're all guilty of having messages like that at one point or another. The standard is usually 'Capitalized 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.
• On a related note, who is Ria Schwalbe? It looks like they authored the vast majority of commits on your repo. Are the commits that person made being attributed to your GitHub account? If not, be sure that on your machine, you're logged into the correct GitHub account.
• For further feature development and for future projects, definitely make use of Git Branches to work on code without affecting the master 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 use git merge to merge your development branch to the master (we haven't really practiced this yet, but it's pretty straightforward!).

Creativity and Interface - Progressing

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 design is great overall and fits with the Twin Peaks aesthetic.
• Nice job incorporating CSS features that contribute to a consistent UI theme that enhances the theme and mood.

Areas for Growth

• The application is usable at smaller/mobile browser widths to a certain point, but eventually the answer choices start to get cut off, and the feedback is hidden behind the question container. This is a great example of why designing with mobile first is important, because if you ensure your app is usable on even the smallest screens, you'll know it's usable on larger screens as well.
• Add a custom favicon to complete your app design!

Functionality - Performing

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:

• Regular gameplay appears to work well without errors or bugs observed.
• Application presents a complete product, with a clear beginning, middle, and end, and features mostly fully implemented in a way that makes sense.

Areas for Growth:

• It would be great to give the user a way to restart the game after they finish!
• Another cool feature would be to have a high score persist between browser sessions.
• You mentioned some more features and functionality that you'd like to build out in your silver-/gold-level features -- I think it would be a great programming experience to keep working on those!

Presentation - Performing

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

Strengths:

• The README.md looks great! I love how you included screenshots of the major views of your application, and you wrote great explanations, including technologies used, wireframes and an overview of your game. This is the first point of contact to your application, and does a great job of introducing your application.

Areas for Growth:

• Please include a planning directory in your repo that includes your user stories and wireframes. This is a great practice for project management skills, and shows your methodological approach to building out an application.
• I would move your image files into a folder called assets. Delete the .vscode file that was created and added to your repo -- it was probably generated when you had another app running on your Live Server and needed to run your app on port 5501.
• Suggested folder structure:
  • assets
  • wireframe images
  • other images
  • app.js
  • index.html
  • styles.css
  • Readme.md

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 - 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
• [x] A link to your hosted project in the URL section of your Github repo
• [x] A readme.md file, including explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

Grade: Pass

Susana, this is a great project and you should be very proud of everything you've achieved here. You made tremendous progress in the course of a week-long sprint, and this project highlights a lot of the key ideas in frontend development. I'm so happy that you stuck with this project, and after trying out a couple different approaches in terms of how to organize your code, you found a method that works for you and delivered a complete MVP. You utilized all the resources at hand and created something unique and functional at the end of the day. I can see that you synthesized a lot of the material for yourself in the course of working through this project, and I hope you will keep working to enhance the features and continue to build your programming skills through this app. Congrats on all your hard work and completing project 1!!

[5usana]

Hey Esin,

Thank you for the detailed feedback, it's good to know where you see my strengths and weaknesses. I have a lot to learn and practice, I'm excited to see my coding improve. To answer one of your questions, Ria Schwalbe is the owner of the macbook I'm borrowing for class. I don't know how to remove her name from showing up on my GitHub entries, it looks misleading.

Susana

On Mon, Mar 1, 2021 at 12:38 PM Esin Saribudak notifications@github.com wrote:

Project 1 Feedback Code Quality - Performing

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 mostly well-formatted with semantic and sensible naming for the most part.
• Code is easy to read and understand.
• HTML and CSS both pass validators with no errors! HTML has no errors or valid warnings, which is great. CSS has no errors or warnings. Great job validating your code.
• Really nice use of comments in your JavaScript file to explain what the different parts of your code are doing!

Areas for Growth:

• How could you refactor your event listeners on the answer choices, so that you have one event listener that can handle any of the clicks? When you find yourself hard-coding options and writing the same pattern in event handlers, there's usually a DRY-er way to write the code.
• Remove the commented-out code in your index.html file. To see where the project was previously, we use a good history of git commits that capture the code of the project at that moment in time. No need to include old, non-used code.
• Saving your JS file in my instance of VS Code caused it to reformat. Be sure your Prettier extension is auto-formatting when you save! If you have your preferences set differently from mine, that's no problem, as long as it's consistent.

Technical Requirements - Performing

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 during regular game play. Nice job getting your app deployed to GH Pages, and also having an extensive history of commits dating back to the start of your project.
• Your application is a complete product, with interactivity built in using DOM manipulation.

Areas for Growth:

• GitHub repo shows a good history of commits, but continue to work on both the consistency of your commit message formatting as well as their content. Commit messages should be concise, descriptive, and consistently structured -- 'sunday updates' is not very descriptive, though we're all guilty of having messages like that at one point or another. The standard is usually 'Capitalized 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 https://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.
• On a related note, who is Ria Schwalbe? It looks like they authored the vast majority of commits on your repo. Are the commits that person made being attributed to your GitHub account? If not, be sure that on your machine, you're logged into the correct GitHub account.
• For further feature development and for future projects, definitely make use of Git Branches to work on code without affecting the master 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 use git merge to merge https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging your development branch to the master (we haven't really practiced this yet, but it's pretty straightforward!).

Creativity and Interface - Progressing

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 design is great overall and fits with the Twin Peaks aesthetic.
• Nice job incorporating CSS features that contribute to a consistent UI theme that enhances the theme and mood.

Areas for Growth

• The application is usable at smaller/mobile browser widths to a certain point, but eventually the answer choices start to get cut off, and the feedback is hidden behind the question container. This is a great example of why designing with mobile first is important, because if you ensure your app is usable on even the smallest screens, you'll know it's usable on larger screens as well.
• Add a custom favicon to complete your app design!

Functionality - Performing

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:

• Regular gameplay appears to work well without errors or bugs observed.
• Application presents a complete product, with a clear beginning, middle, and end, and features mostly fully implemented in a way that makes sense.

Areas for Growth:

• It would be great to give the user a way to restart the game after they finish!
• Another cool feature would be to have a high score persist between browser sessions.
• You mentioned some more features and functionality that you'd like to build out in your silver-/gold-level features -- I think it would be a great programming experience to keep working on those!

Presentation - Performing

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

• The README.md looks great! I love how you included screenshots of the major views of your application, and you wrote great explanations, including technologies used, wireframes and an overview of your game. This is the first point of contact to your application, and does a great job of introducing your application.

Areas for Growth:

• Please include a planning directory in your repo that includes your user stories and wireframes. This is a great practice for project management skills, and shows your methodological approach to building out an application.
• I would move your image files into a folder called assets. Delete the .vscode file that was created and added to your repo -- it was probably generated when you had another app running on your Live Server and needed to run your app on port 5501.
• Suggested folder structure:
  • assets
    • wireframe images
    • other images
  • app.js
  • index.html
  • styles.css
  • Readme.md

Hard Requirements - Complete:

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

Necessary Deliverables - Complete:

• A hosted copy of your game, built by you, hosted on Github Pages
• Your HTML/CSS should pass the HTML5 Validator and CSS Validator
• 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
• A readme.md file, including explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

Grade: Pass

Susana, this is a great project and you should be very proud of everything you've achieved here. You made tremendous progress in the course of a week-long sprint, and this project highlights a lot of the key ideas in frontend development. I'm so happy that you stuck with this project, and after trying out a couple different approaches in terms of how to organize your code, you found a method that works for you and delivered a complete MVP. You utilized all the resources at hand and created something unique and functional at the end of the day. I can see that you synthesized a lot of the material for yourself in the course of working through this project, and I hope you will keep working to enhance the features and continue to build your programming skills through this app. Congrats on all your hard work and completing project 1!!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/5usana/Twin-Peaks-Trivia/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARVQW4CRTJAO7T6MR6TJCZDTBP3NXANCNFSM4YNJC5QQ .