Personal Log

Hi there!

It's been a while. Last time I wrote, I was building a portfolio project in hopes of improving my chances of finding work. I began writing about the project and just days later the project's purpose was fulfilled as I was contacted and hired on at a payment processing company.

It's really no excuse but, as often happens in life, things got very busy and I soon forgot about my writing goals. As life continues to be full, I've decided to set aside the goal to write regularly for now. Instead I plan to stop back occasionally to at least make it clear that I'm still alive and making things.

So, what's next?

I've been planning for a while now to make some much needed updates to the website. I'll plan to check back as those get done as well.

What about those lessons learned you said you'd share?

I suppose one big take away from this has been that the advice "beware of scope creep" applies to anything in life as much as it does to individual software projects.

Thanks for reading and see you next time.

The usual pleasantries

Hello there! First off, let me apologize for the title. As soon as I come up with something shorter and more descriptive, I'll swap that out.

What exactly is this?

The project is a web site and application for marketing a fictional video game that doesn't yet have a name. This fictional product, if it existed, would be in early development with the aim of becoming known and possibly generating some hype. I'm aiming to make this an exceptional portfolio piece so I've decided on a video game for the product as an excuse to do something visually striking. The user side of the application will be a simple form for submitting an email address to a mailing list. I'll be adding a security layer that should be unobtrusive enough that the user won't need to take notice of it. On the admin side, there will be a form for sending mass emails to users while taking into account a filtering option for the users.

Ok, what technologies will you be using?

The site is being built in C# using ASP.NET and a MySQL database. At the moment I'm using the MySQL connect/net ado.net library for the database interface. I'm hoping to get away with hosting the site on azure at the free hosting tier. The cost of their hosted databases are a little beyond my current budget and I'm not sure if they do anything to prevent the use of external databases although I kind of doubt that they would. I have a JavaScript library picked out for setting up a parallax visual effect on the landing page banner. This library Parallax.js by Matthew Wagerfield is pretty impressive on a desktop computer with a mouse or a mobile device with an accelerometer/gyroscope. I would like to enable the effect via scrolling for those without either. I haven't found support for it in the documentation yet so I'll keep an eye out for alternatives. (Let me know if you've found something awesome like this)

So just how far are you into this?

I've spent time over the last two-ish weeks planning, creating a mock up, and beginning production. So far I have navigation in place and all pages accessible from there. The pages are without content as of yet, but the database has been designed, created and deployed. I have a class written and tested to handle communication with the database. Next up on the to-do list is to add functionality to send emails and verify email addresses as well as building out the front end of the site, adding the forms and page content.

Didn't you say you were aiming to post each week?

That was the plan but things have been picking up this spring and it often takes longer to write than I anticipate. While this was a loose goal, I did say I would work on formalizing it so I'll switch over to a goal of posting bi-weekly and see how it goes. As I get further into this project I'll post an update, so keep an eye out if you're interested. Hopefully by then I'll have some cleaner code and a few ways not to make this particular "light bulb" to share with you.

Welcome to my personal log.

I suppose an introduction is in order. I'm Tom, a software and full stack web developer from Madison Wisconsin. In addition to software and web development, I've been educated in graphic design & illustration. I'm a huge computer geek and a video game developer in my spare time.

Here on my log, I'll be posting about (and snippets from) the code that I write and some of the projects I work on. Some of these will be from my entries to hackathons and game jams, some will be personal projects or my own crazy comp-sci experiments, and others will be class work that I'm particularly proud of. I hope to share lessons learned, experiences gained, and resources found. Maybe I'll break out of the professional tone and geek out about something once in a rare while. I'll aim to post once or twice a week. Hopefully we'll get that formalized as this gets rolling.

I hope my code will be of use to some of you in your own projects and that this log might act as a kind of introduction to those of you who may be future colleagues. I haven't added a comment system (yet?) but if you ever want to shoot me a message, my inbox is open and I have a contact form over here.

Thanks for stopping by!

Hello again...

If you are reading this, my most recent project must be up and running. Hurray! After many trials and many errors this blog engine is ready for content. It may be a bad move security-wise, but I think its worth the risk to share some of the workings of the system with you. On the back end the blog uses PHP and MYSQL. On the front end it's running JS, JQuery, uses AJAX to retrieve post data, and uses bootstrap for styling.

Overall its a pretty basic setup. The most unique feature is probably the extra date to sort by. "Date of Work:" is the date that I started working on what ever it is I may be writing about. You can see in the lower left that I started working on this blog engine on 2/9/2017 and once I've posted a bit more it will be worth mentioning that you can sort posts by this date to get a chronological view.

Timezones

Time... This brings me to the bane of the project... timezones. My first thought was that it should be able to display and receive timestamp data from any timezone. My first mistake was thinking that this should be simple to do. There are a few layers between the form and the database but as long as the timestamps are kept as UTC+0000 unix timestamps, the data only ever needs to be altered for display. "I can do that!" (facepalm).

