When you use the Pinterest button you go to their goodies page and drop in something like this on your page.

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.dgrigg.com&media=http%3A%2F%2Fwww.dgrigg.com%2Fimages%2Fprofile.jpg&description=DGrigg.com%20specializes%20in%20the%20development%20of%20interactive%20websites%20and%20web%20based%20applications.%20I%20believe%20it's%20not%20what%20you%20know%2C%20it's%20how%20fast%20can%20you%20learn%20it.%20Working%20closely%20with%20my%20clients%20demanding%20projects%20get%20done%20on%20time%20and%20on%20budget." class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>


<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

To get a basic Pinterest button like this

And it gets replaced by an IFRAME to handle all the Pinterest pining. The problem is the javascript file only runs when it is first loaded into the page and there is no built in way to refresh the IFRAME to handle content changes on the page. What you need is dynamic Pinterest button. Thankfully with a little javascript that is exactly what you can have.

refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('div.pin-it').html(html);

    //remove and add pinterest js
    pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    pinJs.remove();
    js = document.createElement('script');
    js.src = pinJs.attr('src');
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

Essentially what you do is wrap the a tag that Pinterest gives you in a div with a class of ‘pint-it’.

<div class="pin-it"><a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.dgrigg.com&media=http%3A%2F%2Fwww.dgrigg.com%2Fimages%2Fprofile.jpg&description=DGrigg.com%20specializes%20in%20the%20development%20of%20interactive%20websites%20and%20web%20based%20applications.%20I%20believe%20it's%20not%20what%20you%20know%2C%20it's%20how%20fast%20can%20you%20learn%20it.%20Working%20closely%20with%20my%20clients%20demanding%20projects%20get%20done%20on%20time%20and%20on%20budget." class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>

Whenever you want to refresh the Pinterest button, call the javascript function and it creates a new Pinterest button link, replaces the iframe in the div with the new link and then reloads the pinit.js file to get the iframe recreated. Enjoy.

Edit: updated code to include pinJs variable that was left out, thanks Chad for the catch.

For those of you looking for specific steps on how to implement this.

Step 1

Place a Pinterest button on your web page wrapped in a div that has the class pin-it.

<div class="pin-it"><a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.dgrigg.com&media=http%3A%2F%2Fwww.dgrigg.com%2Fimages%2Fprofile.jpg&description=DGrigg.com%20specializes%20in%20the%20development%20of%20interactive%20websites%20and%20web%20based%20applications.%20I%20believe%20it's%20not%20what%20you%20know%2C%20it's%20how%20fast%20can%20you%20learn%20it.%20Working%20closely%20with%20my%20clients%20demanding%20projects%20get%20done%20on%20time%20and%20on%20budget." class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>

Step 2

Include the Pinterest hosted javascript file somewhere on your page, preferably near the closing body tag.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Step 3

Include this javascript somewhere in your page and call it when ever you want to refresh the Pinterest button to point a some new content.

refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('div.pin-it').html(html);

    //remove and add pinterest js
    pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    pinJs.remove();
    js = document.createElement('script');
    js.src = pinJs.attr('src');
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

Any div with the class pin-it will get replaced with a new Pinterest button that will link to the new values passed to the refreshPinterestButton function. You could tweak the refresh function so select only a specific div if you need.

Security.loadPolicyFile("http://graph.facebook.com/crossdomain.xml");
Security.loadPolicyFile("https://graph.facebook.com/crossdomain.xml");
Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");
Security.loadPolicyFile("https://profile.ak.fbcdn.net/crossdomain.xml");
Security.loadPolicyFile('http://profile.cc.fbcdn.net/crossdomain.xml');
Security.loadPolicyFile('https://profile.cc.fbcdn.net/crossdomain.xml');
Security.loadPolicyFile('http://fbcdn-profile-a.akamaihd.net/crossdomain.xml');
Security.loadPolicyFile('https://fbcdn-profile-a.akamaihd.net/crossdomain.xml');
Security.loadPolicyFile('http://fbcdn-sphotos-a.akamaihd.net/crossdomain.xml');
Security.loadPolicyFile('https://fbcdn-sphotos-a.akamaihd.net/crossdomain.xml');
Security.allowDomain("*");
Security.allowInsecureDomain("*");

