There are a ton of great ways to listen to music online that have been growing in popularity in the last 18 months (spotify, pandora, and turntable to name a few), but I wanted to point 2 different services I use a lot that I think are fairly unknown so far, and are completely free.

The first is tubalr.com. This is a pretty unique service in that it allows users to create playlists from YouTube videos and will play them in sussesion, completely free of charge.

You start out by putting in an artist name (or whatever search term you like) and it will find videos based on that term. As you listen to the different videos, you can favorite them for easy playback later. They also have popular styles lists you can start with as well. So far, the only downside is it doesn't let you create more than one list of favourites. But, it’s a young service, and the developer keeps releasing updates often. 

Here is my current tubalr list - http://www.tubalr.com/individual11/favorites (don't judge me based on my afinity towards dubstep remixes and Lonely Island songs.)

The other service is wearehunted.com. This is my favourite site for discovering new artists and songs that I normally wouldn't run across. They recently updated their interface to make it even better for users to just listen to music in the background.

As you listen to infinite stream of randomly selected songs, you can “like” the ones you are enjoying and skip the ones that aren't your style. After doing this for several songs, you can tell the service to create a play list based on what it thinks you will like, and I find it to be pretty accurate.

They also offer free downloads for selected new artists and you can usually click over to iTunes if you want to purchase a song. 

I'm sure there are a ton of unique music listening experiences that pop up everyday, but definitely give these two a listen.

Permalink | Leave a comment  »

I use a bunch of different web, desktop and mobile apps everyday to help me get things done, be inspired and to do better work. I sometimes link to them, but I thought I would start adding real reviews to my blog about a few of them periodically to talk about how I use them. It will only be on apps that I actually like using and use often, and hopefully they will be on some obscure apps you might not have heard a lot about yet.

The first one however, you've probably been hearing a decent amount about lately, Pinterest. It's a site for hosting images and videos (although I almost never see videos) you find on the web. The process is very easy; you see an image on a web page you want to store, click a bookmarklet and "Pin" it. You can also create different boards to help you sort your pinned content. 

The social aspect is a lot more subtle than on other sites, but I find it to be a lot more personal as well. You can follow other people and see all the content they pin, or you can choose to follow just specific albums of those people. You can also comment/like on any piece of content as well as re-pin it, which would allow you to instantly add it to one of your boards.

I've been seeing a lot of negative comments/questions about Pinterest lately saying it's just for women, and although women do seem to pin the most content, it's definitely for everyone. Here are a couple ways I use it.

Inspiration is an obvious use for pinterest, but I even categorize further into different types of inspiration including art, great ideas and typography. Once you start pinning stuff you find on the web, your boards will fill up quickly.

I also find it to be a unique way to find new recipes. I use the food category to look at different dishes that I might want to eat and then follow the link back to the original web page, usually a recipe. This, for me, has been a much easier way to get me to try new things than listing the ingredients. It has also lead to one of my favorite things to make, sriracha chicken.

And one of the ways I use it for work is to keep track of different illustration styles. This is great for having a large catalogue of styles for an idea, and then the link goes back to the artist, making it easier for me to get connected to them.

But not to worry, because there is no wrong way to use it, and the ease of use and sharing makes it a no-brainer to try out.

If you still need an invite, leave your email address in the comments, and I will send you one.

P.S. If you're still worried about the guy/gal ratio on Pinterest, check out this guide by Read Write Web.

Permalink | Leave a comment  »

My team and I are about to launch a very cool word-find game on facebook in the next week or so (more on that in a later post) and I thought I would post the original music for the levels I made using GarageBand and some 8-bit samples.

We are still debating if it's the right tone for the game, but I like them and find them pretty easy to listen to in the background.

easy_music_final.mp3 Listen on Posterous

hard_music.mp3 Listen on Posterous

medium_music.mp3 Listen on Posterous

Permalink | Leave a comment  »

In my previous article, I talked a bit about the different ways creatives and technologists talk about ideas. I focused primarily on the best ways technology can and should be used to fit into a creative concept, and not be the center of the story. This time I'm going to talk about how and when technologist should push for the technology itself to be an upfront part of the story.

Not every idea needs to tell a story or to be wrapped in a conceptual idea. Utilities for customers, such as the XBox app for Dominoes Pizza, or the Starbucks iPhone app) have a place in a brands portfolio right along side social media efforts and traditional media. Ideas can always support a brand message without repeating it overtly. And this is the other side of the coin when communicating between creative and technology, value exchange.

The first thing a technology person says when hearing an idea is "Where is the value to the user?". Technical people put reasoning behind most of their choices. They quickly recognize the give and take balance of time vs. value when it comes to digital experiences (and their own work). If this balance is off, the idea doesn't make sense to them.