What I didn't realize until much later was that each layer was already trying to convert from UTC to it's own timezone for me. First, MYSQL may or may not convert timestamps to the server's timezone upon selection depending on server settings. Second, the JS date object behaves differently depending on what format you pass a date to it in. Finally, PHP's strtotime() function also seems to convert in some instances. So here is the model I wound up with and how I got there.

---

The Model - Form to Database

--1-> [HTML form] --2-> [JS] --3-> [PHP Server] --4-> [MYSQL DB]

1. The form takes a datetime as a string
2. The form input passes the date in ISO 8601 format to the JS script
3. JS initializes a date object from the string its given and then uses Date.getTime() to send the UTC+0000 timestamp to the server.
   This initialization was a major source of problems for me so to make sure JS behaved predictably I altered the method of initialization with this function.
   

   function timeStampFromFormValue(dateString){
   	var year = Number(dateString.substr(0,4));
   	var month = Number(dateString.substr(5,2));
   	var day = Number(dateString.substr(8,2));
   	var hour = Number(dateString.substr(11,2));
   	var minute = Number(dateString.substr(14,2));
   	var second = Number(dateString.substr(17,2));
   
   	return new Date(year,month-1,day,hour,minute,second,0).getTime();
   }
   

   This takes 'dateString' as the output format returned by one of these.

   <input type="datetime-local" />

4. The server receives the timestamp as a long integer (unix timestamp) and inserts it into the appropriate query.

---

The Model - Database to Form

[HTML form] <-3-- [JS] <-2-- [PHP Server] <-1-- [MYSQL DB]

1. Upon receiving an AJAX request for blog post data, the server runs a query to select rows of data from the database.
   Here I ran into trouble when the select query would retrieve TIMESTAMP data types as a string and automatically convert to the server's timezone. I'm sure there is a more correct way to deal with this problem but I found it worked to use the INT datatype instead of the TIMESTAMP or DATETIME types when storing it with MYSQL. This comes at the cost of human readability on the back end but it assures the system isn't going to alter your data before it gets to the client. (If you know a better solution, by all means please let me know)
2. Once the server has the data, it encodes it as JSON and sends it back to the front end where JS is waiting to receive it.
3. JS then initializes Date objects with the appropriate fields and uses them to output strings to the page for display and to form fields as default values.

---

A Few Last Words

I hope this has been useful. I'll list links to some of the pages I referenced for the project below. In the interest of improvement, let me know if you have any alternate(better?) solutions to this or resources on the subject and I'll see about adding links to them here as well.

Thanks for reading.

---

JS Date object documentation

• https://www.w3schools.com/jsref/jsref_obj_date.asp
• https://www.w3schools.com/js/js_date_methods.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

HTML input datetime-local documentation and references

• https://www.w3schools.com/jsref/prop_datetime-local_value.asp
• http://stackoverflow.com/questions/10854874/input-type-datetime-value-format

MYSQL TIMESTAMP and DATETIME documentation

• https://dev.mysql.com/doc/refman/5.5/en/datetime.html

PHP strtotime documentation

• http://php.net/manual/en/function.strtotime.php
• https://www.w3schools.com/php/func_date_strtotime.asp

Resonance

Download Executable

About the game

Resonance is a short SteamVR experience about shooting extra-dimentional bat creatures in what was planned to be a 1950s-ish retro-scifi-futurist setting. The game was created at the Global Game Jam in late January 2017 around the theme of "waves".

My Role

I was one of two programmers on the project. I created enemy AI components as well as general use health and specialized death scripts. I focused on keeping my work encapsulated, modular, and reusable as much as possible.

After the jam I also created a branch with mouse and keyboard controls so that it could be played without VR. To this end, I wrote a script to consolidate Unity3D's input manager and SteamVR's controller manager. This way we should be able to get it running with both control schemes.

Outcome

Overall this project went quite well. We were able to experience working on a larger team with more diverse skill sets than we usually do. I learned quite a bit about working on a team, including the importance of source control and hosting software.

We ran into a few problems learning to build for VR. The most time consuming of these seemed to be keeping the virtual active game area and the physical space aligned. Another was learning to work with tracked controlers.

The product we presented at the end of the weekend was just a bit too short on content to be called a minimum viable product but it was still playable and a lot of people enjoyed the experience. In the end, the majority of the team showed interest in continuing development so we set up a git repo (which we should have done earlier) and a google hangout. Since then we've added non-VR controls and done a lot of mechanical tweaks.

Technologies Used

• C#
• Made in Unity3D
• SteamVR Unity Plugin
• GitHub
• Unity Cloud Build

Team

Jonathan Karns	Programmer
Thomas Kuharski	Programmer
Gavin Folgert	Sound / Music
Rob Satness	3D Artist / Texturer
Adriana Pavc	3D Artist / Texturer
Nick Jozwowski	3D Artist / Texturer
Richard Hough	Particle Effects / Play Testing
Geoff Rogers	Graphics / Shaders / Particles

Screenshots

(click to view)