Brenelz Web Design Solutions

Hiring Skilled Labour Tough for Small Rural Web Companies

brenelz — Tue, 04 Dec 2012 14:00:36 +0000

This is a topic that has recently intrigued me. I will be gearing this post towards the web industry but I believe it extends to many industries out there.

http://www.developer4lease.com

The Backstory

The other day I was asked if I knew of any talented web people that would be interested in joining a company. This is a question I have gotten a few times, and usually respond in a similar fashion. Do you need contract work or in-house? They stated that it was for an in-house position. My immediate thought usually is ‘Good luck with that’. There are plenty of challenges that you have to overcome as a small rural company to get skilled labour, especially in-house. I’m not talking about your standard content entry or junior level designers; I’m talking about your senior designers/developers, and project managers. Below I have broken down a few of the challenges that I have seen from experience.

What are the challenges?

Skilled Labour Availability

The problem that all rural companies cannot avoid is the limited number of workers nearby. In a big urban center you just simply have more people to choose from. People generally want to live close to where they work if they can.

The other factor is the skill level of those workers around you. In a rural setting you don’t have universities, and colleges to train your bright local talent. The problem isn’t that there is no talent locally, they just generally move onto the urban centers. This is another reason why there are so many local self-taught junior designers available, but very few with any experience.

One other note I want to make here is about the web industry as a whole (at least in my local area). There seems to be a lack of young people pursuing our industry. This seems strange given the fact that technology is so integrated into our daily lives (iPhones, iPods, game consoles, computers). Why is it that students don’t think our industry is viable? Seems that it is still being perceived as a hobby and not a job. This could be a blog post on its own, so I will stop the rambling here.

The Freelancer Mindset / Commuting To Work

In this industry we have the freedom to work wherever we want, as we are constantly connected. We can work at a coffee shop, a buddies place, at home as well as many other places. This makes travelling to a confined office all the more difficult. All companies no matter where they are located have this “freelancer mindset” to fight against.

I believe this mindset is what separates industrial businesses from the web business. People understand that going to the shop is a necessity for physical labour, but a web company will always be pushed to allow the employee to work from home.

I know where these people are coming from, because I am of the same mindset. Even if a company was a 5 minute drive away, would I really want to give up my freedom of working from home? That makes me think of how all the more difficult it would be to attract someone from further away.

Offering Competitive Salaries

Often times negotiations come down to money. It is a known fact that city companies usually charge more than rural companies. This is for good reason as cost of living is a lot higher. This is why it would almost seem backwards for someone to live in the city and commute outside of it for work; their cost of living would be higher and generally their salary would be lower. A lot of city companies can offer “base” salaries at the same level as rural companies can hire “senior” positions.

Overcoming these challenges

Now that I have outlined some of the many challenges that hiring poses to rural companies; I have made a list of a few things you can do to attract these high quality workers.

Create a positive team atmosphere that freelancers can’t get on their own
Put your business on the map (win awards, sponsor events, network with other business/members of your industry)
Train young local designers/developers and bring them up in your system. This will help build some loyalty so they don’t move on quite as quickly.
Kidnap all the talented developers/designers and force them to work for you – well not really, that might be frowned upon.

Being a Rural Company Isn’t All Doom and Gloom

Frankly, rural companies have one big thing going for them that city companies don’t. This is a lack of competition in their local area. I know personally in my area there are maybe 2-3 other rural companies that I know about, but we are all very spread out and tend to not overlap too much in the work we do.

Take this as opposed to an urban center where you have a lot of big companies pitching for the same work.

Wrap Up

I don’t want this post to come across as negative. We all make choices about where we work/live. The point of this article is to help other companies that face the same challenges, and see what suggestions are out there.

I want rural companies to succeed, and attract the highest quality workers. The web is not limited to geography, and that is one of its strengths. There is nothing stopping anyone from being the next big web shop, or the next big freelancer. You just have to know what challenges you face, and how to overcome them.

Please use the following questions to start a discussion below, and hopefully we can improve this industry for all of us!

