Web Dev Notes

Bugs suck. We hate when a program crashes or when someone hacks our website to post pictures of us in that pink bunny costume we were dared to wear several years prior… Yes, bugs are horrible little critters we hope to never encounter even though we inevitably run into many which could have been easily avoided. For example, do you take the time to make sure all your software is up-to-date? If you’re running Wordpress for your blog, do you always update to the newest version as soon as possible.

Even if you haven’t had any trouble with your software yet doesn’t mean you shouldn’t hurry to upgrade ASAP! While a bug can sometimes just be a small annoyance, other times it could be catastrophic. You wouldn’t want your whole database to disappear and lose every single post you have ever written! I do hope you make backups…!

more funny pictures

There is always a glitch in the program you are running. If it’s a good program that has been tested properly prior to release, then chances are you won’t run into that glitch right away. However, as soon as you install a plugin or try something unusual with the software, the chances that you find that remaining glitch increase significantly! A program is never bug free! Don’t let anyone convince you otherwise! The older your content management system gets, whether it be Wordpress, Joomla, php-Nuke, etc, the more likely someone has found a way to hack it. Chances are, once this occurs, the developers of those software products hear about it very quickly and then end up releasing a new version with fixes to the problem. Just because your website hasn’t been affected by the problem yet will not change the fact that it is vulnerable until you take the time to upgrade!

I’ve received questions from several individuals with regards to how I am able to include HTML code in my Wordpress posts. For example, if you want to make a word bold, you type <strong>bold</strong>. So the question is, how then did I write <strong>bold</strong> without the word becoming bold? The other questions I’ve been asked is, “How the heck did you do that indentation?!”. Take a look at this post for example! Can you put blocks of code like this on your page? YES!

The magic behind formatting a post like this is actually very simple. Writing a post in Wordpress is a simplified way of inserting a few paragraphs of HTML formatted text into a web page. When you make a word bold or add a link, the text is surrounded by tags which will tell the browser how to format it’s appearance on the screen. HTML tags always begin with “<”, so as soon the browser encounters this symbol, it will check to see if it is a valid HTML tag, and if so, take the appropriate actions. If you actually just want to display the “<” symbol on screen and have the browser ignore the possibility that it could be HTML code, then you need to instead write the ASCII entity name.

I know many of you just grumbled and felt discouraged at the mention of ASCII entity names, but don’t worry I promise it really is very easy! Basically, all you need to know is that some characters have an ASCII entity name which you can type in your posts to display the character. For example, the ASCII character name for < is:

Try it out! Open up wordpress and type the above ASCII character. When you preview the page, you will see that the character < is displayed instead. The new mystery then is, how did I write the ASCII character above without it being turned into “<”? hmmm…!

• Go here for a full list of ASCII character names

The next question was related to indentation in posts. The first thing I did was put my code within a blockquote. If you are using Wordpress, you can simply highlight text, then click the “b-quote” button to do this. This indents a whole paragraph of text, commonly used for quoting references by bloggers. Next, I surrounded my blockquote with a tag called <pre></pre>. This tag is used to define preformatted text which means that the text enclosed between the tags will be displayed as it is typed. In a nutshell, if you are typing a post in Wordpress and hit the spacebar 20 times between each word, when you hit preview, it will still only show a single space between each word. However, if you use <pre>text to be preformatted here</pre> in your post, then all text between the tags will display your text as it was written, meaning multiple spaces can be displayed.

Try it out. Copy/Paste the below into Wordpress and preview it to see the effect:

<pre>

This is the first line, with no indent.
     This line has 5 spaces in front of it!
          This line has 10 spaces in front of it!

</pre>

Enjoy!

Update:I’d just like to say it’s really interesting how this post first came to be. The only reason I thought about writing on this subject is because readers contacted me asking about it. I am very eager to answer any and all such questions! Please keep the feedback coming so that I can focus on providing content that is of interest to YOU!

Are you a student who is using blogging as a means of earning a little extra cash? If so, chances are you are very hard working and dedicated! Making money from blogging is no easy task as we’ve already explained many times here at Web Dev Notes. In order to become a successful blogger you need to make quality posts often as well as survive the rough times when visiting traffic is low. In fact, there are many factors you need to manage in order to become a successful blogger which you can read more about in our Blogging Tips section.

If you approach your studies with the same enthusiasm and dedication as you do blogging then you may very well find yourself in a position to qualify for a scholarship. Visit Scholarships.com and fill out a scholarship application today! You have nothing to lose by filling out an application and possibly much to gain.

Scholarships.com gives you free access to an extensive list of grants & college scholarship opportunities. They have been around since 1998 and have already helped award 2.7 million scholarships & grants worth over $19 billion. Their search functionality will help you find scholarships that match your interests and qualifications. Apply and see what happens! If you’ve been working hard you deserve to be rewarded. Remember, your chances of receiving a scholarship are significantly improved when you take the time to apply for one

