iamkeir – adventures in digital mischief

Freelance, mantis wrangling, breakdancing, snowboarding, zombie obsessed, raptor loving, kung fu adoring, web developer. From Bristol. [email protected]

[keirmoff]

My experience of Agile

Client: How long will this take?

Me: Hmm, probably 2-3 days

Client: No, in story points

Me: Wha? Oh, erm... 20?

Client: No, it has to be a Fibonacci number

Me: Wha? Er, ok... 5?

Client: Thanks

...2 days later...

Client: Remind us how long this will take?

Me: 5 points!

Client: No, in days - we can't use story points for budgeting

Me: *headdesk*

[keirmoff]

Connect404 - Simpleweb Rusic Hacknight

Last night was another superb Simpleweb hacknight - this time we were hacking away with their social platform Rusic.

What is Rusic?

Rusic is an insanely powerful and flexible web platform for creating socially-powered web apps - complete with social login, voting system, data storage, CRUD, theming, CDN asset hosting and deployment. 

It also uses Shopify’s Liquid templating language and has a superb API so it is both simple and flexible - suffice to say there is little you cannot build with it!

The brief for the hack was pretty open - simply to leverage Rusic in whatever way you could think of.

Our idea

I joined forces with the excellent David Darnes and Rob Rhoades (who, incidentally, was Simpleweb’s first remote hacker!) to build our idea: Connect404.

We wanted to make a 404 Rusic theme that you could have your website redirect to if/when someone encountered a missing page on your website.

The 404 page would then collect the referring URL that led to the missing page and log this 'error' in Rusic, thus turning it into an error log.

Meanwhile, to incentivise the user to submit an error report and make the page more fun/interesting, we decided to create a web version of Connect4.

After logging in via Twitter/Facebook, you can then pick a column to place your token and try to ‘connect 4′. As an added bonus, your social profile avatar and link were added to each token you placed.

We had hoped to implement red/yellow turn taking, real-time updates and animated tokens dropping in, and detecting a win but 3 hours was too tight :)

Behind the scenes, the tokens were essentially just a uniquely styled list view of 'ideas', stacked using flexbox.

You can see a demo of how far we got at connect404.rusic.com, which we were chuffed won us 3rd prize of £40! :)

The competition

There was an amazing turn out and so many innovative uses of Rusic, really highlighting just how powerful and flexible it is.

1st prize went to an awesome automated iOS app builder build in Python, 2nd went to an app that generated music from text - and Adam even began building a Dropbox clone!

Thanks

In closing, just wanted to say a big thank you to Simpleweb and the gang - they really know how to host a hacknight: free beer, soft drinks, snacks and delicious dinner courtesy of George. 

Also, thanks especially to Ben Reid for providing support for Rusic (and dev in general) throughout the evening.

Well done all involved and roll on the next one! :)

[keirmoff]

Today I learned something pretty scary about Google Apps - if your domain expires and is purchased by somebody else, they can takeover your account and gain full access to pretty much everything associated with it (emails, calendar, docs...).

As it turns out, a Google Apps account (not to be confused with a Google Account) is tied to a domain, not a user. Lose the domain, lose the ownership...

But the scary thing is that the new domain owner can use a DNS record to prove ownership and reset your password...

This happened to me today - luckily with an old and dormant Google Apps account that had zero activity.

I began receiving “new sign-in” notifications for this particular account which immediately gave me the jitters.

Then, when I went to login and check “recently used devices”, I found that the password had been changed and I was locked out. Google’s help documentation sent me in circles but I eventually I was able to send an email to support.

Meanwhile, I did a WHOIS lookup on the domain and contacted the new owner to find out if they had any insight. Again, luckily, they were really helpful and explained to me that a client of theirs had bought the domain and wanted Google Apps setup. By following this guide, they were able to takeover the account with all the historical data that was associated:

https://support.google.com/a/answer/80610?hl=en

I can certainly understand a scenario where a NEW Google Apps account would want to be created when a domain changes hands - but that the DNS can circumvent a password in an existing Google Apps accounts seems like a really worrying security vulnerability.

