WDX-180
Web Development X
Week 29 | Battleship Game - Round 2
Week 29 - Day 1 | Battleship Game
Schedule
- Watch the lectures
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Your instructor will share the video lectures with you. Here are the topics covered:
- Building a Battleship game with JavaScript - Part 5
- Building a Battleship game with JavaScript - Part 6
You can find the lecture code here
Study & Practice
- Think about a way to display the columns and rows (A, B, C… 1, 2, 3)
- Start by hardcoding the cols/rows, then implement a dynamic way that scales
- Consider both HTML and Canvas solutions and think about the pros and cons of each solution
- Try to leave the player canvas functionality and code out of it. The decorative code that displays the cols and rows should not affect the main game functionality.
Week 29 - Day 2 | Data Structures & Algorithms - Part 1
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Whether you’re building games or developing web applications, creating an API service or an AI-enabled mobile application, data structures and algorithms are a crucial ingredient for all sorts of software challenges.
Data structures give us the ability to take our raw data and organize them in a way that makes it easy and efficient to store, search, traverse and manipulate.
Algorithms are the magic recipes that help us break down problems into small steps that can be fed into any programming language.
FreeCodeCamp has a great video tutorial on some of the most popular and useful algorithms and data structures.
We highly recommend that you spend the next 3 days, studying and replicating each of the chapters of this great video.
Let’s start with the first 3 data structures:
.svg.png)
Exercises
Make sure to implement and test every single data structure and algorithm on your local environment, either in the Browser or through Node.js.
IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week29/progress/progress.draft.w29.d02.csv
You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.
Week 29 - Day 3 | Data Structures & Algorithms - Part 2
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
This is part 2 of watching the Data Structures and Algorithms course from FreeCodeCamp and coding along.
Let’s see the next 3 data structures and algorithms:
Exercises
Make sure to implement and test every single data structure and algorithm on your local environment, either in the Browser or through Node.js.
IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week29/progress/progress.draft.w29.d03.csv
You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.
Week 29 - Day 4 | Data Structures & Algorithms - Part 3
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
This is part 3 of watching the Data Structures and Algorithms course from FreeCodeCamp and coding along.
Let’s see the last 3 data structures and algorithms mentioned:
Exercises
Make sure to implement and test every single data structure and algorithm on your local environment, either in the Browser or through Node.js.
IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week29/progress/progress.draft.w29.d04.csv
You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.
Week 29 - Day 5 | Battleship Game: Final Remarks
Schedule
- Watch the lectures
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Your instructor will share the video lectures with you. Here are the topics covered:
- Battleship Game - Part 7
- Battleship Game - Part 8
You can find the lecture code here
Lecture Notes:
Lecture Questions:
- Should I combine Tailwind and Bootstrap?
- Be very careful and use it only as a last resort (my take: avoid)
- Try UI Kits like Shadcn/ui, Material UI, etc.
- Search for CSS UI Kits or Tailwind UI Kits or Bootstrap UI Kits
- Search for Tailwind-based Components (or sets of Components), or Tailwind-based Templates, etc.
- If you are using React, you can try CSS Modules or other CSS utilities.
- You can try and find how you can confine some CSS (e.g. a framework like Bootstrap) under a specific class.
- Do a research on native CSS “scoping”:
References & Resources:
- Ways to avoid API keys and other sensitive information leaking to a public/private repo
- Use a script or a library that checks for sensitive information before pushing
- Check your Version Control provider (BitBucket, GitLab, GitHub) for an option:
- Use environmental variables but be careful as there are types of env variables that have some code pushed
- Use .gitignore for preventing certain files or folders getting pushed
- Whenever you detect a leakage or a breach you should always revoke/cancel your keys and update your passwords.
- https://haveibeenpwned.com/
- Ways to work with immutable data (and avoid object reference bugs and errors, e.g. “shallow copy”)
- Use a library (https://immerjs.github.io/immer/){:target=”_blank”}
- Object.freeze() (make sure to check the deep vs shallow freeze sections)
- Use structuredClone
- Nice selection of free graphics
Exercises
- Finish up the game!
- Complete the mini version (2x2, with 2 ship types)
- Move on to a 4x4 version, then test and continue to the 10x10 final version
IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week29/progress/progress.draft.w29.d05.csv
You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.
Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!