Tutorial: Coloring Eclipse

 

If you follow me on Twitter, you probably already know that I wear sunglasses in front of the computer at night. Cool, right? I do this because my eyes get warn out and the brighter the screen, the more my eyes hurt. Unfortunately, turning down the brightness of the screen doesn’t help as much as you’d think it would, so I resort to shades.

The brightest color on the screen, white, does the most damage. And oddly enough, Eclipse, the application I use the most, is as white as it gets. I previously developed a theme for TextMate, which helped tremendously, but I don’t use TextMate as often as I’d like. For whatever reason, I never thought of coloring Eclipse until last night. Here’s how you do it.

(Click the images to view at 100%)

Coloring Eclipse / General

Eclipse is a bit more involved when it comes to customization than TextMate. Because it utilizes a variety of plugins, the preferences are not all standardized and they are not all in the same place. Let’s start with the general colors—for items such as background/foreground colors, highlights, selections, etc. These are all located under General/Editors/Text Editors. Under “Appearance color options” there are nine items to color using the button to the right of the menu. The problem I have with this color picker, if you’re using OS X, is that you can’t enter Hex values by hand—the color has to be either chosen with a slider or sampled with the eye dropper.

Coloring Eclipse / Actionscript

Now, with syntax coloring, located under Flash(Flex) Builder/Editors/Syntax Coloring, Eclipse doesn’t apply the previously chosen background color to the preview seen above. It’s easy enough to imagine how things will look if you already have your Hex values picked out. Above the preview, you have three expandable menus to configure: Actionscript, CSS, MXML. Here you get to specify text colors and decorations, with the choices of bold, italic, and underline—I keep my syntax decoration free. The color picker in Syntax Coloring is beautiful. It has a field for the Hex value and that’s all I need. Once you’ve handled the syntax, there’s one last step.

Coloring Eclipse / Annotations

Annotations are located at General/Editors/Text Editors/Annotations. They are the little things that only occasionally make an appearance—for instance, “Debug Call Stack”. This one, in particular, is the style for when your application has a runtime error, reverts to the workspace, and highlights the problematic line. The fanciness about these sets of annotations is that you get to choose between outlined boxes, filled highlights, squiggly underlines, etc. I only needed to color the breakpoint, debug, and error annotations, but there are a dozen others for those that use them.

Coloring Eclipse

When you’re all set, you’ll have a brand new look, based on your styles. My eyes feel tremendous now that the bright white has been replaced with my Destroy Today darkest gray. Please note, I have yet to find a way to export the styles, but if anyone comes across how, please let me know.

Free Gems: DigitalColor Meter

 

DigitalColor Meter

I tweeted yesterday about one of Mac OSX’s best kept secrets, DigitalColor Meter, and found that the majority of responders didn’t know about it. It’s located in the .../Applications/Utilities folder and you can think of it as an Eyedropper Tool for the entire screen(s). Anything you roll over with the cursor will show up magnified in the window with its color values. You can specify whether to display the color as an 8/16-bit Hex value, 8/16-bit RGB value, or RGB percentage. There are eight more options, but with names like Tristimulus, I take it they’re not for the web-folk.