Of course sometimes the value for the user may not be as obvious as a utility. Often, simple experiences that are created for entertainment only, have a great deal of value to users. If this were not the case TV, and by extension YouTube, would not exist. Which brings the concept of the idea full-circle back to "What is the story?".

It's a difficult balancing act between all these different concepts that can encompass an idea, but with the right talented people and the ability to communicate on the same wave length, amazing work can be done. And remember, a conceptual idea doesn't preclude a technology idea and vice versa.

Permalink | Leave a comment  »

Part of my job leading Creative Technologies is translation. And I don't mean linguistically from English to French (although I am getting a little better at that). I mean translating the value of ideas between traditional creatives and technology-focused people. These 2 groups have 2 completely different vernaculars when they talk about ideas.

Whenever a technology-focused person presents an idea ("we should hook up Microsoft Kinect to a Twitter feed and generate real-time social art projects"), the creative's first response is "But what's the idea?" This question leaves many technology people frustrated and the feeling that creatives "just don't get technology." When what the creative is really asking is "what is the concept behind the idea? What is the story you're trying to tell?" Often, technology people miss the story itself and instead focus on how new and innovative the technology is.

For technology to be a major part of a story, it needs to be invisible to the user. One of the best quotes I've ever read on technology is from Arthur Clarke who said, "any sufficiently advanced technology is indistinguishable from magic." In advertising, the technology should be part of the experience itself, not the focal point.

In a project I worked on this year, This is My Story, we used a lot of great technology including Amazon Cloud Services, photo creation with users web cams, and dynamic image integration into a video. But the reason it was so succesful (about to hit 8.5 million videos watched and over 2.5 million videos made) is because the concept of allowing kids and their parents to tell their own story of what their future could like in 2020 was so compelling.

With technology evolving at a daily pace, there will always be new and innovative ways to tell stories; just don't forget about the stories you're trying to tell.

Of course, that's just one side of the coin. In the next article, I will talk about ideas from a technologist point of view and how their value can sometimes trump story telling.

Permalink | Leave a comment  »

I can't jump into my new resolutions without first going over last year's to see how I did:

1.  Cut my sugar intake in half - I did ok last year. I can still do better, but I didn't get any grande hot chocolates, so that's a plus.
2. Gain 10 pounds... of muscle - Fail! I'm still 135 soaking wet. Oh well.
3. Launch 3 personal projects - Mostly success. I launched a couple JQuery Projects, a Lorem Ipsum replacement and redid my site. I still have a few other projects which I started, that I plan to launch this year.
4. Post either to this blog or portfolio twice a month - 50/50. I had some good months and bad months for posting content.
5. Get to novice/moderate level of 2 new languages - Mostly fail. I got better a lot of the languages I work in, and played with a bunch of different new languages (and also studied French for a bit.)
6. Use more frameworks - Success! The more I work with frameworks in my projects, the faster I am able to get projects out into the world. My current favorite is Twitter Bootstrap.
7. Become epic at Rebirth for iPad - Success!
8. Collaborate more with awesome people - Mostly successful. I was able to fully build out my team in London and in India, but I still want to find ways to work with people in different skill areas and in different locations.
9. Remind my wife how much I love her to the point of annoyance - Success! But I can always do better.
10. Travel ambitiously - Success! India twice, Amsterdam, Edinburgh, Rome, Barcelona and Greece. Amazing places, amazing food.

Overall, I'm pretty happy with my progress on last year's resolutions. I can always improve which is why I have widdled my resolutions down to one for 2012. Create more.

That's what I want to do more of over 2012, simply create more. More posts. More projects. More art. And to kick it off, I have updated one of my personal projects today, the Scroll To JQuery plugin. I've fixed a couple small bugs and added the ability to use easing equations. It's not a massive improvement, but it's a good start for January 1st, 2012. Now all I have to do is keep the momentum going!

Permalink | Leave a comment  »

My awesome wife knows about my obsession with gadgets and data, so for Christmas she ordered me a Jawbone UP. And she ordered it just in time, since they have closed off all orders as they work out a few things, but more on that later.

The device itself is a small bracelet that comes in multiple colors (I went with black) and sizes (I went with small due to my girlish wrists). Inside the bracelet is a bunch of miniature electronics including some LEDs, a sensitive motion sensor from MotionX®, a battery and a vibration motor. On one end of the bracelet is a cap that when pulled off gives you access to the 3.5mm plug for charging and syncing. On the other end is a tiny button that allows you to switch between the different modes. But that's only the first part of UP, the second is a free app for the iPhone that keeps track of all your data (you can use their site as well if you don't have an iPhone.) The bracelet will track all of your steps during normal mode and keep track of your sleep pattern during sleep mode. In addition, the iPhone app keeps track of the meals of you eat in a rudimentary kind of a system (take a picture, then in an hour it asks you how you feel.)

