How to Control HTML Code to Reduce Bugs

April 4, 2011 By Leave a Comment

As I was designing a site the other day, I realized that the way I have been tracking my code is something I should share.

Most of the projects I work on involve some sort of conversion to WordPress or other CMS system. Anyone who has ever developed a custom WordPress template from novel HTML, CSS, etc… knows how easy it is to run into bugs when it comes to running live code. You install it and something is missing, one of your div floats is outside where you want it to be. Or you are running an IE 6 test and you are totally pissed off that nothing looks right, but you have to make it readable by the 1% jerks (I have a better word) who haven’t yet switched over…I digress.

Anyway, the point I am trying to achieve with this post is that I keep track of my HTML code with HTML <!– comment here –> comment tags. Every time I end a div element: <div id=”nothing”>element</div><!– end nothing –> I comment right after the end div tag. This process has saved me (in some instances) hours when transitioning over to live code.

This application is practical when working with large amounts of nested <div> containers, but thought I would give my two cents :-) .

If anyone else has any special tricks for keeping track of code or improving productivity, comments are always welcome!

Filed Under: Web Development Tagged With: , , ,

How Do I Generate a QR Code For My Current Page in PHP?

March 27, 2011 By Leave a Comment

QUESTION
How Do I Generate a QR Code For My Current Page?

ANSWER
This is a pretty simple solution using Google’s charts API and some PHP. I uploaded a sample file which you can download by “right-click” and “save-as”: qr-code-current-page.zip

1.) You first need to determine your current page.
2.) Second, you need to implement Google’s chart api for QR codes.
3.) Write both parts into separate strings and write a final string for an image path.
4.) Echo the php in an image path.
5.) Check out your page, you should see a QR code.

Links:

1.) Google Chart API – QR Codes - More information about Google’s API.
2.) Sample PHP file showing QR code for current page. (Right-click and Save-as)

If you enjoyed this post, please comment!!

Filed Under: Web Development Tagged With: , , ,

Add Twitter Follow Button to Left Side of Website

February 1, 2011 By Leave a Comment

Add Twitter Follow Button to Left Side of WebsiteTwitter is a popular service that helps people deliver real-time mass communications. If you have a blog or website and a Twitter account, why not make it easy for your visitors to follow you?

Included in this tutorial is: simple HTML code for your site (html and text file), and two follow images.

Download the file pack from here (right-click and save-as): Twitter Button Files

For your reference, here is the code:
<div style=“border: 0pt none; position: fixed; top: 220px; left: 0pt;”><a href=“http://twitter.com/ntechcomm”><img style=“border: 0;” src=“images/twitterblue.png” alt=“Follow Us on Twitter” /></a></div>

Modify the code for your site:
Change the Twitter link to your username: http://twitter.com/yourusername
Change the image path: Upload the follow images to your site. If your site pages are in the directory root and you have a ‘/images’ folder, the current path will work. Otherwise, use the full path to your follow image: http://www.yoursite.com/images/twitterblue.png

How to use the follow button code on your website:
To use this code on your website, you must place this code immediately following the start <body> tag on every page you wish to display your Twitter follow button.

How to use the follow button code on a hosted WordPress blog:

  • Make sure to backup your WordPress template before making any changes.
  • Upload the follow button images to your site and note the location.
  • After you have uploaded the follow images and have determined the full file path – browse to the wordpress templates folder and find the header.php file of your current blog template.
  • Paste the follow button code immediately following the opening <body> tag.
  • Depending on how you decided to edit your header.php file, either save your changes or upload and replace with your new header.php file.
  • Open your web browser of choice and surf to your blog.
  • If you only see text without an image, double check your image file path settings.
  • If you don’t see anything at all, make sure that your button code has been saved to your template’s header.php file.

Please comment with any questions.

Filed Under: Web Development Tagged With: , , ,

Display Random Testimonials in PHP

January 19, 2011 By 1 Comment

Lately I have been working on some new projects. I have a client right now that operates a service business and they would like to display testimonials on their site. For this application, I wrote a custom, simple solution to accomplish this with PHP. Here is a preview of the code:
Display Random Text in PHP
This code can also be used to display random text, html links, etc… Here is a link to the source file (Right-Click and Save-As to download):
PHP Source File

The example above shows a working/standalone application of the code as it will display HTML. The source file does not include the HTML shown at the bottom of the image.

Please comment with any questions or suggestions with the use or application of this code.

Filed Under: Web Development Tagged With: , , ,

Click to Remove Text with JavaScript

December 15, 2010 By Leave a Comment

I have been working on some new projects and it seems that adding some UX (user experience) makes a website flow better. Today I will be talking about how to remove default text from a textbox by simply clicking on it or by using the onFocus function with JavaScript.

So… I have a textbox for a search function on a page that I set to display “Enter Search Terms…” by default. The goal is, when the user clicks on the text area, the default text disappears. With the default text gone, the user can type what they want without having to manually delete the default text.

This task can be accomplished by adding a very small piece of javascript code to the textbox HTML.

For example:
<div style=”padding:10px;”>
<h2 style=”padding: 0px; margin 0px;”>Find More Stuff…</h2>
<form id=”form1″ name=”form1″ method=”get” action=”find-stuff.php”>
<input name=”q” type=”text” id=”q” value=”Enter Search Terms…” onFocus=”javascript:this.value=”” />
<input type=”submit” name=”button” id=”button” value=”Submit” />
</form>

Notice “onFocus” in bold above…
To accomplish the goal of deleting text when clicking on a text area – add to your text input code.

Filed Under: Web Development Tagged With: , , ,

Best Place to Rent a VPS or Dedicated Server

August 1, 2009 By 1 Comment

Wiredtree.com, best place to rent a dedicated server or VPS

I really have to give Wired Tree mega props for both the selection of hosting configurations and amazing customer service. We have been a customer for over a year now and have experienced nearly 100% up-time (the only downtime was planned maintenance that took place late at night and announced well in advance). Any questions submitted through their service ticket area received a first response or were resolved within 15 minutes! Wired Tree is simply unbeatable in the Managed VPS/Dedicated Server market.

When it comes to customer service and service offerings, Wired Tree gets two thumbs up as the best place on the web to rent a Managed VPS and/or Managed Dedicated Server.

Wired Tree
http://www.wiredtree.com
Location: Chicago, IL

Filed Under: Web Development Tagged With: , ,