Freelancers

Would you ever commute outside of the city for work?
If you would, what would be the number one thing you would look for?
Did you originally perceive web design/development as a hobby? If so, what made you realize this could be a job?

Companies

What is the biggest obstacle you face in hiring new skilled people?
Do you find there is lots of local talent. If so, are they staying local or moving on?

Using Yeoman: Getting Past Git status: 127 Error On Windows

brenelz — Sun, 16 Sep 2012 22:33:16 +0000

Below I have added a video for all of you trying to use Yeoman on windows and getting a weird Git error when you are trying to install something. Eg. yeoman install backbone.

The simple solution is adding the bin directory to your windows PATH variable. For me that path is “C:\Program Files (x86)\Git\bin”. For you it could be a bit different.

This fix gets me past the initial error but there still seems to be an issue with the bower package manager. It wipes out the scripts and doesn’t get added to the components directory. I noticed it does create the backbone files in my user’s roaming folder, but seems like the issue is copying it from here to the project folder. Initial thought was maybe the “read-only” could be a problem but not sure. What are your ideas? Have you found a fix?

The Fragmented Mind of a Web Developer/Designer

brenelz — Tue, 17 Jul 2012 15:00:40 +0000

This topic actually came about one day when I was going for a walk following a crazy workday. I could just feel my mind racing, and my brain just wouldn’t shut off. The workday was over, and I just couldn’t stop thinking about work. In the following article I am going to try and break down the mind of myself, and in turn those who spend their time working on the internet. I hope some of you out there can relate to this “fragmented mindset”.

Problems

Now some of you might be thinking that working on the web must be easy. We just sit in our chair all day, maybe even in our pjs, and get to have fun on the web. Some of this is true, but our work isn’t the physical nature, but rather 100% mental. All jobs have some kind of mental component, but in my opinion there is few jobs more taxing on the human mind than working on the web.

Here are a couple of reasons:

Short Attention Span – When I was in university we had to read this great book on website usability titled “Don’t Make Me Think” by Steve Krug. He makes numerous great points in his book about how people use the web. Did you know that we don’t read pages? We actually scan them. If a page takes more than 2-3 seconds we will go back and try another one. We have no patience.
Too much multitasking – Our job pretty much requires us to multitask, but you have to be careful that you don’t do it too much. For example, at any 10 minute interval of my job I might: check my gazillion feeds, quickly scan a few interesting ones, login to twitter, check my email, message a few guys I work with, do 1-2 small things on 3 different projects, check each change in 5 different browsers, and then start over. Is it any wonder we don’t lose our minds? We repeat this over many times a day. How many times do you check your email in a day? Go to social network sites? How many projects do you have on the go at once?
We consume too much data – with the web our brain in constantly in overload mode. We have more data at our fingertips than we could even imagine. The following is a great infographic on how the average user spends its time on the internet. As developer/designers I can say a lot of those numbers would be quite a bit higher.According to that graphic we visit 2600 pages a month, and log on 57 times to our computer. I know my stats would probably be higher than that.
Always Connected – does our brain ever get a break? These days we have computers, tablets, smartphones, tvs, etc. Our brain is constantly in this 100mph state that consumes us. One video I watched online asked: “What is your wake-up to screen time?” My honest answer would probably be 5-10 mins. What about yours?

Solutions

The following are some best practices for fighting this unproductive mindset:

Take frequent breaks – take walks, or get up and get a glass of water.
Check email once or twice an hour – what percentage of your emails need to be viewed instantly? Checking your email every five minutes hurts your focus.
Limit social network time – try visiting social networks a max of 3 times a day. You get addicted to the instant information otherwise.
Check feeds only once in the morning – same reasons as above. You don’t need everything instantly.

I must make a bit of a confession here. I fail at all four of these things daily. I know I should be doing them, but they just don’t happen. This is because we either lose track of time, let our deadlines get the best of us, or we just have too much fun learning.

How do you cope with the “fragmented mindset”? I want to hear your thoughts in the comments.

