Tag Archives: NodeJs

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.

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.