November 19th, 2008
This really isn’t about CSS, just something I’ve noticed a lot lately, and the trend keeps growing.
Over the past year or two, this job board thing has gotten out of hand. You used to be able to go to Monster, or Careerbuilder, and find your dream job. Now, however, the dream job doesn’t get posted on those large sites. Instead, the great jobs get posted on one of many job boards, so you have to watch all of them because you never know which one will have your dream job. It’s like anyone with a decent readership wants a job board, and why not, because it’s a pretty easy way to make some money ($100 a listing, $200 a listing, $300 a listing). That adds up.
Authentic Jobs has the right idea. They offer a money back guarantee to listers, and they (or he) has a network of high traffic sites that display the Authentic Jobs feeds. I believe there is probably a referrers fee paid to the site that leads to someone finding a job. Chances are, one of the websites you visit regularly displays the Authentic Jobs feed. Listing price - $250 full time, $75 freelance.
With Smashing Jobs you get a pretty good list of available jobs (Crispin Porter and Bogusky post here - Burger King, VW, maybe you’ve heard of them). Smashing Mag is one of the top blogs, so the job listings get really good exposure. Listing price - $200 full time, $100 freelance.
Not web industry specific, but it is a great place to find work. This job board is specific to what I’d consider creative companies. Ad agencies, design studios, web shops, etc.
This is a short list, and you won’t find many big name employers here. Maybe a good place to look if you’re interested in picking up some freelance work. My only concern would be the person looking to hire your services are looking to do so at a discounted rate. Listing price - $75 for 30 days fulltime, $50 freelance.
Like the creative hotlist, this isn’t web specific. Because of that, you’ll probably find a lot of more general advertising and design jobs posting here. Listing price - $269 for 60 days.
37signals makes some great little products, or so I’ve heard (I’ve never used them). Their job listings are a little weak - unless you’re a RoR guy. If that’s the case - you should probably start looking there. Listing price - $300 for a month.
Like the Creative Hotlist and Talent Zoo, you’ll find a larger variety of companies listing here. You’re pretty much guaranteed you’ll find only agencies here, not many in-house gigs. Listing price - $265 for a full 90 days.
Want more? How about these
Listing price - $99 for 30 days.
Listing price - $75 for 30 days.
I’m sure I missed a couple, so feel free to let me know.
Tags: career, web jobs
Posted in career resources | No Comments »
November 16th, 2008
What are Sprites in CSS?
Simply put when you use “sprites” in CSS it’s a way of using one background image, and then changing it’s position.
Why use Sprites?
It all boils down to load time and efficiency. If you use a sprite for a background for an image, then you cut down on the total file size, and the number of http requests. If you’ve ever seen an Apache server log, you’ll see what I’m talking about. When a client requests a page from a server, the server sends the requested page, and makes requests of its own, on itself. The server requests all the images, each one is a separate http request, and each one gets served separately. A single page could have many http requests.
So, let’s take a look at using a Sprite for a navigation. Here is the Sprite (you can get it, and all the other files needed by downloading the demo files. You can also view the demo.
So let’s look at the code.
The pages look like any other page, the navigation is simply an unordered list, each list item is floated left. We put an ID on the body tag, and a class on the navigation to show the active state, especially if we were looking to put our navigation in an include (which I do). For this little tutorial I’m using HTML pages instead of PHP so you can just open the page in your browser, no server required.
<ul id="mainNav">
<li><a class=”home” href=”index.html”>home</a></li>
<li><a class=”page2″ href=”page2.html”>page 2</a></li>
<li><a class=”page3″ href=”#”>page 3</a></li>
<li><a class=”page4″ href=”#”>page 4</a></li>
<li><a class=”page5″ href=”#”>page 5</a></li>
<li><a class=”page6″ href=”#”>page 6</a></li>
</ul>
So now let’s look at the CSS, which may be the tricky part (though not really). I normally write all my CSS on one line, and you’ll find it that way in the demo, but for readability here, I’ll write it block-style.
#mainNav {
list-style: none;
padding: 0;
margin: 0;
}
#mainNav li {
float: left;
font-size: 20px;
font-family: Verdana, Arial, Sans-Serif;
letter-spacing: -1px;
line-height: 30px;
text-align: center;
}
#mainNav li a, #mainNav li a:visited {
color: #fff;
text-decoration: none;
background: url(’../images/spriteBG.jpg’) top 0;
width: 130px;
height: 30px;
display: block;
}
#mainNav li a:hover {
color: #fff;
background: url(’../images/spriteBG.jpg’) top 260px;
}
#home li a.home, #page2 li a.page2, #page3 li a.page3, #page4 li a.page4, #page5 li a.page5, #page6 li a.page6 {
color: #600;
background: url(’../images/spriteBG.jpg’) top 130px;
}
The styles look pretty normal for a navigation. But, look at the background. For a link, or a visited link, the position of the background is set for the top and 0. When you hover the button, the background shifts the x position to 260px. And when the link is active (the last style), the background is shifted over 130px.
That’s about it. If you get really creative you can animate your backgrounds with jquery.
Tags: CSS, navigation, Sprites
Posted in CSS | No Comments »
November 13th, 2008
I haven’t played much with the Google Map API, but I’m in need of using it for a project for a construction/commercial leasing company. So, I started playing around with it this morning and found a couple of excellent tutorials. The attached files are a little rough, but this just playing around. The final product is going to simply have variables passed to it from the database - so that means the user will just see a map with a marker.
The first one from Nettuts.com. The second from a site that I can’t seem to find again. (If you see this, and you recognize your code - let me know)
Anyway, like I said, the code isn’t necessarily the prettiest, but I just started working on it today. I’ll be passing the variables from a database to map property locations, but this takes inputs, for testing while setting it up.
I couldn’t decide on whether to convert the address to latitude and longitude and save them in the database, or just get the lat & long when the details page is opened for a piece of property. I went with the latter, because I heard Google won’t allow more than a couple hundred connections from your API per hour, then they’ll shut you down for the day. When they’re adding a bunch of properties (like during the initial set-up) this could be a problem. Though I guess I could just have them get the lat and long and manually enter it. Anyway, from what I’ve seen, the conversion of address to latitude and longitude is dead on.
Get your own API at Google. I have my API to use the domain name of localhost right now for local testing, I’ll just get one for the actual domain name when the site goes live.
Tags: geocoding, jquery, php
Posted in javascript, php | No Comments »