This post brought to you by Scholarships.com. Where else can you find information about scholarships or financial support for academics? Check with an academic adviser at your educational institution. They may be able to guide you towards other resources and services available to you to help ensure you receive the education you deserve! Also, read more about how you can make money online without spending a dime in our Web Dev Notes Make Money section.

Amazon is a great way to monetize a highly trafficed website. Amazon is one of the worlds leading e-commerce websites which allows people to buy just about anything online. Joining Amazon as an associate allows you to earn a commission on any sales you generate from your website.

I’ve never used Amazon before because I never had enough traffic to make it worthwhile. However, thanks to the growth of BattleCity, I’ve decided to experiment with Amazon as a possible income stream which could help support the costs of running the game.

Many websites like to use affiliate links directly in their articles to specific items they may currently be writing about. For example, if I was writing an article about how awesome my Canon PowerShot A550 7.1MP Digital Camera with 4x Optical Zoomis, I might use a link to Amazon where people could buy the camera like so! However, for BattleCity, there is no good way of doing this while remaining on topic unless Amazon begins selling tanks, land mines, etc… =p

For the above reason, I instead decided to create an Amazon store! Take a look at the BattleCity Amazon Store to see what it looks like. If you have visited the BattleCity Classic website, you will notice that it is even possible to customize the look of the store to match your website!

When you create an Amazon store, you can even specify exactly what you would like to display in it. For example, you will notice that in the BattleCity Amazon Store, the first items you are presented with are Video Games and Video Game Consoles. I felt this would be the best landing page considering this is a store for BattleCity which is a computer game! On the right-hand side, there are other categories users can browse as well.

Will this store actually generate any income for the game? If there are players who do shop online, some may be persuaded to use the Amazon store in order to help the game. I’ll post about the stores success or failure in a few months! I expect that the store would generally remain a very small income stream given the nature of the BattleCity website, but any little bit helps!

So how do you setup your own store? Visit Amazon.com and click the Join Associates link to sign up with Amazon. Once your account is created, login and click aStore. Then select, Add an aStore. To show you how it’s done, I’ll create an aStore for Web Dev Notes!

At this point, I am assuming you were able to create an Amazon Associates account and have found the aStore button. Click the Add an aStore button as shown below! As you can see in the screenshot, I already have two Amazon aStores! You are allowed to create up to 100 which should be more than you will ever need!

Next you will be presented with the “Create aStore Pages” area which will allow you to setup your different store categories and select the items to display. You can select specific items, or specific Amazon categories. Since I want something related to Web Dev Notes, I’ll add Web Development Software and Books to my store! The screenshots below show how I have done this! If any of the screenshots are unclear, click them to see the full-size view.

First we want to “Add a Category Page”

Next, select the category to begin editing it. I will select the “Add products by Amazon.com category” option so that I can include the entire Web Development section. Click “Select an Amazon Category” to browse the categories and to select the one you want in your store.

Since I am looking for Web Development Software, I will first select the Software category. I will then specify that I only want to display Web Development software.

After saving all these selections and changes and giving my category an appropriate name, I am taken back to the beginning where I can add another category, or continue to the next step. I’ll add one more category for books then show a preview of what the Web Dev Notes Store looks like so far!

First, a look at the Category Pages screen which now has two categories! Before going on, I’ll hit that up arrow to move the Books category above the Software category because I believe books are more popular with my readers than software. The category shown at the top of this list will be the default one displayed first.

\

And, a preview of the store so far!

Wow, that was all pretty easy so far! Next step is to customize the look to match your website better! There are some themes you can select from or you can define your own colors and edit the CSS file.

How did I match up the colors to resemble my website? First, I took a screenshot of my website and then pasted it in Paint. Then using the color selector tool, you can get the exact RGB value for the colors. Since you need the hexadecimal value of the color, I used this RBG to Hex Converter.

First, I define my new theme.

Here is a new preview of the store with the updated theme.

Before you continue, give your store a name!

The next step is to check a bunch of configuration options such as whether you want to display the sidebar menu on the right or left, if you want to show similar items or not, etc… I put my sidebar on the right and then checked every box! Once you’re done that, click finish and you are done!

Want to see the final product? Visit my Web Dev Notes Store!

As you can see creating an Amazon store is very simple. You can also now easily browse your store to find products you think your readers might be interested or which you own and highlight them with links to your store in future articles!

Are you tired of Gmail refusing to send your executable files?! Gmail blocks you from sending .EXE files for your own protection, however there are times when you still really want to send a file you know you can trust. For example, there have been many times when I wanted to email myself my homework but could not because the program I created was a .EXE. This can be a real nuisance!

The good news is that there is a really easy way around this problem. Since Google checks for the .exe file extension, simply change the extension and you will be able to send the executable file!

For example, if you wanted to email a cool game like BattleCity Classic to a friend, rather than send BattleCityClassic.exe, rename the file to BattleCityClassic.exe.txt and send that. Be sure to leave a note in the email letting your friend know to remove the .txt extension once they receive the file.

Yes, sending an executable file is that easy. Just rename if before you send it, and then have the receiver rename it back to the original name!

Why did I add .txt to the end of the file name? In the above example I re-named BattleCityClassic.exe to BattleCityClassic.exe.txt. When you do this, you will probably receive a message asking if you are sure you want to change the extension for the file. Definitely say yes! That is the whole point! By adding .txt to the end of the file, when you then attach the file to email it, Gmail will think you are sending a text file not an executable file and will therefore allow it to go through.

If you found this Gmail tip useful you may also be interested in finding out how to manage all your email accounts with Gmail.

If you want to be successful, you need to offer your visitors something unique. If you clone other websites you will end up reading your blog all alone.

Now hold on one minute! The clones shown above are obviously not alone, there are two of them! That may be true… However, consider how their similarities will affect the amount of attention they receive? If you are walking around the block and see the above cute cat, you may bend down to pet him/her on the head if he/she is not foaming from the mouth. Great! Now you continue your walk and a few minutes later, you see the exact same cat…! Well… not really! This time you have met the clone! Either way, you tell the little bugger to get lost and to stop following you! You are no longer interested! If it had been a different cat, you would have been more likely to bend down and pet his/her head again!

Don’t clone others. Offer something new on your blog or website. If you are discussing the same topic as someone else, present the content in a different way. Stand out or perish like an old banana.

Looking for Web Development Software or Books? Visit my Web Development Software and Books Store!

Want to Increase your Websites Page Rank and Incoming Traffic? Submit your Articles to WriterDatabase.com. It’s Free!

Despite being a massively huge company on a quest for world domination, Google still finds the time to have a little fun and play April Fools jokes on us every year. The following is a list of all of them and more… including this years latest April Fools Joke!

• Mentalplex
• Pigeon Rank
• Google Copernicus Center
• Google Gulp
• Google Moon Becomes Cheese!
• Google Romance
• Gmail Paper
• Google TiSP Beta
• Answer to life, the universe and everything = 42!
• Google Map directions from North America to Europe tell you to swim!
• Klingon, Bork bork bork, or Elmer Fudd Google

And… let’s not forget this years latest April Fool’s joke… Google will soon be establishing a colony on Mars. Apply to be a Virgle Pioneer if you’d like to be one of the first colonists!

For more funny articles, check out the WebDev LOL section. You may also want to find out, when Google will index your brain!

Are you using Webalizer to report your site statistics? Have you ever wondered what all those numbers really mean? Understanding your Webalizer site statistics is important because it gives you an idea of how well you are doing and where you should focus more attention!

Hits
Hits are not a very trustworthy statistic and should really be ignored at all times because it is not reflective of traffic to your website. Hits are the number of individual requests for all file types that are received by the server. Think about this for a second. If your page only contains text, then a visitor will generate one hit when visiting the page. If you add an image to the page, a visitor loading the page will now generate two hits because they request the page and then request the image.

You can even have hits showing up in your statistics that are generated from other websites! For example, if you use an image saved on your server as a signature in a forum, then each time someone visitng this forum loads a page on which you have posted, they will load your image and therefore generate a hit that will show up in your statistics! If the forum you visit has tons of traffic, you may start thinking your website is very popular when in fact all the hits showing up in your statistics are coming from your forum signature on another website!

Since single pages on your website can generate multiple hits each time they are loaded and because crawlers like GoogleBot as well as off-site images can all generate hits, it is important to ignore this stat unless you are starting to worry about reaching your bandwidth limit!

Files
Files are related to hits. Files are the number of hits that resulted in something actually being sent back to the user such as text or an image. Therefore, if a user requests a page that does not exist, the server will receive the request and count this as a hit, however a 404-page not found error will occur and this will therefore not count as a file.

Another time where a hit will be generated but not a file is when a user is visiting a page that they have visited recently. In such a case, the page will be ‘cached’ meaning it is saved locally in order to speed up the page-load time. While the page text will likely be requested again, things like images will be loaded from the local copy in order to reduce the load on the server. You can test this if you want by overwriting an image on your website then loading the page. You will likely see the old image until your force a reload by hitting the refresh button or wait a certain amount of time.

