Quick tip screencast on how to make easy CSS3 Gradients:

What do you guys think of this method? Or do you still use a repeating background image?

Related posts:

1. IE Filter Bug When Using Creating CSS3 Gradients
2. CSS3 Pie
3. Creating Columns using CSS3

Well it has been awhile since I have posted on this blog. I would love to be posting more, but my hectic work schedule isn’t allowing me much time at all.

Well enough of that. Today I am going to help you figure out how to fix an annoying little ie bug. If you haven’t already checked out my ie z-index bug page, do it now.

The Problem

Most of you by now I am guessing have started to implement CSS3 gradients in your projects instead of repeating background images. If not, I suggest you check out this handy css3 generator that converts an image into its very own CSS3 gradient.

Now in my example, I have a navigation bar that is using a CSS3 gradient, and then I also have an active state for a link that expands outside of the navigation’s boundaries. See below:

The following is the HTML code I used:

<div id="global-nav">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

and the import CSS relevant to our issue:

#global-nav ul {
    background: #d2d6da; /* Old browsers */
    background: -moz-linear-gradient(top, #d2d6da 0%, #c9ccd1 21%, #a1a3a7 75%, #95979a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d6da), color-stop(21%,#c9ccd1), color-stop(75%,#a1a3a7), color-stop(100%,#95979a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* IE10+ */
    background: linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );

   height:54px;
   line-height:54px;
}
#global-nav li {
    display: inline;
    float:left;
}
#global-nav a.active {
    margin-top: -12px;
    background: url(../images/active-bg.png) no-repeat;
}

So in this case everything would look great except IE. Here is what would show up in IE:

The Solution

As you can see our nice overlapping feature is cut-off. To me I thought I must have assigned “overflow:hidden” to the ul as that is what it looks like. Turns out that is not the issue.

All you have to do to fix this error is remove the following line of CSS:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );

Now the problem is that you will not have your nice CSS3 gradient in IE, but in some cases the overlapping if more crucial to the design. Don’t ask me to explain why filter does this. Filter works great until you have to push out of the boundaries.

If you have any better solutions/fix for this issue, please let me know in the comments.

Related posts:

1. How To Create CSS3 Gradients Using An Image
2. Creating Columns using CSS3
3. Creating Semantic CSS Navigation

I didn’t know for the longest time how to easily modify hover states on-the-fly. I thought Firebug had no features like this, but I guess I was wrong.

Take a look at this quick video that shows how this can be done!

If you have any other hidden Firebug secrets, please share them in the comments below!

Related posts:

1. Firebug for IE… a dream come true!
2. Firebug 1.5 Inspector Stuck (FireQuery Fix)
3. CSS/JavaScript Hover Menu (screencast)

The Nerd Machine has created some pretty hilarious short videos. Check this one out for some tips on Swamp Ass

Related posts:

1. NERD Machine T-Shirt Giveaway!

In this tutorial I will be showing you how to build a simple tool that will use Yahoo!’s YQL query tool to search for some tracks from their music website. These results will then be displayed on our website all using AJAX to make it seamless along with a link to buy the album off Amazon.
Live Demo
Download

What is YQL?

YQL stands for Yahoo! Query Language, it lets you query, filter, and join data across most of Yahoo!’s (and a few other’s) services with a similar structure to SQL. This is useful as its all written in one language making it easier to build sites and web apps that will use different services but join them all together. To get started with seeing what YQL looks like its a good idea to try out their YQL Console. From this we can see that it will deliver our content back in either XML or JSON, in this tutorial we will be using JSON. The format of YQL was built to be very similar to that of SQL so it makes learning it even easier.

Getting started

To get started we need a blank HTML document, CSS file, JS file and a few images for the design. I used HTML Boilerplate to provide the base structure of my files. In the index.html file we want to add the following HTML:

<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Search Using YQL and AJAX | Brenelz.com</title>
	<meta name="author" content="Alex Bor">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<link rel="stylesheet" href="css/style.css?v=2">

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<div id="container">
		<div id="search_cover">
			<div id="search_box">
				<input type="text" placeholder="Search using YQL and AJAX" id="music_search" />
				<img src="images/loader.gif" id="loader" alt="Loading..." width="16" height="11" />
			</div>
		</div>
		<div id="search_results">
			<!-- Our search results will be places in this area -->
		</div>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
	<script src="js/script.js"></script>
<?php  include_once($_SERVER['DOCUMENT_ROOT']."/includes/meta.php"); ?>
</body>
</html>

