Shane's Blog

Error Messages

Along the way, I’ve learned a lot for how to display error messages to a user. I’ve done it a few different ways, I’ve displayed red boxes with Unordered Lists of all the different errors, I’ve had textbox borders turn red when something is incorrect, and I’ve even displayed alert boxes with the errors. Some of the ways I’ve done it were bad. Two terrible methods I’ve learned are changing the border colors of text fields and using alert boxes. They could either be confusing to the user or don’t help the UI well. The best way I’ve learned is one way, displaying a box to the user above the form field with a single statement. If something is not filled in, instead of individually saying which field is wrong, just say “all fields are required”, if an error occurred in submitting the form, just say “an error occurred”. Keep it simple. Another bad method of error messaging is by putting your messages in a red box. Red boxes could give the user a bad taste in their mouth about your website. It’s more hostile and doesn’t warn the user, more or less punishes the user. You may read that and think it’s ridiculous and stupid, but colors are subliminal to user’s. They might not take offense, but it’s how it reacts to you subconsciously. The best colors to use are shades of yellow. They are warning to the user and say they made a mistake, but not rude saying that the user is at fault.

Quick Tip: Getting your ideas down

If you’re like me, then you get halfway into a project, then you stop everything to work on a new project because a great idea hit you. This is terrible practice. It ruins your motivation for the project you were working on, and it builds bad habits. If you’re halfway into a project, you need to finish that one project before you go onto building something else. I find myself doing something like this all the time, so, to be able to stop this, I started keeping all my ideas down with a small description of the project. So let’s say I wanted to build something new like a list-taking application. The name is mylistexample.com. So, I open the plain text document where I’m keeping my ideas down, then I write it like this:

MyListExample - List taking application

And now, I have that idea down. Once I’ve finished a project in that file, I put a checkmark next to it, then I move to the next project by picking one out of the project ideas file. This allows me to stay on top of things and maintain organization.

Application Building Process

So you want to start a new project, right? There are a few steps that are taken to a finished project. From Start to finish I’m going to give you the steps I follow. For this test, we’re going to build a blog system. 

Step 1 - Fleshing it out

This step is essentially “wireframing” your application. I like to plan out my Database tables, the applications pages (and the features on those pages), then write out what classes I’ll need specialized for this project. We’re going to keep things simple for our blog, we need to strip some features including comments, ratings, sidebars, and search. It comes down to displaying all the posts on the main page, a page to view individual blogs, and the admin panel where you can add blog posts. So let’s start with our database tables. 

Posts

• Post ID
• Post Author ID Foreign Key
• Post Title
• Post Content

Users

• User ID
• Email Address
• Username
• Password
• Password Salt
• Firstname
• Lastname
• Name

We’re building a small blog system, so these tables are pretty much the only two tables we need. The Post Author ID Foreign Key is the User ID from the Users table. We will do a table Join of the User ID that matches the Author ID foreign key so we get data to display about our Author when we display posts. The next step is to write the special classes for this project. We’ll need to classes with these methods.

BlogPosts

• Create Post
• Read Post
• Update Post
• Delete Post

BlogUsers

• Create User
• Send Verification Email
• Verify User
• Update User Email
• Update User Name
• Update User Password
• Login User
• Logout User

First things you’ll notice that all the BlogPost methods are CRUD (Create, Read, Update, Delete). This is because that’s mostly all you can do with a Blog Post. Now, you can write your code with these classes. Now, we need to decide which pages will be on our site.

Main Page

• List Out All Posts

Post Page

• Show Blog Post and Author Information

Admin Panel Page

• Login Users
• Logout Users
• Create Posts
• Update Posts
• Delete Posts
• Update User Info
• Create Authors
• Update Authors
• Delete Authors

As you can see, the most activity will happen on the Admin Panel Page. This is mostly because the Blog is static in a sense. Even though it’s technically not static, there is no User Interaction. It’s just dynamically loading content that is read. If we had comments and ratings and retweet buttons, yes, there would be more features on these pages, but since not, this is all the info we need.

Step 2 - The Drawing Board

Now that we have a gameplan for our application, let’s design what our application will look like. This is usually pen-and-paper quick sketches. Maybe a block that says Blog post. Maybe a place to put the Website title. Then you can sketch out the Admin Panel, move some buttons around. Where the login forms will go. This is just simple sketches. Once you have those done, design a page flow. This is a graph with blocks and arrows, from what page will bring you where so to speak. This isn’t necessary, but it does help when building your application. Once you have a skeletal design of what you like, if you are a Photoshop/Fireworks person, now you can design what your site will actually like. If you don’t like to draw out your last design, skip to the next step. Drawing out your entire site can help the HTML/CSS step. So I suggest designing every element of your website. Including error messages, success messages, and just messages. Design forms, design text. Do this all before you work with the code.

Step 3 - HTML/CSS

This step is where things start to get interesting, now that you have designs of all the things you’re going to work on for your blog. You can now start building the HTML/CSS. I suggest building your directories before you start doing this too. Just so you have a good piece to work with. No dynamic code is in this step, you can insert comments of where dynamic code will be, but this will strictly be static designing here. Lorem Ispum really. The purpose of doing all the HTML/CSS first is so you aren’t juggling dynamic development and designing all at once. Getting yourself lost at points. So, just take this step easy and get everything designed. For our Blog, I design the Admin Panel and the main pages. My Website title is “Shane’s cool Blog” and everything is now themed. I can now move on to the next step which is development.

Step 4 - Development

