links for 2009-04-27

• iPhone & iPod Detection Using Javascript
  How does ESPN do their iPhone detection? Look no further
  (tags: espn iphone detection javascript)
• iPhone Microsites – Creating rounded corners using CSS
  Rounded corners via CSS for iPhones. So niche I think I might just squeal with delight.
  (tags: iphone roundedcorners)
• iPhone Microsites – Target content to iPhone visitors
  Put specific content on a page for iPhone users? I think i might!
  (tags: iphone development)

Using Apache Ant with FlexBuilder 3 on Mac OSX – Some workarounds

I recently needed to compile a SWC from Flex Builder 3 on my Mac. I hadn’t done that before, as I really hadn’t had the need to share or publish my Flex components with a broader audience. This seemed like it was going to be a pretty straightforward thing to do, but after a while of tinkering about in FlexBuilder 3 with a number of different failures of varying types, it became abundantly clear that simply following the tutorials on LiveDocs, the docs on Labs and the help files in FlexBuilder wasn’t going to cut it. A number of posts on Mike Chambers blog regarding SWC compiling with compc and some messages in the FlexCoder’s discussion list got me closer to my goal, but it still took a lot more tiral and error than I think it should on a commerical product like Flex Builder. The bugs I found in Adobe’s Jira Flex SDK area on the subject were almost laughable, some mentioning compiling SWCs from FlexBuilder 3 on a Mac as an “edge use case”. Really? An edge use case?

FlexBuidler 3 on a Mac is not capable of compiling Flex components to SWC files out of the box. You need to install and configure Apache Ant before you will be able to share your code libraries with other developers.

So, for my own future reference and in the hopes of saving some Mac Flex developers the headache I encountered, here are the steps I needed to take to get Ant to successfully build a SWC that I could use in other Flex projects or give to developers on my team.

Installing Ant For FlexBuilder on OSX

You’ll need to load Ant into your FlexBuilder installation. To do this, open FlexBuilder and go to “Help -> Software Updates -> Find and Install..” Once the dialog appears, choose the “The Eclipse Project Updates” option and click finish. Choose a repository. You’ll need to install The Eclipse JDT package. Confirm the download, accept the agreement and wait for the install to happen. After the install completes you’ll need to restart Flex Builder to see it. After the restart, it should be available to you via “Window -> Other View -> Ant”. Before using it, though, we have a little more tweaking to get it to work.

Configuring Ant For FlexBuilder on OSX.

Add your SDK folder to your system’s $PATH environment variables. This is a simple step in theory, but in practice will cause you some headaches due to the default location of the Flex Builder install. By default, Adobe Flex is installed here: “/Applications/Adobe Flex Builder 3″. The folder has spaces in the name. Typically, when using spaces in folder names, specifying the path to that directory in a shell application requires using encapsulating quotes or the escape character “\” proceeding the space. In this case, using either of those failed for me. In order to workaround this, I needed to create a symlink at “usr/local/flex_sdk, allowing Ant to reach “compc” in a directory that didn’t have spaces in it. If you don’t do this, you’ll end up seeing errors like this.

So to do this, open Terminal and type: “sudo ln -s "/Applications/Adobe Flex Builder 3/sdks/3.2.0/" /usr/local/flex_sdk” – Of course, this assumes your SDK is located in “/Applications/Adobe Flex Builder 3/sdks/3.2.0/”, which for me, on a default FlexBuilder3 install, it was.

Once that is done, you may edit your “.profile” file to add the symlinked directory (pointing to your Flex SDK) to your $PATH environment variable. You have to do this, because without it, when Ant fires off the Compc Task, your Mac won’t know where the compc application is. You can use any text editor you like to edit the file, but since the file has a “.” prefix in the name, the file is invisible by default to the finder. Pico, Vi, etc in the Terminal have no problem with hidden files, and BBEdit is also capable of opening hidden files via the “File -> Open Hidden…” command. Your edited .profile file should look something like this after you are done:
export PATH=/opt/local/bin:/opt/local/sbin:/usr/local/flex_sdk/bin:/usr/local/flex_sdk/lib:$PATH

Once this edit is complete, logout of the Finder, log back in and check that the edit stuck by using this command in your Terminal:
echo $PATH

