What Are You Worth In The Web Industry?2 Comments »

 

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 Image0 Comments »

 

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 Gradients0 Comments »

 

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.

 

Using Firebug To Modify :hover State5 Comments »

 

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 Fillion0 Comments »

 

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

 

« Older Entries

Newer Entries »

 
connect with me!