Good luck and enjoy

Mobile HTML5 App Development

• Mobile Design and Development – Practical Concepts and Techniques for Creating Mobile Sites and Web App
• Anatomy of an HTML5 Mobile App – thinking through mobile HTML5 development strategy
• JQuery Mobile – touch-optimized web framework for smartphones & tablets
• Mobile Boilerplate – a best practice baseline for your mobile web app.

Responsive Web Design

• Responsive Web Design – build once, display everywhere
• Responsive Design Test Bookmarklet – simulate various screen sizes

Offline HTML5 development

• Go offline with application cache – excellent article on using offline caching
• Building an Offline Mobile Web Application – how to build offline mobiles apps using HTML5

General HTML5 Info

• Dive Into Html5 – great introductory ebook on HTML5
• HTML5 Doctor – handy HTML5 reference site
• Can I Use? – Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Unfortunately the same fate awaits developers who stopping moving forward and progressing. In many careers you can hit a plateau and decide to stay there (see public employee). Developers, at least the ones who want to stay employed, do not have that option. Technology changes too fast. Stand still for more than a little while and you become obsolete, dead to the technology sector. It takes a little progress just to stay in the same place, it takes dedication, effort and hard work to stay alive for a prolonged period. Having spent the better part of 15 years in the technology/internet industry I know this is a fact.

So how does a developer keep up, stay relevant and not suffer the fate that so many others have? It’s simple, keep moving forward. If technology is constantly moving forward and you stop moving, it’s not long before you are left behind. So how does a developer move forward? Again it’s simple. Keep learning.

Read anything

Blogs, documentation, how to’s, wikis, it doesn’t matter. You most likely won’t remember a lot of what you read, but nuggets will stay lodged in your brain and you will be exposed to ideas and concepts you might not otherwise have come across. Reading is much better than watching a video or listening to someone explain something, it takes more effort and work on your part and that effort results in better memory retention (not water retention).

Write something

The inverse of reading is writing. Write about what you read, what you work on, how you solved a problem, how you stumbled across something ground breaking (that ten other people already discovered). Writing makes you think through things and consider how other people will digest what you write. It makes you, or at least it should, double and triple check that something works the way you write it should, especially if it’s your own code. Writing about something helps you to gain a better grasp on the topic, and a better understanding of how much effort other writers put into their work.

Know enough not everything

You’ve probably heard the phrase, “jack of all trades, master of none”. In many walks of life this a bad thing, for internet developers it’s a necessary evil. You can’t be a one trick pony. Most development work involves a technology stack, not “a” technology. Even within a team environment where there are specialists for certain streams of development, most members have/need some knowledge of the other streams.

Have a core set of technologies you master and then surround those with a complementary set of skills and technologies that you’re good at. For most work, “good” is good enough. As technology changes and evolves some of the core stuff may fade away and some of complementary skills may need to become core skills. The key is being able to identify when it needs to happen. For Flash developers it was early 2010 when HTML5 jumped into the spotlight. The one trick ponies freaked out, cried the sky is falling and prepared for the worst. The savvy developers read up, experimented, honed their skills and now have more to offer their clients and employers.

Take on projects you can’t do today

What? It sounds like a recipe for disaster but it is actually a recipe for success and growth. If you know you can learn quickly, challenge yourself by committing to projects that will force you to learn. Having a fire under you is a great motivator to figure something out and make sure it works. It also promotes ulcers if you can’t handle stress. Doing sample projects is great to get your feet wet but a real live project with deadlines and deliverables is where the real learning will happen. Why do you think militaries have live ammo training?

Failure is not an option

