If you follow me on Twitter, you may have noticed I released Developer Color Picker 1.5 a few weeks back. I thought I’d take a moment to make an official blog post to mark its release.

The big new feature in this version is the ability to modify colors within the color picker itself, instead of having to switch to a different mode first. I also added hsl(a) mode for CSS-style declarations.

Hopefully these improvements will make the Developer Color Picker even more useful in your development process.

Update 1.5.1: Changed the HSB mode to HSL, which CSS actually uses. Can you tell I’m not a web developer?

The sincere Roosevelt (left, in hard-working black aqua) speaks to an earlier era of transport and transportation, where hard-working teamsters made sure your things got where they needed to go, on time, and with a smile — sure thing buddy, you have my word. An ultra-soft and comfy poly-cotton shirt.

The optimistic Nixon (right, in brave gold color) reflects the power, promise, and potential of a fossil-fuelled future, shining like a fluorescently illuminated rest-stop beacon on a long stretch of I-5 in 1978, long before the corporate parent re-branded under a much less severe, and much more eco-conscious, green leaf.

Designed by the world-renowned Draplin Design Co. of North America, both of these tees are perfect for moving stuff around – at your computer or literally in person.

Many thanks to our users for joining us on Transmit’s eleven-year-long ride!

At long last! Coda Notes, a fun Safari Extension we introduced at this year’s WWDC, is now officially available for download!

To recap, the idea is this: Coda is a great tool for web developers. But how can we make life easier for the web client, or the marketing person, or the person not developing the website but who still has a hand in the process? The person who has to give notes and ideas on web development?

It’s simple: Coda Notes lets you annotate web pages.

• Use the pencil to scribble some drawings or thoughts.
• Highlight areas of the page.
• If you make a mistake, click the eraser and clean up.
• And, most awesomly, edit text live on web pages.
• Add sticky notes to call out thoughts. As many as you’d like!

Also, one Pro Tip: click the pen or highlighter buttons multiple times to change colors!

Once you’re done, hit “Send Notes” in the toolbar and a screenshot is taken, placed on a little postcard, and emailed to anyone you choose.

Your notes are sent through our email server¹. Which is as good a time as any to mention our privacy policy: this emailing process is fully automated, and we will not retain your images for any reason. Once your image has successfully sent, it is immediately and automatically deleted, never to be seen again. That is all.

Finally, it gets better:

Coda notes is completely free. Just download, double click, and use.

Coda Notes is a Panic side project, but you can feel free to e-mail any bugs to support@panic.com and we’ll file them away. Most importantly: enjoy!

UPDATE: Coda Notes 1.1 has been released, and fixes bugs and unnecessary console logging! Go to Safari Preferences > Extensions > Updates to get it.

NOT WORKING? Make sure you’re clicking the leaf button in your toolbar to open Coda Notes. Choosing “Show Coda Notes Bar” from the menus will not work. E-mail us with any other issues.

¹ Why do it this way? Sadly, it’s not possible for Coda Notes to save a screenshot directly to your disk — Safari Extensions can’t access the filesystem for security reasons. Similarly, we can’t send your screenshots via Apple Mail, since Safari Extensions can’t launch or script other applications. This was the best way we could think of to e-mail a thing from an extension.

Joby just turned one. (And isn’t alone!)

This time it was Toy Story 3. And oh, what a great movie. I won’t say more. If you haven’t seen it, go right now.

This post, however, is just an excuse to show off this beautiful thank-you card we received from a guest:

Thanks, Crystal. In our digital universe, it’s so refreshing to see some beautiful watercolors on actual paper!

Now, just because you don’t live in Portland, doesn’t mean you have to miss out on our fun. I’ve got a special surprise! We’re giving away one Toy Story 3 poster — and it’s signed by the director, Lee Unkrich!

Be the first in the comments to answer the following Toy Story trivia, and it’s yours for the taking.

“Pizza Planet pizza is likely to be delivered in what model of truck, yo?”

UPDATE: Congratulations to Brad in the comments for being the first with the correct answer: it’s a Gyoza!

Normally we create .png files of each icon state, then drag them into Icon Composer. But, starting with 10.6, the colors would lighten unexpectedly. It wasn’t dramatic, but with certain icons (like the one below) it was totally noticeable. The source is on the left. See how the red is washed out in the final icon on the right?

We spent a long time trying to figure this out, and the story goes something like this:

Mac OS X is a fully managed color system. Colors aren’t just RGB, but also include a colorspace that maps RGB to an abstract color. When any bitmap is drawn to the screen, it’s color-converted. But there’s always been a loophole: an image can be “untagged”, meaning it has no embedded colorspace information. Mac OS X interprets untagged data in respect to the default colorspace of the display.