Overall, I found using UP easy to integrate into my day-to-day life. I usually take pictures of my food (yay instagram), and remembering to turn it to sleep mode when I go to bed and back to normal mode when I woke up was no big deal. The amount of data it collects based on the amount of work I have to do is very impressive, as you can see from some of the screen grabs below.

See the full gallery on Posterous

Capacitor Issues

As I mentioned earlier, shortly after my wife purchased my UP, Jambox halted selling them, based on user feedback they were getting in their forums. Come to find out, some of the UPs had faulty capacitors, which were making it so the device wouldn't hold a charge (according to their own documentation, you should be able to use the bracelet normally for 10 days before it needs a recharge.) So they stopped selling them until they could fix the issue, and get it back into production. At the time of this writing, they are still not selling them.

How to do GREAT customer service

Jambox could have possible swept this issue under the rug, or dragged it out through the holidays hoping it would die down. Instead they met it head on, found the problem and released a statement. In the statement, they mentioned the exact problem, assured customers that the issues were not safety related and gave a refund to every single customer who purchased an UP, whether they had the problem or not. Even better, if you chose to take a Jambox credit instead of cash, they added an extra $50 to the refund.

The Bad

• The rubber bracelet itself is nice, because it's suppose to be water resistant (you can even take a shower with it on), but it catches on things like sleeves or if you tend to be a restless sleeper, it will catch on the sheets. I'm hoping the next generation will be a bit thinner.
• I haven't had the battery issues some are reporting, but after a week the button that controls the mode got very sensitive. It would change modes multiple times a day on its own if my hand was in my coat pocket for example.
• It won't charge off the phone. I'm sure it's because of the output power of the phone, but still it would have been nice to be able to charge it on the go without needing my laptop.
• I want to add more data. I'm sure design decisions had to be made for the app in order to keep it simple and minimal, but even if I could just click a small button when I drank a glass of water, I think that would actually be valuable in conjunction with the other data.

The Good

• The vibrate motor is perfect! Very subtle, but noticeable. I was worried it would feel like having an x-box controller on my hand.
• You can use it as an alarm, and the bracelet will vibrate around your alarm time, when it thinks you're coming out of sleep cycle. You can also have it go off if you're not being active (in front of a computer for too long for instance.)
• It looks great and feels good. Jambox knows how to do simple design well, and as I mentioned earlier, you barely ever notice wearing it (and this is from someone who hates wearing a watch.)
• For a first generation personal data collection device, it's surprising how much data it collects and how organized it is. If you're looking to find out more subtle information about your everyday life in hopes of becoming healthier, it's definitely worth trying.

With their really good return policy, simple design and enormous data collection, I don't know why anyone wouldn't try it. Look for it to come back on sale early 2012.

Permalink | Leave a comment  »

I was working with a small project written for the Flash 9 player, and started running into some old bugs when working with the timeline. The first, which is seems to be fixed in later Flash Players by default, is working with objects on the timeline that are not in the first frame. For instance, if I had a few movieclips that don't appear until frame 10, I couldn't access them with ActionScript at all. They just kept returning null.

After some research I found the solution, which has 2 parts. When you call a gotoAndStop method, you must immediate fire the stage.invalidate method that will update the render list, and make elements that were previously unavailable available. And to see when they are available, you need to use the Event.RENDER event.

As an example of what this might look like, check out the following code:

This would work fine, but as you can see we are not being good citizcens with our event listener, so we need to remove the event listener after our code has run. Thanks to the arguments object, I could use the callee property and remove the listener properly. So the code updated code below shows that in action:

This will work for you FP9 projects as is, but if you really want to make it easier on yourself, I also wrote a TimelineEvent class. Using this will allow you to listen for frameLabels as events. Here are just a couple of the listeners you can use:

You can download the code and a sample file here.

Permalink | Leave a comment  »

Some of you may have accidentally got RSS spammed a couple weeks ago, sorry about that. It was part of the migration I was doing moving all of my article content from my site over. In addition, I've completely redesigned my portfolio site as well as this site. Both RSS feeds now point directly to this feed, for those who follow both. I decided to focus my main site on just my work, and this site on editorial content and code sharing.

I will probably make a few small tweeks to the design of this site in the future, but overall I really like it.

And look for more articles in the near future. I have about 3 that are 80% done, including a nice AS3 trick.