After that fun is over, you should be able to fire up Flex Builder… Once you have some AS you want to turn into a Ant Project, you’ll need to write a build.xml file and a build.properties file. Pretty much all the other tutorials out there on using Ant with Flex work after this point, so I won’t bore you with those details. After everything is working, I have to say Ant is pretty cool and I’m already thinking of some cool things to use it for to automate my workflow and speed up testing and deployment.

That said, I surely hope that FlexBuilder 4 fixes some of these dicier development issues that seem to plague FlexBuilder 3. Honestly, avoiding stuff like this was one of the main reasons I have paid for a FlexBuilder license, rather than simply downloading the free SDK and using the free Eclipse IDE, so if 4 doesn’t fix a lot of this stuff, I’ll likely do that. Writing MXML is easy enough, and with Catalyst just around the bend, it might supplant one of the bigger benefits of the FlexBuilder design view, so this seems even more plausible for many now than it did around the release of FlexBuilder 3.

In closing, I hope this article helps you, and if does, please comment below. If things aren’t working for you after following the tips in this post, comment and I’ll try to help you out!

This is a new illustration I created over the weekend using Illustrator and Photoshop. I have been interested in creating drawn sketched elements by hand and then scanning them into the computer to make them vector. However, for this piece I created it completely on the computer. It’s a great way to keep drawing while also using the computer. I have a series of these feminine drawings that I have created and evolved over the past year. Hope you like the most recent addition.

Many of the social bookmarking sites have apis that offer a wide variety of options for posting, searching, and other combination of actions. Maybe you don’t want to delve into the api, maybe you don’t want to deal with user verification information, or maybe for some reason it just is not working. Well there is a way to pass all of these sites simple url strings that will achieve the basic posting information and these strings are often used for blog bookmarking icons like the ones below (go ahead and click all of them at the bottom of this page and show some love). The following are some of the options available for a handful of bookmarking/sharing sites in the form of a url string.

Twitter –
Simple one option url to post status message:
http://twitter.com/home?
status=Great+post+on+social+bookmarking+http://electricpineapple.net/?p=96+%23electricpineapple

Basic options for most sites include the url, title and additional information (notes, description, etc). Urls may work without encoding but for best results everything should be url encoded.

Delicious -
http://delicious.com/save?
url=http://electricpineapple.net/?p=96&
title=Bookmark%20%27em%20Danno&
notes=Check out this awesome post

Digg -
http://digg.com/submit?
url=http://electricpineapple.net/?p=96&
title=Bookmark%20%27em%20Danno&
bodytext=Great post on social bookmarking&
media=news&
topic=Programming

Media options for digg are news, video or image. Topics are a fixed list of items. Digg had good documentation for this feature.

Facebook -
http://www.facebook.com/share.php?
u=http://electricpineapple.net/?p=96&
t=Bookmark%20%27em%20Danno

LinkedIn -
http://www.linkedin.com/shareArticle?
mini=true&
url=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D96&
title=Bookmark%20%27em%20Danno&
source=Electric+Pineapple&
summary=Options%20available%20for%20a%20handful%20of%20bookmarking%2F
sharing%20sites%20in%20the%20form%20of%20a%20url%20string

The mini parameter is required to be true. LinkedIn also was well documented.

Reddit -
http://www.reddit.com/submit?
url=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D3&
title=Bookmark%20%27em%20Danno

Google Bookmarks -
http://www.google.com/bookmarks/mark?
op=edit&
bkmk=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D96&
title=Bookmark%20%27em%20Danno&
labels=Social%20Bookmarking&
annotation=Options%20available%20for%20a%20handful%20of%20bookmarking%2F
sharing%20sites%20in%20the%20form%20of%20a%20url%20string

The op parameter is required for submitting. Labels and annotation are additional information fields.

Myspace -
http://www.myspace.com/Modules/PostTo/Pages/?
u=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D96&
t=Bookmark%20%27em%20Danno

Slashdot -
http://slashdot.org/bookmark.pl?
title=Bookmark%20%27em%20Danno&
url=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D96

Stumbleupon -
http://www.stumbleupon.com/submit?
url=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D96&
title=Bookmark%20%27em%20Danno

Newsvine -
http://www.newsvine.com/_tools/seed&save?
u=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D96&
h=Bookmark%20%27em%20Danno

Technorati -
http://technorati.com/faves?
add=http%3A%2F%2Felectricpineapple.net%2F%3Fp%3D96

This is by far a complete list, please add your own favorite sites in the comments.

Annabelle’s Bistro Updates!

