Here is the SpeakOut Wireless promotion for the month of June 2009!  Another exclusive :)

If you do decide to purchase a phone, upon activation I kindly ask you use my referral code: 000806

Using the referral code upon activation will give both you and I $10 BONUS airtime!

That’s quite the title isn’t it?!  Well over the past couple of weeks I went on a Visa frenzy in an effort to revamp my home desktop/office.  Using my Toshiba Satellite laptop as a desktop worked well for the longest time but I got a sudden urge to upgrade my setup at home simply because the laptop as a desktop felt restricting.  I was no longer using my laptop as a laptop but as a desktop and this bothered me somewhat.  I lost the luxury of portability because I had all these cables and USBs hooked up to my laptop so I never wanted to move it from its spot.

So I thought to myself, this would be a great time to build my first computer!  Suprisingly enough I thought to myself, I haven’t built an entire computer from scratch by myself ever! Sure I’ve serviced computers many times, I know how to install ram, swap hard drives, and do basic hardware stuff- I have just never built a computer from its individual parts.  In order to do this, I turned to some trusty people over at the RedFlagDeals.com forums.  I knew the forum is filled with tech savvy and money savvy people.

Surely enough RFD users came and provided immense help in choosing parts for the computer I wanted to build.  Although I do have to admit, they successfully pushed me to spend about $500 more than I was hoping to do but who can blame them. ;)  The computer build also went from an AMD Phenom II X4 base to an Intel Core i7 920 with several heated debates about platform versus price.  The users at RFD didn’t fail to disaapoint though because through their heated discussions I was able to come to my own conclusion that going the Intel Core i7 route would be the better solution for my needs.  Then parts were dissected into what would fit into my computer build and I put in an order through NCIX as they offer an incredible almost no questions asked price match policy and Canadians outside of BC only get charged for GST!  So NCIX offered the best cost effective store to purchase these awesome new computer parts from. (continue reading…)

The Problem

A co-worker of mine, Nick Papadopoulos recently wanted to create an effect on his portfolio whereby an icon appears over top of his screenshots when visitors mouseover them.

I pointed him to this article I found: http://cssglobe.com/post/1238/style-your-image-links

But Nick quickly informed me that Internet Explorer 7 gives a security bar warning when using that method.  So I ventured to provide a solution to this problem and my first instinct was to work with opacity in CSS.  The problem was in order for this to work IE needs specific CSS properties and adding the filter property through the CSS once again triggers the security warning in IE7– not an acceptable solution.

The Solution

So here is the solution I was able to come up with which works off of 2 images and some clever HTML markup with CSS.

Step 1: Images being Used

Our first image is the one we want to apply the hover state icon on top of, in our example it is a cropped screenshot of a web 2.0 e-commerce template that Nick has designed:

madisons.png

The second image is our actual hover state icon or image.  In this example I’ve made a PNG image with some alpha transparency so that when this image is overlayed on top of the cropped screenshot, it will dim the screenshot and you will see the plus sign at the top left.   You can be creative here and have different type of effects or indicators.

hover.png

Step 2: HTML Markup

<div class="hover_icon_container">
	<img class="screenshot" src="img/madisons.png" border="0" alt="Description of Image" width="360" height="142" />
	<a class="hover_icon" href="http://google.com"><img src="img/hover.png" border="0" alt="" width="360" height="142" /></a>
</div>

The HTML consists of a div container and the madisons.png image which is the cropped screenshot. Our anchor tag follows and this actually links our transparent hover.png image. We do this so we can absolutely position this hover over the cropped screenshot and the anchor link will still work as the hover.png image will be the top most layer, it is the element that we need to link.

Step 3: CSS

div.hover_icon_container {
	height: 142px; width: 360px;
	position: relative;
}
 
	div.hover_icon_container img.screenshot {
		border: 1px solid #c8c8c8;
	}
 
	div.hover_icon_container a.hover_icon {
		display: none;
		height: 142px; width: 360px;
		position: absolute;
		top: 0; left: 0;
	}
 
	div.hover_icon_container a.hover_icon:hover {
		border: 1px solid #000;
	}
 
	div.hover_icon_container:hover a.hover_icon {
		display: block;
	}

Nick also wanted a border on his screenshots so here in the CSS we apply a border to the .screenshot class. Then for our anchor tag and hover.png image we absolutely position it to the parent container so that it is overlayed over top of the screenshot image. Finally we hide this hover state and only display it when the user hovers over the parent container.

Final Product

Live Preview

Download Files

Download Demo Files

If you use the Speak Out Wireless service offered by 7-11 here is the March promotion!  Don’t ask how I got it ;)

I use Speak Out Wireless and it offers the best bang for the buck and they always run great promotions so I thought whoever else uses their service may find this useful!  Or those looking for a new pay as you go cellphone provider.  Feel free to leave comments/questions about the service; I will be pleased to answer them as well.

Well the last time I took a long hiatus I left quite abruptly and many things have happened since then.

I thought I’d just fill you in a bit. I’m on my first co-op work term now as a Web Developer at IBM.

The whole job searching process was done during the summer. I had interviews with Sun Microsystems, Microsoft, and finally IBM. Each interview was quite unique in itself and I’ve learned a lot going through the job search process. I think this has been one of the most valuable experiences I’ve gone through and one of my most valuable learning experiences so far in university!

I’ll outline just a bunch of things I’ve been able to learn and experience from the process

Things I’ve learned from the Job Application Process

• preparing a kick ass resume
• preparing a kick ass cover letter
• tips for preparing for interviews
• how employers perform certain interviews and the different types
• STAR method of answering behavioral interview questions
• the importance of a co-op coordinator or a helping friend to critique the things you do

Things I’ve learned from the Job Interviewing Process

• how to go about a phone interview (Microsoft)
• BE PREPARED as you will never know what your employer might throw at you
• come prepared with some questions to ask employer
• your attitude and confidence really dictate how well you do in interviews
• you can usually tell if you got the job or not at the end of the interview

Things I’ve learned from the Work Environment

• not everyone knows what their doing
• it takes time to get the trust of co-workers
• past co-op students can influence how co-workers perceive future co-op students
• the corporate world is slow sometimes… really slow
• I really like a more personal work environment… in terms of personal space but also a more personal work team
• I’m fairly good at motivating myself to do work
• make sure your comfortable with your workspace, makes you work more effectively

Well that’s about it.  Not really organized but just a flow of my thoughts.  It’s still been a fun experience.  I started my work term in September 2008 and I am set to finish April 2009 but there’s also a possibility of an extension into the summer which I am debating.

I was just making one last pass before heading to bed for the night on Delicious . Then I came across a very thought provoking YouTube video, titled “Learn to Change, Change to Learn“.

The people in the video talk about the fundamental problems with our current standard way of education and how a lot of it blocks technology from enhancing the potentials of having technology enhance education. It also hits on a key point about how a lot of our education is a “right answer, vending machine approach”. We are taught to study study study the material and facts into our brains so we can memorize things to output on tests. In reality, most jobs don’t work this way, so why is this our primary method of learning?

From my roughly 6 months of working at IBM I have experienced this first hand. At anytime, I haven’t had to output things I’ve memorized. If I was ever stuck or confused, I researched methods, asked colleagues, and brought up references in order to solve the problem. I also systematically work on my debugging approach of certain problems which I know are common. All of these skills in my opinion are miles more important than being able to store a vast amount of information into your brain- only to output it all onto a piece of paper later on to determine your class mark.