Robbie Antenesse

Designed and built with JavaScript and HTML5 Canvas in 7 days for fun and updated incrementally to easily make small web games.

Process

On November 15, 2014, I decided that I wanted to try to create a JavaScript game engine, so I started building a library to do so. I researched how to make JavaScript draw to and update HTML5 canvas elements, and after about 7 days, I had a working prototype finished. As I learned more about how JavaScript works and how to utilize JavaScript objects and make more efficient functions, I gradually improved the game engine as I created games.

The development process of Trade Winds helped drive major improvement and optimization for OversimplifiedJS.

Lessons

Building and using this project taught me a lot of the inner workings and quirks of JavaScript. I learned all about JavaScript objects and how nested objects and functions work. I was also able to learn how to load files into a global variable and how to use audio and other HTML5 elements.

A tool intended to help you build constructed language (conlang) dictionaries/lexicons.

This is one of my few ongoing projects that I occasionally make improvements to when I find time.

Process

Toward the end of 2015, I started getting really interested in linguistics and constructed languages. I wanted a simple and easy way to not only keep track of a dictionary for the language I was working on, but also a stylish way to share it with others so I could get feedback. The solutions I found were either not what I needed or were too slow, so I decided to build my own out of pure JavaScript.

Initially, Lexiconga only used the user’s browser to store their data, but this can be dangerous because if the user ever clears their browser cache, they would permanently lose their dictionary! So I started building a PHP backend to provide users with accounts that allowed them to store multiple dictionaries in a safe place that could be accessed from any computer! I kept it simple, but worked to make private dictionaries as secure as possible, making only dictionaries that were explicitly marked “public” available to be seen.

Lessons

I learned how to make sure that data entered by users, no matter what the text is, can be displayed the way it is supposed to be displayed using Markdown. I also learned a lot about mobile-friendly styling, because in my first iteration of the design, I built everything from scratch, including the styles.

Designed and built with JavaScript and HTML5 Canvas using my OversimplifiedJS game engine in 14 days for the 2016 LOWREZJAM and updated incrementally.

Lessons

Dug deep into JavaScript objects to understand how they worked and what their limitations are to their core. Worked with nesting and recursion to get data to flow and display correctly within my OversimplifiedJS game engine, and dramatically improved the collision detection algorithm.

Because of the harsh size limitations imposed by the game jam, I learned how to utilize the available screen space as well as possible, and overcame the problems that not being able to see long distances within the game could potentially cause.

I could have improved the game by adding more indications of how to play more effectively, but time did not allow this. The way I separated my code within the game engine also hurt the experience, because sometimes the game does not load on the first try when you open the page—I should have combined all of the code into one file so it would not have been a problem.

A digital corkboard for leaving small post-it note-like messages in a public space that allows anyone to also remove the messages.

Process

I thought about how some local spaces have a corkboard where anyone can add or remove things, and I thought it would be fun to have the same kind of thing in a digital space. Sure, we have forums where people can post, but only administrators can remove things that might be offensive or off topic. So I made this, where anyone can post a flyer or remove a flyer without needing to create an account or anything like that, just like a real community corkboard!

I mainly just whipped up a simple grid using Bootstrap, made PHP read from a directory in order of created date, and made PHP write files to that same directory when someone posts a flyer! I restricted the length of the flyer using HTML5, and it’s as simple as that!

Lessons

I learned about PHP File I/O processing and how to parse and sanitize user-entered text so that it would cause as few problems as possible if someone tried to enter something malicious.

An interactive scene that encourages communication across impossible distances featuring a radio with nice, ethereal music.

Process

A friend of mine approached me with the idea to create a scene featuring a radio and some stars in order to participate in the Fermi Paradox Jam. I liked the idea and expanded the game concept from there. What if players were trying to receive messages from space and in the end unknowingly were communicating with each other?

I started working on the game at the start of the jam by creating the 3D models with Blender for the game and then extrapolating the UI from how the models ended up looking. Then I moved to coding with C# and made the stars viewed through the periscope generate in a grid with random offsets and sizes. I ran into trouble getting the knobs in the radio UI to turn, but was able to figure it out by manipulating the sprite’s angle directly and using the angle value to set desired radio stations.

