Step 1: The Facebook Debugger

This is all fine and dandy and you'll find that Facebook will pick up the image pretty much from the get go as soon as someone shares your link on Facebook. However more often than not you will need to go to the Facebook Debugger page, type in your url and hit debug in order to force Facebook to pick up the image.

I would go as far as saying that you should make this part of your routine. The debugger is a surprisingly useful tool and will give you a good indication as to what users will see when they try to share your page. The most useful trait that the debugger offers though isn't telling you were you've gone wrong, it's actually simply allowing you to make changes to your meta. Allow me to explain...

When Facebook first picks up your meta, be that when someone shares your link or you manually enter it into the debugger, it gets immediately cached away on Facebook's CDN. The idea being that when person number 2 comes along to share the link, it will already be cached and therefore the delivery time of the image, title and description will be much faster. It's a sensible idea for the end user, but for the content creator it's a complete pain in the rear.

If you make an emergency change to your meta, perhaps a spelling mistake or you need to quickly change the supporting image, it won't be automatically picked up when the next person shares your page. It will always share the cached version. However you if you go back to the debugger and hit "Fetch new scrape information", it will pull in the new version for you.

Sadly though for a variety of reasons, most of which relate to Facebook's network, this doesn't alway apply. Sometimes, just sometimes, you need to give the debugger a little boot up the backside in order for it to pick up your new images. No matter how many times you check your code, you can be providing exactly the correct information and Facebook's cache will still refuse to change the image for you. Which brings me to...

Step 2: The boot up the backside

This method can help to force the debugger to re-cache your meta, however if you read around different tech forums you'll see an approximate 50/50 split on whether it actually works. I've found out of personal experience that sometimes it works and sometimes it doesn't (no help I know), but it's a quick fix if it does.

Go to the debugger and type in your page url, with the following variable tagged onto the end of it...

fbrefresh=CAN_BE_ANYTHING

If you're not sure how to do this, here's a couple of examples for you to chew on...

Don't forget to "Fetch new scrape information", otherwise you're still looking at the cached version.

If at this point you're still seeing the old cached version, by now you're probably pulling your hair out in the following manner...

...but don't worry, there's a simple yet inelegant solution...

3. The simple, yet clunky, solution

Rename your image.

I told you it was simple and clunky. Sue me.

By renaming your image and changing the image name in your Open Graph meta, Facebook's scraper will immediately pick it up. It's not ideal I know, but even simply adding a "2" to the end of your image name will solve the problem. Personally I absolutely hate this because I like my image naming conventions to be accurate and obvious, however if you're preparing for launch and this is the only issue left to solve, it will work.

As per usual, if you know of another way to solve the problem please do let me know in the comments below and I'll add it to the post! Happy coding!

Firstly, a quick grumble about unnecessary use of Tumblr to create full websites. A Tumblr Grumble if you will. A Grumblr.

Anybody who has ever worked with the Tumblr platform will understand when I say that it is extremely limiting and more often than not a developer's nightmare. However sadly due to it's social shareability (is that even a word?), it's a platform that is increasingly being adopted by major companies/agencies as the go to web tool. In fact, there even appears to be a trend where creatives are using Tumblr as a glorified CMS for "standard" websites, as inexplicable as this may be.

This bizarre usage is hard to believe considering how well constructed the Tumblr API actually is. It's the equivalent of hacking a Facebook page to look like a full-blown website, just because you wanted to take advantage of Facebook Connect and social posting. It makes no sense at all. You would be much better off creating a clean coded, responsive website that utilises the Tumblr API to share your content. Keeping the code away from the Tumblr platform allows you not only to keep your code semantically clean (and therefore search engine friendly), but also allows you the flexibility of normal web development so that you can experiment with entirely new techniques of social sharing.

However this currently appears to be lost on the agency world. Sadly this is one of those moments in time when developers have to suck it up and wait for others to catch up and realise the futility and time cost. Something that we appear to have to do every 3 or 4 years alongside new technology trends.

If you're reading this post as a non-developer, ask yourself this... would you tell a painter what brush to use? Would you insist that an electrician use a particular size of screwdriver? Would you limit a chef to a single vegetable because you've been told by friends that it's the best vegetable available? Of course you wouldn't. You would respect that they know what they are doing and will provide the best possible result for you based on your requirements. Hopefully one day developers will achieve this respect too.

