Category Archives: Projects

This is a category of development projects where I’ve learned something new.

COGSS 2.0

In July of 2015, I volunteered to create a web app to score college gymnastics. There’s an old blog post from my original COGSS project. COGSS 2.0 is going to be a place to submit scores and have rankings for a meet. Sounds simple right? Turns out it is not, this project feels like it is turning into a full blown application which ideally would require a dev team… Instead there is me!

Notes from the first attempt at COGSS

The site was built using PHP, blame my three years of experience working with older projects while I was a programmer at Matrix. PHP was my most proficient web app language at the time. The only issue was that the code was monstrous. In a rush, I didn’t use a class structure. Sections of PHP and HTML interwove each other and there were even 50 line chucks of echo .= “<html>stuff…”. After more years of better web development and looking at Java classes and NodeJS, I knew there were much cleaner ways to code. I vowed to revisit the code and clean everything up…. one day

Something else that slipped my mind but was a major overlook on my part was being too lax with my Github commits. Without a .gitignore file, I committed the entire project to easily load it onto my server. Not a big deal, except that it means my config file (and credentials) were stored publicly in plaintext. When I found that recently, I had a mini-heart attack. Well, guess it’s a good a time as ever to change passwords…

The last take away from the old version I had was performance. Page loads were waiting on SQL, server side pages would take minutes to load for a client. That’s terrible, so hopefully this next time around the cleaner code and one-page-application (thanks Node) will make things run slightly smoother.

COGSS 2.0 Redesign

COGSS 2.0 redesign notes
Messy i know, but the ideas are all there.

Over the summer, I talked to my girlfriend who is the president of the EMU Gymnastics club and she told me a lot of things about the layout and design that I overlooked. It will be a lot cleaner with the new design and I’ll upload more pictures when I have something better to show later on. It’s still heavily reliant on Bootstrap because I’m not going to spend the time to customize everything, I’m not even sure what people want so I’m going to go with their “minimalist” look.

I wanted to have better URLs as well, so routing was something I was looking into so that instead of “teams.php?q=blah” in the URL, it would be something clean, and that requests would be used correctly. NodeJS should make that really simple, but I have little to no experience with it.

Tasking / Planning

COGSS 2.0 Kanban board
COGSS 2.0 Kanban board, all my tasks neatly laid out thanks to Trello.com

Last time, I didn’t have a good plan, I had goals… but no plan. It was chaos and it surely showed in the final design. This time I’m using Trello to create a sort of Kanban board. There are four sections, backlog, blocked, doing, and done. Tickets are smaller items with only one feature. This will help me organize what to do, and my commit will look cleaner as well. For example, my next task is to “Add [the] Teams Page”. Basically set up the routing and use a template to load a proper page. Hopefully the smaller tasks will make this easier. I need to finish the project by the end of February.

Why COGSS 2.0

A lot is changing from the old version, for one thing I’m switching from a PHP web app to a NodeJS app. That in itself is scary and awesome at the same time. It is scary because I have barely used Node before and my main reference is a coworker’s Github repo that he presented last summer. It includes a lot of things I don’t know much about, like Express, Angular, and Less. I can learn on the job and I am really excited to see how it all turns out. What makes it awesome is that is lightweight, fast, and makes routing simple and easy. The only things that will be the same after I’m done will be the database structure and the Bootstrap framework.

Monitoring Honeypot Output

Last week I posted in Hacking about installing a Honeypot to record SSH traffic. Since it was installed, I’ve been working on easily monitoring of the output. Michel Oosterhof, the creator of Cowrie, has done a lot of development work to create some awesome logging output from the honeypot. There are a lot of different options and you can even store output in a mySql database. I found instructions for that on a wordpress blog. Feel free to checkout the current page at greenjam94.me/honeypot.html

First Attempt

After setting up my mySQL, I wrote a page of php functions to run about 8 different queries to get back information I thought was relevant. At first, the page was as simple as possible, the same page with all those functions also displayed the front end. It was a late night rushed kind of job, but you could see some pretty cool stats, in the first 24 hours of the site, we had over 500 attempts to establish a SSH connection to the honeypot. I linked the php page to my website and was happy for the night.