Permalink | Leave a comment  »

So I've started using LESS instead of standard CSS, and I will never go back. I've never been a huge fan of CSS to being with. I'm used to real languages with inheritance, reusable functions and of course variables to hold important pieces of information in a single place. CSS has none of this, so I hated it almost immediately. I of course learned to deal with it, all my designer friends loved it, and it was definitely better than the alternative of putting styles inline with HTML, but no longer. I have to thank Joe Maffia again for showing me LESS and this handy little app (mac only), which not only converts my LESS files directly to CSS as I save them, but also minifies the CSS at the same time, and it's free.

So what does LESS have that CSS doesn't? Everything. Variables, nested rules, mixins and reusable function are just a few of the features LESS has going for it. I won't go through all of them, as you can read about them in great detail from the earlier link, but I will go over a few things I did to help get it setup for me and some nice things I've noticed about it.

The first thing you will want to update is the syntax highlighting, as most editors won't support LESS right out of the box. I used this mode for updating Coda. After that, turn on the app, point it to the right directory, and start writing LESS. And remember, since LESS is basically just an extension to CSS, you can write normal CSS in there as well.

One of my favorite features of LESS is parametric mixins. These act like reusable functions, and you drop them in as if they were classes. But the beauty is that you can pass parameters when you use them, and unlike normal mixins, if you never use parametric mixins, then they will not be included in the CSS at all, where normal mixins, because they are just like classes, will always be brought into the css. This is very powerful as it allows you to write a bunch of utility parametric mixins and always include them in your LESS file whether you use them or not. Here are a few I use:

There is also a nice grid system written for LESS here. It looks like it's based on the 1kb grid system, which I use a lot already. Also just ran across this Github repo, which has a bunch of helpfull LESS stuff.

LESS will definitely change not only how long it takes you to finish styling a site, but also how you approach the styling. I hope browsers eventually support it natively.

Permalink | Leave a comment  »

JQuery is awesome, there is no doubt, but because it's made to do everything, every now and then a "bug" pops up. Case in point, I was using the fadeIn and fadeOut methods to turn on a piece of content when you hovered over the parent piece of content.

The first annoying "bug" is the animation playing to the end. If I rolled over, then rolled off you would see the fadeIn animation finish, then the fadeOut animation would play. That one was easy to fix putting a stop call in between the selector and the fadeIn (as well as between the selector and fadeOut). This will stop the current animation in its tracks. That's when I noticed the second "bug".

Both fadeIn and fadeOut make assumptions on the opacity you want to fade to and from. For instance, if an object is at 0.5 opacity when you tell it to fadeOut, then it will fadeIn back to 0.5. This is great if the intended opacity is 0.5, but if you call the stop method, then fadeOut, it will look at the current opacity and remember it. This meant that when I rolled over the content, then rolled out before the animation had finised fading in, it would fade out from a lower opacity and from that point on, would not fade back into fully opaque. I wrote a quick fix for it using the complete event for fadeOut, and you can see it in the JSFiddle below. Because the fadeOut method actually hides the element after it's done fading it out, you can reset the opacity to what you want it to fade into the next time you call fadeIn right there.

If you click on the Result tab, you will see when you rollover either square, that they both fade in correctly, but if you rollover and out the one on the right quickly enough, when you roll back over it, the circle won't fully fade in.

You can also simply animate the opacity property of the element with JQuery, but I find the convenience methods like fadeIn and fadeOut, well convenient.

Hope this helps someone out, and if you have a better way, please let me know in the comments.

Permalink | Leave a comment  »

Busy week last week. Was in Barcelona for holiday for the weekend, then got back Monday and immediately flew down to Bangalore, India to catch up with my development team down there. I flew back Saturday, rested a bit on Sunday, then Sunday night was part of another Beancast recording, a podcast dedicated to marketing and advertising. And I was in very good company:

• David Burn - Editor, AdPulp
• Mike Monello - ECD, Campfire
• Darrell Whitelaw - Co-Founder, MIR
• Bob Knorp - our gracious host, marketing aficionado and the man with the voice made for radio.

We discussed things from the Facebook smear campaign to the new Cannes Effectiveness Lion. Really enjoyed the conversation with everyone and think it turned to be a really good show.

You can grab the podcast directly from iTunes here.

Permalink | Leave a comment  »

I've read a lot of articles on how brands should approach social media. The obvious stuff, be sincere, provide value and don't spam people's stream among others. And that's all great advice, but I still think most brands are missing the point, and they are being lead astray by how many "likes" they get. It's super easy for me to like a brand on Facebook, and then immediately block them from appearing in my stream, so what have you as a brand really gained from that?