Well, in 10.6, that default display colorspace changed quite a lot to be more Windows-like and less old-school Mac-like, which makes untagged images look more or less the same cross-platforms. The bad news? There’s no way to tag an icon with a colorspace, so icons from 10.5 looked odd — way darker — on 10.6. Apple’s solution? Icons in 10.6 are interpreted in the “Generic RGB” colorspace, an approximation of how it was.

In other words, old icons would look too dark with the colorspace changes in 10.6, but the Generic RGB colorspace being applied lightens them back to exactly what they looked like before. Problem solved?

Not if you’re drawing new icons on a 10.6 system that’s already using the darker colorspace! Since those new icons go through the same Generic RGB colorspace converserion, they’re lighter than they should be!

Ok, ok. So here are the steps we use to guarantee 10.6 icon color accuracy.

1. With your final artwork open in Photoshop, choose Convert to Profile from the Edit menu.
   
2. Choose Generic RGB Profile from the Profile pop-up.
3. Do a Save for Web… to make a fresh, Generic RGB .png of the icon. (Uncheck ‘Convert to sRGB’!)
   (Warning: the QuickLook preview of this .png will look too dark in the Finder. Ugh. Do not be alarmed.)
4. Drag your color-corrected .png into Icon Composer, and save.
   

That’s it! Your final icon, once the system applies the Generic RGB profile, should look exactly as you intended. One possible downside: now your icon will look too dark on 10.5! Hooray!

(Footnote: Even after solving this problem, Kenichi’s computer continued to shift the color of icons unexpectedly, lightening his icons. We re-installed Photoshop. We created a new user account. We re-installed Mac OS X. And finally, as a classic joke, I zapped the PRAM. Immediately, colors were rendering correctly. My jaw hit the floor. We rebooted, and colors were broken again. I was so disturbed by this, we just bought him a new machine.)

And, also a few moments ago, we have our very first crack at a Safari extension! What is it?

Well, the pitch goes something like this: we do a pretty good job making life easier for people who hand-code websites using Coda, our all-in-one web development environment. But is there anything we can do to make life better for the client? The person who’s paying the bills, or the marketing person, or the guy or girl who’s likely to call you and say, “Hey, can you make that one thing bigger, move that one thing and do that thing? By tomorrow?” Nobody knows what that means. And that’s something we thought we could improve.

Introducing Coda Notes, our Safari Extension for website annotation, and a fun little project.

When you install Coda Notes, you’ll get a new button in your toolbar. Click it to see all our annotation tools, built right into Safari. Draw some notes on your favorite website. Communicate changes, ideas, concepts, or problems. Then, when you’re done, hit the Send Notes button and the whole page flips over as a postcard.

Enter your comments, e-mail addresses, hit the nice looking “Send Notes” button, and that’s it! The developer gets an e-mail with your screenshot and notes, instantly. In short, with Coda Notes, you can communicate in seconds what would have been much harder to communicate before, all without ever leaving Safari.

And let’s not forget cool thing #2: we literally added a new feature to Safari. In a standards-based, clean way. This, my friends, is awesome.

(Tech Note: The Coda Notes extension is built entirely in JavaScript, HTML, and CSS; the extension bar is basically an HTML file, and the page-flip effect is accomplished using a CSS transform. We draw on a transparent canvas element injected over the target page. Live text editing is done by setting the contentEditable attribute on the body of the page, thus turning Safari into an editor, similar to how Apple Mail works!)

When will this be available?

Update: Coda Notes is now available for download!

We’re feeling it out. It’s certainly “quick and dirty” in its current form, and Coda Notes was a bit of an experiment for us — made in only 4 days! But when Safari Extensions are more available to the public, it’s likely you’ll see Coda Notes too. Keep an eye on this blog and/or follow us on Twitter!

Thanks to Apple for letting us play with Safari Extensions, and thanks to Neven and Garrett for such great quick work on this project. If you have ideas for Coda Notes, let us know!

Many of you asked the obvious (to you, but somehow not to us!) question:

“When can we buy these shirts?”

Answer: right now.

Printed on amazing-feeling (and slightly costlier) indigo-colored American Apparel 50/25/25 tri-blend track shirts, these are some of the nicest goods we’ve ever made.

Even better? A portion of each sale goes straight to the team.

We’ve only got a small sample quantity in stock right now, but we’ll backorder them so you’ll be able to place an order no matter what: if they run out, thanks for your patience while we print more.

Hit the Panic Goods and help us continue supporting the team. It’s a win-win-win-win. (That last win is the Lions winning their way through the season.)