Second Attempt

After looking at the page for a while, the load page took forever, it also didn’t look that good. For one thing, the code was horrible. I had so many php echo statements where there were paragraphs of unformatted HTML. The front end web page was a clear reflection of that. My goal of my second attempt was to make the webpage load fast, even on mobile devices. To accomplish that, I moved all the html to an actual html file and used Javascript and AJAX to bounce requests to the old PHP page.

AJAX

It’s not anything new, but the site loads immediately and info fills if possible. If for some reason the PHP fails, the site doesn’t break, the page simply doesn’t display that part of the content. With the page being more formatted it was easier to make design changes. The site is slightly more responsive and mobile friendly thanks to better implementation of the Bootstrap framework.

IP Info

The website also uses ipinfo.io to get more information about where an IP address is located, right now the page is only displaying Country Codes, but the idea is to display the IP addresses over a map. Wouldn’t that look really cool? I want to use something like d3 but I haven’t had any experience with it so it may take a while. It’d be nice if it could look like this cesium example.

VirusTotal

Our honeypot is monitoring traffic and we see results, but we aren’t doing anything with them. Files and uploads are saved so it’s possible to analyze things further. VirusTotal is a website with a public API to review IP addresses and files for viruses and malicious code. One of my future goals is to set up a connection to the API to turn in anything that gets uploaded through the honeypot. The only issue I see is that filenames get changed, and VirusTotal doesn’t like that. The name is changed to a hash of information about the session that uploaded the file.

Future Plans

Better use of IpInfo and VirusTotal are the next steps to improve the site. After that I’ll work on improving the site in other ways. Right now, the honeypot is logging through regular log files, JSON, and mySQL. In the five days it’s been running, we’ve had over 1,000 sessions and logging those in triplicate might get expensive on the hard drive. It’d be more efficient to write the PHP backend to pull from the JSON logs instead of needing the SQL database.

Python Anywhere

I wanted to do a quick write up of the last project I did for class, it was a scoreboard app written in Python and used Flask. For extra credit we could host it on Python Anywhere. The app also uses SQLlite for the database. All of the development work was done using PyCharm.

One of my Media and Information classes has a lot of programming based projects. We used two main different languages and IDEs to get them done, the final for the class and the early projects was done using C# and Unity, while the end of the class utilized Python and PyCharm from JetBrains.

Development

All of the backend of the project was written in a single python file, it had database queries for getting, updating, and deleting scores. There are different sort options for the score board, each field is sortable. The project was pretty easy as far as homework goes, the instructor gave us a list of things to do and had a guided example. The only work I had to do by myself was some extra credit improvements. I added a image for the delete button and made a custom CSS file to work with Flask and make the front end look better.PyCharm Screenshot

Debugging

PyCharm makes debugging easy, everything can be run on your localhost, which means you don’t need to update a server each time you need to test code. By specifying the port number, you can run the website on your own computer without hassle.

Hosting

Hosting on Python Anywhere was really easy. I created an account and verified it through email. Then I uploaded my files from PyCharm and ran the database init commands through the sites python terminal. After that all I had to do was go to greenjam94.pythonanywhere.com and you could see the scoreboard.

Python Anywhere Screen Shot
Screen shot of the web app.

Feel free to play around with the board, all I ask is that you don’t delete all the records.

 

Spartan Hackers Website

Hello again, I am going to share my love hate relationship with my latest web design project: spartanhackers.com Some background information, Spartan Hackers is a group at Michigan State University that holds weekly events to introduce students to various technical skills that they can use at hackathons like Spartahack.

The Beginning

Spartan Hackers started up just last year, and only had a few members to run everything. The president at the time wrote a nice website for the club that was using only static content and the grayscale bootstrap theme. This worked great for last year, but the club is growing exponentially, I guess everyone wants to be a hacker. I’m the current webmaster for Spartan Hackers and it’s my job to maintain the website. However with my years of experience I thought I could spice it up and get the site working a lot better.