No one likes the guy at the bar who constantly talks about himself, and all the things HE'S done, but if the same guy has something interesting on another topic, then I will buy the next round and gladly listen. This is exactly how many brands are currently getting social media wrong. They spend too much time talking about them selves and what awards THEY'VE won and not enough time talking about the thing that actually separates them from their competition, their core competencies.

Many brands have such interesting stories to tell about how they separated themselves from the heard, but they are so caught up in saying their own name over and over again in hopes of brand recognition that they are missing the opportunity of social media. Just be yourself and those who want to have a conversation with you will.

Nike is a perfect example of a brand who doesn't talk a lot about themselves in social media; they talk about their core competency (running for example.) Because I have some interest in running, they talk to me about running, something they have a great deal of insight about rather than pushing their shoes in my face all the time. This is what makes a conversation with them great -- they aren't selling to me, they are actually having a conversation with me. They make it easy for me to move over to their shoes if I choose so. A great benefit for us both, but that wasn't part of the direct conversation.

But these insights and core competencies aren't limited to the obvious brands. There are brands like UPS that do interesting things as well that separate them from other package delivery services. For example, their routes are created to only include right turns in order to avoid waiting at left hand turns thereby saving time and saving gas, which equals cost reduction and environmentally friendly. Whoever at UPS that came up with this strategy should tell his or her story, because people will remember the interesting story first, then associate it with the brand, but it won't work the other way around.

And as a side note, don't take your cues for social media from entertainment brands, they have it easy. When other brands see shows like True Blood (yeah, I watch it, I'm a sucker for the horrible accents) posting about next weeks episode, they think they should talk about what's next for their brand as well, but it doesn't work the same. The brand of True Blood is the content of the show itself, and very few brands outside of entertainment ARE their content. For instance, no one gets excited about the next version of Tylenol, so don't put that in my stream. Instead tell me about the research you've done about headaches that may benefit me without taking Tylenol, and then maybe mention how this breakthrough research lead you to the next version of Tylenol. Like Jerry Seinfeld said, nobody even knows what retsin is, so why should I care that Colgate now has more of it?

Permalink | Leave a comment  »

One of the larger ongoing projects my team works on utilizes quite a few 3rd-party APIs, so I wanted to post a short article about some of the things we've learned when working with them so hopefully you can avoid some common pitfalls.

• Read their use policy beginning-to-end - There are bunch of little nuggets of information you will need to be aware of when using 3rd-party APIs including privacy policies, how long you are allowed to hold onto the data and whether or not it's free for commercial projects. (e.g. Google Translation doesn't allow you to hold onto translations for longer than an hour.)


• Know the rate limit - This can usually be found in the use policy, but I wanted to pull it into it's own point, because this can bite you if you're not aware of it and plan accordingly. Some APIs allow you to pass on the rate limit to users of the app, and not just your app as a singular entity. (e.g. Google allows you to pass the IP address of the user making the request and apply the rate limit to them, so it scales correctly as your app scales.)


• Cross Domain Policy - If you're consuming APIs through server side code (e.g. PHP), then you don't have to worry about this. However, if you're using any AJAX system to communicate with the API, then this is a big deal. Because the client (browser) is not allowed to communicate openly between 2 different domains. There are 2 basic solutions to this problem. One is setting up a proxy on your own server to consume the API response and send back to the client. The second solution is using JSONP, which bypasses the cross domain policy, but does require the API to support this. (e.g. Facebook supports JSONP, but Foursquare, at the time of this writing, does not support JSONP so you must use a proxy if you want to interact with it client side.)


• What happens when the API goes down? - If the API goes down, you need to handle it in a way that either falls back to another API (depending on the type of service it is), or let the user know that you are waiting for the 3rd-party API to come back up.


• Maintenance scheduling - If you can schedule your maintenance at the same time as the 3rd-party APIs you depend on. Every system needs maintenance and updates and the APIs are the same. Many of the larger ones let their users know when their will be scheduled downtime. This is a perfect opportunity to match their schedule if your application is dependant on them. This way, your users won't have to deal with both downtimes separately.


• Monitor updates - Usually, 3rd-party APIs will have updates that benefit you. Faster, better data, new methods, etc. I use my RSS reeder to keep track of them so I never miss any updates that might benefit me or my users.


• Security - Don't just depend on the API for security, because they might actually be the weakest point, especially if you're not communicating with it over HTTPS.


• Contribute bugs - Be an active participant in the development of the 3rd-party APIs you depend on. Nearly all of the large ones have forums to talk to the developers of the API as well as other developers using it. And there are usually places to post new bugs and make feature request.