I don’t know about you, but I am having a search through legacy Google Apps accounts and either deleting them or ensuring my auto-renew settings are on...

But seriously, WTF, Google?

Update 27/07/2015: contacted Google about this and they have indicated that it is “expected behaviour”... which is pretty astounding:

We are aware of this situation, and the account was working as intended (as per Help Center article: https://support.google.com/a/answer/43315?hl=en), when you created the Google Apps account using that domain the Google Apps is linked to the domain and if you loose the domain the point 1.3 of the Terms Of Service, is mentioned that: "1.3. Customer Domain Name Ownership. (...) If Customer does not own, or control, the Customer Domain Names, then Google will have no obligation to provide Customer with the Services." (Please check this at : http://www.google.com/apps/intl/en/terms/reseller_premier_terms.html), as I have mentioned we are working to have the security stronger on this cases, but at the moment this is an expected behavior.

I am not sure when “no obligation to provide services” became “allow someone to circumvent the password and gain access to data”.

It does not seem they see this as a significant security concern so I just suggest keeping on top of your domain renewals - or deleting dormant Google Apps accounts.

Update 05/08/2015: contacted by new owners of domain - Google are now threatening to delete their account due to a breach in their security terms... not only is this too late, it just makes the situation worse as the new owners have invested time and, now, data in the new account. Have contacted Google...

[keirmoff]

Styling components within components

When building a pattern library, one of my goals is to write code that is lean and solid but also obvious - as a freelancer, it is key that the code I hand over has a low barrier to entry for future developers.

In particular, I want other devs to be able to quickly and easily recognise situations when changing the style of one component could negatively impact another, without having to go hunting through the library and code.

A classic example is when a component exists inside another component, and needs some overriding, context-specific styles. Where should these styles actually go?

Take, for example, a component called .driver which needs to exist in a modified state inside .header - my particular preference comes in two stages:

Styles that override the .driver are applied via a context modifier .driver--header

Styles that relate to context but do not modify .driver itself (e.g. position) are applied to a context wrapper .header__action

Check out the example pen: http://codepen.io/iamkeir/pen/Nqzjbz?editors=110

With the above, .driver styles are kept in one place, making it easier to see how changes to one variant can affect another. Meanwhile, specific styles for layout that are almost irrelevant to the .driver itself, are kept separately in the .header context.

(Note, I try to avoid 'component collide' where you end up with two seemingly unrelated classes on the same element, e.g. .header__action.driver--header)

This approach is by no means infallible; you still need to be mindful of brittle context styling - but keeping styles in a contextual location certainly gives developers a helping hand in mitigating the risks.

This is my favourite approach at the moment - how do you handle scenarios such as this?

(Hat-tip to @taholder for showing me the merits of obvious code over clever code back when I was a fledgling front-ender)

[keirmoff]

Setting local web server permissions

Many a CMS requires some kind of 'write' permissions for user uploaded files and, when developing locally, I would often lazily bulldoze in with chmod 777... but this is So Not Cool.

Instead, via terminal...

1) Move into project directory:

cd ~/directory/of/site/

2) Add relevant folder/s to web server group:

sudo chgrp -R www relative/path/to/writeable/folder

'sudo' means 'super user' (and will prompt for password)

'chgrp' means 'change group'

using '-R' is a parameter to apply the action recursively, e.g. for directory and all files inside

'www' is web server user (you need to check what yours is)

3) Elevate permissions of group:

sudo chmod -R 0774 relative/path/to/writeable/folder

'chmod' means 'change mode' aka change permissions

'0774' is the octal code for the specific read/write permissions

4) Profit.

Now both you and the web server should be able to read/write from this directory. Obviously use the specific octal code for your needs.

[keirmoff]

To Bootstrap, or not to Bootstrap?

Reading time: 5 mins

Back in June, I was working closely with another designer/developer on the front-end build of a sizeable website, when we came upon a tricky hurdle: a request to use Bootstrap.

For this particular project, we both felt that Bootstrap was not the best way forward, and wanted to understand why the request had been made and what we could do to recommend otherwise.

