Portfolio

Alex.Malotky.net

Basic Ideals

The main goal for this project was being able to implement:

1. Front End Routing
2. Back End Rendering/Templating
3. Dynamically Loading Html
4. Dynamically Loading Javascript

The new ideals of this project was to create a website that could run as a single page application if Javascript was enabled, and function normally without javascript enabled.

Routing

For routing, I wanted to replicate the middle ware structure that Express.js uses. After reading through the code, I was able to eventually implement routing using layers. After struggling to figure out how to pass information back up, I took a hint from Koa.js and created a context class that is able to pass information up and down the layer stack.

Rendering and Templating

In past projects I wanted to use template HTML files for rendering, but found that I did not like that process. When rending on the front end, I have come to rely on a helper funciton that creates the element, sets attributes, and appends children in one call. I wanted to emulate the funciton on the back end, and came up with a process that I beleive works well to generate html.

Technology

Cloudflare

I decided to go with cloudflare pages to host my project because, and most importantly, it is cheep. Cloudflare also allows me to host files as well as have a middleware function that can intercept those calls, and modify the calls before sending them to the hosted files, or send back a different response. This allowed be to create a middleware engine that functinos similar to express that can run in the workers environement.

Typescript

I decided to go with typescript over plane javascript because I wanted to have stricter typing then javascript has natively. I thought working with typescript would be fun especially because I would already be going through the process of bundling my code with webpack.

Webpack

I wanted to use webpack to minify all of my files and copy the code into a build folder rather then have my compiled and uncompleted code next to each other. I also felt that bundling my code into a single file would give my code the best performance results.

TO DO

1. Repopulate the blog & mtg decks with entries from old database
2. Add search to the mtg decks
3. Add tags to blog
4. Add pagenation to mtg decks & blog

Background

In order to graduate from my Applied Computing program I had to complete a Capstone Project where ideally I would be working with a client (ex. an employeer or local company) and create some kind of project. Because at the time I worked for a security company I decided to reach out to a Magic the Gathering content creater named DJ about creating a website. I had seen him complain online that he have been running into issues with displaying the decks online and wished for a custom solution.

About Magic the Gathering

Magic the Gathering is a card game with a different formats that have varying rules. Some people just collect the cards, and other people play the game competitivly, while most just play for fun with their friends at home. I personally play a format called Commander or EDH where the decks are based around a single card that helms the deck. Displaying the decks in this app is prioritized for displaying commander decks.

Requirements

The main requirements for this project where:

1. Being able to easily add decks that had been created in scryfall.
2. Be able to easily view the cards in the deck without ads or unnecisary information.
3. Being able to easily to view all the decks in a list.

Some stretch goals were added like:

1. Being able to search the decks.
2. A link for downloading the decklists.
3. A link to purchase the decklists.

Technology

Wix was chosen as the platform to develop the website because it has drag and drop elements that would allow DJ to be able to make changes and maintain the website after I was no longer working on the project.

Wix also came with the abbility to add custom elements allowing me to add special functionality and a document database for storing the deck information.

To Npm packages were added to the project:

1. cvs-parse: used for parsing cvs deck information uploaded to the database.
2. masonry-layout: used to form a masonry layout betweeen the different catagories in a deck list.

Background

This project was the dream child of my wife. Who thought it would be fun to be able to track rubber ducks as they move around. For those who don't know people who drive jeeps will leave ducks for eachother on one anothers jeeps. In the same vein people who go on cruises will leave ducks around the ship for others to find and share. Both of these things are things that she enjoys doing so and came up with the idea for the app.

When working on this project I treat it similarly to working on my capstone project. I created a document specifiying the goals and expectations of the project and worked on it in sprints getting aproval during each step.

Requirements

1. Be able to create an account that allows one to follow ducks and to create their own ducks.
2. Be able to scan a qr code that links to the ducks page on the website
3. Ability to upload pictures of the duck when the qr code is scanned or by the ducks creator.

Technology

Cloudflare pages was selected to host the project because it has free/ cheep tiers for the technology required, this limited the technology we used because price was a concern.

Cloudflare pages allows backend funcitons to execute on paths, and that is used to access the database. The database is cloudflares d1 database which is an SQLite implimitation. Because the backend was written in typescript, I wrote the front end app as a Single page application in typescript as well that is complied using webpack.

Thoughts

The project was both fun and challenging. My sister was one of the testers for the project, and getting some of the custom elements to work in Safari was one of the more anoying hurdles.

While I am still working on the project to polish it up. The core functions have been completed.