5 Reasons Why Your Website Isn’t Producing Leads

brenelz — Fri, 18 May 2012 14:36:13 +0000

I am guessing most of you have websites for your business already; but the real question is whether or not it is producing quality leads for your business. You don’t just put a website up, and it magically generates customers. Avoiding the following pitfalls will help ensure you get the most out of your website.

1. People can’t find you

Your website could be the best thing out there, but if people can’t find it; it won’t matter. Google search is the primary source for internet traffic, and as such requires a lot of attention. Optimally you want your business on the first page of your targeted keywords. These targeted keywords are not just your business name, but also your products. One thing I get asked a lot is “How do I get to the top of Google?”. Well the short answer is content, content, content; but the long answer is that you have to continually work at it. Don’t try and hack your way to the top, Google will find you if you content is interesting enough. I could expand way more into the whole SEO realm, but I will instead link you to an article titled Five SEO Writing Tips for Your Blog or Website.

Social media is another key traffic source that you should be leveraging. Twitter and Facebook is a great way for you to develop a following. Take a look at the following Facebook-vs-Twitter infographic from 2010 that shows some staggering statistics. 500 million total users on facebook alone. 41% of those users login everyday. Tell me this is not a place you want to market your brand. Now I should also note here that this is hard work. You can’t simply create an account an expect people to want to follow/like you. ENGAGE!

Lastly a quick note that really is the easiest for you to implement right now. If you aren’t already, link your physical business to your online presence. Put you web address on newsletters, business cards, signs, decals, etc.. You probably already have traditional marketing in place, so why not use that to further help your online marketing.

2. Lack of updated, and interesting content

Do you update your content? And if you do, how often? You need to find some way to get people coming back. If your visitor comes back to your site in a month, does the homepage have some updated content? I argue that a site that doesn’t get updated is almost as bad as not having one. The following are a couple suggestions to keep things looking fresh:

Write a blog about your particular expertise
Testimonials of people who have enjoyed your product/service
Run a fun little contest
Company news – but remember to keep it interesting!
Upcoming events
Product/Service Specials

Making things interactive and fun never hurts. I don’t want to read pages and pages of content, I want to enjoy interacting with the content.

3. Unprofessional design

Design is a big part of your first impression. I don’t know about you, but when surfing the web I make a split second decisions all the time. Did you know the most clicked button on a browser is the “Back” button? I will hit the back button if something doesn’t grab my attention in that split second. The website could have outstanding content, but if the design is ugly I will go elsewhere.

On the other end of the spectrum you need to ensure that your design isn’t too flashy. You may have heard of “Minimalist Design”. All that means is that the layout is simple. You don’t need animations and flashing text to get people’s attention. Sometimes the subtle effects are way nicer.

4. No clear focus

Keeping your website focused is a huge task. On the web it is so easy to multi-task and do as many cool things as you can. Always keep in mind what your end goal is. This end goal should always result in $$$. Doing something cool and/or fun doesn’t always bring you leads. Focus on getting users to your contact page, or your online store, or maybe to your paid content. The less steps it takes to get here the better. I’m not going to click 4 different links to get to your store. Just give me one large button that directs me.

5. Difficult to use

One of the hardest things to test is the usability of your website. There is so much you need to be aware of, and understand about your users. What also makes it more difficult is that every website has a different target audience.

I’ve written a few posts on this topic here, here and here. I will just highlight a few points to get you on your way:

web users scan pages, and don’t actually read everything in the way most of us design
omit ~~needless~~ words – “Remove half the words on your pages, and then remove half of what’s left”
make things obvious – clicks should look clickable, conventions should be followed
create breadcrumbs – Eg. Home > Products > Category > My Awesome Product
provide the user with a search to make access to content quicker
each page should focus on one topic – don’t jump around all over the place

Some of these points are taken from Steve Krug’s – Don’t Make Me Think. Man I love that book!

Have more ideas on how to produce website leads? Hit the comments with your suggestions, and thoughts on the article.

