Drag and Drop Programming

When I was 13 years old I was introduced to a program called GameMaker Studio, a drag-and-drop programming engine. My friend showed me a simple game he made using it, and I had to try it out.

I spent the next year making games, improving with each game I made. Most of them were 2D platformer-style games.

This helped establish some foundational principles for programming even though I never actually wrote code.

Team Block

Team Block is a platformer game where you play as multiple characters to solve the puzzles.

The National STEM Video Game Challenge

The challenge is a competition for middle schoolers and high schoolers to create a video game, and I decided to make one for the challenge using my new GameMaker skills.

To my suprise, I won my division of the competition. Among the 3700+ entries, myself and 27 other winners were flown to Washington DC to collect our awards. I got to shake hands with Bill Gates and others who sponsored the event. All winners received a new HP laptop and $2,000 towards something educational.

Winning the challenge instilled confidence in me and opened my eyes to the world of programming.

Winners of the 2012 National STEM Video Game Challenge

The winners of the 2012 National STEM Video Game Challenge.

Windows Applications (C#)

I wanted a taste of real programming, so I torrented Visual Studio on the new laptop I had won and started learning C#.

I made many simple programs that I used on a regular basis.

  • A calculator, where hovering over a key displays the possible result, as if you were to click that key. The idea was to save a few seconds and provide a new way of interacting with the keypad.

  • A notepad with a built-in gif displayer.

  • A Minecraft file swapper. The purpose was to automatically switch between the minecraft.jar files at the click of a button, which otherwise would require manually renaming 2 files.

  • A username generator. Most online services (eg. Gmail, GitHub, Instagram) have you choose a username, but most usernames are already taken. Common word combinations and most names are not available, so you need to add numbers or random characters to make it unique, resulting in a long and ungraceful username. This username generator combines random syllables to create pronouncable words, which are unique and short, guareented to be available on all online services.

Zelocs Username Generator

Zelocs Username Generator is an app that combines random syllables to create unique pronounceable usernames.

Web Apps (Javascript, jQuery)

I felt like a baller, having made computer games and programs. I wanted to show them to my friends at school, but there was one problem: I couldn't because they had an .exe extension.

My friends had Macs and the school computers had restrictions preventing access from executable files. So they wouldn't run on my friends computers, the school computers, and definitely not on smartphones – so what was the point of making them? What is the point in creating something if people cannot use it?

The idea of web apps stuck out to me. A web app works on every device – Windows, macOS, Android, iOS, even on Nintendo Wiis – with no installation needed.

I started making web apps. I had already worked with HTML before, so it was just a matter of learning Javacript.

Once I discovered jQuery, my apps reached a whole new level. Manipulating DOM elements became as easy as 1-2-3. Any web app can be created with a little bit of logic and DOM manipulation.

  • A username generator. Using the same logic as the one I made with C#, but with better organized code and a cleaner UI.

  • A chatterbot that can have conversations with people, similar to CleverBot. It had precomposed messages and lots and lots of if-statements.

  • A workout routine app. It had a timer with a prebuilt routine, with pictures and instructions.

  • A word counter. It has a single input textbox that triggers the metrics to update on value-change and on key-press. The number of words, characters, sentences, and paragraphs were all tallied up.

Word Counter web app

Word Counter is a web app that provides metrics on the inputted text without clicking any buttons.

Web Apps with a Backend (PHP, MySQL)

My sophomore year of high school, I learned PHP and MySQL with the help and influence of my brother, who was interning at Facebook at the time.

Having a backend created an entire new dimension to web apps. Using AJAX with jQuery I was able to easily communicate between the user's browser and the database which allows the app to be much more intelligent.

  • Chess with multiplayer support. You could start a match and give your friend the 4-digit code to play against you. It also had touch event support, allowing people to intuitively play on smartphones and iPads.

  • A visualization of every past user's mouse position – somewhat of a social experiment. Every 5 milliseconds, the user's mouse position is recorded into the database. When viewing the site, there is a mouse image for every past user, and the mouse images moves every 5 milliseconds to the next position, simulating that person's cursor. I called it, Mouse Party.

  • A notecard app. I called it Simplistudy, and it was a simplified knockoff of Quizlet with a few customized features. It had a smart-paste interpreter textbox that turned lists and notes into notecards. It also Bing Search and Google Translate integration.

Simplistudy

Simplistudy is a notecard app with 3rd party integrations and custom features.

Internship at Pinger

I landed an internship a few months out of high school through people that I knew. My responsibilities were to create HTML/CSS mockups for the product team.

I eventually ran out of work to do, so I asked the web team if they had any Javascript work I could do. I was assigned a couple of unimportant bugs from the backlog, which I struggled to accomplish working in the large codebase and a new workflow, but I did manage to fix the bugs and my code went out to production in the next release.

Getting familiar with the workflow and process was the most challenging part. Prior to this, all of my coding was done solo and was downright disorganized. I barely even used source control!

Features and bugfixes were planned meticulously for each 2-week sprint, and each feature/bugfix had it's own git branch, which was code reviewed by peer developers and tested before merging to the develop branch.

Portfolio Projects

I planned to build three websites in order to create a portfolio as a fullstack web developer. I had built plenty of apps but I had never "completed" a project. I didn't have any websites that I was proud of and wanted to show off – a website that I could talk about and that could prove that I can make a good website.

  • PHP/HTML/CSS - creating a basic multipage website. Kristianwindsor.com is open source, completely responsive, and it's super lightweight. This page you're on now, with all 6 images, weighs just 400KB.

  • Javascript – frontend scripting. Making a password generator is a common beginner projects, and I wanted to see just how overcomplicated yet simple I could make it. Read more.

  • Python/MySQL – backend scripting. I created citethis.net to get experience with creating a complex backend that can handle high amounts of traffic. Read more.

CiteThis

Cite This is a web app for students to generate citations for sources in the chosen format.

Conclusion

There is no secret to learning how to program – you just need to start doing it.

Thanks for reading!