Actually it is but who wants to be a failure? No one. Don’t let failure scare you, learn from it. Go into a project planning to hit it out of the park, but don’t cry when you strike out, make adjustments for the next time you are up to bat. Own up to your failures. You broke the build, screwed up the server, accidentally deleted the backup. Stuff happens, own it, learn from it and move on. If everyone succeeded at everything they did the first time life would suck. Accepting failure and expecting failure are two very different things. Understand the difference and steer clear of the latter. Part of the learning process involves failure so get used to it.

Keep swimming

So there you have it, one key to not becoming a dead shark and four keys to not becoming an obsolete developer: keep moving, read, write, stretch and fail.

Apologies for the heavy reliance on cliches and metaphors.

It’s a pretty big departure from their previous site and after visiting it I’m sure you’ll agree it’s not your average restaurant site. The site uses some pretty advanced javascript and css tricks and runs on a .Net backend with a custom CMS (which is where my skills were used). It had been a few years since I last used Asp .Net and at first I was quite hesitant to jump back into it, awful memories of VBScript web forms were still lingering my head. Fortunately we were able to use Asp.Net4 with MVC3 which is a thing of beauty compared to .Net2.

Hopefully in the near future I’ll be blogging a little more about using Asp.Net4 and MVC to build out web apps and websites. After many projects using PHP it was a refreshing change to trying something different. Visual Studio made development a lot less frustrating and it has some really nice features to speed up and aid development.

I guess I need to update my about page to include .Net, the learning never stops, but neither does the fun.

Sweet success and a little history

This past year was my fifth year as a full time independent contractor/consultant and my tenth as a business owner. In 2000 I started a basic sole proprietorship for web development. The first five years were spent as a sometime full time employee, sometime contract employee, never quite fully engaging in complete self employment. Five years ago I made the jump into full time self employment and have not looked back. For each of the past five years revenues have increased by at least 25% from 120k in the first year. These number are pretty much on par with what Jesse outlines in his post and Ben has seen in his first year of business. I worked with a number of companies on a wide variety of projects, everything from HTML/Javascript websites to mobile Flex applications and a web based Flex application for managing PBX based phone systems to mentoring a 60 something retiree who wanted to get back into development. The first few years of contracting were almost 100% Flash and Flex, the last few years have seen that number to drop, now it is probably around 60%.

The most vivid moment for me in 2010 was Apple’s decision to not support Flash on their ‘i’ devices. The Flash haters showed up in full force and too many Flash devs started crying about the sky falling. My bread and butter is Flex and Flash development so it was a kick in the teeth to hear about Apple’s plans, however I’m not a one trick pony so I tried to find the opportunity in what was likely a shift in the web development landscape. First and foremost I am a web developer, client and server side. I’m not language dogmatic, for me it’s always about keeping it simple and using the right tool for the right job. Sometimes that is Flash, sometimes it’s HTML and JQuery, I can roll with PHP, Coldfusion, ASP or something new if the need arises. In the years ahead it will more likely than not be HTML5, I’m fine with that.

The other standout thing from 2010 for me was reading Rework. It was a great read on business ideas and concepts and really made me think about how I operate my business and how I could do things differently.

Seeing the glass half full

The reality is web development work is not going away anytime soon. There is still a ton of lucrative work out there you just need to look for it and be willing to get outside of your comfort zone. For me it’s not about what you know, it’s about what you can learn and how fast. As a developer when you stop learning you are dead. If a fish doesn’t swin, it can’t breath, it dies. It can NEVER stop swimming. A developer should NEVER stop learning. I can not stress that enough. Being able to learn and learn quickly has likely been the single largest key to my success. Don’t run away from the unknown, charge at it head on and crush it.

The way I see it Flash and Flex developers are actually sitting in a pretty good position. If you have matured with Actionscript from AS1 up to AS3 you should be able to easily jump into Javascript (and JQuery) without difficulty. Mobile will offer a lot of opportunity for you to create Flash and Flex apps to deploy across a multitude of devices and again, a solid grasp on AS3 should allow you to easily tackle Java or Objective C. I think the reason so many Flash people got up in arms over Apple’s decision was their fear of the unknown. What would the web look like without Flash and what would they do for work? The reality is Flash is not going away anytime some and if anything it was a good wake up call to add something new to their developer tool set.