What Are You Worth In The Web Industry?

brenelz — Thu, 09 Feb 2012 13:00:58 +0000

I am guessing most of you freelancers out there have not asked yourself this question recently; but I think that it is important. When you have been employed for a number of years, or owned your own business for awhile you forget how far you have come.

If I take myself as an example, I can see how much I have grown as a developer since I started. The problem I have is that I am not sure my rate has increased at the same rate as my growth.

What determines your worth?

The following list is what I see as the most common factors for most businesses:

Experience
Education
Skills/Technologies

I would argue the following are usually overlooked:

Time Management
Availability
Passion

These three separate the “great” developers from the “ninjas”. The problem for most employers is that they are the “intangibles” of a developer. You don’t know whether a person has them until you have worked with them for a couple projects.

What should your hourly rate be? ($60, $80, $100)

This really is a loaded question. What most people will do is see what local companies similar to you are charging. Of course urban companies charge more than rural companies; and companies in New York can charge more than Winnipeg.

All of that aside I think it really boils down the following question:

How much quality work can you get done in an hour?

It is so simple and yet it makes sense. If I can do double the work of you in an hour, shouldn’t I get double the pay? This doesn’t always happen and other factors limit you, but your worth can be different from your rate.

Can I be too good at my job?

A bit of a dumb question as you always want to improve at your trade, but I do ask myself this sometimes.

For hourly contract, Do I get things done too quickly?
For quoted work, Do I quote based on how long it takes me now with my extensive library, or when I did it completely from scratch.
How much is steady work worth? Do I go down to $25/hr,$35/hr?

I haven’t told you what you are worth, but I hope I have given you some rulers to measure yourself by.

Respond with your thoughts in the comments on this, or anything regarding freelancing.

How To Create CSS3 Gradients Using An Image

brenelz — Mon, 12 Dec 2011 13:00:57 +0000

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?

IE Filter Bug When Using Creating CSS3 Gradients

brenelz — Wed, 30 Nov 2011 18:19:59 +0000

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:


  
    Home
    Testimonials
    Contact Us

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.

Using Firebug To Modify :hover State

brenelz — Tue, 02 Aug 2011 19:23:21 +0000

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!

Swamp Ass PSA starring Nathan Fillion

brenelz — Wed, 20 Jul 2011 13:00:11 +0000

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

Getting started with YQL and AJAX

Alex — Mon, 18 Jul 2011 13:00:00 +0000

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:




	
	

	Search Using YQL and AJAX | Brenelz.com

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(''+item.Album.Release.title+' - Buy');
				}
				ii++;
				if(ii == 3)
				{
					search_results.append('');
					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!

Brenelz.com Changes Hosting!

brenelz — Mon, 06 Jun 2011 19:44:07 +0000

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!

Using .htaccess To Make Testing Easier

brenelz — Tue, 31 May 2011 13:00:38 +0000

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!

Brenelz Web Solutions on Facebook!

brenelz — Wed, 04 May 2011 19:03:00 +0000

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!

IP Mapping in PHP Using MaxMind

brenelz — Mon, 02 May 2011 15:10:51 +0000

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.

Step 3 â€“ Write Code

Now begin coding the different sections.




Download New York Brochure  »

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.

Web Hosting Basics: Choosing the Right Plan

Brian Flores — Mon, 25 Apr 2011 13:00:09 +0000

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.

Fifteen Reasons To Use Video For Your Business

Dave Wowchuk — Mon, 11 Apr 2011 13:00:42 +0000

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.

Top 5 WordPress SEO Tips

brenelz — Mon, 21 Mar 2011 20:08:00 +0000

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.

5 Questions To Ask Before Choosing a Web Developer

brenelz — Wed, 09 Mar 2011 17:21:55 +0000

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.

Scaling WordPress for High-Traffic

brenelz — Wed, 02 Mar 2011 18:01:50 +0000

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?

IE Cleartype (Blurry Text) Solution

brenelz — Wed, 02 Feb 2011 18:12:36 +0000

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…