“According to Greenpeace, Apple products made with toxic chemicals (such as flame retardants and polyvinyl chloride) are being sold worldwide. When discarded, they typically end up in the hands of children in China, India and other developing countries. They dismantle the products for parts and are exposed to dangerous toxins that threatens their health and the environment. Take action now to get Apple to go green.”
[source]

But that was a long time ago, right? No more kids dying, right? I wish I had someone to clarify what is happening nowadays, research isn’t gonna be done by myself. Either way, fix your stupid display issue, you’re freaking Apple (insert better cuss words here).

Click for a bigger image.

Enter: P.O.S.

Influenced just as much by Mos Def as he is punk bands like Minor Threat, he fuses his styles seamlessly to produce a unique sound that may put a smile on your face, or may make you want to punch yourself in the face. In order to keep up with the downloaders he released a new album with unique artwork. There are solid slides and 6 transparent slides in the booklet so the fan can rearrange the booklet and create unique artwork for themselves. Pretty cool. Here is a video of the booklet being rearranged.

And here is a link to his first single “Goodbye”

Do you think the artwork will boost sales?

SUCCESS IS MINE!

I have been working to get a site to rank for california contractor general liability insurance in my free time as well, not as easy as it sounds. Insurance is crazy hard to rank for these days.

One thing I don’t think I’ll ever understand is the UFC 93 betting lines, I guess you can say I’m not a better myself. Unless of course it’s at the horse races and I can make $2 bets, ooohhhh boy, big money big money!

And for any of those who care last month I got my blue belt in Brazilian Jiu Jitsu. YAY.

Also things are going great at Lightpost Creative, we are getting very busy for the upcoming year. We recently upgraded to WordPress 2.7 and it is awesome. At first I was lost and wasn’t sure about the whole layout change, but now I like it. I also like the built in plugin search that it has, it makes things a lot easier when installing plugins since it can download, unzip and install for you with just a click of a button.

First Impressions

Signing up for Second Brain was easy, you create your Username and in no time you can start adding your services from the Dashboard. The Dashboard slides down and you can add a bookmark with a url or import your content from other sites. On the explore page you are presented with recent updates from Second Brain users and have the option of seeing recent collections as well. A collection is useful because you can separate your content into groups that you can easily go back to. For instance, if I wanted one for only design inspiration, I could create a collection and only add the articles or videos that I want to keep in it. You can either share your collections or have the option of keeping it private.

There is also a People page where you can see recent people who have signed up, the most followed, most viewed etc. When you follow people you can go to your homepage and their recent updates feed into yours for you. Another cool feature is the tag cloud. Second Brain collects all the tags from your services and creates a tag cloud for you that keeps all of them together. It’s nice when I want to see everything tagged Design that I’ve ever marked in another service.

Final Thoughts

One thing that I wish it had was a way to look at the users personal website. If I’m going to follow someone on Twitter I scan over what they’re saying then I look at their site to see who they are, usually gives you a very good impression. If they had that I think it’d be a good idea to have your own sites RSS feed added in your Second Brain.

I’m glad I signed up for Second Brain and I will continue to use it, I’m sure in the future it will get nothing but better. Anything that makes my life easier is okay with me.

Another reason to sign up is their sweet contest to win a Macbook Air and other prizes. If you sign up a new account and have great content, you could be picked to win. There are a ton more features that I didn’t mention that you just have to check out yourself, ya I said it.

Also on another side note my Image Sprite Navigation with CSS tutorial made Vandelay’s list called 45 Photoshop Tutorials for Better Navigation, check it out!

What is an image sprite?

Image sprite originated from old nintendo games – what developers had to do to keep the game from having to load a new image each time a different character entered the screen was store all of the images into a grid – once they had this grid they could call different sections of it and tell it to display it on the screen. The same big image was loaded one time, from then on different sections were called and displayed on the page.

How to use image sprites to create a CSS navigation

What we are going to do is copy the old image sprite technique used in video games, and apply it to our CSS. How you ask? We can do this in by off-setting the background position of each list item in our nav. Let me break this down step by step to help understand this concept.

1. First thing I did was create a very simple image for my nav bar, you can make one the same as mine if you are following along or if you’d like, it should be clear enough to make your own.

2. Once I was satisfied with my image, I exported it as nav.jpg. Once you have that image exported, change something on your navigation, you can change the color of the background, underline it, drop shadow or anything you want as long as the text for the titles don’t get too close to each other where they are interfering. Once you have made these changes, export the image again but call it: nav-over.jpg.

3. Now that we have two images, we need to combine them together into one image. Open both of the images, with nav.jpg selected, go to the Image > Canvas Size… option. Select the top of the image as the anchor point and change the units of measure to percent. Now make the height 200% and click ok.

Now our nav.jpg is in the top of its window, with blank space beneath it.

4. With Snap turned on, drag nav-over.jpg into the same window as nav.jpg. Place it exactly below it so it fits perfectly into the newly created space. Our new image should look something like this.