The below is taken from an email discussion I had with the other designer/developer, prior to discussing with the client - and which I thought might provide a useful insight not only for dev teams, but also clients when it comes to making decisions regarding the use of frameworks.

-- email starts --

INTERPRETATION

1) The code provided for the previous build of the site had created additional and on-going work for the in-house team with regards to browser/device support.

2) They are keen to avoid this happening again and believe Bootstrap could help prevent so.

3) They find Bootstrap reassuring because it is well-tested and appears predictable, reliable and robust - and has detailed documentation.

RESPONSE

So, as you said, we need to reassure them that our approach will deliver good, solid, reliable code that will not cause problems for integration and support.

1) Fit for purpose

I think it would be good to show some examples of style guides and pattern libraries to demonstrate that our approach involves creating a bespoke f/e framework that is fit for the specific purpose. This is aligned with the goals of Bootstrap - except ours should be leaner, faster and simpler.

2) Code quality

Whilst we will not have time to create exhaustive documentation, like Bootstrap, we will be providing developers notes and liberal code commenting which, coupled with the use of BEM (which Bootstrap does not use), will mean the code is easy to understand. My approach is heavily geared towards clarity for future development/developers - both front-end and back.

3) Compatibility

The browser support offered by Bootstrap is really not any wider than any good developer should aim for - so we will be aiming for a similarly high level of compatibility and quite possibly more. In particular, our compatibility will be further informed and led by stats from the previous site.

Whilst theoretically Bootstrap gets us off to a flying start with browser support, a good developer is conscious of this from the outset and, because the code is likely to be slimmer and more specific to the project, bugs can be more easily identified, understood and fixed.

It is also worth noting that whatever approach/framework we use, there will always be some level of custom code that requires the same level of testing, especially across mobile devices.

4) Flexibility

We also need to make it clear that the convenience and predictability of Bootstrap for developers is not necessarily in the best interests of design, front-end or, most importantly, the end user.

Bootstrap is very opinionated and may require us to heavily customise and reverse engineer aspects of it - or simply deviate from it entirely for much of the build. This could result in slower progress in development and bloated, poor performing code for production.

The alternative is keeping more aligned with Bootstrap's opinionated UI patterns which could lead to restricted design choices and 'Bootstrap clone syndrome'.

With regards to the in-browser, agile design/dev process proposed, flexibility is of utmost importance. Bootstrap simply does not offer us this.

For example, I would intend on using a grid system that delivers fixed-width rather than responsive in IE8 to avoid the (albeit small) JS overhead of respond.js.

This is just one of the many decisions about implementation and performance that a flexible, bespoke approach will allow. Bootstrap will already have an 'opinion' on things such as this which may not be aligned with the requirements of the project.

5) Risk

The unknown risks of a framework present the most significant worry because so much has already been assumed and built. Admittedly, there are inherently more unknown risks with a framework when the developer/s do not know it intimately.

Will it be flexible enough? Will it result in reverse engineering? Will the code be less performant? Will the site end up looking like yet another Bootstrap site? Will it slow progress rather than speed it up?

I cannot predict or negate these unknown risks - however, when coding from scratch, a much greater and more intimate awareness of risks can be cultivated, and greater freedom/flexibility is offered to counter them. I have many years of experience informing this statement - but I do not have the same experience and confidence using Bootstrap.

6) Experience

I am a front-end developer of 12+ years and my experience and instinct is telling me that Bootstrap is not the best way forward for this particular project.

This is based on the knowledge I have gained in my career, on having used Bootstrap in the past, and on what I have seen of the project, design and timeframe.

This topic is, of course, subjective and the finer details of a build can often only be known in its undertaking. However, in my personal experience, frameworks can limit the flexibility we have available to adapt to issues from all disciplines (design, build and backend).

QUERIES

Will what you provide be 100% cross-browser?

We will test x-browser/device based on the analytics. 100% is a not a realistic goal, even for a framework. There are too many browser, operating system and device combinations to ever deliver such. Instead, we will take an approach of progressive enhancement and ensure that the site is as usable as possible even when certain technologies are unavailable. When it comes to testing, the level of support depends on the time available to spend on quality assurance.

