By Paul Scanlon

Voices of Gatsby - Looking for The Lighthouse

Loading...

Gatsby believes in cultivating inclusion and elevating the many members of our diverse community. Our new Voices of Gatsby series, publishing every other Friday, showcases and celebrates our users for who they are as they share stories from the tech life. True tales from the front lines, personal accounts of each of us came to be where we are today. Got a story to share? Visit the Voices of Gatsby info page to learn more and connect with us! Accepted submissions pay a $500 authorā€™s fee, because we recognize the value of writing whether itā€™s words or code šŸ’œ.

Hi Iā€™m Paul šŸ‘‹ and Iā€™m what some might describe as ā€œold in techā€ since Iā€™ve been working in and around the internet for a fair amount of time. Since 2016 Iā€™ve been building React applications and component libraries for big corporations, but I havenā€™t always worked in tech.

I started out in digital advertising. For the best part of a decade I designed and developed websites, online campaigns and digital out-of-home experiences for some of the UKā€™s top advertising agencies and brands. I even picked up a few awards along the way including (and this is the truth!) a BAFTA for ā€œdigital creativityā€ for my companies role in Channel 4ā€™s Humans (Persona Synthetics campaign) šŸ•ŗ

Beginnings

My first job after graduating University (circa 2005) was with a small web agency called ward404, now defunct. The agencyā€™s primary work was to create fun and engaging online experiences to help promote acts and artists for top record labels such as EMI, Virgin and Warner Music. My role as a Flash Designer / Developer required me to think on my feet. The ā€œbriefā€ (advertising lingo for the agreement between agency and client on the objectives for the advertising campaign at hand) was the single or album artwork, commonly known as a ā€œpackshot.ā€ Most of the time the packshot was a flattened .jpeg image file; sometimes we got lucky and were supplied a layered .psd (Photoshop) file. Using that, weā€™d work alone to conjure up ideas, designs, and animations to create interactive experiences that would entice users into sampling the audio and pushing a point of sale, usually an iTunes link.

My second job was with a much more established advertising agency called M&C Saatchi where the budgets and scope for creativity were much much larger. The briefs were more structured and itā€™s here where I honed and sharpened my concept, design and development skills. During this time I won a D&AD for my involvement with RNIDā€™s 1-7 Campaign which at the time (circa 2010) was unheard of because developers didnā€™t win awards -šŸ•ŗ

Following a number of promotions I decided the time was right to flex my creative muscles with other UK advertising agencies. I became a freelance consultant and worked at BBH, RKCR Y&R and TBWA (Appleā€™s ad agency) to name just a few. Some years later (when I was supposed to be on holiday) I accidentally started my own digital advertising agency Super natural, from my kitchen. Eventually that grew to a team of ten ā€” by then we had offices, we werenā€™t all in my kitchen! Further awards ensued but after five years I hung up my business owner hat and returned to freelance consulting ā€” only this time in tech.

Lessons Learnt

Lessons I learned during my adventures in advertising, though, have helped me a great deal as a frontend developer. Itā€™s entirely possible to use next level tech whilst still being creative. But it does require a processā€¦ and i donā€™t mean Agile.

Whether Iā€™m building complex React applications or fun side projects my process still broadly follows the same working processes I established back in my advertising days. Itā€™s particularly useful for personal projects where you start with only an idea and thereā€™s no pre-existing path forward. The workflow iā€™m about to describe is effective because it encourages a bit of upfront thinking and planning before diving into the part we as developers are always keen to start withā€¦ the code itself. But if you do the up front due diligence, I find the coding part flows so much better.

There is one core piece to this approach: Vision. Remarkably, only recently did I discover that not everyone has this. The best example I can use to help explain how I work is what I call The Lighthouse.

Iā€™m in the ocean and I can see the Lighthouse. I know what a Lighthouse is and I know where it is. The waves may be tossing me about, I might not be able to get to it just yet, but I know itā€™s there and I know that if I continue to swim in the right direction Iā€™ll reach it.

Thatā€™s the key: Before I really start any project I need to see the Lighthouse.

To demonstrate this in a more tangible way iā€™m going the explain the steps i took to create BumHub ā€” my (first place) entry for Gatsbyā€™s 2020 Silly Site Challenge ā€” šŸ•ŗ

The Proposition