5. Now resave nav.jpg with both of the images combined, this is going to be the image we use for our navigation.

Once you have the image saved, we can start applying HTML and CSS to get this sucker working.

6. First we need the HTML, here we can make a simple unordered list that includes a different li for each of the buttons we created in photoshop (in this case 4.)

<ul id=”nav-example”>
<li id=”nav-example-01″><a href=”#”><span>Blog</span></a></li>
<li id=”nav-example-02″><a href=”#”><span>Portfolio</span></a></li>
<li id=”nav-example-03″><a href=”#”><span>Resume</span></a></li>
<li id=”nav-example-04″><a href=”#”><span>Contact</span></a></li>
</ul>

7. What we have now is an unordered list with 4 different button list items that each match a certain button on the navigation. The reason there is a span tag with the text inside it is because this way search engines see the text, not just an image. We will end up turning the span to display:none so the text doesn’t show.

This is still viewed as white hat SEO because the text matches the same as the text in the images. Be careful because you can get flagged for putting different content in the hidden fields if it doesn’t match the text on the background image.

8. Here is the final CSS of the image sprite navigation, the final example is at the bottom of the post, I’ll break each section of the CSS down piece by piece:

#nav-example {
background:url(“/images/nav-final.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}

#nav-example span {
display: none;
}

#nav-example li, #nav-example a {
height:40px;
display:block;
}

#nav-example li {
float:left;
list-style:none;
display:inline;
}

#nav-example-01 {
width: 98px;
}
#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}

#nav-example-01 a:hover {background:url(“/images/nav-final.jpg”) 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url(“/images/nav-final.jpg”) -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url(“/images/nav-final.jpg”) -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url(“/images/nav-final.jpg”) -352px -40px no-repeat; }

9. The first part is the sizing and background image of the nav bar, the reason we set the height to 40px is because that is how big my original nav.jpg was before I combined it with the nav-over.jpg. This way only the top half of the image displays.

10. The #nav-example span is set to display none, this is what is going to hide the text of each list item. (Remember be careful not to try to hide keywords in these hidden fields, search engines will penalize you.)

11. #nav-example li, #nav-example a {height:40px; display:block;} – What this line is doing is displaying each list item and link to display block with a height of 40px. This makes sure that each link on the navigation is the same size. The reason it is displayed as block is so we can change the size of it, if it wasn’t we couldn’t change the width and height of each link.

12. #nav-example li {float:left; list-style:none; display:inline;} – The float:left is making it so each list item moves to the left side of each li below it, display inline makes sure they display in a horizontal line. List-style: none changes the li’s to not have a bullet next to them, sweetness.

13. #nav-example-01 {width: 98px;} – This is setting the width of the first button “Blog,” if I wanted to start this button 10px off the left side of the #nav-example I could do it by setting margin-left: 10px. The next couple lines are setting the width of each individual link, this way the 4 link widths add up to the total width of my main navigation(you can measure each link by either making guides or selections). Now comes the cool part.

14. What we have to do is set the a:hover state, the way the background is offset on each hover is (horizontal number of pixels) (vertical number of pixels.) Since we have a horizontal nav bar, the vertical number of pixels to be offset is going to be the same for all of them. For the first one it is going to be 0px -40px, 0px because the background image only needs to come straight up to the top left of the nav, so what we do is tell it to go 0px left or right and -40px vertical, a negative integer brings the background UP. This shows the bottom part of the sprite nav, and since we set the width of the li’s it only shows on the particular li we are hovering over.

15. To get the next number we take the width of the nav-example-01 and subtract if from the previous horizontal offset number(which was 0 in this case.) 0-98 = -98px, I’m a math genius. Now we can put this in for the next li, nav-example-02 a:hover will be -98px -40px no-repeat.

16. We do the same for the next one now, -98-131=-229px. Now the offset for the a:hover on nav-example-02 is -229px -40px. This is moving the top left corner of the li background image to the correct position.

17. Normally if you were to put the a:hover’s background image to nav-final.jpg, whichever li you were in it would show the new background image in the top left corner of it, this is why you have to offset the horizontal value to get the correct section where you want it.

18. Now if you do the same process for calculating each button you’ll end up with the same numbers I do, unless you have your own nav with more buttons or different width, then you’re on your own at this point. Once all the CSS is laid out correctly your nav should function like this one below.

• Blog
• Portfolio
• Resume
• Contact

Follow me on Twitter and ask your questions there to get faster answers, it’s not as easy for me to respond via the blog. Thanks!

But honestly, I hope someone can stop this fire soon I’ve had many family and friends that evacuated already; good luck and many thanks to the firefighters working hard. For more emergency/evacuation details you can go to the San Diego emergency fire information website. Please pray for all those who have houses, lives and loved ones in jeopardy. Maybe instead of Arnold coming down to do nothing we can get some more able bodied firefighters so we can hopefully solve this problem sooner.