Last night was the fourth of the tremendously successful MK Geek Nights (MKGN), organised by David Hughes (@DavidHughes) and Richard Wiggins (@RichardWiggins).

And what a night it was.  Interesting and inspiring talks from great speakers, as usual – and I promised I’d write a summary blog post so here it is, albeit a little longer and a little later than planned…

Adventures with Google PageSpeed

Kier Whitaker (@kierwhitaker) kicked off the evening, with a few tips for speeding up websites:

1. Make fewer HTTP requests:
   • Each JS or CSS file and every image is a round trip across the network. The fewer trips made across a congested network, the faster the page loads.
2. Use Minify to compress and concatenate CSS and JS files :
   • Codekit is one option for embedding Minify in your workflow; there are command line tools too.
   • Consider using a master file with imports and then minify to compress the output (might not be so useful as an approach when working in teams).
3. Optimise your images:
   • ImageOptim is one option – and even that 50-60-70% the images can still look great.
   • Apparently, Photoshop’s Export to Web functionality is not so good [damn!].
4. Only use what you need:
   • When working with libraries, you don’t have to use all of Modernizr, jQuery, etc. – maybe just include the parts that you need (e.g. AJAX and not the whole library).
5. CSS at the top, JS at the bottom:
   • This is a simplistic rule and you might need to break it sometimes (e.g. to stop a flash of unstyled type when using Typekit).
   • It’s about percieved speed rather than actual page loads [but perception is reality].
6. HTTP compression:
   • Use GZIP compression on the server. On Apache this can be configured using .htaccess or in httpd.conf.
7. Browser caching:
   • Make the browser keep a copy of the file – if only a page is only updated infrequently, you can cache for longer. Images, etc. can have long expiry but it’s not so great on dynamic sites!
   • Have a look at the HTML5boilerplate .htaccess file for inspiration – and read up on “cache busting”.
8. Enable HTTP keep-alive:
   • By keep the connection open for a few more seconds, you can lose the overhead of additional requests.
9. Cache dynamic content:
   • WordPress is quite heavy and can have 15-16 database queries on a simple home page. If you can cache the output then serve a flat file, this can save time.
   • Rails and many PHP frameworks have similar concepts.
10. Use a content delivery network:
    • CDNs reduce latency and provide high-speed content delivery.
    • Options include MaxCDN and Amazon CloudFront.
11. Beware of boilerplates:
    • Boilerplates can leave behind a lot of unnecessary resources (e.g. favicons) – and these might even be downloading your 404 page if they are not present!
    • Check to see that all the assets you reference actually exist…
12. Test widely:
    • Try a few sites to help optimise your code (e.g. Google PageSpeed; Yahoo Yslow; WebPageTest.org).
    • Kier likes the detail with WebPageTest.org and it provides two views – one for a fresh request and another to see how effective caching is.
    • Beware that the sites might contradict each other.
    • Also use developer tools in browsers, like the Google Chrome Inspector – look at the network tab and see when resources are loaded from cache, etc. (examine the headers too).

Once you’ve implemented a few tweaks, you might find that the last few percent to get to perfect are difficult – there are some things that you just can’t control. But, on a big website, incremental changes add up to big improvements – you might want a strategy to tray and work things out.

My site scores 84/100 on Google PageSpeed so it looks like I have some work to do…

Better photography by design

I’ve been taking photos for nearly 35 years and I’m still rubbish at it. Well, maybe not rubbish but I maintain there’s two sides to photography: anyone can learn the technical stuff; but, to create great images, you need to have a creative eye…

Al Power (@alpower) gave a great 5 minute talk on taking better pictures – not rocket science but some simple steps that everyone can take to get much better results.

“So, what makes a good photo?” asked Al:

• Is it camera gear?
  • Not really, you can probably push your existing one. It’s often said that the best camera is the one you have with you… whether that’s a smartphone or a DSLR.
• Composition plays a big part and Al showed four examples:
  • A skater: moving from left to right, gives a sense of motion. Leave some negative space for the skater to move into. And their legs and arms form triangles.
  • A spiral staircase: the shape and lines of the staircase lead the viewer into the picture. Repeated shapes and patterns work well.
  • A jetty: lead-in lines capture attention and bring the viewer into the image.
  • A beach: using the rule of thirds to divide the image into nine segments, and to place things on grid lines/intersections.
• Try a different perspective:
  • Take the same shot from different angles, maybe three or four times. High or low, zoomed in or out – see what works.