Will you provide updates / fixes for browser incompatibility as and when new browsers are released / issues discovered?

Depends on service level agreement. No code is future proof (inc. Bootstrap) and not code is infallible (see previous answer). We would always aim to discover and fix as many bugs as possible for delivery, but this will never be watertight - with or without Bootstrap.

Bootstrap (or other such third party libraries) are robustly tested to a degree that is hard to match with something custom especially across mobile devices?

Yes, so long as we do not deviate from the Bootstrap UX/design/patterns. Customising, expanding and adding to any framework will require the same level of testing (see points 3 and 4).

I guess we’re bootstrap neutral as well so what I’d like to understand more is what we would be using instead?

- We will be creating a bespoke framework that is fit for purpose.

- It will make use of standardised coding conventions outlined by BEM (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) and SMACSS (http://smacss.com/)

- The code will be focus on leanness, performance, compatibility and clarity, with specific consideration for both backend integration and future development.

- Sass and jQuery will be used to supercharge the development of CSS/JS.

- The build will be highly modular, allowing for components to be tested in isolation and highly reusable.

We’d always opt to build onto a third party (open source) framework where we can, because you have a greater level of compatibility with less risk.

See previous thoughts on risk. A benefit of a framework is definitely in the documentation, testing and community support - but we have presented counter arguments to this.

Our current site is currently not using any obvious front end framework and so a lot of our time is spent “making it work in IE” or “sorting it for iPad" and other such scenarios.

So let's build it better! :)

We’d like to avoid this.

So would we! ;)

-- email ends --

We discovered in due course that the desire to use Bootstrap was actually masking a different issue entirely - the in-house developers had been let down by the previous team and build, and were understandably worried about history repeating itself.

Thankfully, we were able to allay their concerns and we received the go-ahead to proceed without Bootstrap. We also made the codebase available to them throughout the entire build process and this level of transparency helped build on both trust and understanding of the code.

After delivery, we received some great positive feedback - they were absolutely over-the-moon with the build and they really took to our approach - so much so that they went on to integrate it into their own internal processes.

Not a bad outcome :)

--

In closing, the question of front-end frameworks is a common and tricky one, and not without contention.

I do, however, want to make it clear that I am not against frameworks - many extremely talented people have kindly clubbed together to produce some excellent stuff - and for free.

For some scenarios, they can be absolutely superb. For others, an absolute pain.

Ultimately, it is not just about choosing the best tool for the job that matters but also demonstrating a willingness to explain and justify that choice.

-

Special thanks to Gary Lake, Mark Skinner, Andy Mantell and Joel Mitchell for their input.

[keirmoff]

Shaun's Game Academy

Earlier this year I helped build Shaun's Game Academy with those lovely folks over at Aardman.

It was a collaborative campaign between Shaun the Sheep, Nominet Trust and MIT, and was all about encouraging and supporting youngsters getting into programming using 'Scratch' - an awesome beginners programming language and community developed by MIT.

It included videos and tutorials for making a game with Shaun the Sheep assets, plus a competition.

My involvement was both front-end and back-end, turning Dave Gillett's super designs into a responsive, content-managed website - powered by Perch CMS.

It was great to be part of this as encouraging youngsters to code is something I really, really support. Hopefully the whole campaign helped to inspire some coders for the future.

Go have a peak: shaunsgameacademy.co.uk

[keirmoff]

Mediatemple Grid, Nginx and HTTPS sitting in a tree... sadly not kissing

My friend Dan and I recently moved our Twitify app for Shopify to Mediatemple's Grid hosting and encountered an unexpected issue...

As part of our app, we deliver JavaScript to our customer's shops and, as such, we need to interrogate 304 headers sent by the browser and cache/renew assets accordingly. Nothing especially complex or unique about this.

However, we discovered that important header information seem to be going missing somewhere down the pipe.

Further investigation identifies that our server is using Nginx as a caching proxy and, for some reason, is stripping out vital header information - namely the If-Modified-Since and Access-Control-Allow-Origin headers.

Weirder still, this only seems to be happening to HTTPS traffic - Nginx is not used for HTTP traffic and so works fine.

Dan worked hard to put together an isolated test case so we could send through an insightful support request to Mediatemple...

Unfortunately, and disappointingly, whilst Mediatemple were polite and apologetic, they were unable to provide any insight into why this was occurring. Without intent or explanation, we can only deduce that this is a bug in Mediatemple's Grid implementation.

We are going to get back in touch with Mediatemple to try and get this issue escalated and will report any findings but, as it stands, we wanted to post this as a warning to other potential customers in case this would be a deciding factor in choosing a host.

Fingers crossed we can get some resolution. Equally, if anyone reading this can provide any insight, that would be most welcome, too.

P.S. I have included Dan's test case and results below for anyone who is interested in getting geeky:

I am replying to the If-Modified-Since header which only nginx is adding to the request (not the client) if I respond with an HTTP 304 Not Modified header, nginx passes this back to the client, but since nginx was the point of origin for the If-Modified-Since header and the client doesn't have a copy in it's cache it is causing errors.

I would really like to make use of the cache layer but feel this is a misconfiguration of nginx.

Also certain parts of my website are loaded in via ajax from remote domains, and I am replying with Access-Control-Allow-Origin: * but again when I respond with the access control headers AND an HTTP 304, nginx strips out the access control headers and replies to the client with a 304, if the client is a browser with security features it creates and error and does nothing with the content.

I am testing this with the command:

$ curl -vk "https://twitify.onestopshopify.com/testing/header_test" -H 'Accept: text/html, */*; q=0.01' -H 'Origin: http://example.com' * About to connect() to twitify.onestopshopify.com port 443 (#0) * Trying 72.47.228.139... * connected * Connected to twitify.onestopshopify.com (72.47.228.139) port 443 (#0) * successfully set certificate verify locations: * CAfile: none CApath: /etc/ssl/certs * SSLv3, TLS handshake, Client hello (1): * SSLv3, TLS handshake, Server hello (2): * SSLv3, TLS handshake, CERT (11): * SSLv3, TLS handshake, Server key exchange (12): * SSLv3, TLS handshake, Server finished (14): * SSLv3, TLS handshake, Client key exchange (16): * SSLv3, TLS change cipher, Client hello (1): * SSLv3, TLS handshake, Finished (20): * SSLv3, TLS change cipher, Client hello (1): * SSLv3, TLS handshake, Finished (20): * SSL connection using DHE-RSA-AES256-SHA * Server certificate: * subject: OU=Domain Control Validated; CN=twitify.onestopshopify.com * start date: 2014-04-03 08:41:03 GMT * expire date: 2015-04-03 08:41:03 GMT * issuer: C=US; ST=Arizona; L=Scottsdale; O=GoDaddy.com, Inc.; OU=http://certs.godaddy.com/repository/; CN=Go Daddy Secure Certificate Authority - G2 * SSL certificate verify result: unable to get local issuer certificate (20), continuing anyway. > GET /testing/header_test HTTP/1.1 > User-Agent: curl/7.26.0 > Host: twitify.onestopshopify.com > Accept: text/html, */*; q=0.01 > Origin: http://example.com > * additional stuff not fine transfer.c:1037: 0 0 * HTTP 1.1 or later with persistent connection, pipelining supported < HTTP/1.1 304 Not Modified < Server: nginx/0.7.67 < Date: Tue, 28 Oct 2014 20:31:11 GMT < Connection: keep-alive < Expires: Tue, 28 Oct 2014 20:36:11 GMT < Cache-Control: public, must-revalidate, proxy-revalidate < Vary: User-Agent < * Excess found in a non pipelined read: excess = 4019 url = /testing/header_test (zero-length body) * Connection #0 to host twitify.onestopshopify.com left intact * Closing connection #0 * SSLv3, TLS alert, Client hello (1):

Notice in the above transcript:

A 304 response from nginx, though no If-Modified-Since header sent.

No access control headers though this header is definitely sent from apache

The source for this script is:

<?php ini_set('zlib.output_compression', 'Off'); ini_set('output_buffering', 'Off'); ini_set('output_handler', ''); header('Content-Type: text/html'); header('X-Proxy-If-Modified-Since: '. $_SERVER['HTTP_IF_MODIFIED_SINCE']); header('Expires: '. gmdate('D, d M Y H:i:s', (time() + 300)) . ' GMT'); header('Last-Modified: '. gmdate('D, d M Y H:i:s', (time() - 300)) . ' GMT'); header('Pragma: cache'); header('Cache-Control: public, must-revalidate, proxy-revalidate'); if(!empty($_SERVER['HTTP_ORIGIN'])) header('Access-Control-Allow-Origin: *'); if((!empty($_SERVER['HTTP_IF_MODIFIED_SINCE']) && strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) > (time() - 172800))){ header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified', true, 304); } print_r($_SERVER); ?>

[keirmoff]

Shopify vs Big Cartel vs Squarespace - Pricing

My friend Gav asked for my advice on hosted e-commerce solutions and thought my reply would be worth popping on the blog in case it is useful to others!

Essentially it was the pricing comparison between Shopify, Big Cartel and Squarespace, as follows:

Big Cartel

BigCartel is $9.99 (£6~) a month for 25 products, $19.99 (£12~) for 100. No fees except PayPal which is 3.4% + 20p transaction.

Squarespace

Squarespace is $16 (£9.60~) for 20 products, $24 (£14.50~) for unlimited. They use Stripe which is 2.9% + 20p per trans.

Shopify

Shopify is $29 (£17.50~) for unlimited products + 2% (although I think you can get 1% if you pay for a year up front).

Payment processing depends on who you use:

Stripe 2.9% + 20p

PayPal 3.4% + 20p

WorldPay 1% + 12p

SagePay £25 per month, no trans fee for first 1000 per quarter then 10p

Cardstream £18 per month, first 350 trans free then 9.9p fee per trans

Note: you *may* need a merchant account with your bank for WorldPay/SagePay/Cardstream which could mean extra monthly costs/fees.

CONCLUSION

You need to do some maths, price margins and guesstimates of how many transactions you expect.

Shopify has the greatest flexibility but some startup clients may benefit from Squarespace/BigCartel in the first year or so because of the infrequent nature of orders vs monthly costs/trans fees.

With regards to payment processing, WorldPay offer the best value (but also a fair amount of pain) and Stripe offer the best overall experience. Shopify also supports using PayPal as a secondary way to pay - and, even though PayPal is the devil, customers do tend to like the convenience of paying with it.

I love Shopify but sometimes it is better suited to businesses who have been running for a year or so and get enough orders to justify costs - but this is down to the maths of your business (although they do have a starter plan which is worth a look).

You could always self-host a shop with Perch or WordPress but the larger upfront setup costs and on-going maintenance can workout to be less cost-effective and convenient than hosted.

:)

Please note, this information is correct as of date of posting but subject to change!

UPDATE #1

So, today Shopify scrapped transaction fees and announced their own payment engine ! Very exciting indeed. The new rates are as follows:

Basic: 2.4% + 20p

Pro: 2.1% + 20p

Unlimited: 1.8% + 20p

This will definitely make it far easier for people to get cracking with Shopify as many other merchants can take a frustratingly long time to apply for (ahem, WorldPay, ahem, PayPal). The main thing is they have undercut both PayPal and Stripe, which is a very smart move. Well played Shopify!

[keirmoff]

XLN Telecom

Back in February, I had the pleasure of helping out the cxpartners dev team with building the new XLN Telecom website.

Due to the scale of the project and the amount of developers involved, we took a modular approach to the build, developing a pattern library first (I bloody love pattern libraries!) and then stitching the components together into various templates. The added benefit was XLN were then free to create almost limitless layout variations to suit their needs.

I absolutely adore working with the cx crew - their collaborative approach is so rewarding and I always leave with greater wisdom.

Well played everyone involved: xlntelecom.co.uk

[keirmoff]

