Search

Subscribe

Enter your email address to subscribe to this blog.

Recent Comments

Intro to Spring Security Core for Grails
Eric Pierce said: Thanks for these screencasts, Dan! You made it crazy simple to get up and running w/security core h... [More]

Removing duplicates from an array of objects
Arvind said: Great tip, can't thank you enough for this. [More]

Intro to Spring Security Core for Grails
Santosh said: Thanks much for putting up these screencasts. As the others here I'm a beginner and I've been having... [More]

Grails Spring Security Plugin - Logout postOnly setting
eriihine said: I still had some issues with this one. It seems that the href link is always generating a GET method... [More]

Intro to Spring Security Core for Grails
Dan Vega said: Just a heads up but I decided to write up a quick post on your question just in case it trips up any... [More]

TV Tuesday: Removing a background from an image in CS5

I am a developer so working in Photoshop never really comes easy to me. This week I had to remove a background from an image so I thought it would be great to share this video with you. In this video Terry White shows us how to remove an image from the Background. Although he has done this in the past users want to know how it works when the background is not all the same color. Terry made something that I thought was very complex, really easy!

 
 

IE Net Renderer

I came across this link today while reading a blog post from Mark W. Breneman. IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5. This service points out that they can stand above the rest processing many requests at one time meaning no line to wait in for you which is always nice. In addition to being able to check specific versions of IE you can also check them in mixed and difference mode. This allows you to see how the 2 version of IE render it differently. Here are the difference and mixed mode screen shots i took about 10 minutes ago. This is very helpful seeing how you can not install both version of IE on 1 machine, at least not easily. In my case there a couple things off and probably due to a padding or margin difference but no major problems.
difference


mixed
 
 

IE6 Whitespace Bug

The better I get at css (and I am getting better) I really start to understand designers hatred for IE. I guess I always knew it on some level but when you are really trying to write clean code it starts to upset you that you have to hunt down IE6 specific bugs. My advise to everyone working with css is to get your layout/design working in a standards compliant browser and then double back to find out what bugs you need to fix. The bug I came across today (I have before but this is a great fix) is the IE Whitespace bug.

I was trying to create a block level list elements for a navigation like flow. When you use the code below and check the output in FireFox everything is exactly how you want it. In IE though there is extra space between elements. Here is the code and what it looks like in both browsers. The one on the left is FF and the right is IE6.

view plain print about
1<html>
2<head>
3    <title>Lists Example</title>
4    <style>
5    #navigation {
6        width:200px;
7    }
8    h3 {
9        margin:0px;
10        padding:0px;
11        border-bottom:1px dotted #272727;
12    }
13    ul {
14        margin:0px;
15        padding:0px;
16        list-style-type:none;
17    }
18    li a {
19        color: #759398;
20        text-decoration: none;
21        padding-top: 4px;
22        padding-right: 0px;
23        padding-bottom: 4px;
24        padding-left: 2px;
25        display: block;    
26        border-bottom:1px dotted #272727;
27    }
28    li a:hover {
29        text-decoration: none;
30        background-color: #132022;
31        color: #ffffff;
32    }
33    </style>
34</head>
35<body>
36    
37    <div id="navigation">
38    <h3>Navigation</h3>
39    <ul>
40        <li><a href="##">Menu Item 1</a></li>
41        <li><a href="##">Menu Item 2</a></li>
42        <li><a href="##">Menu Item 3</a></li>
43        <li><a href="##">Menu Item 4</a></li>
44        <li><a href="##">Menu Item 5</a></li>
45        <li><a href="##">Menu Item 6</a></li>
46        <li><a href="##">Menu Item 7</a></li>
47        <li><a href="##">Menu Item 8</a></li>
48        <li><a href="##">Menu Item 9</a></li>
49        <li><a href="##">Menu Item 10</a></li>
50    </ul>
51    </div>
52
53</body>
54</html>

One solution to the problem I found that I really like was hicksdesign.co.uk. After reading through the comments though some users pointed out that the css may not validate so I ended up going with a solution from the comments. Placing the following code in your css will fix the problem and the css will validate. The final outlook looks good in all the browsers that I tested.

view plain print about
1<style>
2* html ul li a {
3    height:1em;
4}
5</style>

 
 

Pixel Patterns

I was working on updating my website last night when I realized the background color was very dull and and boring. I decided that I needed some kind of background but for my site I really just wanted something simple. This is where pixel patterns come in. They are great way to add visual style without drawing a lot of attention. I came across a site k10k that has a ton of pixel patterns for you to check out. These patterns are great because you can just drop them in and go. There are also plenty of resources out there for patterns similar to these or even how to create your own patterns. A quick search on Google and you will be creating your own in no time!
 
 

Photoshop Auto Select Layer Feature

Like most programmers I always pull out the I am not a designer card so here it comes again. I am not a designer, but I have been using Photoshop for the better part of 6 years now. I was taught by a friend that a very important detail that you must pay attention to when creating layouts is organization of layers into groups and disincentive naming of layers. This helps when passing layouts on to other designers. When they need to make a change to the branding area logo, they can click on the folder branding and find the logo layers.

The reason I am bringing this up is because up until today I have never really had an issue with selecting layers. I received a Photoshop file from an outside designer today with well over 300 layers. The layers included the old site and many layers that did not make the final design. Finding layers to hide for rollover affects was a real pain in the butt. I always thought then when you choose your move tool you then had to select the layer to gain focus. This is a real pain when you have to go searching through all those layers that have absolutely no naming convention to them.

I am almost embarrassed to say this but I had no idea Photoshop had an auto select layer feature. When you have your move to selected you have a feature (that is off by default) for Auto Select Layer. When this is checked you click on an item and Photoshop will highlight that layer. I can not believe this, my job with this huge file just got a lot easier. Again I am pulling out the I am not a designer card, I just hope there is someone else out there without this knowledge!

autoselect



 
 

More Entries