Tag Archives: Website development

Technology

Content, typography and geeky stuff (#MKGN)

As another Milton Keynes Geek Night approaches, I’ve realised what a terrible blogger I’ve been lately… heck, maybe I don’t even qualify as a geek any more! I thought I’d try and make amends with these notes from the last event – which was, as always, an enjoyable evening with a real mix of speakers providing plenty of food for thought.  If these little tasters leave you wanting more, check out the audio on Soundcloud:

Future Perfect Tense

The first talk was from Relly Annette-Baker (@RellyAB) – bursting with energy as she blasted through her talk on “Future Perfect Tense” – or creating content for in imperfect web. The talk is worth another listen but, effectively, Relly spoke of the separation of content and design so that websites can evolve as technology moves on.

Taking a physical world example, every piece of Lego is built to combine with every piece of past and future Lego, whereas Playmobil have hard-cast mounds.

On the web, our content needs to be structured chunks that build packages (screen sizes, needs, requirements, points). Once we understand what the content is, it can be put in the CMS, and we need to understand how people are using that content.

Additionally, we shouldn’t fork content - pragmatically there are times when we may need a separate mobile site but that’s short term – long term we need to cope with a plethora of devices (from a 1″ watch to a 50″ smart TV – we can’t have a new site for each one). We need to have a plan to move content to new sites.

Netflix is on 100s of devices but only has 3 content formats – short, medium and long.  And, as for the next big thing – Google “iPhone will fail” to see how, in 2006/2007, people were seeing an expensive smartphone, not a cheap portable computer.

None of us know the next cool thing but we don’t need to. Build teams, tools and content that adapt whatever the conduit. Create chunks that can move around and be repurposed. The rest will look after itself…

Knowing you know nothing

Knowing you know nothing was a short talk from James Bavington (@JamesBavington) who started out with a quote, from Socrates no less:

“The only true wisdom is knowing you know nothing” [Socrates]

Or, to paraphrase:

“You’re stupid if you think you know everything” [James Bavington]

There are many, many tools available to help us in creating websites (thankfully we don’t have to know them all) but web design concepts can be limited by our technical knowledge and ability:

James used an analogy about how he started investigating the Google Maps API to push his skillset and improve the user experience in a site he was creating.  This led him to a side project using the Google Maps API and experimenting with many features.

James takes the view that expanding your technical awareness (not necessarily ability) gives your creativity more to play with.  As someone who struggles with seeing loads of interesting “stuff” that I rarely investigate as fully as I’d like, I may try James’ advice for expanding my knowledge:

  1. Little and often.
  2. Set project challenges.
  3. Have a side project.
  4. Know that I know nothing.

Distributing the future more evenly, with JavaScript

Jeremy Taylor (@jdt_me) was next up – talking about distributing the future more evenly, with JavaScript.  The gist of Jeremy’s talk was that we’re not using the “slab of glass in our pocket” (i.e. smartphone) properly and that, instead of collaborating and solving the grand challenges of our age, corporations are in battle.

Many socially-ethical businesses will use “free” services that rely on ads – it’s just not healthy, Jeremy believes.

Browser is no longer a document browser but is effectively a hypervisor with each tab running in its own sandbox, and WebRTC peer connections to connect them, making the entire web a giant playground.

Citing the examples of Browserify (introduction) leading to WebTorrent, Jeremy suggests that we need simpler tools to create distributed systems and that JavaScript provides new ways to integrate and collaborate.

Sass: a whistle stop tour

Stuart Robson (@StuRobson) gave another 5 minute talk – about a CSS extension language called Sass (Syntactically Awesome Style Sheets).  Stu’s slides are on SpeakerDeck and he describes the talk as “a quick blast through what makes Sass an awesome extension of CSS that you should use no matter how marginally”.  It certainly looks useful to me – with variables, nesting, code snippets and more…

One minute talks

Then, there were the one minute talks with the usual bunch of recruitment pitches, conference plugs, and two that made me sit up and listen:

  • A new TechHub co-working space coming to Milton Keynes (although I can’t find any details on the web).
  • Fibe (sp?) are a young startup of school kids who understand they can only do so much (having said that, the speaker was really confident and came across really well). They are looking for an HTML hermit, a JavaScript genius or a database [demon] to work with and help them…

Take your stinking paws off my design you damn dirty developers

Finally, Andrew Clarke (@Malarkey) gave a provocatively-titled but fascinating talk that is intended to help developers udnerstand design issues.  Andrew’s talk normally takes an hour, so he cut it down to just typography (the full set of slides is on SpeakerDeck) and I could have listened for hours. whoever thought that the finer details of lettering could be so interesting?

I learned how it’s important to understand the size of type to be fused and how the measure (the width of the body of type) can be controlled for comfortable reading by reducing column widths or increasing font sizing (2-3 alphabets, i.e. 56-78 characters is ideal). I learned how adjustments to the measure need to be accompanied by changes to line hight and how different styles should be used for reversed out content to improve readability. I learned that the tracking (word-spacing in CSS) can be used to improve readability and that san serif typefaces need looser line heights.

Then there’s the area of typographically-correct glyphs:

  • Hyphens break words over multiple lines, or join-words.
  • En dashes are longer and denote a range (equivalent to the work “to”), for example 1–10 or Earth–Mars.
  • An em dash is even longer — for a pause — or a separate train of thought in the same sentence. Either use no space or a hair space. And two adjacent em dashes can indicate a missing letter in a w——rd.
  • Single and double primes should be used for feet and inches or minutes and seconds. Never for quotations!
  • Quotations use curly quotes: “ ” or ‘ ’.
  • And an ellipsis is not just 3 dots — it’s one entity… which marks a continuation.

[Related reading: 10 HTML entity crimes you really shouldn't commit]

Moving on, Andrew spoke of markers and margins in lists, and of using CSS relative positioning to place © close to the baseline – and adjusting parentheses too!

In summary: designers and developers need a better understanding of each other’s work. They need to know how to work together!

When’s the next one?

If you think this sounds good, follow @MKGeekNight or check out the MK Geek Night website – MKGN number 9 is coming up on 12 June 2014 and speakers are:

  • Rachel Andrew (@RachelAndrew): Your own definition of success – choosing a profitable side project idea.
  • Dan Donald (@hereinthehive): Designing evolution.
  • Robert Bavington (@RobertBavington): Responsive Web Design Today.
  • Ben MacGowan (@BenMacGowan): The era of gratuitous animations.
  • Mark McCulloch (@wearespectaculr): Are you speaking Scottish in Tokyo?

There’s usually free beer and pizza too… so what’s not to like! 

Technology

Remembering the changes made to my blog’s theme

Every year I need to update the copyright notice on my blog, and every year I forget where to do it in the theme for the site.

I should use a dynamic copyright date, as suggested by James Bavington (@jamesbavington):


Or perhaps this more elegant solution highlighted to me by Garry Martin (@garrymartin) but my late night coding changes just broke my blog, so I did it the old way.  Whilst I was at it, I applied an updated version of the theme, so this post is more of a “note to self” of the things I need to change when theme updates come along:

  • Include the various items in the header.php file that are needed for Google (and others) site verification, Google Analytics, Facebook Like button, Google+ badge, better search results, etc.
  • Put back in the style.css stylesheet amendments that adjust colours, etc.
  • Edit the functions.php file to make sure that the footer_link() function has the correct attribution and copyright notice…
Technology

Improving performance; managing expectations; being responsive; work in progress; and fear, uncertainty and doubt (#MKGN)

I can’t believe that the quarterly Milton Keynes Geek Night is nearly upon us again. I usually try to blog about the evening but I’ve failed spectacularly on recent attempts.  I might fail again with this week’s MKGN – not because I’m slow to get a blog post up but because the tickets “sold” out in something crazy like 2 minutes…

September’s Geek Night was up to the usual high standard (including the return of David Hughes – seems you can’t escape that easily!) but included one talk in particular that stood out above all of the others, when Ben Foxall (@BenjaminBenBen) showed us (literally) the other side of responsiveness… but we’ll come back to that in a moment.

Back to front performance

First up was Drew McLellan (@DrewM)’s take on “back to front” performance. You can catch the whole talk on Soundcloud but for me, as someone who runs a fairly shoddy WordPress site, it got me thinking about how performance is not just about optimising the user experience but also about the back end – perhaps summed up in one of the first points that Drew made:

“Website performance is about how your site feels.”

That may be obvious but how many times have you heard people taking about optimisation of one part of a site in isolation, without considering the whole picture.  As Drew highlighted, performance is a feature to build in – not a problem to fix – and it’s also factored into search engine algorithms.

Whilst many performance gains can be found by optimising the “front-end” (i.e. Browser-side), there are some “back-end” changes that should be considered – sites need to be super-fast under normal load in order to be responsive under heavy load (quite simply, simultaneous requests affect responsiveness – they use memory and the quicker you can process pages and release memory, the better!).

First up, consider hosting. Drew’s advice was:

  • Cheap hosting is expensive (shared hosting is cheap for a reason).
  • Shared hosting is the worst (rarely fast) – think about a virtualised or dedicated server solution instead.  Constrain by CPU, then RAM, not disk space (that should be a red flag – it’s cheap, if not much is allocated it shows lots of people crammed on a server).
  • Consider what your project has cost to build when buying hosting! Use the best you can afford – and if they advertise with scantily clad ladies, they’re probably not very good (or to be encouraged)

Next, the content management system (CMS), where Drew says:

  • Think about the cost of external resources (going to database or web API, for example). Often these are necessary costs but can be reduced with careful architecture.
  • Employ DRY coding (don’t repeat yourself) – make sure everything only has a single representation in code. Do things once, cache and reuse (unless you expect different results). For example, if something doesn’t change often (e.g. post count by category on a blog), don’t calculate this on every page serve – instead consider calculating when adding/removing a post or category (called denormalisation in database terms)… be smart – consider how real-time is the data? And are people making decisions using this data?
  • Do the work once – “premature optimization is the root of all evil” is actually a quote from 1974, when line-by-line optimisation was necessary.  Focus on the bottlenecks: “premature” should not be confused with “early” – if you know something will be a bottleneck, optimisation is not premature, it’s sensible.
  • Some frameworks focus on convention over configuration (code works things out, reduces developer decisions) – can lead to non-DRY code – so let’s make programming fun and allow the developer to work out the best way instead of burning CPU cycles.  “Insanity is doing the same thing over and over again and expecting different results”.
  • The Varnish caching HTTP reverse proxy may be something to consider to speed up web site (unfortunately Drew ran out of time to tell us more – and my hosting provided found it caused problems for some other customers, so had to remove it after giving it a try for me)

In summary, Drew told us to care about front end optimisation; be careful about setting cookies and serve assets from cookieless domains; be smart about server headers; use CDNs to outsource traffic; GZip content; JavaScript at bottom of page and minimise it; test with PageSpeed and YSlow; ignore bits that make no sense for responsive web design.  But, importantly, don’t forget the back end – hosting, CMS, stay dry (do it once), a few minutes configuring up front saves wasted time later, and optimise early. In short – front end performance can’t make up for slow servers!


Related reading: check out Kier Whitaker (@KierWhitaker)’s  adventures with Google Page Speed in my write-up from MK Geek Night 4

Managing client expectations

The first of the five-minute talks was from Christian Senior (@senoir – note the spelling of the Twitter handle, it’s senoir not senior!).  Christian spoke about managing client expectations.  Whilst my notes from Christian’s talk are pretty brief (it was only 5 minutes after all) it certainly struck a chord, even with an infrastructure guy like me.

Often, the difficult part is getting a client to understand what they are getting for their money (“after all, how hard can it really be?”, they ask!) – but key to that is understanding the customer’s requirements and making sure that’s what your service delivers.  Right from the first encounter, find out about the customer (not just who they are, what want, how much money they will spend – but browsers, devices available, etc.) and try to include that detail in a brief – the small things count too and can be deliverables (incidentally, it can be just as important to distinguish the non-deliverables as the deliverables). Most of all, don’t take things for granted.  My favourite point of the talk though, was “talk to customers in a language they understand!”:

<style>
.jargon {expression:blank;}
</style>

Or, to put it another way:

“Work in code, not talk in code!”

The other side of responsive

As I mentioned in my introduction, Ben Foxall (@BenjaminBenBen)’s five minute talk on “the other side” of responsive design was nothing short of stunning. If I ever manage to deliver a presentation that’s half as innovative as this, I’ll be a happy man.  Unfortunately, I’m not sure I can do it justice in words but, as we know from Sarah Parmenter (@Sazzy)’s talk at MK Geek Night 5, responsive websites provide the same content, constructed in different ways to serve to multiple devices appropriately.

  • Ben got us all to go to a site, which reacted according to our devices.
  • He then showed how the site responded differently on a phone or a PC – choose a file from a PC, or take a photo on a phone.
  • He tweeted that photo.
  • He showed us the device capabilities (i.e. the available APIs).
  • He updated his “slides” (in HTML5, of course), interactively.
  • And projected those slides in our browsers (via the link we all blindly clicked).

Actually – Ben did so much more than that. And thankfully he blogged about what he did and how he did it – I recommend you go take a look.

In summary, Ben wrapped up by saying that “responsiveness and the web needs to use the capabilities of all the devices and push the boundaries to do interesting things”.  If only more “responsive” designers pushed those boundaries…

One last thought on this topic (from Brad Frost, via Ben Foxall’s MK Geek Night talk), is contained in these three images (provided under a Creative Commons attribution license):

  

Work in progress

Following Ben’s talk was always going to be a tough gig.  I’m not sure that I really grokked Tom Underhill (@imeatingworms)’s “Work in Progress” although the gist seemed to be that technology gallops on and that we’re in a state of constant evolution with new tools, programs, apps, books, articles, courses, posts, people to follow (or not follow), etc., etc.

Whilst the fundamentals of human behaviour haven’t changed, what’s going on around us have – now we need more than just food and warmth – we “need” desktops, laptops, smartphones, pink smartphones, smart watches.  Who knows what’s in the future in a world of continued change…

Constant change is guaranteed – in technology, social context and more. Tech is a great enabler, it could be seen as essential – but should never replace the message. Brands, experiences and products change lives based on the fundamentals of need.

Hmm…

Interlude

The one minute talks were the usual mixed bag of shout-outs for jobs at various local agencies (anyone want to employ an ex-infrastructure architect who manages a team and really would like to do something exciting again… maybe something “webby”?), Code Club, the first meeting of Leamington Geeks, and upcoming conferences.

Fear, uncertainty and doubt

The final keynote was from Paul Robert Lloyd (@paulrobertlloyd), speaking on FUD – fear, uncertainty and doubt. Paul makes the point that these are all real human emotions – and asks what the consequences of abusing them are. He suggests that the web has been hijacked by commercial interests – not only monitoring behaviour but manipulating it too.

Some of the highlights from Paul’s talk make quite a reading list (one that I have in Pocket and will hopefully get around to one day):

  • Jonathan Harris’ modern medicine considers the ethical implications of software. Even a default setting can affect the daily behaviours of thousands of people.  Facebook asks its designers about the “Serotonin” of new features – i.e. how will it affect how we behave.
  • As the web is largely unregulated, it’s attractive to those who want to increase their personal wealth; so we have to be optimistic that there are enough people working in the tech sector with a moral compass. Arguably, the Snowden leaks show that some people have integrity and courage. But Paul is uncertain that Silicon Valley is healthy – “normal” people don’t see customers as data points against which to test designs – for example a team at Google couldn’t decide on shade of blue so they tested 41 shades (and border widths). Paul also made the point that the team was working under Marissa Mayer – for a more recent example witness the Yahoo! logo changes…
  • Then there are the “evil” social networks where, as Charles Stross highlights, “Klout operates under American privacy law, or rather, the lack of it”.
  • Paul says that The Valley operates in a bubble – and that Americans (or at least startups) skew to the workaholic side of things, viewing weekends off as a privilege not a right. He also suggests that the problem is partly a lack of diversity – The Valley is basically a bunch of Stanford guys making things to fix their own problems. Very few start from a social problem and work backwards – so very few are enhancing society; they’re making widgets or enhancing what already exists. Funding can be an issue but governments are seeing the tech sector as an area of rapid growth and it’s probably good not to be aligned to a sector where you can launch start-ups without a business case!
  • Lanyrd shows that it is possible to start up outside The Valley (although they have been bought by Eventbrite so have to move) [TweetDeck is another example, although bought by Twitter] but Silicon Valley arrived by a series of happy accidents and good luck/fortune – it’s important that the new tech hubs shouldn’t be a facsimile of this.
  • We trust Yahoo! by putting photos on Flickr but they also have form for removing content (e.g. Geocities) – but what happens when your service is closed down? Is there something morally wrong with closing sites containing thousands of hours of individuals’ comments, posts, etc.? Shouldn’t we treat data like it matters, allow export capabilities and support data rescue?
  • Then there’s protecting out data from Governments. Although conducted before the Snowden leaks the Electronic Frontier Foundation’s annual survey asks “who has your back?” - and, although it’s still young, it seems companies are starting to take notice.
  • Choose your services wisely – we (the geeks) are early adopters – and we can stop using social networks too.  It’s easier to change services if data can be exported – but all too often that’s not the case so you need to own your own content.
  • We all have the power to change the web to the way we want to see it, says Paul – all we need is need a text editor, an FTP client and some webspace. In the wake of the NSA revelations, Bruce Schneier writes in the Guardian how those who love liberty have to fix the ‘net.

Paul’s slides are available on Speaker Deck.

So, what’s next?

MK Geek night #7 is on Thursday 5 December featuring:

together with five minute features from:


Even if I don’t manage to get there (or if I do and am a bit slow blogging) you can find out more on the MK Geek Night website on Twitter (@MKGeekNight), or Soundcloud (on the MKGN stream).

Related reading: James Bavington has another write-up of MKGN #6.

[Update 7 December 2013: Added links to Paul Robert Lloyd's slides and to James Bavington's post]

Technology

Some SharePoint tips/tricks for editing list forms and hiding standard page elements

Over the last couple of years, I’ve written a few SharePoint-based blog posts as I’ve hacked my way around the company’s infrastructure, trying to get it working the way I’d like it to (creating dashboards, adding the odd bit of workflow and custom columns to pre-populate list data, embedding video, etc.).  There’s a rumour that we might get SharePoint 2013 soon but, for now, all of my hacks/tweaks have been based on 2007.

In the last few weeks, one of the projects I’ve been involved in has taken a major step forward, engaging a real designer and a real web developer, instead of li’l ol’ me.  From my perspective, this has been great news, although there have been some times when I’ve questioned the maintainability of custom code used in situations that have caused problems in the past (e.g. to edit the default forms used for displaying list items).

As you might expect, I’ve also picked up a couple of tips, working alongside some experts – and I thought I’d make a quick note of them here, for future reference.

Editing list forms without using SharePoint Designer

First up, a handy little trick to edit list forms (like DispForm.aspx) without having to resort to using SharePoint Destroyer Designer, which is little more than Microsoft FrontPage (just about OK in it’s day but long past its sell-by date now). Just add ToolPaneView=2 into the query string, for example http://sharepoint.intranet.com/00001/Lists/ListName/DispForm.aspx?ToolPaneView=2.

Unfortunately, this doesn’t seem to work on my Office 365 SharePoint site, so it might be 2007-only but useful nevertheless. In our case, this was used to add a (hidden) Content Editor Web Part with some jQuery and CSS to style up the form.

Hiding page elements

Sometimes, there are standard elements of a page that you don’t want to display and, without access to the templates used on a corporate site, that might be difficult. As it happens, all that’s required is a little in-line CSS, included in a (hidden) Content Editor Web Part:

<style type="text/css">.ms-webpartpagedescription {display:none}</style>

Just use the Developer Tools in Internet Exploder (or similar in your choice of browser – although, if you’re using SharePoint 2007, it probably will be IE) to find the class of the element to be hidden. In this case, I removed some standard text that was inserted below the breadcrumb trail at the top of the page but I’ve also seen it used to hide the page title and it could be applied to other elements too.

Credits: Thanks to Steve Haxell for sharing these methods with me.

Technology

Faster websites, better photography, a better browser, great conferences and a better life (#MKGN)

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:
  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

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…)

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…

Technology

Short takes: Amazon Web Services 101, Adobe Marketing Cloud and Milton Keynes Geek Night (#MKGN)

What a crazy week. On top of a busy work schedule, I’ve also found myself at some tech events that really deserve a full write-up but, for now, will have to make do with a summary…

Amazon Web Services 101

One of the events I attended this week was a “lunch and learn” session to give an introduction/overview of Amazon Web Services – kind of like a breakfast briefing, but at a more sociable hour of the day!

I already blogged about Amazon’s reference architecture for utility computing but I wanted to mention Ryan Shuttleworth’s (@RyanAWS) explaination of how Amazon Web Services (AWS) came about.

Contrary to popular belief, AWS didn’t grow out of spare capacity in the retail business but in building a service-oriented infrastructure for a scalable development environment to initially provide development services to internal teams and then to expose the amazon catalogue as a web service. Over time, Amazon found that developers were hungry for more and they moved towards the AWS mission to:

“Enable business and developers to use web services* to build scalable, sophisticated applications”

*What people now call “the cloud”

In fact, far from being the catalyst for AWS, Amazon’s retail business is just another AWS customer.

Adobe Marketing Cloud

Most people will be familiar with Adobe for their design and print products, whether that’s Photoshop, Lightroom, or a humble PDF reader.  I was invited to attend an event earlier this week to hear about the Adobe Marketing Cloud, which aims to become for marketers what the Creative Suite has for design professionals.  Whilst the use of “cloud” grates with me as a blatant abuse of a buzzword (if I’m generous, I suppose it is a SaaS suite of products…), Adobe has been acquiring companies (I think I heard $3bn mentioned as the total cost) and integrating technology to create a set of analytics, social, advertising, targeting and web experience management solutions and a real-time dashboard.

Milton Keynes Geek Night

MK Geek Night #mkgn

The third event I attended this week was the quarterly Milton Keynes Geek Night (this was the third one) – and this did not disappoint – it was well up to the standard I’ve come to expect from David Hughes (@DavidHughes) and Richard Wiggins (@RichardWiggins).

The evening kicked off with Dave Addey (@DaveAddey) of UK Train Times app fame, talking about what makes a good mobile app. Starting out from a 2010 Sunday Times article about the app gold rush, Dave explained why few people become smartphone app millionaires, but how to see if your idea is:

  • Is your mobile app idea really a good idea? (i.e. is it universal, is it international, and does it have lasting appeal – or, put bluntly, will you sell enough copies to make it worthwhile?)
  • Is it suitable to become a mobile app? (will it fill “dead time”, does it know where you go and use that to add value, is it “always there”, does it have ongoing use)
  • And how should you make it? (cross platform framework, native app, HTML, or hybrid?)

Dave’s talk warrants a blog post of it’s own – and hopefully I’ll return to the subject one day – but, for now, that’s the highlights.

Next up were the 5 minute talks, with Matt Clements (@MattClementsUK) talking about empowering business with APIs to:

  1. Increase sales by driving traffic.
  2. Improve your brand awareness by working with others.
  3. Increase innovation, by allowing others to interface with your platform.
  4. Create partnerships, with symbiotic relationships to develop complimentary products.
  5. Create satisfied customers – by focusing on the part you’re good at, and let others build on it with their expertise.

Then Adam Onishi (@OnishiWeb) gave a personal, and honest, talk about burnout, it’s effects, recognising the problem, and learning to deal with it.

And Jo Lankester (@JoSnow) talked about real-world responsive design and the lessons she has learned:

  1. Improve the process – collaborate from the outset.
  2. Don’t forget who you’re designing for – consider the users, in which context they will use a feature, and how they will use it.
  3. Learn to let go – not everything can be perfect.

Then, there were the usual one-minute slots from sponsors and others with a quick message, before the second keynote – from Aral Balkan (@Aral), talking about the high cost of free.

In an entertaining talk, loaded with sarcasm, profanity (used to good effect) but, most of all, intelligent insight, Aral explained the various business models we follow in the world of consumer technology:

  • Free – with consequential loss of privacy.
  • Paid – with consequential loss of audience (i.e. niche) and user experience.
  • Open – with consequential loss of good user experience, and a propensity to allow OEMs and operators to mess things up.

This was another talk that warrants a blog post of its own (although I’m told the session audio was recorded – so hopefully I’ll be able to put up a link soon) but Aral moved on to talk about a real alternative with mainstream consumer appeal that happens to be open. To achieve this, Aral says we need a revolution in open source culture in that open source and great user experience do not have to be mutually exclusive. We must bring design thinking to open source. Design-led open source.  Without this, Aral says, we don’t have an alternative to Twitter, Facebook, whatever-the-next-big-platform-is doing what they want to with our data. And that alternative needs to be open. Because if it’s just free, the cost is too high.

The next MK Geek Night will be on 21 March, and the date is already in my diary (just waiting for the Eventbrite notice!)

Photo credit: David Hughes, on Flickr. Used with permission.

Technology

Reducing website errors with HTTP 301 redirects

A couple of weeks ago, I wrote about a WordPress plugin called Redirection. I mentioned that I’ve been using this to highlight HTTP 404 errors on my site but I’ve also been using the crawl errors logged by Google’s Webmaster Tools to track down a number of issues resulting from the various changes that have been made to the site over the  years, then creating HTTP 301 redirects to patch them.

Redirections as a result of other people’s mistakes

One thing that struck me was how other people’s content can affect my site – for example, many forums seem to abbreviate long URLs with … in the middle. That’s fine until the HTML anchor gets lost (e.g. in a cut/paste operation) and so I was seeing 404 errors from incomplete URLs like http://www.markwilson.co.uk/blog/2008/12/netboo…-file-systems.htm. These were relatively easy for me to track down and create a redirect to the correct target.

Unfortunately, there is still one inbound link that includes an errant apostrophe that I’ve not been able to trap – even using %27 in the redirect rule seems to fail. I guess that one will just have to remain.

Locating Post IDs

Some 404s needed a little more detective work – for example http://www.markwilson.co.uk/blog/2012/05/3899.htm is a post where I forgot to add a title before publishing and, even though I updated the WordPress slug afterwards, someone is linking to the old URL.  I used PHPMyAdmin to search for post ID 3899 in the wp_content table of the database, from which I could identify the post and  create a redirect.

Pattern matching with regular expressions

Many of the 404s were being generated based on old URL structures from either the Blogger version of this site (which I left behind several years ago) or changes in the WordPress configuration (mostly after last year’s website crash). For these I needed to do some pattern matching, which meant an encounter with regular expressions, which I find immensely powerful, fascinating and intimidating all at once.

Many of my tags were invalid as, at some point I obviously changed the tags from /blog/tags/tagname to /blog/tag/tagname but I also had a hierarchy of tags in the past (possibly when I was still mis-using categories) which was creating some invalid URLs (like http://www.markwilson.co.uk/blog/tag/apple/ipad).  The hierachy had to be dealt with on a case by case basis, but the RegEx for dealing with the change in URL for the tags was fairly simple:

  • Source RegEx: (\/tags\/)
  • Target RegEx: (\/tag\/)

Using the Rubular Ruby RegEx Editor (thanks to Kristian Brimble for the suggestion – there were other tools suggested but this was one I could actually understand), I was able to test the RegEx on an example URL and, once I was happy with it, that was another redirection created.  Similarly, I redirected (\/category\/) to (\/topic\/).

I also created a redirection for legacy .html extensions, rewriting them to .htm:

  • Source RegEx: (.*).html
  • Target  RegEx: $1.htm

Unfortunately, my use of a “greedy” wildcard meant this also sustituted html in the middle of a URL (e.g. http://www.markwilson.co.uk/blog/2008/09/creating-html-signatures-in-apple-mail.htm became http://www.markwilson.co.uk/blog/2008/09/creating-.htm-signatures-in-apple-mail.htm) , so I edited the source RegEx to (.*).html$.

More complex regular expressions

The trickiest pattern I needed to match was for archive pages using the old Blogger structure.  For this, I needed some help, so I reached out to Twitter:

Any RegEx gurus out there who fancy a challenge, please can you help me convert /blog/archive/yyyy_mm_01_archive.htm to /blog/yyyy/mm ?
@markwilsonit
Mark Wilson

and was very grateful to receive some responses, including one from Dan Delaney that let me to create this rule:

Source RegEx: /blog\/([a-zA-Z\/]+)([\d]+)(\D)(\d+)(\w.+)
Target RegEx: /blog/$2/$4/

Dan’s example helped me to understand a bit more about how match groups are used, taking the second and fourth matches here to use in the target, but I later found a tutorial that might help (most RegEx tuturials are quite difficult to follow but this one is very well illustrated).

A never-ending task

It’s an ongoing task – the presensce of failing inbound links due to incorrect URLs means that I’ll have to keep an eye on Google’s crawl errors but, over time, I should see the number of 404s drop on my site. That in itself won’t improve my search placement but it will help to signpost users who would otherwise have been turned away – and every little bit of traffic helps.

Technology

Creating a dashboard using a SharePoint list (part 4): bringing it all together

This week has been a bit of a SharePoint-fest as I’ve walked through the stages of creating my SharePoint dashboard. For obvious reasons, I can’t share the version I use at work, so I’ve created a mockup using the SharePoint site that comes with my Office 365 subscription. Feel free to take a look…

The three posts that explain how I built this dashboard can be found below:

As the code examples I gave use quite a lot of SharePoint formulas for calculated values, I thought it might also help to link to Microsoft’s formulas and functions documentation as well as their examples of common SharePoint formulas.

Right, that’s enough SharePoint for now… next week will be back to the usual mix of tech, marketing, photography and whatever else I stumble across…

Technology

Creating a dashboard using a SharePoint list (part 3): indicating several states of progress

Yesterday’s post looked at using ticks/crosses on my SharePoint dashboard to track progress on activities. I was quite happy with this, but my manager wanted to show progress, rather than a simple binary done/not done – and I wanted it to be visual, not text-based.

We settled on a system using a series of circles with various stages of “filling-in” (none, quarter, half, three-quarters, full) to show how far an activity had progressed, and I amended the code that I used for the ticks and crosses.

Using the same principle as with the ticks and crosses, this time the font changed from Wingdings to Arial Unicode MS, which includes the appropriate shapes under the block elements and geometric shapes subrange:

First of all, I changed my column to indicate progress from a Yes/No to a Choice with radio buttons for Not Started; Started; Additional Information Required; Almost Complete; Complete and Not Applicable.

Next I needed to adapt the formula used to calculate the correct HTML code for the display column by nesting repeated iterations of

IF([Task Progress]="Started","<DIV style='font-family:Arial Unicode MS; font-size:24px;'>?</DIV>","<DIV style='font-family:Arial Unicode MS; font-size:24px;'>?</DIV>")

Eventually this ended up as:

=IF([Task Progress]="Complete","<DIV style='font-family:Arial Unicode MS; font-size:36px; color:gray;'>?</DIV>",IF([Task Progress]="Started","<DIV style='font-family:Arial Unicode MS; font-size:36px; color:gray;'>?</DIV>",IF([Task Progress]="Additional Information Required","<DIV style='font-family:Arial Unicode MS; font-size:36px; color:gray;'>?</DIV>",IF([Task Progress]="Almost Complete","<DIV style='font-family:Arial Unicode MS; font-size:36px; color:gray;'>?</DIV>",IF([Task Progress]="Not Applicable","<DIV style='font-family:Arial; font-size:36px; color:gray;'> </DIV>","<DIV style='font-family:Arial Unicode MS; font-size:36px; color:gray;'>?</DIV>")))))

The code is not pretty, but it seems to work, and the result is something like this:

Technology

Creating a dashboard using a SharePoint list (part 2): tick/cross status indicators

In my last post, I wrote about how I used a script I found on the Internet and a couple of calculated columns to show a Red/Amber/Green (RAG) status on a list in SharePoint. I also wanted to clearly indicate which items in my list were complete, and which were still ongoing.

My inspiration for this came from Chris Bell’s posts on displaying tick marks in HTML, combined with the same code that converts my text RAG Status to HTML.

This time, I converted a Yes/No Checkbox (actually, it’s TRUE/FALSE) to HTML code for a tick or a cross in another column, using the following formula:

=IF([Task Completed]=TRUE,"<DIV style='font-family:Wingdings; font-weight:bold; font-size:24px; color:green'>ü</DIV>","<DIV style='font-family:Wingdings; font-weight:bold; font-size:24px; color:gray;'>û</DIV>")

The end result is something like this:

It needs the Wingdings font to be installed, but everyone who needs to access this list is using a Windows PC – feels like a bit of a fudge but it works for now… and can always be replaced with a graphic (as I did for the KPI indicators on the RAG status).

%d bloggers like this: