iconfu iconfu iconfu is the world's largest collection of free, open-source icons and it comes with a handy image editor, so you can tweak icons to suit your needs exactly or even draw your own from scratch
invert blue resize move up verbose drawmode lighter previews remove swap animator library library draw shift up make a copy large editor explorer your icon contract agreement tag

23 February 2009

Exceptions In Java [Must Read]

Exceptions were a big improvement over the old-fashioned C way of returning error codes, but then the debate raged over Checked vs Unchecked Exceptions, vs "Huh? Checked? Whazza?". Java offers all three varieties so you can never hope to port exceptional experience from one project to the next, because there are at least as many correct ways to do things as there are gurus. However, at least now there's a step in the right direction; with Björn Andersson's Java Exception Explanator a lot more of this makes sense. Check it out. Here's a teaser:

AccessControlException : You have lost control of Microsoft Access. If you cannot regain control or stop the program in some other way, you should cut the power to your computer as fast as possible.

ps. thanks reddit

[iconfu] Buttons that Make You Want to Touch Them

Following a link from Smashing Magazine, I spotted Round Theme Icons on DeviantArt by =kon. They're for the iPhone, but they're gorgeous, and I'd love to augment iconfu with these icons but I couldn't find the licensing terms. Anyway, I wondered if iconfu really has the features it takes to draw good looking icons - perhaps not everything that photoshop can do, but at least make something that looks polished and professional.

Here's what I came up with. You're the judge. What I have in mind is a background like button, over which I can paste any number of littler icons so they fit snugly inside the hole in the middle. Let's make it a 24x24 pixel icon, so that there's just enough room to paste a 16x16 icon in the middle.

resize

Set the colour to black

choose black

Open the ellipse tool, and make a big circle

set large radius

And draw it on the canvas:

draw outer circle

So far, so good. It's flat, so I'll use the gradient tool to curve it up a bit. First of all, select the "over, retain alpha" drawing mode - this means the gradient will be drawn only on the circle, and won't change the transparency of any pixels.

use 'over, retain alpha' drawing mode

The default gradient is from 10% white to 10% black, which is fine for now. Click a few times on the spot you want to be brightest, until you have the effect you want:

draw the gradient

Then make a copy of the circle

make a copy

and keep it in a safe place until later - these copies are little semitransparent draggable windows:

make a copy

Now, draw the inner circle and a gradient over it - the same gradient, but from a diametrically opposite point, so it looks curved inwards assuming a light source coming from the top-left. This is basically repeating the procedure for the big circle, so I won't repeat it here. Once the inner circle is ready, I draw the outer circle under it. Use the "under" drawing mode -

use 'under' drawing mode

And hit the "draw" button on the copy to draw it. If the copy is not overlapping the canvas at all, it is drawn at the origin. In other words, point (0,0) of the copy is drawn onto point (0,0) of the canvas. If the copy is overlapping, then pixels from the copy are drawn on the canvas where they overlap. In this case, we want to draw the whole copy onto the whole canvas, so it's easier to leave it where it is rather than laboriously drag it into position. Here's the "draw" button for the copy:

draw

This is how the background looks now:

finished background

It's a little dull and could do with some more contrast. The bunched-up colour-levels you see below are typical of low-contrast pictures. Luckily we can fix that.

low contrast

Choose the "brightness" tool from the colour-levels panel, and use it to spread out the distribution of light on each channel. Click and drag on each channel as the arrows suggest in this screenshot:

better contrast

You'll notice while adjusting brightness that it's easy to get an image with subtly different hues this way - you can use this to create a different base image to make variations on your icon - for example in an onmouseover event, if you want the icon to stand out when the mouse hovers over it.

basic buttonbluish buttonbrighter buttoncyan buttongreenish buttonbutton - inverted bluereddish buttonspeckled button - inverted redspeckled button

The next task is to draw arrows and stuff over this new, shiny, black, concave, smooth, curvy, rounded background, so we have a whole bunch of buttons in this theme. Watch this space for the next iconfu tutorial!

Don't Forget To Flush

So, instead of being asleep like an honest citizen at 2 o'clock in the morning, here I am trying to make hibernate save my collection of Strings.

(I would hate not to be a developer: who else deals with Collections of Strings, I wonder?)

The mapping is perfect, straight from the documentation, to tricky stuff, no funny cases:

    <set name="categories" table="resources_categories">
      <key column="resource"/>
      <element column="category" type="string"/>
    </set>

