DEV Community: pwong09

Minesweeper

pwong09 — Mon, 25 Apr 2022 00:56:05 +0000

I recently finished my first web browser game during my third week of General Assembly's Software Engineering Immersive boot camp. For our first project, we were required to make a browser game using the DOM. I used strictly HTML, CSS, and JavaScript to complete this project that is hosted via GitHub Pages here.

During our week-long development, I learned a lot of new things about coding and about myself. To name a few:

I really enjoy writing pseudocode. It helps me think about how to approach a function - usually breaking it down to a conditional check or a type of loop.
I struggled with conceptualizing certain parts of my game - and it helped to draw it out on a piece of paper.
I crave concise, clean code. Maybe a little too much, to the point where someone else might not be able to read it easily.

Anyway, overall I had a lot of fun making my minesweeper game. Growing up, I loved playing minesweeper on my brother's PC. I didn't understand the inexorable logic behind it until much later in years though. And I certainly didn't think I would ever write the code to this game!

I won't go into too much detail because you can see all the code and commits history on my GitHub repo here. But I want to mention some of my favorite pieces of code that took quite a while to think about, and only a few minutes to type out, then hours of endless manual testing!

One of my first stumbling [code] blocks was the placeNumbers function. There was a mental disconnect between me and my code of how to place the correct number to denote how many bombs were adjacent to a square. I kept at it for hours, until I finally made a "simple" switch of the conditional. Originally I checked to find the bomb, and I switched to checking to find the safe square. As soon as I did that, everything fell into place. My original logic of incrementing numbers had been right. I just need to flip the type of square I was looking for!

I also hold a soft spot for my next function: checkNeighbors. I wanted to have a larger reveal of safe squares per click because it was coming tedious to test my game while clicking every single square. I started with a recursive function - and it worked! To a degree. It worked perhaps a little too well for my tiny 8 x 8 board. So I decided to revert it to a regular function. And I hunkered down to refactor the list of conditional checking down from 8 lines to just 3 using the assignment operators, && and || . It was a lesson well worth the 3-minute read on MDN.

Finally, when I had achieve my Minimally Viable Product. I focused a majority of my free time on fixing a 'bug' I thought I had. As an iPhone user, I realized very quickly that my contextmenu event listener wasn't working. I had assumed it didn't work on any devices. Thankfully, a classmate offered to test my game on his Android phone and confirmed the contextmenu was in fact working - just not on iOS.

With that feedback, I took a deep dive into iOS touch and hold. Reading and re-reading the Touch object documentation on MDN. Finally, after much experimenting and also reading Stack Overflow, I came up with the touch functions that allowed me to touch and hold a square to add a flag on my iOS devices. I can't report honestly that I am some Touch expert right now, but I am happy with what I was able to accomplish with my current knowledge base.

I hope to make more updates to my game as I learn more JavaScript and other tools to make this minesweeper as fun and as intuitive and accessible as possible.

Boba Database!

pwong09 — Sat, 22 Jan 2022 22:34:46 +0000

Continuing on the Computer Science Pro track on Codecademy, I just finished the Databases module which was taught in PostgreSQL. For my 3rd portfolio project, I made a database from scratch for boba!

The requirements were:

Research the topic of your choosing to create a entity relationship diagram for your database
Create the schema of the database using PostgreSQL
Populate your database with some data
Update your database to ensure your data stays intact. This could include adding constraints and roles
Update your database to ensure your database stays fast. This could include adding indexes, normalizing your database, and actively monitoring and maintaining your database.

A week or so ago, Codecademy had assigned a similar project. So I already had a starting boba database that would be perfect for Objectives #3 and #4.

The Original Database
When I first brainstormed how I wanted to set up the database, I thought about what main purpose I wanted it to serve. We already have Google Maps which contained all the relevant info of where boba shops were and when they would be open. But I realized it was a little harder to search for a specific boba drink. What if I was in the mood for boba with agar agar pearls? I knew from experience to go to Gong Cha. But what if there were no Gong Cha around? (Believe me this happens sometimes!).

So, the purpose of this database is to make it easier for people to find a specific boba drink.

I started with a quick list of the tables I would need:
shops, drinks, toppings

I decided to make a separate schedules table because I thought the info would be hard to edit, or query, if it was just stored as one text column in the shops table.
I also made a menus table and a menus_items table to address the many-to-many relationship between drinks and shops because I assumed there would be overlap. Drinks like classic milk tea could be found at multiple stores. Toppings like pearls, lychee jelly, etc. would not be specific to one store either.