Now, grumble over, lets get down to hacking the hell out of Tumblr to get it to do what our clients would like it to do...

First things first, let me stress that all of the hacks that I'll post here are going to be just that - hacks. If you're looking for clean code, you're not going to find it here. The cleanest way to develop a full website using Tumblr is to turn off all Tumblr functionality and deal directly with the API's JSON output. If you have the time, click here for more details about the API and use something like Angular, Ember or Handlebars to bring your content to the page. But if you've found yourself in a position where you're dealing with a pre-built template and you simply need to hack together some unique page styles this is the place for you.

The challenge:

Tumblr allows you to create individual pages to support your posts, but doesn't allow you to give them individual styles. Tumblr also doesn't provide you with a unique page ID, no matter what this page appears to tell you. What Tumblr does do is offer you a page "block" that represents all pages and therefore when styled gives you a similar style for every page. Tumblr will strip out any <style> tags that you add to an individual page, so individual inline styling isn't an option either. Finally, Tumblr doesn't allow for server side code... so how the heck are we supposed to tell them apart so that we can style different sections?

The solution:

The solution is simple but dirty...

Step 1:

Create your page styles in an external stylesheet and any supporting javascript in external js files and upload them using the assets manager. If you're not sure how to do that, edit your theme and click on the top left cog followed by "Theme assets"...

Then click "Add a file" and import your CSS/JS files. Once they are added, click on them to get their direct tumblr URL so that you can include them in the <head> of your theme.

Step 2:

Add a new page using the following button that can be found at the very bottom of your theme's dashboard...

Step 3:

Stick to the "Standard layout" offered by the drop down - this will preserve the other core theme elements for your site, such as top bars, side bars and navigation etc. If you were to select "Custom layout" this would give you a completely blank page to start coding with, but you would be forced to repeat navigation elements etc which is to be frank, is a complete pain in the arse. Instead, select the <HTML> button on the layout bar and start coding your page here.

Step 4:

You can add your unique page styles onto your divs as classes/ids here, however if you want to create unique functionality (parallax pages, galleries and such like), you're going to have to add a <script> tag into this html box (complete with document listeners if necessary). Speaking from experience this does work like a charm, but the dirty bit is that you're likely to end up with more than one $(document).ready type function if you've already got one in place for the main theme. This is sadly unavoidable using this method. However...

Possible alternative solution:

If you want to try and make it a little cleaner, you could experiment with creating a script tag as follows:

<script>varpageID=1;
</script>

...and then have your main theme document ready function search out the page ID and apply the code as necessary. I'm yet to experiment with this method (it literally just came to me as I was tapping out this post), but if it works then I guess it would be a considerably cleaner option than repeating a document ready function. Still not ideal though I know.

As per usual I'm completely open to new suggestions on these things, so if you have a better solution then please let me know! Best of luck and know that I entirely sympathise with you having to have even googled this in the first place.

In 2013, after foolishly accepting a challenge to cycle the London to Brighton bike ride, I scraped myself off the sofa, prised the xbox controller out of my hand and sat on a bike for the first time in over 25 years. Within a few months I went from being in constant pain, to regularly riding 50+ mile rides around the Kent countryside and enjoying every second of it.

In 2014 I accepted another challenge from the same friend, this time to cycle in the RideLondon 100 - a gruelling 100 mile epic which includes the infamous Box and Leith Hills that featured on the olympic cycling route. It was by far the scariest, yet most exhilarating thing I've ever done and on completing it I was convinced that I would no longer be afraid of any cycling challenge. I now firmly believe that if you put your mind to it, you can achieve anything.

Well, at least that was before I decided to take up cycling across London to work anyway.

January 2015 arrived and I decided to take up my company's kind offer of buying a new bike using cyclescheme so that I could ride into work every day. This was to be my third bike in as many years - I'm now the proud owner of a hybrid, a road bike and a shiny new Dahon D8 folding commuter bike. It seemed like a great idea at the time - keep my fitness levels up, save money on tube rides, enjoy the freedom of riding every day of the week... what could possibly be wrong with that?