I'm sure there are a lot more than this, so if you can think of any, please post them in the comments.

Permalink | Leave a comment  »

I recently mentioned in a post a web service I like using for doing mockups called Placehold.it. I've been using it on my next personal project (more on that in a few weeks hopefully) and decided to make it easier by wrapping it up into a JQuery plugin.

It's pretty straight forward in that you simply call it on empty img elements on your page, and it will create placeholder images that respect the sizes you define in the attributes, css or if you pass them as options. And just today I made an update that incorporates another service that instead of generating generic images actually uses pictures of kittens.

You can read more about the plugin and see examples here or you can grab the source files here.

Any problems, questions or suggestions, just post them in the comments here or on the github page.

Permalink | Leave a comment  »

I recently wrote a plugin for JQuery that utilizes the Placehold.it service to dynamically generate FPO images. You can see a bunch of uses of it here, but want to post a quick example showing how to use the plugin to replace broken images at runtime.

It happens occasionally, you link to an image on another site and they move it, or you link to an image on your own site, but forget to upload it. Most browsers will display a little icon showing a bad link, but we can use JQuery to dynamically change any broken image with an FPO image so the page doesn't look weird.

To make this happen, put the following code in your document.ready event.

Permalink | Leave a comment  »

Working on a project that does geo-location detection on the backend to serve up different types of content. We needed a way to test the system out since the project is launching in 16 different countries, so I decided to build a tool to server up random IP addresses for different countries. The first step was tracking down a site with IP ranges for different countries. After that, I had to figure out a way to pull a single IP address from a range. I wrote a quick JavaScript function to do it, and I thought I would share it here incase anyone else might need it themselves.

Permalink | Leave a comment  »

I recently decided to take the time (hours) to clean up and organize all my bookmarks, so now I just have a few folders in my bookmarks bar that I can quickly run through to find what I'm looking for. By cleaning up my bookmarks, one thing that I did was consolidate all the tools I use for my work. Here they are:

Sites

• JS Fiddle - if you want a quick way to test HTML + CSS + JS, then this is the site. It separates the 3 into different windows with a 4th window displays the result. You can include dozens of popular libraries or your own external code. It has built in versioning, and you can share your work on your own site as an iFrame with the HTML, CSS and JS windows still intact.
• Mockingbird - wireframes are a pretty essential part of development. It helps avoid scope creep and puts to paper what you are going to build. There are a ton of great wireframing apps out there, but I like the simplicity of this app. Lots of great widgets to drop in, can be exported as PDF or image sequences and can be even setup to be interactive by applying links to buttons.
• CSS Generator - as I continue to learn and memorize the features of CSS3 and making it cross-platform, I lean on this app to help me out. You can select the properties you want to create, see the changes live in their demo and they show what version of which browsers support each feature.
• Placehold.it - I don't use this as often as some of the others, but it's definitely my favorite. Whenever I have to do mockups or test content, I'm always looking around for some FPO images. With this service, you can simply use something like "http://placehold.it/350x150" in the src parameter of your img tag and it will create a placeholder image for you. You can adjust the dimensions, color, text and format all in the url.
• Fillerama - in a similar fashion as Placehold.it, this site will generate copy for you to use as test content for your site or for mockups. But unlike boring Lorem Ipsum, this site generates text from the show Futurama (a favorite of mine).
• JS Lint - not as fun as some of the others, but still essential is this site, which I use to validate my JavaScript (when I remember to do so). It actually warns you it will hurt your feelings, and that's an accurate statement, because it takes a hard look at your code and tells you about what it finds to be wrong, and it hates shortcuts.
• 0 to 255 - for when you're trying to find that exact shade of blue you want, but don't want to open up PhotoShop. You can start with a random color, or input a hex value and it will display all the different shades for that color. Simply click to copy it to your clipboard.
• Ajax Load - ever see those nice little loaders for images, or when a form is communicating with a server in the background? This site will help you make your own. It has dozens of different animated gifs to choose from, and you can adjust the colors of the foreground and background, then simply download it and put it to use on your site.
• Stripe Generator - used every so often, this site will generate a striped tile image for you to use as a background for your site. You can adjust a bunch of different things including color, direction and size.
• JSON Parser - working on the web, you will deal with JSON data all the time, it's the preferred data return value of tons of different APIs. Although JSON is straight forward to work with in most languages, sometimes there are errors in the data that are difficult to track down. This site will take your JSON data and parse it out so that it's readable and will point out errors in the data that may be causing the issue.
• Get LatLon - despite the limited use of this tool, I've found it invaluable when working with geo-location applications. You can input where in the world you are looking for something, and it will show you the latitude and longitude, which can be pretty handy for seeding and testing content.

Bookmarklets

I have bookmarklets as a separate section, because they aren't sites I go to, but instead or little chunks of JavaScript I keep in my bookmarks bar that you can actually click on to run code on the current site you're viewing.

• Jquerify - if you're familiar with JQuery, then you know how powerful it is at manipulating the DOM. This bookmarklet will allow you to inject JQuery into any website that currently isn't running it, so you can work with it in the console of the browser. It's handy for changing the look or feel of a site in your browser without actually affecting the code.
• Stats.js - if you want to monitor the performance of your JavaScript, but don't want to turn on and off the stats mode, you can use this bookmarklet that when clicked, will popup a small stats window overtop any page.
• 960 Gridder - the 960 grid layout is one of the most popular layouts on the web. This bookmarklet will allow you to quickly overlay a 960 grid on your site to check that everything is aligning.
• The Fold - when designers or developer reference the fold, it's the vertical position at the bottom of the browser. This bookmarklet will let you see where that fold is by overlaying a dashed line at the desired position. It's great for those who have a large monitor, but want to see where the fold might be on a 1024x768 screen.

Desktop

Even though this has nothing to do with my bookmarks, I thought it should be here as well.

• Coda - I do all my coding in Coda. It has a super clean interface with FTP and SVN support built in as well as a webkit browser for testing work right in the application. It also has a code snippet window for chunks of code you find yourself using a lot. There is also a large community built around plugins for coda. And Eddie recently found a nice group of terminal commands to work with it as well if you're so inclined.
• Transmit - for connecting to FTP, SFTP, S3, etc. Transmit works really well and has a very clean interface (not surprising since both Transmit and Coda are from Panic) and you can even mount connected servers so they appear in finder.
• GIT - for version control both local and in the cloud. I just started using GIT recently, and already know I will never switch back to SVN. Super easy to setup and use. By default, you use it through the terminal, but there are a few GUIs out there.
• Evernote - the best note taking application you will find. Keeps things organized and synced across multiple devices both Mac and PC. And best part, it's FREE!
• Reeder - keeping up with what's going on in the world is tough, especially if you follow technology. Despite what many people think, RSS is far from dead and I use Reeder for mac (and iPad) to keep track of everything.
• Instapaper - I use Reeder to quickly go through everything, but for long articles that I want to read later, Instapaper is amazing. It keeps the article in the cloud so you can access it from anywhere, including on mobile devices.

Those are just a few of the tools and services I use periodically for work. If you have more or better suggestions, please post them in the comments.

Permalink | Leave a comment  »

I've been programming professionally for over 10 years now, so I thought it was time to put together a small article about how I got started, a few things I've learned along the way and a few tips for getting started now.

I got into programming out of spite