The Redesign

The first major change I added was a quick new page to let people sign in to events. If you’re an old member, just type in your e-mail. Otherwise you have to complete a form with your name and major. This page has helped us a lot with tracking attendance and seeing how many people come back to events versus how many people are new. I really enjoy the concept of this modification… but in process of creating this page. I realized how sloppy I can be when I’m writing code at two or three in the morning. It’s a combination of Javascript, PHP, and MySQL with a lack of functions, classes, and clear structure (in my opinion). So before I made any more changes I started looking for a better alternative that would make the code more readable because I won’t be the web master forever, and I don’t want the next person to scrap my website design.

Spartan Hackers get some help from Node

So in order to get what I want, I asked for some help from some front end developers where I work. They suggested I use Node.js because I needed something lightweight, easy to use, and I wanted to clean up the URLs by using CRUD and RESTful methods as well. The idea in my mind and the wireframes I showed to the rest of the eboard looks pretty sweet. We can track members, events, hackathons, all in the database. We can hook up APIs to social media and connect everything to the website instead of going to each account and posting about events. I have this great idea in my head for a grandiose website, but I am missing something… maybe time, or maybe the experience with Node. But right now development is at a halt.

Challenges & Future Goals

I’ve run into a couple of challenges. I based the website off of a guided tutorial I did at work to learn Node.js and that means that certain files were already created for me like server.js and folders were already created to manage the file structure. However, I’m at the point in my conversion where I am not sure what to do next. I want to continue building the site and making it functional, but this is a road block I haven’t been able to get past. Any help would be appreciated, you can find it on my Github at this repo.

The future of this website is unknown. The e-board transitions in December which means I only have two months (on top of college and two part time jobs) to get past that road block and finish development. I really want to crank this out and show everyone what I have planned, so that I can prove my website development skills to my classmates. In retrospect, switching to a new framework probably wasn’t my best idea. But the temptation of how awesome this website could be made me do it. I’ll keep you posted on whether or not I finish this project by December.

Remodeling lcori.com

If you’ve been following my posts, you’ll know that I do some consulting on the side for some websites. LCORI is the Lake Chemung Outdoor Resort in Howell, Michigan. My grandma has been working on the board for more than a few years. She came to me asking to help fix the navbar on www.lcori.com, and I was happy to help.

After getting into the code, I saw that it was a bit of a mess. There was poor formatting and only basic functionality. So I offered to remake the website, do a little bit of renovation work trying to turn a 1990s, html table based website into a responsive modern design. Sounds easy right? Well it should have been, strip the tables, include some twitter Bootstrap and everything becomes shinny. Even the database connections and php were pretty straight forward.

If you’ve read my post about making the EMU gymnastics club’s website. You know I’ve had some issues with initial design and communication. This project proved to require many more months then expected. The initial redesign took only hours. The HTML was easy. I got caught on the dynamics of the listings page. Little to my knowledge, this was the “most important” part of the site, since it was where resort lots were sold. I ran into many issues with new features, and making old processes easier. Where I thought I was simplifying someone’s work, they struggled with the new process. Gladly though, after a couple meetings with the clients. I was able to straighten things out and make everyone happy. This project was expected to take a month. It ended up taking seven. That’s why I’m relieved to tell everyone the site is finally up to par and the clients are happy!

Making a website using Jhipster

jHipster logoWho likes Angular? A JS library that is all about load a page once and get a dynamic website. Who likes Node JS? A server written in javascript. Who likes scripts that write code for you? Hello Yeoman!

The first time I used Jhpister was for a innovation project that maps out the office seating. This is a great internal tool since we have an entire floor of developers and finding the third “John Smith” is kind of annoying. So our office mapper was born.

Here’s the fun part. It’s got all the fun stuff built in and most of the “hard stuff” is auto-generated. Bower components, Yeoman automation, Grunt tasks, Node configurations, and Angular for the backbone of the front end. The best part? No fiddling with the file structure or anything. One terminal command and it’s all set up for you. Just say “yo hipster”.