By now, you have a decent static model of your application. Now is where you add all the cool stuff to it. Backend code. This will give the breath of life to your application. First let’s start with the easy stuff, giving life to our classes. We build a skeletal model of our classes with just method names. Now, put code into those methods. Build form handlers and the login system. Error catching and reporting. All of this is done in this step. Once you have something that you think is decent. Move on to the final step of application building.

Step 5 - Testing

Testing is by far the most important part of application building. If you don’t test, all the other parts of your application are meaningless. Testing allows you to debug and get rid of bugs and problems in your application. If there was a crack in your code, you can fix it. Testing is the last step before you launch your application. Simple things you can do are sign up users with the same email address, put random info into forms. Try submitting forms with empty values. See what happens when you try to go to blog post a million. Make sure that there is a blank index.html file in all your directories so people can’t access your sensitive files and images. Once you have a perfect application. You are ready to launch.

I hope this tutorial has helped you. Obviously, some of these steps can’t be used if you are using development patterns like MVC. You have to tweak some of those things a little bit. There are other ways of building an application, but this is my personal favorite. I hope that your application building process goes great. I used to build applications very messily and it can be frustrating at times, so this should help you maintain.

- Happy Coding

A New Project.

I’ve decided to tackle a new project that will allow me to utilize Facebook’s developer API’s. I don’t want to give too much away, but it is a small web-application that will fix a common problem I see on Facebook. Again, once the project is up and launched, I’ll give a bigger analysis of what it is. The problem with the internet is that you have to keep some things under wraps until its up. There are lightning fast developers out there that will take ideas up. So, I imagine it will take me the rest of the week to develop. More info to come.

Haha

clientsfromhell:

Client: “I want the website finished by tomorrow.”

Me: “Sorry, tomorrow is Christmas and I’ll be with my family tonight and tomorrow.”

Client: “Do I look like Santa Claus? Get it done.”

Application Preparation

Getting a great Idea for an application or new website is always fun, but knowing where to start to make it a great application can be intimidating. Good preparation will help you build your application with a gameplan which will make the process a lot easier.

A quick list might help you plan out your application well. You mainly want to tackle and note what the key features of your site are going to be. If you are building a competing app to something, list out the features of that site and then list features that you think could make that application better.  These features could help you build your application. By knowing what you’re going to build is always better than just saying you want to build a site. So, if I was going to build a Twitter competitor website, I would list out Twitter’s core features and then add some features I want to see on Twitter to the list. Having these ideas down will sure help you in the long run as opposed to simply stating that you want to build a better Twitter.

The next step you will take is drawing and mapping out your application. This isn’t even designing in it’s true sense. This is the simplest layout. Think of it as you just drawing a bunch of blocks and saying this will be the area for your posts; putting a block where the ads will be. This helps you get a good idea of how the layout will feel without designing it. This is what helps me the most when building an application. I want to know what I have to build before I build. This way, I’m not wasting time developing something that doesn’t need to be.

Keep your application stupid. Especially for your first edition. For your first version, you want to strip your application to it’s main functionality. Once you have a core version of your application, then is the time to add some extra features.

More detailed drawings or PSDs are the next step. This is where you build your website visually. This is where you add the gradients, the graphics, and the Lorem Ispum dummy text. This gives you an idea of what will work and what won’t work. After completing building your application floor to ceiling in Photoshop or on simple paper, you can ask for critique at this point. Ask a friend or ask a community of developers and designers. They can give you tips on how to make your application better looking and more user-friendly because the main thing you want to keep in mind when building an application is how your app will create a better experience for the user. And always remember in this step that simplicity is key. When building a complex web application, stay away from vibrant colors. You don’t want your design to take away from the applications core functionality. Think of Facebook or YouTube, you don’t see a bunch of gradients and flashy images on these sites. It would hinder the user’s experience. It would make your site hard to navigate and read. This is probably the most crucial and tedious step in preparation.

This next step is optional since it could take some time away if you’re working under a deadline. I personally like to build the site in HTML and see how it feels when clicking and everything. This has no application backend to it. If you’re working on a profile page, you fill in all the details with raw text and images. This gives you a model to build your dynamic application from. It also allows you to see how to make your HTML and Javascript cleaner. 

If expenses are a matter in your application, especially if you’re building a large website, you may want to figure all the expenses out then so you know how much money you will need to startup your website because anyone will tell you, a beginning application will not be pulling in the billions of dollars on day one. You should be finding out the prices for domain management and hosting. My suggestion would be putting aside at least a year of hosting cash. This is also where you can shop for hosts. You want your application to be running on good systems, one fatal crash and you’ve ruined your reputation forever. Also, you may be wanting to see about setting some cash away for publicity. These are the Facebook ads you’ll inevitably put up.

It’s always smart to plan out your applications like this before you build. These steps will help you build your application well. Going in with a clear game plan will make design and development a breeze along with launching your website.

Help this blog grow!

Everybody knows that domain registration isn’t cheap and neither is hosting. At least if you’re a web developer, you know that. One means of making some cheap cash on the side to help with some of these expenses for developers and designers is putting their knowledge out there for people to use and learn from. But by doing this, they’ll usually put advertisements on their websites. I want to keep adding helpful content to this website and let plenty of people learn from it. I plan on constantly updating it with posts with helpful material, but I want to keep this website ad free. So I’m now accepting small donations from readers out there. There’s a donation button on the sidebar of this site. If you are interested in sending a few dollars my way, I’d be much obliged. Thank you.

On a side note to this, I am very interested in keeping this blog constantly updated with rich content. On many occasions, I have started blogs and just let them sink. This time, I’m sticking to this. So expect some great content and tutorials.

Thank you.