Iā€™ve witnessed so many projects go downhill because the first thing everyone wanted to do was write code. To quote Abraham Maslow:

ā€œI suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.ā€

If youā€™re a developer the first thing youā€™ll naturally want to do is write code. But I urge you to put down the hammer and have a bit of a think first. Just a small one, because thereā€™s really only one question: What exactly is it Iā€™m trying to achieve?

In the case of BumHub my ā€œend goalā€ if you like was as follows:

As a self-employed Jamstack developer based in the UK I wanted to raise my public profile (Twitter) and position myself as a Gatsby / Jamstack specialist both here in the UK and with a bit of luck across the pond too.

To achieve this I planned to develop BumHub in public, Tweet and blog regularly about my progress and demonstrate some of the newly released / cutting edge Gatsby tech. As a bonus, The Silly Site Challenge gave me an opportunity to show my personality ā€” the fun part that I kinda lost when making the move from advertising into tech. šŸ˜„

In advertising terms this is known as The Proposition. Typically a brand / client will outline the ā€œend goalā€ before the advertising agency begins the creative process.

Now that Iā€™ve identified what it is Iā€™m trying to do I can begin to develop creative ideas. This is ultimately what led me to what you see on BumHub.

I can see the Lighthouse

But before I commence swimming thereā€™re a few more things I need to address. Again I lean on my advertising days and begin to dissect the proposition some more. Hereā€™s some of my actual notes from when I was working it all out.

  1. Define the creative idea: Silly Site is all about fun and whatā€™s sillier than a Bum? A bum speaks to all audiences because everyone has one but it needs to be fun, the look and feel should also be sillyā€¦ šŸ¤” Iā€™ll need a cartoon illustrator to help with the Art Direction.
  2. Technical application: Gatsby recently announced the new and improved Routes API. Whatā€™s my angle going to be? I donā€™t want to regurgitate the documentation, I need to demonstrate its use in a way that no one else has yet. They say in the docs you donā€™t need to touch gatsby-node.js ā€¦ so I will touch gatsby-node.js and Iā€™ll need a data source of some kind to create content to put on the routes. I donā€™t have time to write loads of content, letā€™s make it programmatically generated!
  3. Outline the approach: To develop in public Iā€™ll need to show progressā€¦ how might I do this without making progress (I have a day job)ā€¦ can the code show auto-progress?ā€¦ Itā€™s December, Advent Calendars progress each day, code can do that too. Iā€™ll update a blog post less frequently but with more significant information. Do some teasing on Twitter, show visuals of the bum illustrations?

I wonā€™t go into any more detail about BumHub, but if youā€™re really interested you can read the full write up with more information about my production process on the Gatsby Blog. I would however like to point out that by this point, almost two weeks into the project, I still hadnā€™t written a single line of code.

Perhaps consider it as a pre-process step, the bit you might miss when starting anything new. My personal approach has been modified and tailored to suit my needs and is the product of many years of doing what I do. Yours will most likely be different, particularly in the specific execution details. But getting started should look the same for both of us: first, identify your Lighthouse.

Conclusion

I know from painful experience that this kind of approach is seldom followed in tech. On any given contract Iā€™m governed by whateverā€™s in the current Jira ticket. Worse still, though, iā€™ve worked on projects that literally have no end goal. Seriously: Even the bigwigs at the top of the chain donā€™t really understand where the project is heading or how to get thereā€¦ And itā€™s such a shame. Unfortunately, when I am on a job, I have to work the way the job works.

But I donā€™t want to manage my personal projects or personal growth in the same scattershot way! I like process, I like structure and I always try to evaluate what Iā€™m doing before I try to do it. And, no matter how off course Iā€™m pushed, so long as I keep the Lighthouse in sight Iā€™m still able to swim in the right direction.

Perhaps this has been instilled in me by my family who will regularly cite the ā€œmeasure twice ā€“ cut onceā€ mantra. I have certainly reaped the advantages of taking this approach. I did for many years in advertising and will continue to do so wherever I can in modern day tech. Maybe you can give it a try, too?

I hope youā€™ve found this helpful and maybe in your next project youā€™ll try to see your Lighthouse.

Lemme know how you get on.

Hey!

Leave a reaction and let me know how I'm doing.

  • 0
  • 0
  • 0
  • 0
  • 0
Powered byNeon