Allow me to add a little context. Up until now the majority of my rides have been over 50+ miles, in open countryside, in spring or summer. The Kent countryside at that time of the year is like riding through an Enid Blyton novel, perhaps with a dash of Agatha Christie thrown in for good measure. Although you won't come across many groups of young kids playing with sticks in long shorts, it's not unheard of. It's also not unusual to have to slow down to allow sheep to cross the road or shoo along stubborn cats that have taken up lazy residence in the middle of the road. In fact, it's considered plain rude if you don't say "good morning" to every hiker or fellow cyclist - you're likely to be branded as a tourist with muttered grumblings and sneered at by old ladies.

Ok, possibly a little exaggerated, but in a nutshell Kent in the summer is sleepy and relaxed. A cyclists haven.

London in the winter, isn't.

Here are a few things that I've noticed whilst cycling in London over the last month.

Car drivers are indifferent to you, as long as you don't get in their way.

Pedestrians hate you and will happily step out in front of you no matter what speed you're travelling.

Bus drivers and taxi drivers are actively trying to kill you.

Cycle lanes are actually free car parking spaces.

When it rains the roads become an anything goes, every-man-for-themselves, free-for-all.

Turning right at any junction that isn't a traffic light is affectively like announcing "please aim at me".

Mobile phones and the people that use them, whether walking or in a car, put the fear of God in your heart.

There also appear to be 5 distinct types of cyclist in London:

"Normal" commutersUsually on mountain bikes, hybrids or foldables, dressed for warmth, happy to plod along. Occasional lycra can be spotted, but more often than not they'll be sporting "Hump" fluorescent green backpacks or high visibility jackets.

Lycra-clad Strava over-achieversRacing between traffic lights, weaving in and out of traffic, they will happily scream curses at anybody who gets in the way of their latest KOM attempt.

