Follow us on Twitter!
back to panic.com

Panic Blog

From the desk of Cabel
Portland, Oregon 97205

Coda Notes for Safari: Now Available!

July 29th, 2010

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!

Coda Notes Screenshot

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.


Download Coda Notes!

Requires Safari 5.0.1

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!

¹ 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.
Posted at 12:28 pm 5 Comments

Copywriter: Cabel.

Good UI

July 15th, 2010

I don’t know who designed the iOS “Unlocking” UI, but they did a pretty good job.

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

Posted at 11:13 am 34 Comments

From the desk of Cabel
Portland, Oregon 97205

Toy Story 3

June 28th, 2010

A week or so ago, the loose tradition continued: Panic once again took over a Portland movie theater (this time, The Roseway, a classic single-screen neighborhooder that’s been massively updated) and invited our friends (and a handful of Twitter pals) to join us for a showing of a movie we’re excited about.

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!

Posted at 3:37 pm 31 Comments

Copywriter: Cabel.

Saving Icons for Snow Leopard

June 21st, 2010

Obsessive designer? You may have noticed: icons made in Mac OS X 10.6 are often washed-out/lighter.

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.)
Posted at 12:04 pm 27 Comments

From the desk of
Cabel
Engineering Dept.

Coda Notes: a Safari Extension

June 7th, 2010

So, just a few moments ago, Apple introduced Safari 5, the next major version of our favorite web browser. And with Safari 5? Safari Extensions, a new way for developers to add new functionality to Safari.

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.

Coda Notes

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?

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!

Posted at 4:38 pm 153 Comments

Quick Notes #4, Cabel

June 1st, 2010

Posted at 1:57 pm 1 Comment

From the desk of Neven
Portland, Oregon 97205

New Goods: Locke’s Lions Shirt

May 25th, 2010

A while back, we blogged about the official Panic basketball team, PS 208 Locke’s Lions. As well as helping them buy some equipment, we also whipped up a fancy-pants crest design for their jerseys.

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.)


Buy the Locke’s Lions Shirt

Printed on AA 50/25/25 Track Shirt
Posted at 1:48 pm 7 Comments

From the desk of Cabel
Portland, Oregon 97205

The Best Award

May 24th, 2010

This came in the mail today.

May 11, 2010

Dear Panic folk,

When Apple announced that only iPhone apps would be eligible for the Apple Design Awards this year, I was pretty shocked. Every so often we wonder if Apple has forgotten about the Mac in favor of its iPhone OS devices. I really don’t think they have, but when they do something like this, it’s… well, a bummer. It does seem like most of the new cool apps coming out are iPhone-based, because while where are a lot of fantastic Mac apps, pretty much all the bases are covered at this point.

Still, it’s hard to ignore the fact that Transmit 4 just came out, so the timing is less than ideal.

I’ve been using Transmit since version 2. Before it came along, I had nothing but neutral feelings towards FTP programs. The best I could find was Fetch, and it, frankly, was terrible. I’m not exaggerating in the least in saying that Transmit has changed the way I work, and every version has just made it better. In addition, I could never live without CandyBar, and I love what you guys and The Iconfactory did when it was merged with Pixadex.

All this praise leads me to why I made this ridiculous box. Transmit 4 was a long time coming, and it was well worth the wait. The UI is possibly the best on the Mac, Transmit Disk has instantly proven invaluable to my work, and even the purchasing page on your website is gorgeous. The progress bar and transitions on the credit card icons were something I’ve never seen, and it proves that no developer pays attention to detail as much as Panic.

So for whatever it’s worth, since Apple cancelled the chance for you to win something that I have little doubt you would have won, I humbly present you with, again, this ridiculous Faux Apple Design Award.

And also some Pretzel M&Ms, because Cabel’s lamenting over the empty store display on Twitter made me sad, and I wanted to make sure he got to try them.

Anyway, thank you for all that you guys do, and I look forward to seeing what you come out with next.

Michael Salbato

We are very lucky to have such nice users.

Posted at 11:29 am 25 Comments

QA Lead

May 21st, 2010

We don’t open the gates to Panic Towers often. “Hire only when you absolutely need to,” we say.

Well, it’s time. We need to!

Up until now, Panic has depended on fantastic beta testers (nearly 500 bugs filed and fixed during Transmit 4′s dev cycle), the coordination of our brilliant support and engineering teams, and great user reports, to make our software awesome.

But as our apps get more complex — this is good, as we like making meaty things! — we realize a full-time tester could help everyone.

We are looking for an experienced QA lead.

The ideal candidate will be the foundation of our QA efforts. Ideally, we want somebody with experience who will:

  • Take charge of formalizing our QA processes
  • Construct and execute rigorous test plans
  • Triage and verify incoming bug reports
  • Confirm bug fixes developed by engineering
  • Liaison with user community on vague issues
  • Be familiar with automation and scripting tools
  • Enjoy pursuing and solving problems every day

This position is in Portland, Oregon.

Sound interesting? E-mail your resume to us. If we’re interested, we will send you additional details and possibly schedule an interview.

While we can’t write back to everyone, we thank you in advance for your interest!

Posted at 11:13 am 2 Comments

From the desk of
Cabel
Engineering Dept.

An Apple //e, an iPad, and Jed

May 12th, 2010

We get e-mails:

From: Stewart Smith / Stewdio <stewart@xxx.org>
Subject: panic office photos
Date: April 30, 2010 7:44:43 AM PDT

I just saw some photos of your office and couldn’t help but notice an Apple //e. I have an odd request. Back in 2005 I created a music video for the band Grandaddy by programming a text animation on an old Apple ][+. You can see the video here.

So for my request: would you do me the honor of running the source code on your old Apple //e and sending a few pictures? (Or even posting them to your Flickr?)

I imagine you could load the code onto the old machine by using my "cassette tape" source code file. The source code package is here.

Sounded like fun to us. Just one problem, though: we knew we had to load Stewart’s “cassette tape” source into the Apple //e’s audio input. But we didn’t exactly have a cassette deck lying around.

What did we have? An iPad.

It’s an obvious solution in retrospect, but there is something very unreal and amazing about tapping a button on a multi-touch screen and watching an Apple //e fill up with data — to quote Andy Baio, “that’s like WALL-E connecting to EVE.”

Posted at 6:06 pm 96 Comments