"What do you want to be?" is the wrong question. It should be “what do you want to do next?”

[keirmoff]

52 animal impressions (using household objects)

Several months ago Shopify ran a Facebook competition asking for top tips when working from home - and the most likes would win $150.

52 kind people 'liked' my top tip, helping me win the competition - and, by way of thanks, I decided to do an animal impression for each like, on request.

So, here it is - 52 animal impressions; my thank you :)

Animals: Koala, Axolotl, Badger, Bat, Chameleon, Cuttlefish, Dilophosaurus, Elephant, Fish, Fly, Frog, Gecko, Giraffe, Glow worm, Goat, Greater adjutant, Guinea pig, Honeybadger, Hyena, Jellyfish, Killer whale (Orca), Lemur (King Julian), Llama, Mantis, Mantis shrimp, Meerkat, Monkey (Abu), Moose, Muppet (Animal), Naked Mole Rat, Narwhal, Otter, Panda (Kung Fu), Pangolin, Penguin, Pigeon, Rabbit, Seal, Shark-hoover cat, Sheep, Slow Loris, Sparrow, Squid, Stingray, Tapir, Tiger, Tortoise, T-rex, Unicorn, Wolf, Worm, Velociraptor!

Special thanks to... Camera - Emma Howell Assistant - Rob Saunders Additional thanks - Gina Gobetti for her Stingray outfit

Music - Beethoven's Symphony No. 8 in F Major, Op. 93: II. Allegretto scherzando performed by The Apollo Symphony Orchestra (Royalty-free)

*Apologies if your animal isn't here - some just didn't 'work'!

#52animals

UPDATE 1: Some helpful chap recut the video complete with animal photos! Good effort!

[keirmoff]

New Shopify store for Lido Bristol

Earlier this year I worked with Palace to help Lido Bristol get up and running with a new online store.

Shopify was the ecommerce platform of choice and, having worked with the platform extensively over the past years, I was drafted in to offer some technical consultancy and theme customisation.

Was an absolute pleasure working with Graham and the team at Palace, and great to see the shop finally live - despite Worldpay's best efforts to the contrary... (but that's a whole other post!)

Go check out their nice things at www.lido-spa.com

[keirmoff]

Back in the saddle...

Good to be getting back in the saddle, so to speak (!) - and beginning a nice, long stint with the lovely, clever folk at cxpartners.

Can't say anything about the project (top secret, of course) but very much looking forward to working with Stu and the crew again - thanks for inviting me back!

On a side note - I am hoping to starting breathing some life back into my blog again. Little and often is the key :)

Stay tuned.

Next freelance availability: Feb 2014

[keirmoff]

Where is the internet?

friend: did you fix the internetz yet?

me: a good portion of it, yeh

friend: lovely jubbly

me: didn't you notice?

friend: Well my email is still slow. I guess you didn't get to that bit yet. I was thinking earlier. If someone really wanted to, could they delete twitterens?

me: not really

friend: could someone delete the whole internet?

me: not really no - that's pretty scary isn't it?

friend: yeh… I still don't understand where it is

me: everywhere. every computer that connects to the internet potentially holds some of the internet. it's completely distributed

friend: it must have a base though. is there not a central internet brain?

me: nope

friend: so when the person thought of the internet. Where did he put it?

me: http://en.wikipedia.org/wiki/File:Internet_map_1024.jpg - a network of computers, like a parallel circuit rather than series. you know how if one bulb goes out in series, they all go out, where as parallel currents if one bulb goes out, all the others stay on?

friend: yes from GCSE physics!

me: yeah, it's kinda like that

friend: ok that makes some more sense

me: if in your house you have 3 computers that are networked - none of them ARE the network but they are key parts of the network. the existence of more than one computer connected… is the network

friend: ok

me: like roads - there is no _one_ road, just many connected roads and cities

friend: OMFG. I got it

me: enlightenment

friend: You're the internet aren't you?

me: *headdesk*

friend: It's you

[keirmoff]

Lemmings 404

Whilst I absolutely adore @rbwebdev's custom 'Lemmings' 404 page, I just couldn't let them all die... JavaScript hack to the rescue!