2011, 365 days, 8760 hours

For me 2011 will be starting off with an eclectic bang. I have projects lined up into March (which is always a nice feeling): a website, a mobile site, some Flash work and some maintenance on a Flex app. I have also grabbed some good reading material to start off the new year with (never stop learning) .

My goals for 2011 are simply stated: increase business by another 25%, roll out a SaaS idea I have been working on and start contracting out some of the work I take on. One thing I have learned in five years of business, time is finite. You can work all you want as hard as you want but at the end of the day, a single person only has ‘x’ hours to work. As a one man shop, time is the single biggest limiting factor in how far I can take my business. For me to grow any further I need more time. I need to get other people’s time to work for me since I have maxed out my time and I need to find a way to generate revenue that is not tied directly to billable hours. That is nothing new, any business owner quickly realizes this, however as an independent contractor, I have long fought the need or desire to add more manpower, instead I choose to maximize my time. It took me a few years to feel like I had reached that point, and I purposely pushed past it, in order to make sure adding more manpower was absolutely the right thing to do.

There is a lot more I wanted to say in this post but I think instead I will wait and flesh out the ideas more for some future posts. Here’s to a great 2011.

To me a rock star infers celebrity, partying, passion, an entourage, creativity, self promotion, late night benders, and self destructive behaviour. A few of those traits are certainly things that you would want any employee or contractor to have, passion and creativity to be specific, the rest you could do without. Rockstar does communicate being at the top, but does it mean the best? Are Morzart or Beethoven considered rockstars? Does a rockstar really make the best music or do they simply garner the most hype and attention? If you are hiring a person to develop mission critical software or a flagship website for your company do you really want someone with the traits or behaviour of a rockstar? No? Then stop asking for it.

First and foremost I’m a professional web developer. I take great pride in my work, my education and the effort I put into whatever I set my mind to. It’s my business, my livelihood and my passion. To me it’s a slight to be asked if I’m a rockstar developer. Why not ask if I’m a code monkey while you are at it?

Quit seeking rockstars (and ninjas, which is even more absurd). Look for professional, pragmatic and passionate developers.

You can find all the source code for the samples and build script on github.

Here are the links mentioned at the end of the presentation.

• http://opensource.adobe.com/wiki/display/flexsdk/Hero
• http://opensource.adobe.com/wiki/display/flexsdk/Mobile+Application
• http://labs.adobe.com/technologies/air2/android/
• http://www.openscreenproject.org/
• http://developer.android.com/sdk/index.html
• http://developer.android.com/guide/practices/ui_guidelines/index.html
• http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
• http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

For those of you who were present, 10 out of 11 demos worked perfect, number 11 died when I tried to run the debugging. I forgot to add the 'android.permission.INTERNET' to the application descriptor, my bad. You can find it in the source code.

My presentation will cover:

• size considerations
• user interactions
• device capabilities and how to access them
• optimization
• demos
• using the Android SDK tools

Check back soon for the presentation slide deck and demo sample code.

The first two components I have reworked are the List and DropDownList, both are virtually unusable in the standard format on touch devices.

The standard List component is not swipeable so the first goal was to add the ability to swipe up/down to scroll the list. Creating a custom scroller class made that possible. The next step was reworking the list to prevent selections on mouse down events. What you don't want is a list item to be selected every time you touch the list to swipe it. This was a little more involved and required some hacks to get at private methods and properties of the List and BaseList classes.

Creating a replacement for the DropDownList was a small leap after getting the swipe list working. It's essentially a text input and button that you can assign a dataprovider to. When you click the button, a modal window is opened with the swipe list. Select an item, click OK and you're done.

You can get the source code on GitHub, enjoy.