That's the truth. I was doing some simple data entry and admin for a company. One day I was pretty sick with the flu, so decided to build an animation in Flash 4, a program that a friend of mine had installed on my laptop for me to play with. The animation took about 14 hours to complete (now it would take about a third of that), and I was pretty proud of it. I showed it to my friend when I got back to work, and he said "That's cool, but you know you'll never be as good as me." That comment was all the motivation I needed to dedicate the rest of my foreseeable life to becoming better than he was. I got a copy of Colin Moock's ActionScript, the Definitive guide and set to work. And as I went through each chapter meticulously (it's how I learn), I noticed how much I was coming to enjoy programming, because I was making things.

My whole young adult life, I always wanted to be able to make things. I tried carpentry, carving (both my father and his father can carve), mechanics, etc... and nothing clicked. I just couldn't quite get my brain and hands to speak the same language, but with programming it just worked. That's not to say I was good at programming right from the start, but it did make sense to me each step of the way. Variables, conditionals, loops, objects, one after the other, the basics of programming fell into place conceptually in my brain, and I began making what I could see in my head appear on the screen. When that happened, I knew programming was what I wanted to become great at, and it was no longer about being better than my friend.

Now what?

So once I decided to pursue programming not only as a hobby, but as a career path, I set out to learn as much as I could (and continue to do so). There were some good books, good web sites, a few dead ends, and an amazing community. Below are some things I've learned that might help a beginner get deeper into programming

• Pick a "fun" language to learn with. - Sure, C+, .NET and Obj-C are powerful languages that can do some amazing things, but they are also very strict. Languages like ActionScript 3 (Flash), Processing and even PHP are a bit more forgiving and you can get small things done with very little code, so you will see your results faster. I chose Flash, and although I've had to learn some different methodologies as I've learned new languages, being able to write 10-20 lines of code and then see something meaningful on screen was a big motivator for me to keep learning.

• Find the community. - You're not the first person to struggle with learning whatever language you decide to go with and you won't be the last. Most languages have a community built around them (Open-Source especially), so take advantage of others experiences and knowledge. And there are also great multi-language communities such Stackoverflow and Forrst. In addition to online communities, search for local user groups in your area either based around the language you're learning or general technology groups like Refresh.

• Put your work out there. - When I was first getting started, this was the hardest part to me. I would build something, then show it to some friends I knew wouldn't judge me, but never wanted to post it online or show it to anyone else. I had a good friend finally convince me to just throw some stuff up on a community site (Flashkit, a kind of Flash file dumping ground at the time) and get feedback. So I did and it was the best decision I could have made. Sure, my stuff was very rudimentary and not that impressive at all, but people actually liked it! It was great to see positive comments along with honest criticism or suggestions. It made me want to improve if only to get more positive feedback from the community. Sure there will always be haters who put negative comments about your work, but you have to ignore them or you will drive yourself crazy. Most professionals in the industry only want to see their community grow, so having new programmers post work is something that is encouraged and supported.

• Play! - Programming isn't easy. Even if you pick it up right away, you still have a long road ahead, so you better enjoy driving on it. Don't just do the tutorials you see online, or follow the examples in the book. Don't even just program stuff for work, program stuff for fun just to see what can happen. It's the best way you're going to learn the boundaries of what you can do with the language you've chosen.

Those are just few tips that I think aren't always covered in "learning programming" posts. Of course, practice makes perfect, and learning the fundamentals are equally as important, but that goes for learning anything new.

If I've missed anything, please post it in the comments.

Permalink | Leave a comment  »

In old web applications, when you needed to move from section to section, you would simple go to a new page (i.e. myApp.com/home.php to myApp.com/friends.php). But loading a new html page every time you want to switch sections now seems old and clunky. Using modern JS libraries such as JQuery allows you to hide and show sections of your app on demand, making the app seem slick and singular. The downside of building your app this way is state. With the old way, if you wanted to go back, you would simply hit the back button. Or even more importantly, if you wanted to send someone to a specific section, you would just send them a link to the specific page of that section, but with everything on a single page, that's much more difficult.

This is where URL fragments come in handy. If you look at how Gmail and Twitter does it, you will see they change the URL itself as you go to different sections of the app (i.e. when you go to mentions on twitter, the URL would change to twitter.com/#!/mentions. Notice the hashtag "#" that separates the section from the domain. We've been able to use these in the past for anchor tags, so you would scroll to a certain part of the page automatically, now web apps are using them to show which part of an application you're in without actually changing the page. We can use them as well to turn on and off content in our apps, so I put together a small demo showing how.

I'm using JQuery as my main library, but I've also included a second JS file to help me deal with URL fragments called Sammy.js. With just a few lines of code like you see below, sammy.js will listen for URL changes, and take appropriate actions. I'm doing a very simple demo of what it's capable of, but check out the documentation to see what it can really do.

As you can see in the JavaScript tab, we create an instance of the sammy app called app and tell it to run. Now if the URL changes and has one of those URL fragments, the appropriate actions will take place. If you look at the HTML and CSS tabs, you will see it's just a simple setup with a couple pieces of text set to display:none; and 2 links that just change the URL to include the URL fragment. In the Result tab, if you click on either of the buttons, you will see copy fade in. And if a piece of copy was already there, it will fade out. Of course, this could have been accomplished with just simple JQuery and the click event, but we are just scratching the surface with the functionality. Also, now you can send a link with the URL fragment in it, and the correct copy will fade in automatically.

(Note: if you don't see the aforementioned tabs, click the plus sign, which will take you directly to the JSFiddle so you can see all tabs at once. The tabs hiding is due to not having enough horizontal space to display all the tabs, including the Resources tab.)

There is another great JS library called Backbone.js that implements MVC in JS and uses URL fragments as it's controller. Very cool stuff, definitely check it out as well.

This technique should work in most browsers that JQuery will work in, but what if you wanted to be bleeding edge?

This next example replaces JQuery and Sammy.js with pure CSS3 to not only handle URL fragment management, but also the transitioning. (Note, not all browsers support all aspects of this technique, but it was built and tested on Webkit, so Chrome and Safari should work perfectly.)

We accomplish the URL fragment management by using the :target pseudo-class of css. With it, you can target element id's that match the current URL fragment. It's not as flexible and expandable as what can be done with Sammy.js, but it's pretty cool to see what you can do without using any JavaScript at all. And we handle the animation using the transition property if the selected element.

Permalink | Leave a comment  »