Since writing this post, I did come across some extra functionality that really comes in handy. At any time, you can press command+shift+C to copy the color value as text. The downside to this, for Photoshop users, is that it copies the hash (#) as well. This puts the value over the limit for pasting into Photoshop’s Color Picker, so an error will occur if you try. The way to somewhat get around this is to hold the color with command+shift+H. This simply locks the values so you can easily read them for later use. Lastly, command+C copies the magnified image to the clipboard. This might be handy for referencing a number of colors in a given space.

Socket-Deer by Nendo

 

Socket-Deer by Nendo

This certainly isn’t new, considering it’s been hiding in my queue for a number of months, but it’s worth mentioning regardless. The Socket-Deer, by Nendo, is an alternative socket plate, equipped with antlers that cradle your cell phone while charging. It’s a simply brilliant idea, but I can’t find a store that sells it. It might just be one of those great-concept-never-produced sort of products. If anyone comes across one in the wild, be sure to let me know.

via Inspire me, now! »

Format CSS Online by Lonnie Best

 

Format CSS Online

That was fast. I tried out Helvetimail and it fell short of expectations. Luckily, it’s easy enough to modify since it’s simply CSS. The problem, however, is that the CSS sits all in one line of code. With a quick Google search for “format css” I came across Lonnie Best’s Format CSS Online web app. It takes any form of valid CSS and outputs it into a readable format. On top of that, it allows you to customize how you’d like lines tabbed or how to handle brackets. It’s a fantastic find that’s going straight to my deli.cio.us.

Helvetimail by Josef Richter

 

Helvetimail

I’ve been dying for a decent looking Gmail ever since I signed up. For the past year, I’ve made do with the “Shiny” theme, but it just doesn’t make the cut anymore. Lately, Helveti-anything has been a big hit (see Helvetwitter, Helvetical, and the original Helvetireader). Perhaps that’s telling Google something—people care about design. As much as Google is tied to rainbow colors, I think they’re due for a “Pro” series of web apps that consider design a bit more.

via swissmiss »

City of Exile by Jim Lind

 

Jim Lind

This is a great photo by Jim Lind. I really appreciate the balance of raw photography and subtle retouching. There was certainly a solid amount of time put into the composite, but it doesn’t scream photoshop like his other images.

via ShareSomeCandy »

Decimals in Actionscript

 

I recently noticed an issue with my Scroller (scrollbar) class. When resizing a window and the scrollbar along with it, the scrollbar’s position needs to be reevaluated. To do so, it simply sets the scroll value to what it was before, but now with the changed scroll area. With how I had it before, this wasn’t an issue when dealing with a small amount of content, but the larger the content, the more noticeable the issue. For some reason, I wrote it so the get function would return the value based on scrollbar’s position. This seems okay at first, but there’s something in the approach that makes the scrollable content jump a bit when resizing.

I kept an open mind, considering I wrote the class a good three years ago when transitioning from AS2 to AS3. After a number of tests, I realized my code wasn’t directly the cause of the problem—though it was indirectly. I assumed a value is a value. Because of this, I assumed by setting a child’s coordinates to particular numbers, it would retain those precise numbers as its coordinates. Unfortunately, though understandably so, a child’s coordinates are only so accurate. Since we’re dealing with pixels, there’s no reason for a set of coordinates to retain ten decimal places if the screen is only going to recognize the first two. Not only that, it rounds to the closest .05. For instance, setting a child’s x and y coordinates to 34.82721 and 68.27495 respectively results in the position of 34.85 and 68.30.

To get around this, if you truly need a higher level of precision, you can use secondary x and y properties and set it up like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private var __x:Number = 0;
private var __y:Number = 0;
 
public override function get x ():Number {
	return __x;
}
public override function get y ():Number {
	return __y;
}
 
public override function set x ($x:Number):void {
	super.x = __x = $x;
}
public override function set y ($y:Number):void {
	super.y = __y = $y;
}

[note] There are times when this will come in handy, but there are also instances where you wouldn’t want coordinates so precise, so use it cautiously.

Computer Command Clocks

 

Computer command clocks

I came across these sweet Computer Command Clocks this morning. Unfortunately, I already have a wall clock for the living room, but accidents do happen… and at just under $20, it’s a real bargain.

via Design Milk »

Free Gems: ScreenShade

 

Screenshade

Lately, I’ve been feeling the impact of this 30″ Apple display and its toll on my eyes. As a result, I started to wear sunglasses when at the computer. Oddly enough, it helps a lot. Jen reminds me, however, that the sunglasses while on the computer aren’t really helping my cool factor, but I’d rather feel good than have an aching headache by 6. If you’re not much of a sunglasses-inside kind of guy, try out ScreenShade. This little menubar app lets you dial down the brightness of the screen past the minimum setting allowed. It even has global hotkeys, so you can raise or lower the brightness from any app with option+plus and option+minus.

Unfortunately, there are two downsides. For one, I had search around software websites just to find the downloadable app. Any link to the developer’s site no longer work. Secondly, the way in which ScreenShade is able to dial down the brightness is by drawing a transparent fill over the screen. This isn’t a big deal unless you plan to take any screenshots—any image you capture will be darker as a result of the overlay.

via @zacislost

iChat screen sharing makes family tech support too easy

 

iChat Screen Sharing

My sister, Lizzy, IM’d me this morning to help her with email configuration woes. Without blinking, I clicked the “Start screen sharing” button and was on her computer. I was able to fix the issue as well as show her exactly what was wrong without saying, “are you at that step yet?” I’m surprised I automatically clicked to share the screen, since I’ve never used it before. I’ve tried to use it before, but for me, at least, it has had a 1% success rate of connecting properly. Maybe that’s one area Snow Leopard touched on. Regardless, next time your family asks for help from their trusty IT dept (you), try screen sharing.