This project was a great learning experience, it was the first actual project where I had to use Angular attributes outside of classes. I learned the basics about Grunt, Node and Yeoman, and all the tools added to jHipster. Our website actually won the “improve our company” category of a innovation challenge which was a lot of fun.

COGSS Website: Automated Scoring for Collegiate Gymnastics

I’ve mentioned in previous posts that my girlfriend is on a gymnastics team. I did their club website for them a while ago. I went to a meet they hosted their year and helped out as much as possible. They were using a Microsoft Excel sheet to do all of their scoring for each event. While watching the guy use excel, I got a headache just trying to follow the complex steps that were set up for it… so I had the bright idea to set up a website that simplifies the process and allow anyone to use it for their meets as well.

At first I made a site of my own design and tried to recreate the excel sheet as best I could from memory. When I completed the site, it got less then a warm welcome from my girlfriend’s gymnastics team… in fact she was the only one to say anything about it to me. So here I am, completely redesigning the site and discussing wireframes with her. I plan on redoing the site and following NAIGC rules for the scoring.

The next competition is in the spring of 2016. I hope to finish the project this summer. I’ll update this post when it’s completed.

EMU Gymnastics Club Website

One of my first “professional” website creations. Making the club’s website gave me a solid 4.0 in a college web design class where I reviewed the basics of CSS, Javascript, and HTML5. Fun stuff really.

What I learned by doing this project is how important initial design and communication is. Working with a client (in this case, the “client” is my girlfriend a.k.a club President) means that you can’t just look at the website and think “Good enough, ship it”. It has to meet their requirements first and foremost. A good draft means you should be able to make it once and need only a few updates, which is a lot easier than making thousands of revisions each time your client asks for something different.

That being said, looking back on your work and seeing what can be improved is always worthwhile! When I first hosted the project, the website looked decent. Most of the CSS work was custom and I was using a very robust HTML template. I went back recently and overhauled it, scrapping the files completely and using new frameworks like twitter Bootstrap. The new design is much more responsive and looks cleaner in my opinion. I’m getting more feedback from the club so I think they are more enthusiastic about it.

You can see the difference on my github pages.

Automatic Sharing on Facebook and Twitter

How many people do you see every day that are staring infinity into their smartphones? How much would you bet that they are on Facebook or Twitter right now? There are also a lot of people on the internet who write interesting blog posts to people about a lot of cool things… and I am one of those people. There is a wordpress plugin that allows me to share new published posts with friends and followers automatically. Thanks xyzscripts!

Using their awesome step-by-step setups, I was able to create Facebook and Twitter applications in under a half hour that would allow the plugin to work on my social media accounts. Publishing this post is the first test run of the new plugin.

Shout out to everyone who read this because they saw the link on either Facebook or Twitter, feel free to comment below!

Developing KORA 3.0

This is a big project I’ve worked on from the beginning when working at Matrix: Center for Digital Humanities & Social Sciences. It’s taking an old platform and revamps it into a modern application. KORA 1.0 was built over the last two decades by non-software developers, I never saw the code personally but I heard horror stories of unorganized pages of code that was thousands of lines long.

KORA 2.0 reorganized the code into an Object-Oriented-Programming (OOP) format, Matrix’s system admin (now retired) and students introduced classes and actually made the code readable to developers. The current release of KORA (2.6.3) is the latest version we have released to the public.

If you’re still asking, what the heck is KORA anyways? Well, it’s a african instrument.

But the application is a way to store analog data (Pictures, books, interviews, etc) into a digital database. Picture if you will, a way for non-developers to create, update, and use a database without even realizing it.

KORA 3.0 is using a PHP framework called Laravel to further improve the code layout. We’re introducing a MVC layout to separate content pages, objects and actions, and controllers. The plan is to also restructure the database tables and format all the classes to match a theme to make it easier for new students to continue developing it. KORA 3.0 will implement the latest and greatest there is to offer including HMTL5, CSS3, RESTful APIs and more.