Pages
Here is your first useful statistic which is extremely important when it comes to analyzing your traffic! This represents the number of individual pages that were viewed! This actually tells you how much of your content is actually being viewed. You will notice that this number is much smaller than your hits! Don’t be depressed, I was sad too when I found out this number was meaningful and hits was not!

Visits
Visits are another very important statistic. This stat shows how many actual visits there have been to your website. This number will be smaller than your pages statistic because if your site has good content, a single visitor will usually load more than one page! Looking at the difference between pages and visitors can give you a good idea of how much people are enjoying your website. If your content is not very good, the difference between pages and visitors will be smaller!

Sites
The name of this statistic is a bit confusing so most people generally have no idea what it means. The “sites” stat actually tries to take your “visitors” stat and then determine how many of those visitors were unique. This of course is not 100% accurate because of proxy server and changing IP addresses, but still often provides a god estimate.

To better help you understand this, imagine you have created a private blog and are the only visitor. You then visit the site once a day for one month. Your site statistics will therefore report that you had 30 visitors from a total of 1 site. Of course, if one day you visited your blog from work, the stat would say you had 30 visitors from a total of 2 sites!

KBytes
This statistic represents the volume of data transferred from your server. Usually you can ignore this unless you are worried that you receive enough traffic that you could possibly reach your bandwidth limits!

It’s still a good idea to keep an eye on this from time to time to make sure nobody is abusing your website! Sometimes people will use images from your website on their own site by linking to them. This could therefore put an extra load on your server that you are not even benefitting from!

WebDevNotes Example
Let’s examine the statistics for this website for the month of May 2007!

Pages: 45,273
Visits: 8,935
Sites: 2,420
Hits: 62,741
Files: 53, 671
KBytes: 2,188,751

So what do these numbers tell me? I know that 45,273 pages were viewed on my site by approximately 2,420 different people. If I divide these numbers, I feel confident that my website is providing quality content because that means on average, each unique visitor read about 18 pages during this month! The actual visits count is 8,935 which means that on average each of the 2,420 sites (unique visitors) came back to Web Dev Notes about 3 or 4 times throughout the month. Of course, these are just averages. In reality, some people likely visited once and never came back and others visited nearly everyday thanks to the 451 Press channels and my news feed which let people know of my daily updates.

What about the hits, the files and the KBytes? Well, I don’t really care anymore. I’ve figure out everything I wanted to know about my traffic already without these statistics. This is why you should ignore these stats. They likely do not tell you anything you actually want to know. They are just big numbers and distracting your attention away from the important information you need to know.

As we work on developing a resource, we often sit back and ask ourselves, “Are we building the product right?”. This is extremely important to do as often as possible to ensure that we are consistently meeting our requirements.

However, at one point in the development process, we also need to take a moment to ask, “Are we Building the Right Product?”. Sometimes, even our users don’t exactly know what the right product is, so although we may be building the product right according to the requirements, we may still be building the wrong product!

So how do we avoid this problem? Keep on interacting with your users throughout the development process to get continuous feedback. Have your users test what you have done thus far and help them better discover their needs. Remember, you want them to use the product once it is finished.

Sure, you can always build exactly what they initially asked for, hand it to them, take your pay check and run… But wouldn’t you rather they recommend you to others or potentially hire you again in the future? And if you are developing internal software instead? Do you really want your boss to tell you that you need to start over or possibly even fire you? Probably not!

You are responsible for your software, take pride in developing it!

A few days ago I mentioned personas and promised to go into more details on a future date. Today, I am happy to announce that we have finally reached that future date! The image above is from Occam’s Razaor by Avinash Kaushik. You can click the image to read the article it is from for even more in depth information about personas.

So what are personas exactly you ask? Well, persona’s are basically fictional characters. Now before you go ahead and think I am crazy, let me explain how these fictional characters can help you with any kind of development! Developing a web site or application can be a lot of fun, but sometimes we can get carried away and lose sight of our real goals. Our ultimate goal is to satisfy the needs of our users, so its important to remember who they are while we develop.

Unfortunately, we often forget about our users while developing because we rarely get a chance to interact with them. In some cases, we develop a web site or a blog without even thinking about who will read it. We just sort of hope these users will show up once we are done! That is definitely a mistake. You need to know your audience ahead of time. Even when we do know our audience, we still often run into problems because we generalize them all into a single category. With persona’s, we help ourselves remember our users by giving them more personality.

A persona is therefore a fictional character who represents a group of users who will be using the website or application you are developing. Already, rather than just having “users”, we force ourselves to break these down into groups of similar users. Now, so we don’t forget these groups of users, we give them names, lives, and personalities, so that we keep them in mind while developing!

If you’d like to know more about personas and are interested in using them, visit Usability.gov. This website is definitely a great resource and will get you started creating your own personas quickly. There is even and example allowing you to meet Matthew Johnson!