Except, when I populate my category list, and try getSession().save(newResource) ... it doesn't save my Strings!

After a little more googling than I would have hoped, I bumped into this - http://forum.hibernate.org/viewtopic.php?t=951848&blah blah... where the hibernate team says you have to flush in this case. You don't have to flush to save most other things, but if it's a Collection of Strings, you have to flush.

So this works:

    getSession().save(newResource);
    getSession().flush();

- no changes to the mapping required.

22 February 2009

Another Smug Mac User

Today I got even smugger, if you can believe that. To cut a long, long story short, Sabrina, my beloved, a victim user of Windows Vista, was getting "Local Access Only" while connected to our trusty router that has always worked before, in our heterogeneous network of Mac, Ubuntu, and Various Windowses. The solution, in the end, was simple: "ipconfig /release" followed by "ipconfig /renew"*, but the path was labyrinthine. Innumerable fora record the despair and frustration of countless vista users facing the dreaded "Local Access Only" message

At the risk of repeating myself: the Mac is the first computer I've had that Mostly Just Works. The biggest annoyance with this thing is the no delete key - but there is a partial solution - KeyRemap4MacBook

But Vista? How can they break DHCP - something that's been working for over twelve years? How do people who are not technical deal with this?

(*) In case you came to this post in despair and frustration: here's how to run ipconfig

  1. Hit Start -> Run
  2. Enter "cmd" and hit return. A "command prompt" window will appear
  3. type "ipconfig /release" and hit return - this should get rid of any out-of-date connection state
  4. type "ipconfig /renew" and hit return - this gets you new connection state
  5. close the "cmd" window
Theoretically, and with a bit of luck, and assuming nothing else is wrong, and possibly after a slight delay, you'll have your internet again

16 February 2009

[iconfu] manipulate colour levels

Up to today, a sorely missed iconfu feature was the ability to make an icon brighter or darker, or to adjust contrast in a controlled way.

For example, suppose you decided you like the stop-process icon from the Tango Icon Project. But it happens to be a little too dark for the colour scheme you're working with. Wouldn't it be nice to lighten it up a bit?

Head over to iconfu, and use the library browser to find the icon you need: fill in your required dimensions and try searching for icons tagged "stop". Let's say the dark, red, octagonal Tango "stop-process" icon is the one you want. Click on it, and you'll see this:

Now, it's open in the editor. Here's how it looks:

You can brighten this up using the "levels" panel. Click on the brightness control, then click and drag on the red channel display, following the red arrow in this image:

Adjust the green and blue channels to taste:

Now, the original and brighter icons side by side:

The brightness controls also manipulate contrast. Low-contrast looks something like this:

- all the red is bunched around the same place, so each pixel in the image has more or less the same amount of red. This is how high-contrast looks:

- some pixels have a high level of red, other pixels have a low level of red. So, to manipulate contrast directly, choose spread distribution and again click and drag on the channel where you want to create contrast.

The spread distribution tool spreads the distribution of light and dark pixels, leaving a hole where the mouse was dragged.

Finally, the original, brighter, and high-contrast icons side by side:

For the opposite effect (reduce contrast), use narrow distribution - this bunches the distribution of bright and dark pixels together, reducing contrast.

09 February 2009

[iconfu] download any icon in .gif, .ico and .png formats

As a result of overwhelming popular demand, the iconfu team has implemented the No. 1 most desired feature: "How do I make favicons?"

favicons are those little pictures that remind you which site you're on without having to actually read text. Firefox, for example, shows a favicon in each tab:

Not many people know this: you only need the .ico format for Internet Explorer. If IE isn't important in your market, you can use any old 16x16 .png image and it will do the job. Just include this in your header:

<link rel="icon" type="image/png" href="/path/to/icon.png"/>

To specify a favicon for Internet Explorer, create a file called "favicon.ico" in the root folder of your webserver. For Rails projects this would be under "public/", for java projects, this would be in the folder that contains the "webapp/" folder. This file must be in .ico format.

Here's the fun part: to create a favicon, draw or upload your icon in iconfu, and click the ".ico" link in the preview panel. You can't miss it. It looks like this:

convert png to ico or gif formats

Similarly, if you're browsing the library and want to grab any of the 9000 free icons provided by some of the world's greatest icon artists as .ico or .gif files, just open up the icon information panel and hit the ".ico" or ".gif" download link. Again, you can't miss it:

monkey face icon: convert png to ico or gif formats

This means that all of your favourite free, open-source icons are now available as GIF or ICO as well as PNG formats. Enjoy!