I was also able to layer multiple text UI elements to give the effect of translating coded messages letter by letter. It took a good deal of trouble to get it working properly, but eventually I just forced it to work by simplifying some code I had previously overthought.

Lessons

This project gave me more experience with the Unity 3D engine and its UI elements. It also provided me with the opportunity to collaborate more closely with a friend to make sure that the final result followed the design specifications correctly.

I also gained more experience with building simple APIs to insert and access data from a MySQL database using PHP, as well as more experience manipulating strings using .NET’s System.Text namespace and methods in C#.

A simple but powerful product selection customizer for Sonlight’s curriculum package sets.

Process

When I began working at Inquisicorp Corp., I was asked to start working on an application that would allow customers to change the products within pre-built curriculum packages provided by Sonlight, a child company of Inquisicorp Corp. I was told that I could use any method I wanted while building it, so I chose to use a modern ReactJS+Webpack stack to build it. I believed that what needed to be accomplished would best be done using these tools because of ReactJS’s ability to alter displayed data quickly based on user input.

Throughout the process, I built the Package Builder to be simply a display portal that could handle and correctly display any data that was provided to it from an API managed by a coworker so long as the data was in an expected format. I also accommodated several design changes from our designer in order to fit better with the overall website design. As I built the application, my skill with ReactJS and JSX improved dramatically, and I went back to rewrite old code several times as I was making changes.

Lessons

I learned that making sure your code is orderly and easy to maintain is the most important thing that you can do. This was my first long-term professional project, so I needed to make sure I could juggle everything that needed to be done with knowing how and where to make any changes that were asked on the spur of the moment.

A simple but effective way to responsibly share links about or containing potentially sensitive subjects.

Process

My wife told me about an article that was posted on social media about a dog that was murdered. The article featured a photo of the dog, and overall it was a disturbing and alarming experience. I wanted to make a web app that would allow someone to share a link but warn people about sensitive content that might be on the link’s page, so I looked into how I could alias a web address to show an alternate image that warns the audience about what content was on the page.

I used PHP to access an manipulate a SQLite database, which stores encrypted links that users enter. When the PHP fetches the data from the database, I use Hashids to create a shortlink out of the link’s id in the database combined with the selected warnings. I also set up the website’s .htaccess file to intelligently interpret the url to send users to the correct place without needing to use ? query strings in the url.

Once the base was finished, I used jQuery to make the interaction for the website smooth and easy for myself to maintain. I used a jQuery plugin called Select2 to make the searching and selection of warnings nicer.

Lessons

This was my first time using classes in PHP’s object oriented structure, and I found it very useful. I tried to utilize classes as much as I could to keep my code as structured and separated as possible.

Using a pseudo-MVC structure, I was able to separate my code in a healthy way, keeping the text itself separate from the container that displayed the text made it possible to keep terminology completely consistent across the site, and separating the code that controlled the website’s behavior from the code that displayed the content made it easier to find and fix bugs and add new features.

A personal portfolio website using simple HTML5, jQuery, and Semantic UI style framework

Process

I wanted to keep this project simple, so I decided to only make what was needed: A single HTML page, a single JavaScript file for jQuery control, and a CSS style framework to make things look nice without unnecessary struggle. I chose this structure so I could easily modify files and upload it right back with FTP if any quick tweaks are needed without worrying about using a computer that has the tools I need to transpile the data into a usable web file.

Working with Kelsie, I was able to get all of her information from her resume and CV to fill out the data on the site using a nice, easy-to-follow structure, and got all of the data online quickly. I also utilized a contact form service to set up a simple contact form without needing to do any extra back-end coding.

Lessons

I learned that while it is in some cases easier to go for a simple one-file website, managing that file can get out of hand quickly if there is a lot of data. Using tools to handle and display data in a simpler way is very nice, but it’s also nice to know that the output is your own, not generated by a transpiler. This makes the file easy to read and work with, even if there is a lot of scrolling involved.