• Use the light:
  • Light is probably the most important control for a picture.
  • You can take great pictures in any conditions – but direct sunshine is not always good: perhaps place a subject under a tree in direct shade and use even, reflected light; on cloudy days sky is huge lightbox; the time of day makes a difference too
• Learn how to process your pictures:
  • With a DSLR – raw images are amazingly powerful.
  • Use Snapseed on iOS and Android.
  • On a PC or Mac, use iPhoto, Picassa, Lightroom or Aperture.
  • Attend a workshop, watch some of Adobe’s videos, or a find a good YouTube channel.
• Practice and look for inspiration:
  • Henri Cartier-Bresson was quoted as “your first 10,000 photos are your worst”.
  • No-one was born an amazing photographer and we’re on a journey – “give yourself permission to suck”, says Al – and practice.
  • Work out what tricks are employed by those that inspire you – break them down and apply them to your own images.

A web developers guide to Windows 8

#MKGN @thebeebs used to be an evangelist for Internet Explorer – and you think your job is hard?!

— Mark Wilson (@markwilsonit) March 21, 2013

Martin Beeby kicked off with a self-deprecating video, for all of us Internet Exploder lovers:

Then he moved on to tell us about modern.ie – a website to help developers design for Internet Explorer 10 and see if and where the might be problems, if they are using out of date libraries, or vendor prefixes that are no longer required. One example of the tips included is this code to ensure that a responsive site really is responsive, making sure that it displays properly when running on the side of a Windows 8 display:

@-ms-viewport{width: device-width;}

There’s also advice on creating icons that will look good on a Windows 8 desktop – and a 3 month subscription to BrowserStack for cross-browser testing.

Moving past modern.ie, Martin explained that Windows 8 can run HTML and JavaScript apps locally – so web developers can be app developers too – and, of course, because this is Windows 8, we were encouraged to embrace touch…

I only wish that the video Martin wrapped up his talk with was available on the web (I’m told it will be soon)… if I ever see it again, I’ll tweet the link…

The value of conferences

I had high hopes for this talk – I need to convince my new boss’ boss that there is value in conferences. And there is – but Craig Lockwood (@CraigInWales)’s talk started out by talking about the costs…

• The costs to the organiser: a venue; speakers (fees and expenses); marketing (lanyards, programs, promo codes for discounts, etc.); insurance (weather, speaker sickness, etc.); judgement (you can’t please everyone – someone will be unhappy); refreshments; and time.
• The costs to the speaker(s): time (to write a talk); judgement (what might others say they think of you?)
• The costs to the attendee: ticket costs; travel; accommodation; and time

So what does this mean? Why do we need conferences? After all, Craig exclaimed, plumbers don’t get together to discuss latest pipe techniques! Our techniques and even the canvas we work on changes too regularly to keep up so we share information. Freelancing can be a lonely job – so meetups are great to build relationships and share knowledge.

Twitter, suggests Craig, has become the watercooler and conferences are the parties. Of course, some idiots still spoil things and some conferences find that they now need codes of conduct! So be respectful – it’s fine to disagree (respectfully) – but we should air our grievances personally and not publicly [Hmm… I once blogged about a pretty awful vendor event… think I might be guilty there].

But think about this quote too, attributed to Ling Valentine (@LINGsCARS):

“If nobody hates your website, chances are nobody loves it either.”

“I have no idea what I’m doing”

The final talk was from Simon Collison (@colly) and I just can’t do it justice in written form. Listen to the audio and then think about your own life and what you’re doing right now:

This hit home for me: I’m just starting a new job; it’s going to be a challenge – but that’s exactly what I need. As for keeping up with blogs, tweets, magazines, books – I’m drowning. And don’t get me started on the systems I use at work (admittedly not quite as chaotic as the setup Simon describes at Fictive Kin…)

Fantastically inspirational talk from @colly at #MKGN. “I have no idea what I’m doing”. Ditto… Lots of food for thought

— Mark Wilson (@markwilsonit) March 21, 2013

So when does this happen again?

The next MKGN is on 13 June and all 200 tickets “sold out” in just 2 hours (can a free event sell out?!). There’s a waitlist in operation and it’s definitely worth signing up if you’re in the area and you are interested in webby-creative-designer-digital-makery-slightly-geeky-stuff, washed down with a beer or two and followed by pizza! I’ve even met some people there in real life that I only knew on Twitter before…