Insightful ramblings ... well, ramblings

Pinterest is the hot new social networking kid on the block and of course they have some goodies you can sprinkle on your website to make it easy to share and link your content with their service. One thing you can’t do easily with their Pin button is dynamically update it to reflect changes to content on your page (ie loading in new content via ajax). A perfect example would be an image slider where as you slide across a list of images you want the user to be able to ‘pin’ the currently highlighted image.

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.

If you are using Flash AS3 with Facebook Connect (aka Open Graph) chances are you have run into crossdomain issues when using profile and album images. Following is a list of all the crossdomain.xml files you will need to load in your swf to get around the security warnings.

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

Like most developers I’m constantly reading and learning to keep up with the latest trends and technology. A lot of my energy over the past 12-18 months has been on HTML5 and more recently HTML5 mobile websites and apps. There is a ton of great information available on the web but unfortunately there is also a lot of not so great, and sometimes misleading, info. As a quick resource list for myself and also as a curated list for other web developers making the dive into HTML5 and mobile websites following are some useful and hopefully helpful links.

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.

I still remember as boy hearing that sharks never fully sleep like humans, if they stopped swimming they could drown. They need water constantly flowing through their gills to breath. The idea of a shark never sleeping and drowning sounded ridiculous. How could a living thing never stop moving?

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 been a few months since I last had a blog post which is really not like me. Unfortunately, or fortunately depending on how you look at it, I have been head down on a few big projects, the most exciting of which was helping the team at Welikesmall to rebuild and launch the new Dennys.com website.

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.

I don’t typically write a post to review the past year or glance into the year ahead but I have decided to this year for a few reasons. First, by all accounts this was my most successful year as business owner and independent contractor. It is always a good thing to reflect on what you did so you can hopefully repeat it. Second, some recent posts by Ben Stucki and Jesse Freeman helped to solidify some thoughts that have bouncing around in my skull. And third, a recent Twitter thread about which technology Flash/Flex developers should be considering moving forward. I won’t cover all the details about what I did or what I plan to do, but I will offer up a few nuggets and some food for thought as we head into 2011.

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.

It’s become a common phrase in developer job posts and interviews, “rockstar”. Are you a rockstar developer? Do you want to be the next rockstar developer? What do you need to do to become a rockstar developer? I have no idea how or why developers ever got labeled with “rockstar”, but personally it’s a label I never want and something that when asked for I take as a negative (a recent phone interview led to this post). To me it says the person asking does not understand their target audience … developers. Have you ever seen a posting for a rockstar lawyer, doctor or teacher? Not likely, it sounds ridiculous. So why do people seek out rockstar developers?

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.