I have been very quite for a while now. Podcasts have slowed down to a trickle. Blog posts have been pretty much non-existent. It is as if there is nothing new worth talking about with the film. In fact, it’s quite the opposite. We have been engrossed with so much work, that stopping to record and edit a podcast or simple taking a moment to write a post have been far from our minds. It’s crunch time baby! And this film ain’t gonna animate itself.

As of this posting, we are nearly finished with all of the 3D work. From here it’s on to facial animation in After Effects. Of which, 90% of that has been completed by yours truely. We are getting very close to the point where it will be simply a matter of slapping all the renders together, editing them down, color correcting them, and calling it a day. Just a few more weeks and Annabelle’s Bistro will be ready to release out into the world!

I have a couple of renders set aside. If I find some time in the next few days, I will put together a little write-up about how they were accomplished, however, I have a feeling that most of the cool behind-the-scenes stuff will be written up after the film is complete. Stick around though! Cool stuff is coming soon!

links for 2009-04-26

• A List Apart: Articles: In Defense of Eye Candy
  The value of a good aesthetic is tough to calculate. A List Apart breaks it down.
  (tags: design blog aesthetics ux alistapart)

RIAPalooza Two. Designers and Developers Together For a One Day Conference in Chicago.

Last Year I attended RIAPalooza, a conference focused on the design and development of Rich Internet Applications. It was a fantastic event, with a lot of great presentations covering AJAX, Flex, and Silverlight. I wrote a recap about the event, here.

The event is happening again this year, on May 8th. It looks to be another awesome lineup of sessions. One change from last year… I WILL BE PRESENTING THERE! I’ll be speaking with a coworker of mine, Erik Peterson. We’re going to be covering a site that is about to launch for a Chicago museum. The site features an Open Source CMS, AMFPHP, Flex and lots of cool social media integration points. We’re going to be discussing not only the nuts and bolts behind what makes it work, but also the process to get from the sales pitch to the finished product. Should be a great talk!

In addition to my session, Roundarch will be there, Josh Holmes and Mike Labriola among others. This is a great opportunity to see some platform agnostic information, with technology taking a back seat to the bigger issues in RIA design. It’s a cool way to learn a little bit about Silverlight, AJAX or Flex, too.

Best of all, the event is only and includes lunch, a T-Shirt and free beer after the sessions! You can’t beat that with a wiffle ball bat. Register now.

links for 2009-04-22

• Typefaces we can all share : Open Font Library
  Maybe soon we will be able to have more variance in our web typography. Safari and Opera have it… Firefox 3.1 should have it too… IE? HMM. Good thing we have conditional CSS, right?
  (tags: fonts typography free font-face)

links for 2009-04-21

• What is Vertical Align?
  (tags: vertical-align)
• Rather Splendid: Designing websites for the Nintendo Wii
  Some nice guidelines to geetting you pages looking snazzy on the Nintendo Wii
  (tags: wii)
• A List Apart: Articles: CSS Design: Going to Print
  So, your website needs to be printed out, eh? Best read up on that, fool.
  (tags: print css)
• Evolving the Internet on your phone: Designing web sites with Opera Mini 4 in mind – Opera Developer Community
  Wii web design.
  (tags: wii conditional css)
• Target iPhone with CSS | The Code Cookbook
  As if you needed more proof… here's how you target the iPhone with your CSS.
  (tags: iphone css conditional)
• » Web Development for the iPhone :: CSS, JavaScript and XHTML Explained
  You want to target the most advanced Modile computing platform out there? iPhone develoeprs, look here.
  (tags: iphone conditional css)
• SourceForge.net: iPhoney
  An OSX App to test your pages in iPhone format.
  (tags: iphone css emulator)
• Print-friendly CSS and usability | 456 Berea Street
  The CSS media type “print” allows authors to specify a stylesheet that is only used when printing. This can be very useful and allows for neatly styled printouts that hide non-essential parts of the page and only contain the main content. It’s a great concept. The problem is what users expect.
  (tags: css print stylesheet)

links for 2009-04-20

• 50 great examples of infographics – FrancescoMugnai.com
  A brilliant compilation of some stunning information graphic design. Truly beautiful data here.
  (tags: information infographics design inspiration)
• Outstanding Website Background Guide: 60+ Impressive Resources | Noupe
  Now that is a stack of graphic sources for backgrounds.
  (tags: backgrounds free)