In the HTML we are simply getting jQuery from Google’s library in the footer after we have created a basic structure for our site. The following CSS will then style our page.

/*  HTML5 ✰ Boilerplate  */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

body, select, input, textarea {  color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/
.clear { clear: both; }
#container { width: 600px; height: 100%; margin: 0 auto; background: url(../images/music_note.jpg) top center no-repeat; min-height: 470px; padding-top: 50px; }
#search_cover { background: #e4eeff; border: 1px solid #90b9ff; padding: 5px; position: relative; }
#music_search { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #BFBFBF;  color: #595959;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; font-weight: bold; height: 25px; padding: 10px 60px 10px 10px; width: 515px; }
#loader {  height: 20px;   position: absolute;  right: 18px;  top: 17px;  width: 30px; display: none;}
.music_item { background: none repeat scroll 0 0 #90B9FF;
    border: 1px solid blue;
    float: left;
    margin: 7px;
    padding: 3px;
    text-align: center;
    width: 175px; }
.music_item span img { display: block; display: block; margin-left: auto; margin-right: auto; }

This CSS will style our page and also provide a reset for default behaviours that some browsers set. After this we should now have a base to start working with.

In the HTML and CSS we can see that we will fill our results into the “#search_results” div. I have also linked to a gif loading image that we will show when we are searching for content and hide once its finished.

Getting the content with JavaScript

I will be using the JavaScript framework jQuery which we loaded in towards the bottom of our index.html file. Here is the JavaScript which has a few comments in the code.

$(function(){

	//Default variables and objects so we don't need to
	//select them each time
	var search_box = $('#music_search'), 		//Where we will write the text
		loader = $('#loader'),					//Loading gif
		search_results = $('#search_results'),	//Where the results will be places
		runner = '';							//A variable to check if a request is running

	var music = {
		search: function(string){
			runner = $.ajax({
			  url: 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20music.track.search%20where%20keyword%3D%22'+string+'%22&format=json&diagnostics=true&callback=',
			  dataType: 'json',
			  success: function(json){ parse_results(json.query) }
			});
		},
		show_loader: function(){
			loader.fadeIn();
		},
		hide_loader: function(){
			loader.fadeOut();
		}
	}

	function parse_results(json){
		search_results.html('');
		if(json.results === null){
			search_results.html('No results found.');
			music.hide_loader();
			return;
		}
		//Loop through tracks
		var ii = 0;
		$.each(json.results.Track, function(i, item){
			if( typeof item.Album != 'undefined' && item.Album != null ) {
				if( typeof item.Album.Release != 'undefined'){
					if( typeof item.Album.Release.Image == 'undefined'){
						$image_url = 'images/no_image.jpg';
					}else{
						$image_url = item.Album.Release.Image[5].url;
					}
				search_results.append('<p class="music_item"><span><img src="'+$image_url+'" /><span class="album_title">'+item.Album.Release.title+'</span></span> - <a href="http://www.amazon.com/s/ref=nb_ss_d?url=search-alias%3Ddigital-music&field-keywords='+item.Album.Release.title+', '+item.Artist.name+'">Buy</a></p>');
				}
				ii++;
				if(ii == 3)
				{
					search_results.append('<p class="clear"></p>');
					ii = 0;
				}
			}
		});

	}

	search_box.keyup(function(){

		music.show_loader();
		if(runner != ''){
			runner.abort();
			//console.log('Aborted');
		}
		setTimeout( function() {
			music.search(search_box.val());
		}, 1000 );
		music.hide_loader();
	});

});

Overview of the JavaScript

At the top of this file we create some of our default variables which we are going to use throughout the script.

After this we create our variable object “music”. I chose to create this part similarly to a plugin for ease of use later on. Next we will create 3 functions in this object, on to search Yahoo! using the YQL, and two to show and hide the loader. Our music.search function requires a string which will be the value of the search box, which will be used to search the YQL database. In the music.search we need to set up our AJAX request which requires 3 parameters: URL, datatype and the success callback.

We can use the YQL Console to produce our request URL. From the drop down on the right hand side if we select “music” we can see a list and few examples of what we can search/do with Yahoo!’s music tool and YQL. We are using “music.track.search” to provide our search results.

From above all we need to do is copy the URL and replace “Madonna” with our string we want to search.

The parse_results function will then handle all the work of making sure there is a track and displaying it in the results area along with a handy link to buy it from Amazon.com. While printing out each of our tracks if an image isn’t found we show default “no image” instead.

Our final bit of code ties it all together adding an event listener on the search box. The listener checks for a “key up” on the search box so when someone starts to type a search is fired (and if search is currently running it is aborted).

Wrapping up

That’s about all we need to get started with using YQL. As we can see its a very useful tool and this is just a short guide to what can be done with it. I hope that this gave a good overview of an example and explain a bit about YQL.
For more information be sure to read the Yahoo! guide as this is a really powerful tool with many possibilities with what can be done with it!

Related posts:

1. AJAX / JSON Guide

Brenelz.com is proud to announce we have switched over from Dreamhost to OnCallSoftware.net for our hosing. Dreamhost just seemed too slow, and had way too many server outages. Hopefully this will help us grow this blog to new heights!

We would love to know if you see a speed difference, hit the comments!

Related posts:

1. Giveaways Galore as Brenelz.com is Re-Launched!
2. Win Some Chuck Swag with Brenelz Web Solutions…
3. Brenelz Web Solutions on Facebook!

Do you have trouble implementing a phase II of a website? I know it can be a pain having to develop a phase II on top of an existing live site. Obviously you can’t just modify the live server without testing; but other alternatives can be troublesome as well.

Its not fun having 2-3 different copies of a website. Get’s confusing which is live, what changes have been done on which, etc. Well I found one way to somewhat ease the pain. I know some of you out there have more in depth solutions such as ZooKeeper or Capistrano, but both didn’t really suit my needs and are a bit complex.

The Folder Structure

My solution would be to have two folders in the public_html of your website. Have one named “staging” and the other named “production”.

/public_html
    /staging
    /production

Each folder would be a “copy” of your site, and each would have its own db. I would suggest you name your db’s yoursite_staging, and yoursite_production respectively.

The .htaccess

The only real requirement for this is that must have a unix server as that is the only server that supports .htaccess. You also have the mod_rewrite module installed.

Once you are sure the requirements are met, put the following in your .htaccess:

# enable module_rewrite
RewriteEngine On

# make sure the host is what you expect, and don't rewrite subdomains
RewriteCond %{HTTP_HOST} ^(www.)?yourdomain.com$

# make sure they aren't requesting the actual production directory.  Otherwise it would be a continuous loop.
RewriteCond %{REQUEST_URI} !^/production/

# rewrite any request file to the production directory
RewriteRule ^(.*)$ /production/$1

The following are some examples of how the above will redirect:

/index.php =>  /production/index.php
/css/styles.css?v=1  =>  /production/css/styles.css?v=1
/images/gallery/myimage.jpg => /production/images/gallery/myimage.jpg

Switching Folders

Now if you ever need to change the folder that is shown live on your site, just change any line that has “production” in it. Alternatively you could just rename the “production” folder to “staging” and vice versa.

Your Thoughts?

What do you think of this concept? Is it too simple? If you got a better way to do something like this please sure it in the comments!

Related posts:

1. Usability Testing: The easy way!

Just a little FYI for all of you following my blog. Please consider “liking” my facebook page below.

I might be offering exclusive content on Facebook in the near future. Stay tuned!

Related posts:

1. Brenelz Web Solutions Re-Vamp
2. Happy Holidays from Brenelz Web Solutions!
3. Win Some Chuck Swag with Brenelz Web Solutions…

In today’s tutorial we will be learning how to do some simple ip mapping using MaxMind’s database.  This is handy if for example your client wants different things to show for the east and west side of the country.  This could also be handy if you have a special going on in only one state, and you don’t want it to show up to visitors outside of that state.

Step 1 – Purchase MaxMind Queries

Head on over to MaxMind’s web services page – http://www.maxmind.com/app/web_services#city and purchase a few queries.  Take into consideration how many visitors your site will have because each visit will use up a query.  Once this is done you should have received a license key for which you can use in your PHP code.

Step 2 – Plan Your Code

This is a step a lot of PHP developers don’t do (myself included).  It is important, especially in larger projects to have a plan of attack.  Let’s create a new php file (ipmapping.php) and enter our plan of action in the comments.

<?php
// start session

// get the users ip address

// request ip information from our maxmind db

// store the received information in the session

// show link if conditions are met

?>

Step 3 – Write Code

Now begin coding the different sections.

<?php
// start session
session-start();

// get the users ip address
$current_ip= $_SERVER['REMOTE_ADDR'];

// request ip information from our maxmind db
$license_key = 'YOUR_LICENSE_KEY_HERE';
$query = "http://geoip3.maxmind.com/b?l=" . $license_key
. "&amp;i=" . $current_ip;

$url = parse_url($query);
$host = $url["host"];
$path = $url["path"] . "?" . $url["query"];
$timeout = 1;
$fp = fsockopen ($host, 80, $errno, $errstr, $timeout);

if ($fp) {
fputs ($fp, "GET $path HTTP/1.0\nHost: " . $host . "\n\n");

while (!feof($fp)) {
$buf .= fgets($fp, 128);
}

$lines = split("\n", $buf);
$data = $lines[count($lines)-1];
fclose($fp);
}
else {
# enter error handing code here
}

// store the received information in the session
$geo = explode(",",$data);
$current_country = $geo[0];
$current_region = $geo[1];
$current_city = $geo[2];
$current_lat = $geo[3];
$current_lon = $geo[4];

$_SESSION['current_region'] = $current_region;
$_SESSION['current_city'] = $current_city;
$_SESSION['current_lat'] = $current_lat;
$_SESSION['current_lon'] = $current_lon;
$_SESSION['current_country'] = $current_country;

// show link if conditions are met
?>
<?php if( $current_region == 'NY' ) : ?>
<a href="pdfs/new-york-brochure.pdf"  target="_blank">
Download New York Brochure  &raquo;
</a>
<?php endif; ?>

Step 4 – Test Code

One of the biggest headaches about IP Mapping is testing.  Just because it works for your IP doesn’t mean it works for everyone.  The rule of testing is to make sure you test all the different scenarios.  Use one ip from inside your test region, and one from outside.  Once you have these test ips put them into $current_region so it is static.  Once things are tested you can change $current_ip back to the way it was before.

Conclusion

So what do you think of our application?  Hopefully this is something you can use in your projects down the line.

No related posts.

It is common for even the most experienced website developers to have difficulty in choosing the ideal hosting plan to meet their requirements. An endless number of web hosting companies exist, each offering their own unique packages and additional features. The process of choosing a web hosting plan can become quite complicated.

What is Shared Hosting, VPS Hosting and Dedicated Hosting Anyway?

The easiest way to overcome confusion about web hosting plans is to understand the difference between dedicated server hosting, virtual private server (VPS) hosting, and shared hosting options. Once the differences are understood, choosing the most advantageous hosting plan will become fairly simple. The ideal host and plan will be determined by what the web developer expects to accomplish with the website.

Shared Server Hosting

Shared server hosting plans are appropriate for small websites without much traffic or data transfer. Shared hosting means that the server is shared with several other websites, each using the same IP address. Websites hosted on shared servers literally share the server’s resources with many other websites. This fact means less reliable performance and security than one would expect with a dedicated server. Email process and data transfer will be noticeably slower, and software and firewalls are not customizable.

Keep in mind that when using a shared server, transferring your website to a new server can be time-consuming, difficult and frustrating. The main benefit of using a shared server is the low cost, but the overall service of a shared server leaves much to be desired. Shared hosting is perfect for a small or medium sized project that does not require a great deal of customization and will remain relatively static over time. Any developer or website owner that is looking for an economical, efficient hosting option will find a shared server a worthy choice.

Dedicated Hosting

A dedicated server refers to a hosting plan in which the website owner pays for their own personal server. This server and its resources are completely dedicated to one website, and it does not share space with any other websites. A dedicated server comes complete with its own software and operating system. Dedicated servers are extremely powerful and efficient, and remain the best choice for projects requiring a high level of customization.

Dedicated hosting plans have been created to cater to very resource-driven websites. These include websites that consume a great amount of bandwidth to offer streaming music or videos, or those that provide a large amount of data to thousands of visitors monthly. Dedicated servers are also a good option for expansive corporate or employee intranets.

VPS Hosting

Virtual private server, or VPS, hosting provides many of the same features that dedicated hosting does. These features include an operating system, dedicated IP addresses, unlimited domain capability, and an abundant amount of data transfer. The only real difference is that VPS hosting shares the same physical server with other websites and files. The server’s space and resources are divided among virtual partitions.

VPS hosting offers some customization with security and performance concerns. It also allows customization of firewalls and the ability to dictate important permissions for sensitive files and data. VPS resources permit the capability for a larger server capacity, while allowing much faster speeds and better efficiency than traditional shared servers. This makes them appropriate for high traffic websites and those with high bandwidth applications that don’t require the power of a fully dedicated server.

Understanding the Advantages of Each Type Of Hosting Plan

Both VPS and dedicated servers provide increased functionality for any website project. With both types of plans, an efficient email server offers improved performance and security. This includes the possibility of advanced email campaigns. Another benefit of VPS and dedicated hosting is the ability to choose and customize the operating system you prefer, as well as the option of installing and configuring software to your specific needs.

Shared servers do not offer benefits such as custom operating systems and software configuration. Shared server hosting can also potentially pose problems with reliability and security concerns, since server resources are shared. Another user can easily damage the server’s functionality, although most experienced hosting providers have implemented safeguards to keep such issues from occurring.

When selecting a potential new website host, it is crucial to understand what level of customer support will be offered for dedicated and virtual private servers. Is the technical support department available by several modes of communication? Twenty-four hours a day or just during business hours? A full technical support package will provide support for any software that has been installed on the server. Shared hosting providers can only operate tested, bug-free software.

Developers who require features such as LAMP or a control panel to be installed on their dedicated or VPS should become aware of some additional potential issues. It is important to understand these and address concerns with the new host before finalizing any decision. LAMP and the control panel may be pre-installed on the server as part of the package plan, or they may have to be installed. Either the web host or the developer may hold the responsibility for the installation. In this situation, the developer may incur additional fees for such an installation. Some less desirable web hosts will charge an additional fee for the installation of such features, while providing absolutely no installation support throughout the process. Keep in mind that when choosing a web host that offers minimal technical support, a fairly high level of technical ability is a necessity to keep the server and software running properly and securely.

Another crucial consideration when choosing a particular type of server is its speed. This depends on several factors, including the machine’s internal power, the location of the server, and often the operating system. The final decision about whether to use shared, dedicated or VPS hosting depends on a variety of factors, but most important are the project budget, the type of website being planned, and the expected or desired rate of traffic and growth of the website.

Some Last Things to Consider Before Making A Final Decision

Before making any final decision, it is essential to begin communication with the potential new host to obtain specific company policies and information regarding support, terms of service, and other users. Opt for VPS hosting over a shared plan, this is generally a more feasible and reliable choice. VPS is ideal for a company that would like to upgrade their business operations and website presence, and who will require enhanced functionality and support to reach that goal. Dedicated servers are the right option for any developer who requires a full array of features, including complete customization ability, high levels of rapid data transfer, powerful email options, custom firewalls and IP addresses, and responsive and reliable technical support.

When selecting a potential new web host and hosting plan, reliability is often the most important concern. Any potential host should be researched regarding uptime and stability. The best way to get an idea of a host’s customer satisfaction rate is to begin by checking out online reviews. Investigate the host company thoroughly, and check out the other businesses it represents before making a commitment to service. A wealth of information is available online to begin researching hosting providers and service plans. Consider your needs and expectations, your budget, and your future plans along with the provider’s stated plans and additional value-added features.

Related posts:

1. 20 Source Code Hosting Sites You Should Know
2. Deploy a dedicated server in the cloud *
3. 5 Questions To Ask Before Choosing a Web Developer

1. According to a study by the (University of Pennsylvania) Wharton school of Business, prospects are 72% more likely to purchase a product or service when video is used and they make their buying decisions faster. After seeing a video, most prospects will have a greater understanding of the subject or product.
89 percent of consumers will review a video the same day it is received, and about 94 percent of those people will share it with a friend or relative. Industry reports suggest the response rates for video promotions are six times greater than those for printed direct mail pieces.

2. “Video brochures” have a high-perceived value so they rarely get tossed like a lot of junk mail. People also tend to keep them and pass them along to friends. Most people will watch a marketing video in its entirety – out of curiosity, if nothing else.

3. Video can help present a consistent message every time for every viewer. Put forward a consistent orientation, training, sales, or marketing message to enable wider audiences and on demand viewing.

4. Video is affordable. It’s no longer just for large corporations. A carefully scripted 3-5 minute video can be more effective and convey as much information as a stack of printed materials.

5. Video can help you reach markets that live training or sales people can’t reach. Video helps you deliver your message to smaller market segments that may never be able to afford your live training services or markets to far away to reach.

6. Filmmaking and its offspring, video, has become the most powerful communications tool of the last 100 years. Video on the Internet is growing quickly, and viewing content online has actually surpassed traditional TV viewing.

7. Some videos are powerful sales devices in themselves. You’ve probably seen the exercise machine commercials that offer a free video. Bowflex sells a $2,000 exercise system. The free video they send to prospective customers cost $6.50 each, but nearly half of those who view the DVD order a system.

8. Video can show your product or service in action, something brochures can’t do. You could have one or more actual customers being filmed using your product or even stage a re-creation. In either case you want to show the real benefits of using your product.

9. Even though your video may be produced for one or two primary uses, you’re likely to find many other uses for this same video. Your video can be used in trade shows, one-on-one sales calls, shown to groups, or streamed over the Internet from your website. It can be used to attract investors and for other uses. Have the video designed so it can be easily updated to include new products, services and people without redoing the entire video.

10. Video can help a relatively small company look like a much larger national or international firm. You could film some of your suppliers or customer’s businesses. You could show your products (or services) being manufactured and used.

11. Video can be a perfect way to explain a complex process or technical product where the inner workings are hidden from view. Using computer generated graphics or an animation can clearly explain how a product or process works.

12. Video is a cost-effective way to sell or train people on products that require a demonstration in order to be sold or serviced, especially for products that are expensive to move or demonstrate.

13. Video is an ideal way to give “virtual tours” of your organization. By using close-ups and careful lighting you can put your best foot forward, and the viewer doesn’t have to see anything you don’t want them to see. Highlight those aspects of your organization that are most important to your customers such as quality control or pride of workmanship.

14. One reason video is such a powerful medium is because it involves the viewer’s emotions. The ability to reach an audience with images and sound can be incredibly persuasive. The combination of sights and sounds appeals both to those who learn visually and to those who respond more to auditory learning styles.

15. “Before and after” shots are another way to use video. For example, a company that restores water wells used “before and after” video shots that dramatically demonstrate how their patented system improved the clarity of the water. These “before and after” shots can be the most effective way to concisely express the benefits of your product or service.

Does your business use video? If not, what has prevented you from doing so.

Related posts:

1. How eCommerce Adds Value To Your Business
2. New Video Edit iPhone App!
3. Registering A Business Name

There are dozens of specific effective search engine optimization tips for your WordPress site. To a newcomer in web development and publishing, these ‘help’ lists of 100+ SEO techniques are daunting and sometimes out of reach. These Top 5 WordPress SEO Tips are a great first, valuable step.

1. Content. Content. Content. Creating interesting, genuine and sometimes controversial content is the first step in having visitors return to your site. Don’t just use the plug-and-chug method of loading poorly written articles with keywords. Instead, write content worth reading while consciously including keywords.

2. Keywords are key. Be selective and specific when choosing keyword phrases. Keyword phrases should at least appear in the title and in beginning and ending paragraphs. Putting keyword phrases in your title tag and page title, as well as in your HTML code (META tags) are beneficial for SEO.

3. Use clean URLs. URLs that are easily readable by humans are also more easily accessed by search engine spiders.
Ditch the www.fakeseocorp.com/=3365d9647b?&category=tipsandtricks style, and adopt the much more aesthetically pleasing www.fakeseocorp.com/tipsandtricks.

4. Link your site internally. Linking different pages within your site is one of the simplest SEO techniques. By linking visitors around your site, you are increasing individual page traffic, increasing PageRank, and allowing spiders to access all pages on your website.

5. Spread the word. Create social media accounts, such as Twitter and Facebook, for your website. Also, submit your website to social news sites like Digg, discovery engines like StumbleUpon, and reputable search engines. These all allow search engines to find your site more readily and will increase traffic.

There’s an enormous amount of SEO tips, tricks and tools available on the Internet. It’s important for a web development newcomer to realize that SEO is not a set one technique, five techniques or 500 techniques. SEO is a varying, synergistic structure, with a strong base of simple techniques.

Think of this Top 5 WordPress SEO Tips as the necessary starter kit for an evolving search engine optimization toolbox. When implementing more complicated SEO techniques, it is beneficial to consult an SEO specialist or veteran web developer.

Related posts:

1. Five SEO Writing Tips for Your Blog or Website
2. 50 WordPress Resources
3. WordPress: More than just a blogging platform?

Web developers have different levels of expertise. While two different web developers may claim five years of experience, one might be more capable and match your needs more closely. In addition to the usual interview questions, try asking these questions to find the right web developer for your next project:

1. What is your keyword strategy?

If you’re practicing search marketing, you need to have a web developer who will work with you to make sure their back-end SEO strategy matches the work you’re putting into optimizing the site’s content. If they don’t have a solid strategy for making your keywords work, you should look at other candidates.

2. Do you have a portfolio?

All web developers should have a portfolio, so not having a professional portfolio put together is a sure sign that you should find someone else. Their portfolio should give you a good idea of their aesthetic and whether or not their coding is up to snuff. Ask them to bring the complete code for one of their recent projects (not just a few snippets). This will give you an idea of how clean their code is.

3. What are your favorite websites? Least favorite?

You can get a good idea on how current the candidate’s knowledge is by asking them about their favorite and least favorite websites. This also helps you learn more about their aesthetic, as well as where they draw their inspiration.

4. Do you follow current web standards?

Any good developer should follow current web standards to ensure that the site works on every OS and across multiple web browsers. This is a great time to find out how well versed they are in HTML – all developers can write HTML, but some can’t work without a reference manual. If they make simple errors or oversights in writing HTML, they may not have the level of detail and knowledge you want in a web developer.

5. Do you typically work on larger websites or smaller ones?

You’ll want to get an idea of the scope they’re used to working in. If they typically create larger websites, and you want a smaller one, they may miss some of the little details. If you’re looking for a large site, and they’re used to smaller ones, they may not be capable of taking on a larger project. You want to make sure your web developer’s experience level matches the project you’re working on.

When choosing a web developer, it’s important to make sure they’ll be a good fit for your company or project. Asking just a few simple questions can help you weed out the worst candidates – and find the best person for the job.

Related posts:

1. Website Start-up: 20 Questions
2. Web Hosting Basics: Choosing the Right Plan
3. Become a Better Web Developer Using RSS

Here is a nice talk by Ryan Allen. He gives you a ton of great tips on how to allow your blog to receive high traffic. Isn’t that what we all want for our blogs?

Related posts:

1. Top 5 WordPress SEO Tips
2. Blog Marketing: Is it needed?
3. WordPress 3.0 Custom Posts

The Problem

Have you ever made a dropdown menu using JavaScript and found your text to be real ugly in IE? Well the problem probably is caused by cleartype.

ClearType attempts to improve the appearance of text on certain types of computer display screens by sacrificing color fidelity for additional intensity variation.
- Wikipedia

Turns out animating text causes this issue; functions like fadeIn() and fadeOut() in jQuery are usually the cause.

// This causes the cleartype problem
$("#message").fadeIn();

The Solution

How do you fix this issue you ask? Well all you have to do is remove the “filter” attribute from the troublesome element.

$('#message').fadeIn(function(){
    this.style.removeAttribute("filter");
});

If you are doing animations outside of jQuery you would use this raw JavaScript:

document.getElementById("#message").style.removeAttribute("filter");

Before Fix

After Fix

You can notice the difference in the “CARDIO” text the most.

Hopefully this helps you out! Let me know if it worked…

Related posts:

1. Plain Text, XML, and JSON Transfer Formats
2. Cross Browser Placeholder Text For Input Fields
3. Animate Text with jQuery Easing (screencast)

When I first saw this jQuery plugin I thought I would never be able to find a use for it. I mean on most of my sites I don’t need to do any crazy typography. Usually if I need something I would just do it using an image. Recently however, I found a use for this library. It happened that I wanted to add a tag around the first word of Joomla titles, so I could change the color. After finding out you couldn’t hard-code HTML in the titles, I was instructed to try out this library. Worked like a charm!

Download Lettering.js

How Lettering.js Works

Let’s try and create the scenario I mentioned above. Imagine this simple html:

<h1>The Long Joomla Title</h1>

Along with this JS:

<script src="path/to/jquery-1.4.2.min.js"></script> // remember to change the paths
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(function() {
  $("h1").lettering();
});
</script>

Above code is pretty straight forward. First we include jQuery, then the lettering plugin, and finally we call the lettering function.

By default the outputted code would look like this after the JS is ran:

<h1>
<span class="char1">T</span>
<span class="char2">h</span>
<span class="char3">e</span>
<span class="char4"> </span>
<span class="char5">L</span>
<span class="char6">o</span>
<span class="char7">n</span>
<span class="char8">g</span>
<span class="char9"> </span>
<span class="char10">J</span>
<span class="char11">o</span>
<span class="char12">o</span>
<span class="char13">m</span>
<span class="char14">l</span>
<span class="char15">a</span>
<span class="char16"> </span>
<span class="char17">T</span>
<span class="char18">i</span>
<span class="char19">t</span>
<span class="char20">l</span>
<span class="char21">e</span>
</h1>

Wouldn’t you hate to have to do this manually? Would make for very default to maintain code. Now if we change the title the ‘s automatically regenerate.

This still doesn’t quite do what we want it to do. We actually want to separate it into words instead of characters. Change the JS to this:

<script src="path/to/jquery-1.4.2.min.js"></script> // remember to change the paths
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(function() {
  $("h1").lettering('words');
});
</script>

Now our spans would look like this:

<h1>
<span class="word1">The</span>
<span class="word2">Long</span>
<span class="word3">Joomla</span>
<span class="word4">Title</span>
</h1>

Now to style the first word to be a different color it is this simple!

h1 .word1 { color: #f00; }

There is quite a bit of other functionality, but I hope this gives you a start. Check out Dave Rupert’s article for more info.

Related posts:

1. 3 Screencasts For Building Your Own jQuery Plugin
2. Creating a Simple Tooltip jQuery Plugin
3. Animate Text with jQuery Easing (screencast)

Have you ever needed one image in many different sizes on a website? I know I have many times and have never found a good way to handle this until now!

In the CMS’ you build do you have the user upload different sizes of images? Maybe a large image, and a thumbnail. Wouldn’t it be so much nicer if you could have them upload the large image, and then you use whatever sizes of that image you need? Here is how:

Download the Smart Image Resizer Script

Download the zip file here

This smart image resize technique is really handy in that there is only ONE file you need to worry about.

Install the Script

1. Unzip on your web server
2. In the same directory, create a directory called “imagecache”
3. Make your imagecache directory is writable by the web server (usually chmod 775)

Features

1. Resizes any filetype
2. Can crop to the ratio you need
3. Built-in caching abilities to speed up performance.

Usage

This is a breakdown of how it is used:

<img src="/image.php/image.jpg?width=200&amp;height=200&amp;image=/full/path/to/image.jpg" alt="" />

The above code will use the “width” and “height” parameters as the max the image should contain. So the image might be 200px wide but only be 150px tall in order to keep the original ratio.

Now if we wanted to crop our image into a square no matter what the ratio is we would add on another parameter called “cropratio” as follows:

<img src="/image.php/image.jpg?width=200&amp;height=200&amp;image=/full/path/to/image.jpg&amp;cropratio=1:1" alt="" />

*** Please note that the image parameter (/full/path/to/image.jpg) must be the full path from the document root to the image.

Having Problems?

If you are having problems check out the shifting pixel’s page.

Related posts:

1. How To Create CSS3 Gradients Using An Image

I am happy to announce that the following two people have won the NERD shirts:

1. Lavesa Glover (@Vesinator3000)
2. Brian Jones (@Down8)

Frankly I wish I could give all of you that entered a shirt but contests don’t work that way. I will be doing more in the future so please stay tuned to this blog by subscribing to my feed

Also make sure to head on over to The Nerd Machine and buy these shirts anyways. They are more than worth it!

Have a happy holiday season, and hit me up on twitter anytime! (@brenelz)

Related posts:

1. NERD Machine T-Shirt Giveaway!
2. Brenelz.com Giveaway Winners!

Brenelz Web Solutions is proud to giveaway some NERD apparel as we begin to enter the holiday season. Are you proud of your “NERD” status? Well with the T-Shirts I am giving away you can make sure everyone knows that you love being a gamer, web designer, TV junkie, or anything else NERD related.

What Can I Win?

I will be giving away “2 SNES Black” Nerd Machine shirts

How Do I Win?

There are a couple things you must do in order to be eligible to win the T-Shirts.

1. Follow me on twitter (@brenelz)
2. Follow Nerd Machine on twitter (@thenerdmachine)
3. Click Here To Send This Tweet On Twitter
4. Lastly, comment below stating what makes you a NERD!
   (leave twitter handle as well)

When will you pick the winner?

The 2 winners will be picked on Nov. 30 randomly.

Related posts:

1. NERD Machine Shirt Winners!
2. Chuck Season 1 DVD Giveaway!
3. Brenelz.com Giveaway Winners!

Do you ever notice that your border-radius corners just don’t look as good in Safari as they do with Firefox? I certainly did with one of my latest projects. It is especially bad when it falls onto a dark background.

Courtesy of: Sneak – http://tumble.sneak.co.nz

Background Bleed Solution

The fix is actually real simple and only involves adding one extra line of code to your selector.

-webkit-background-clip: padding-box;

See the difference? Make sure to add this line of CSS every time you use border-radius and you will have sharp looking corners every time!

Other Related Links

• Fixing the background ‘bleed’
• border-radius leading to extraneous background in webkit

Related posts:

1. CSS Rounded Corners
2. Snazzy CSS Double Border Effect