After making these tables, I inputted three shops and parts of their menu to test out the queries. That was the end of the initial project requirements from Codecademy (Objectives #1 to #3).

v1 schema:
https://dbdesigner.page.link/mNtY4XqKyuy1Ss4Y7

Improvements / Changes
After the initial database was done, I continued through the rest of the Database module - learning things like indexes, security, storage and speed, etc.
I realized I was probably making my database too complicated - especially on the data entry side. I was inputting a menu id, drink id, and topping id into menus_items which resulted in a lot of unique drinks that were probably not necessary to someone's search. (Does anyone really need to know all the possible combinations for a classic milk tea and more?)

I also received feedback from a vegan friend who was more interested in knowing which shops offered dairy alternatives.

I started with a dairy_alternatives table that was sort of like a menu add-on. That made me realize I should have treated the toppings table as a menu add-on too.
I decided to scrap the whole menus_items table and made three separate tables to address the drinks, toppings, and dairy alternatives (if any).

In this new schema, people can still search for drinks. The toppings and dairy alternatives would just be separate searches. I figure this setup would be more useful and help manage storage over time (imagine I was actually trying to put tons of shops' menu data into this database rather than just 10 shops' data).
Anyway, you can check out the schema and code below where I also did some EXPLAIN ANALYZE for query searching as well as looking at storage use and indexes. I know I have a long way to go, but hopefully this second version is an improvement on my original database!

v2 schema
https://dbdesigner.page.link/DWgXQcZ1tWev71kLA

Git
https://github.com/pwong09/postgreSQL/tree/main/boba_database

Book Recommendation Software

pwong09 — Mon, 20 Dec 2021 19:02:04 +0000

I just finished learning Codecademy's Computer Science: Data Structures & Algorithm module. To end the module, I had to create a second portfolio project - a recommendation software.

The requirements were:

Store data in a data structure
Use an algorithm to sort or search for data within a data structure
Use Git version control
Use the command line and file navigation
Write a technical blog post on the project

I considered what types of recommendation software were out there, and I decided to keep my scope relatively narrow. I work at the dining table, so I thought it would be easy and fun to simply turn around and input a few random books on my bookshelf and make book recommendations to people (i.e. my partner).

I love to read, and I recently had to cull some beloved books when my partner and I moved from coast to coast. So the books currently on my bookshelf are really /la crème de la crème/.

Nevertheless, I gritted my teeth and /ranked/ my books anyway in a rating system of 1-5. I took a small, assorted sample of my books and imported a csv to Visual Studio Code. The individual books ended up being stored as a dictionary within a list.
Each book had the following key:value pairs:
'category'
'category_lower'
'rating'
'author'
'author_lower'
'title'
'title_lower'

I started with a simple sorting algorithm - quicksort. And I tested it by sorting my books alphabetically by author first name and by title. Then I sorted by rating.
Next, I thought, well let's really prove I know how to sort. So I made a bubblesort function, and used that to sort the categories. I knew I would need a list of categories for the actual program, so I removed the duplicates and saved a clean list of categories into a new list variable.
So far, things seemed to be working fine, so I shifted my focus to the actual terminal program.

I thought about how I wanted my books to be searched - by title? by author? by category?
I settled on category because that seemed the most straightforward way to very broadly look for books. When I go into a bookstore, I usually zoom into the SciFi & Fantasy section and browse for whatever looks interesting (purely based on the cover art).

Next, I fiddled around with the user inputs and the possible inputs someone might put in - whether they are following direction or not. After figuring out the conditionals and making the search loopable (so you can find books and then keep looking for books of a different category), I felt like I was ready to get into the "reveal" aspect.

Now, how to grab books that matched the user's inputted category? And how to organize the resulting list based on my top favorite?

First, I made a helper function to match the user input's category with my list of categories. Depending on the match (y/n) and the number of matches (1 or more), the user input loop will eventually narrow down to one category. Phew.

Then, it was a matter of matching the books' category key with the user input's category. If it matched, the book would be appended to a new list.
I decided to print out my top rated book separately from the rest of the list. So people can see all the books in the category with the first one being my favorite, main recommendation.

Voila - I was done. Books for days!!! Happy reading!

Take a look and let me know how the code can be improved:
https://github.com/pwong09/Portfolio-Project-2

A Terminal Budget Program with Python!

pwong09 — Fri, 12 Nov 2021 20:29:15 +0000

I've been working on the Computer Science Pro track on Codecademy for the past 4 weeks. To finish the "Intro to Programming" section, I had to do an open-ended portfolio project.

The requirements were:

Build a terminal program using Python
Add at least one interactive feature using input()
Use Git version control
Use the command line and file nav
Write a technical blog post on the project (this post!)

I brainstormed a bit about what I wanted to make, and ultimately I chose to write a simple budgeting calculator. I had just finished a One-Month Expenses Tracking challenge with my friends, so with money on mind, I came up with all these different financial calculator ideas.

Budgeting has been foremost in my mind because I'm currently unemployed and re-skilling & up-skilling in order to transition my career (previously in chocolate making) into the tech sector.

(I know, I know, most people do the opposite. They want to get /out/ of tech, and chocolate seems like a nice way to go! Anyone want to trade?)

Anyway, I started by jotting down what information I would need to build a budget. Income after taxes was an easy first thought. How can you build a budget with no income? Then, I thought, what is the biggest expense for most people? Housing. It would be tough to guess how much someone spends on housing, so it would be better if they provided that info!

In my first iteration, I started with a basic function to return the amount someone would have left over after housing. And I thought, "Hey, don't forget to save some of that income!" There are lots of ways to assume a basic budget, but a good general rule is to save 20%, so I started there.

The next thought I had was, what if housing was really expensive relative to your income? What if you can't save or you can't even afford that much house?

I made a second function, and things started getting a little chaotic. I thought, wow there must be an easier way to do this. Also, I haven't even started using Classes and OOP, and I'm supposed to include that in my program somewhere.

I ended up scrapping my entire first 2 commits, and re-writing my budget function into a Budget class. I knew I wanted to make a subclass for people who have higher savings goals. I'm a big believer in saving more whenever possible. Building up personal savings is a really important practice for me - and it still is even though I don't have an income anymore.

So after making sure the Budget class worked properly, I created the SuperSaver subclass. It was fun to work out the save_spend method, and overall I'm glad I make my first initial mistakes because, hey that's how I learn right?

I showed my terminal program to my partner later, and she recommended that I add more inputs for other expenses, like debt payments, car payments, health insurance, etc.
I'll get around to that someday - for now I'm pretty thrilled by what I've done.

Take a look and let me know how the code can be improved:
https://github.com/pwong09/portfolio-project