Want to feel like a (miniature) hero too? Drag the bookmarklet to your bookmarks bar and visit romainbrasier.fr/404.php :D

Bookmarklet: SAVE THEM ALL!!1! <-- Drag me up there --^

(This is what happens when a freelance web developer with a concern for animal welfare is off work with a cold...)

(EDIT: @rbwebdev kindly improved my code!)

[keirmoff]

Featured interview on wowsociety.com

Earlier this year, I was fortunate and flattered to be interviewed by the folks over at wowsociety.com for their blog, The Cooking Pot.

They were keen to find out more about my life as a freelance web developer as part of their celebration of 'grassroots pioneers' from around the world. Despite not having pioneered any flora of late, I was happy to chat to them...

We caught up with Keir Moffatt, whose hapless pursuit of a mystery train girl created headlines around the world and much goodwill, which Keir harnessed with contributions towards Marie Curie Cancer Care. We wanted to know a bit more about the boy and what more he’s been cooking since, hoping that some of his audacity might rub off on us.

What are you most proud about where you live?

What I love about Bristol [UK] is it has something for everyone – whatever you are into, you’ll find a passionate community in and around the city. As a breakdancer, web developer and reptile hobbyist, I’m well catered for!

I also love the size of Bristol – it’s big enough to feel exciting and busy, but small enough to be a manageable city for a country boy like me!

Bristol also has a great digital community and the freelance community in particular is so supportive and welcoming. We don’t compete; we share the load!

What issue(s) are you most passionate about in your community or the world at large?

I’m very passionate about the cultural, social and moral implications of technology and, especially, the web. It’s all full-steam ahead, but I feel like society’s moral compass is struggling to keep up. What does this mean? Etiquette, safety, security, law, etc on the web are basically being made up as we go along. I would love to see people exploring the implications of their actions within the digital world. Our children are growing up in a digital world and, as parents, we will need to be able to bring them up confidently in this new age.

What are you working on and what do you hope to achieve with your project(s)?

I’m a web designer by trade, so always working on making the web a better place! I have a few side projects, including a product that helps businesses share digital assets internally and externally. I am also an evangelist for Rusic, a superb platform for creating socially-integrated communities.

In the future, I want to build a social network based around adventures – a way to meet people whilst doing the things you love, and an opportunity to try new things, too. I’m a big adventurer so this is something I am very passionate about.

Also, my recent Ubelly Ignite talk has sparked a desire to do more public speaking. So much so that I am already booked to speak at WDC2012 here in Bristol.

Failing the above, I’m thinking of fleeing the country to become a snowboard instructor!

What are the most valuable lessons you have learnt while pursuing your ambition?

1) Be honest and transparent. It’s hard but ultimately the very best way to work. You feel good about the way you conduct yourself, you become respected and recommended by others for your integrity, and you can sleep well at night.

2) Learn to criticise and take criticism well. Criticism should not be seen as an attack or insult but instead a wonderful opportunity to improve and grow. Learning to provide constructive and positive criticism is very key to collaborative working and successful relationships, both personal and professional.

3) Do what you love and always seek out the fun. Passion is a key ingredient to success so if you don’t love what you do, you’ll struggle. You only live once and there is really no excuse to not pursue your goals. What’s stopping you? Go get the fun!

What opportunities are there for anyone to contribute to what you are working on?

As a freelancer, I am always keen to meet new people to work on projects with, whether they be agencies, new businesses or fellow freelancers. Always seeking adventure.

What other personal project have you supported or especially admired?

I really admire people who have harnessed the web to support important campaigns against oppression, injustice and charitable causes. I think the power of the web to do good is an exciting and evolving adventure. In particular, I’m always inspired by Ze Frank’s mission to bring fun to every corner of the web. He’s a legend.

That’s a plateful to digest. Keir, thank you for taking the time to cook with us.

You can turn the tables on Keir and pursue him on his website or follow him on Twitter. Or simply watch his encore and learn a few tricks for your own mystery pursuit.

Thanks guys! - Keir