ClickFYI: How I Faced Challenges

Read Part 1 Here!

Getting Started

For the header, I had the giant logo on top, with a navigation below it and a sub-navigation below that. Finally, the content of the site sat in things I call “bubbles” that have rounded corners and space between each bubble. Super simple with no color, just white and black with shades of gray. I knew the last thing I should ever concern myself with was a site style. I didn’t want to get caught up designing a site when I really just wanted to make this site.

But nonetheless, I had to do some design choices. Towards the end of the development I started tightening up the design. There were inconsistencies in the placement of page elements depending on whether or not a visitor was signed in or out. So I focused on making those elements stay in place.

It was usually as simple as moving some logic statement, that said if a user was logged in to display this code. And that code would be an entire HTML element. Instead, I created the HTML element than stuck the logic statement inside to display the various buttons and links.

Another basic problem I had was how I fundementally made PHP based sites. I have 2 parts to every page, the header.php and the footer.php, as I would imagine is really common. But through development I realized I needed access to the variables and functions in the header but I didn’t need to create any HTML elements. Such as when registering or signing in, I need to make sure certain things are true before loading the page.

If something was false (wrong password) I needed to redirect the visitor to an appropriate page and I can’t redirect the browser with PHP after there are HTML elements placed on the page. So, I created a pre-header.php that held all of those checks and functions and the header.php started with the HTML elements.

Create Smaller Goals

User Registration. I have no experience with this. I’ve created forms where users can login because I’ve always created the user accounts manually in the MySQL database — Such as for alex.takes.pics to managed my photography journal. But I’ve never created something like this. I knew what I had to do. I had to check to see if all the fields were filled out, if the passwords matched, if the username was available, and if the e-mail hadn’t be used before.

I knew I’d be overwhelmed if I did all of this at once. So instead I focused on the big picture: User Registration. I created a form and once it was able to submit data into the table regardless of what information was submitted or already in the database, I moved on. Now I started checking to see if the passwords were the same. If they weren’t the registration wouldn’t go through. But then I had a new problem, all the info in the form was removed. Which isn’t ideal, because if I was a visitor I would hate typing in all the info again.

So, I saved the form data and if the form was incomplete or wrong, the values would be inserted back into the form. The values that were missing or wrong, would be highlighted and empty. Once the passwords were checked, I moved on to checking if the username was already. Then I did the same to the e-mail.

I also tackled my registration a bit differently. In general, many sites provide you with a form to login or a link to register, with the login form having two buttons: One to login, the other to cancel or reset. I find this silly. I don’t need to cancel because I can just click to another part of the site and I don’t need to reset the form because it’s only two fields, so it’s not hard to replace a field or start over.

I decided to mix the two together. I still have a login page but instead of Cancel/Reset, I put a Register button. Clicking register will move the info typed into the login form into the registration form, where the visitor then retypes their password and an e-mail, agrees to the ToS, and clicks register again. I tried to incorporate this into one page but it just wasn’t clear.

Voting is actually the the cause of two problems I faced with this site but to stay on topic of this sub-section the problem I had was with the actual act of voting. I started off with the general action. Clicking a button sends a vote to be registered in the database. Once that was complete I had to make sure the person voting was logged in. Next, I needed to ensure each user can only vote once. Finally, I needed to allow users to void their votes. Sometimes I find myself accidentally voting on reddit, so I cancel that vote.

It’s amazing how breaking down a goal helps. By starting with the action I wanted to do, then narrowing the scope by which that action can be performed was a great way to keep me on task as I wasn’t working on many different things at once. This method allowed me to focus, not only on one task at a time, but one problem at a time too. Had I tried to implement everything at once I would have been lost trying to make everything work.

Making Decisions

As a freqeunt reddit user, I find myself voting on the headline of a post rather than the content. I have zero research to back this next part up but I would imagine this is a pretty normal situation — something I like to call “Drive-by Voting.” This is the other voting issue I was faced with. I wanted to prevent users from down voting a fact purely because they didn’t agree with it, likewise I didn’t want people to upvote a fact because they did agree with it. I needed a way to make voting fair but also as un-emotional as possible.

I moved voting to the sources of the fact instead. Since sources are what back up the fact and are only visible on the fact page, it seemed like the perfect resource to vote on. I know there’s only so much I can do to but I feel like I’ve mitigated enough of the Drive-by voting by moving the votes to the sources themselves. Unfortunately, users can still vote based on the URL. Such as, if it’s a political fact that’s sourced from a site they don’t agree with they can still downvote the source and I can’t stop that.

Staying Motivated

Since I wasn’t working with anyone on this project, I’d constantly find myself stuck thinking about a problem one way. So, I’d purposefully move away from the project to remove that train of thought. When I returned, at one point a month later, I was able to approach the problem with a fresh mindset. Everytime I found a new way to approach and over come the problem.

Privacy

Being so private also impacted my motivation. My motivation dropped sometimes because no one asked about it and that there was no interest. If I were to do it all over again, I’d definitely be more open about this project. Thankfully, there’s more work to be done and I’ll be talking about that in the future.

Version Control

I set up a local web develop environment using some software hosted on my old Mac mini. This allowed me to test PHP & MySQL before sending to the production server. I also set up a git account on a website to host my source code. This let me visualize my progress. Let me put titles and comments to each thing. I could title the changes to these files and title the changes to those files. It’s really awesome to see the timeline of changes.

That said, learning version control terminology was confusing but I’m really glad I forced myself to do it.

The Lessons

Read Part 3: The Design Evolution here!

Photography & Technology is my thing.