-webkit-backface-visibility and browser crashing

Posted in Cross-browser testing, CSS, Front-end development, SCSS | Leave a reply
Posted on by

Last week I wrote a premature celebratory post, explaining how we victoriously created a customer testimonials page, and we were getting set to launch the new website on Friday.

Later that day, cross-browser testing threw up a curve-ball: rotating the iPad or zooming crashed the browser. Every time. We spent hours struggling to make sense of Chrome Devtools, chipping away at javascript to try to isolate the problem, experiments with different jQuery plugins to achieve a similar page design, but all to no avail. The browser crashed every time.

Read more…

Paul Irish interview on Treehouse blog

Posted in Front-end development, HTML | Leave a reply
Posted on by

I’ve just enjoyed watching this inspiring Treehouse interview with Paul Irish. It’s made me go back and take a second look at HTML5 Boilerplate (which I’ve kind of neglected to investigate even though it’s been around for ages) and cherry-pick a few of the great features in there, some of which are helpfully listed here. I guess that’s because, working as a designer in an agency, I didn’t get much of a chance to set up an environment from scratch.

I’m going to take a look at Paul’s Discover Devtools videos next.

CSS loading animation

Posted in CSS, Grids, jQuery, SCSS | 2 Replies
Posted on by

I’ve been working on a loading animation with Bruno Pinto for what is the most complicated page on the Cliniko website that we will launch soon. It’s the ‘Customers’ page which shows over 50 testimonials, each with an accompanying portrait photograph. Half of the javascript on the whole site is probably to be found on this page as we have gone for a responsive Pinterest-esque grid using Grid-A-Licious which loads more testimonials from a json file a few at a time on clicking a ‘load more’ button.

Bruno has easily done most of the heavy lifting here. I’ve really just been tidying up the presentation around the edges. It looks as if the page is now finally coming together and today we’ve been adding the finishing touches – trying to make it load gracefully, to not look too broken with javascript disabled, etc. I’ve just added a loading animation and wanted to share it here.

Read more…

A month in Reykjavík

Posted in Remote working, Telecommuting | Leave a reply
Posted on by

It’s now been a month and a day since my wife and I packed up our things, sold everything we couldn’t fit in a suitcase and jumped on a flight to Reykjavík. As I recently wrote on my other blog:

The last three months were passed shrinking our possessions down to what we could plausibly fit into a 20kg suitcase and an 8kg bag each – a luggage weight restriction set by the airline WOW Air, which seemed like an arbitrary enough target to shoot for. What we couldn’t sell on eBay or Gumtree, we gave away in several long trips to charity shops in Hackney around Lower Clapton and Stoke Newington. Sometimes in the luxury of a taxi, but mostly hauling our heaps of what used to be vitally important belongings, now rapidly becoming unnecessary burden, onto buses or walking a mile or two with it on our backs. It’s a wonder just how much crap one couple can accumulate in a small one-bedroom flat in Hackney in just under a year.

A month seems like a good time to look back and take stock, so here goes.

Read more…

The Traveller’s Bookcase

Posted in Remote working, Telecommuting | 3 Replies
Posted on by

Illustration of a small collection of books, with 'On The Road' highlighted.

A few weeks ago, my wife and I sold our whole book collection.

Selling our books is just one of the little milestones in our preparation for leaving London and living out of our suitcases come April. Clothes, art and printmaking tools, the bed, the sofa, our desks, all the little things that contribute to the clutter in your life that you don’t know is there until you have to decide whether it stays or whether it goes. I spent an afternoon tearing up hundreds of screen prints that I laboured over intensively. I keep repeating the mantra, “it will feel bad now, but when you are swimming in the Blue Lagoon under the Northern Lights, you wont miss all this stuff.” To my mind, you can’t have both worlds. It’s black and white. Either you have a settled life in which you are surrounded by your friends, your home, your craft. Or, you dig it up at the roots and you have your freedom, you have the road, and you have wonder.

Read more…

IE8 background: cover fallback and rails

Posted in CSS, Front-end development, Rails, SCSS | Tagged | Leave a reply
Posted on by

I struggled to get this IE8 background-size:cover fallback to work yesterday using the ms-filter. It turns out that my problem was with referencing the asset path correctly in rails. I needed to add #{image_path(...)} to get rails to find the image.

SASS mixin:

@mixin ie-background-cover($image-path) {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{image_path($image-path)}, sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{image_path($image-path)}, sizingMethod='scale')";
  background-image: none;
}

Make sure this is in the head:

<!--[if lt IE 9]><html lang="en" class="ie8"><![endif]-->

The SASS:

div {
  background-image: url('myimage.png');
  .ie8 & {
    @include ie-background-cover('myimage.png');
  }
}

Webkit SVG height bug workaround

Posted in Cross-browser testing, Front-end development, SVG | 1 Reply
Posted on by

I’m using an SVG for the logo on the site I’m working on. I’ve been cross-browser test, providing a png fallback for IE8, etc. The biggest headache was that Safari was adding some extra height to the img. Not stretching the image or adding padding or margin or anything like that, something to do with the actual canvas size.

It took a while to search for a good workaround, but I found one here. So here’s what I had to do: Open the SVG in Sublime Text or whatever. Mine looks like this near the top:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="52px" viewBox="0 0 200 52" enable-background="new 0 0 200 52" xml:space="preserve">

Delete the bit specifies width and height and save it.

That’s it!

A considered footer design

Posted in Design, User experience | 5 Replies
Posted on by

If I’m honest, I’ve always struggled with footers in web design. I think, maybe, it’s because I’m usually burned out by the time I reach the bottom of a PSD. It has traditionally been the section of a site that receives least design consideration from me. But it could also be that I struggle to see the point in footers. I can’t remember the last time I actually used a footer link other than maybe ‘contact us’ or to follow someone on Twitter.

Read more…