HipstersNo helmets (usually as they don't want to spoil their hair cuts), riding old crappy bikes (that cost thousands of pounds), they believe traffic lights don't apply to bikes and pavements are for cyclists too. I even spotted one guy reading a book as he rode down the centre of the pavement.

CouriersDonning cycle caps and huge bags, they weave in and out of traffic with one agenda - get there quick. Usually to be found stood on their pedals at traffic lights trying to keep balance on their fixies, or creeping slowly through traffic lights impatiently waiting for them to change.

Boris bikersAs much as I love the Boris Bike scheme, their riders tend to be a real nightmare. No helmets, no control, wobbling in the centre of the road or along the pavement, generally completely oblivious to the traffic chaos they're leaving behind them. Traffic light? What traffic light?

If you develop for clients who insist on full Internet Explorer legacy support, it's very likely that at some point you'll have come across the IE z-index bug. The general rule is that older versions of Internet Explorer won't allow nested elements to be higher in the z-index chain than their parents. So the simple fix is to ensure that you declare the element's "position" and apply higher z-index levels to the parents of anything that you're trying to control the z-index of. For example...

However, sooner or later you're going to run into a situation where you've got an invisible button set above a graphical element and for some unknown reason Internet Explorer still won't allow it to be clickable. On inspection of the element you'll presume that it's a z-index issue because removing the graphic that's supposed to be at the bottom will reveal the button. A logical assumption. At this point, you'll probably also waste a couple of hours googling z-index fixes and such like and your forehead will become red from the constant banging on the desk.

But don't worry, there's a fix! It turns out that Internet Explorer has another "quirk" that manifests itself as a z-index bug, but actually isn't. And annoyingly, it still appears to be present in modern versions of the browser.

Simply put, IE elements must have a background in order for them to be clickable.

You now have two choices to solve your pain and save your hair. You can either apply a zero opacity transparent background to your element OR if you want to be 100% sure and you also don't want to affect the transparency of the contents of your element, create a single pixel transparent gif and apply it to the background. Personally I opt for the later because it's dirty and old school, which pretty much sums up Internet Explorer. Apply it like this...

It's not often that Safari suffers from bugs, but when it does they tend to be whoppers. I recently noticed when performing a CSS animation that as the animation reached its conclusion, the image that I was moving flicked to a low-resolution pixelated version.

Annoyingly the bug only seems to happen in Safari and everything works smoothly in all other modern browsers. However after a quick google search for the solution, it appears to be a wide spread bug over all Apple browsers and so can affect iPads and iPhones as well.

Luckily there's an easy solution. I won't go into detail as to why this fixes it, you can easily find it elsewhere if you google "safari IOS animation bug". It's to do with 3D-transforms, even if you're not using them. Quite simply, here's the solution so you can get on with the rest of your day...

Locate the img in your CSS, not the container it sits in such as the div, ul or ol, then add the following two statements:

At the beginning of this month I made my annual pilgrimage to Brighton to spend three days at the Reasons to be Creative conference. Previously known as Flash on the Beach, Reasons is the most comprehensive and inspirational creative conference in Europe, if not the world. Every year artists, designers and creative developers come together to share their work and it never fails to leave every single attendee feeling satisfied and chomping at the bit to create fresh, new ideas.

Reasons is like an addictive drug. It's exciting, it's relaxing and most importantly it's a shared mind altering experience that leaves you wanting more. Every creative should pay it a visit at least once, but be warned - it's addictive. Every year I think to myself, "just one more...I can quit whenever I want to" and yet this is my eighth year in a row.

I can't stress this enough - if you've never been, you need to make it a priority for 2015. You won't regret it. Whether you're a designer, a developer or simply work in the creative industry, it really doesn't matter, you need to add it to your bucket list because you will benefit.

Reasons is much more than just a speaker-led conference, it's an opportunity to bounce ideas off like minded individuals. But of course, the speakers are world class. Here's my highlights from this year, in no particular order, to whet your appetite...

Tom Muller

With clients including WIRED, Universal Studios and DC Comics, Tom's more recent work has involved working with Ales Kot on the critically acclaimed ZERO series. He also discussed his collaboration with Darren Aranofsky on the graphic novel NOAH. I hadn't seen Tom speak before, but I loved his work and found him incredibly inspiring.

Sara Blake

Sara is a world class New York based illustrator. I’ve seen her a couple of times now and along with her amazing work, I find her entire persona and ethos to be incredibly relaxed and inspiring. She designs fonts, illustrates for billboards and collaborates with people like Joshua Davis.

Gmunk

Best known for his work on Tron Legacy, it's likely that you’ve seen his work before (see the incredible box demo). He bridges the gap between artist and programmer - working on short films, dance collaborations and graphic illustration but then pulling out the hardcore programming skills to create some seriously spectacular works.

Mr Bingo

It's difficult to describe Mr Bingo, he's an artist that makes a living out of combining his dark wit with his drawing skills. Clients including The Mighty Boosh might help explain his style, but you really need to see it for yourself. All in all he's a great artist and a fantastic speaker that makes you realise that you need to stop what you're doing, find what you’re good at and take it to a new level.

James White (aka Signalnoise)

Another personal favourite. Again talking about finding your “thing” and making a living out of it - he’s managed to build a career out of his childhood heroes. Having realised that he was heavily inspired by 80s pop culture, he did lots of side art projects demonstrating his style until eventually people started noticing and began to pay him to do it full time. The two biggest things you’ll know him for are the Drive artwork and the cover of Far Cry 3: Blood Dragon. I can't stress how much I have in common with him and enviously admire his work.

Gavin Strange

My favourite of all of the speakers this year. A really amazing guy and a genuine surprise. Let me be completely honest at this point, I went into his talk because I was massively hungover and having only had an hour's sleep thought that I’d be able to happily doze off during it. My mistake entirely - in one hour my hangover was gone and I was raring to go. It's been a long time since I've seen his calibre of speaker. It wasn’t his work, it was the man. He oozed enthusiasm and inspiration. Every year there's one speaker that stands out clearly as being my justifying reason for visiting the conference...and this year it was Gavin. Find where he's speaking and go and see him, you truly won't regret it.

So that's just a handful of the speakers this year and yet again it didn't fail to charge me creatively and kick my arse into gear. I can't stress enough how much everybody in the industry, designers, developers and account managers alike would benefit from visiting this conference. Don't ignore it, take the leap. Reasons to be creative will be back on the 7th-9th September 2015. Be there.