This weekend sees the first webretreat, something I’ve been working on for about 6 months on and off. I thought I’d share some thoughts on how webretreat came about, and what it is.
Web development is a baby when compared to almost any other profession. Most of us won’t have a formal qualification in ‘web’, and we come from diverse backgrounds. Last month, surrounded by 5 web designer/developers I counted 2 arts grads, a chemist, a neuroscientist, a lawyer (dropped out in 3rd year) and a ‘not telling’. Diverse.
We are all designers
From here on in I’ll refer to all of us as web designers. The whole front end / back end / designer / developer distinction is distracting and not particularly useful. We all need to work in pixels, we all need javascript, html and css. We also all need planning skills, the ability to interpret a brief, the ability to respond to changing requirements. We need to design. To design solutions to problems.
I’ve been involved in running a couple of coderetreats, and although coderetreat would prove valuable to any webdesigner, I found that many were reluctant to attend. This was mainly ascribed to a feeling that it ‘wasn’t for web folk’, that it was ‘too hardcore’, or that it just wasn’t ‘relevent’.
So I started working on a ‘webretreat’ format to give the benefits of coderetreat to web designers. With help from Kevin and Ian I think we’ve come up with a format that works really well.
We can all be better designers
Webretreat aims to give a framework for web designers to practice their craft. We all need to practice. Depending on your background and your working environment you may never get time to refactor, to consider reusability, to pair program or to consider (let alone write) tests.
You may use source control, you may have a standard development environment, but equally you may not. In either case there is room for improvement. There always is. It’s no coincidence that the best in any endeavour practice the most.
Front end focus
The focus of webretreat is on the front end, browser side technologies. Some of the challenges are simplified or made more interesting if you choose to use some server side code – but all can be successfully completed using only browser side code. I feel that the front end is increasingly at the heart of web design, and it’s easy to dismiss as ‘just’ the front end.
Webretreat also focusses on core techniques. Some of these are integral and likely universally well established – like well structured CSS, validating HTML, semantic markup. Some see really mixed adoption in real world front end work – source control, versioning, refactoring, reuse, deployments, test driven development, style guides, automated testing, rwd techniques… So at webretreat you may be improving something you do every day, or find yourself thinking about a new aspect of the job.
Structure
A webretreat follows a structure that will be familiar to anyone who has attended a coderetreat:
All day event, usually on a weekend
Free, supported by sponsors
45-minute programming sessions
pair programming
after each iteration you throw away your code and switch partners
after each iteration each pair shares something about what they thought, what they learned
lunch is delicious
at the end of the day everyone gathers together in a circle, and shares something about the day
to the pub
Share, Learn
A core aspect of this which will be new to many web designers will be pair programming.
In pair programming two designers share a single computer for the 45 minute session. One drives, taking the keyboard. The other observes, making observations and suggestions but not actually typing.
The perspective gained from being the driver or observer can be surprising and rewarding. It also gives you ‘quality time’ with a wide selection of web designers.
Experiment
Webretreat is an experiment, and we really need your feedback.
If you are attending on Saturday please look out for the survey I’ll issue after the event. Also, please grab me on the day and let me know what you think. The objective is to create a useful format, not to convince you that we got it right first time, and feedback is critical towards that goal.
If you’re not coming on Saturday please still get in touch, I’m keen to take as many soundings as I can to help get this right. I’m already planning the second run out in the new year.
I’ll post a follow up once the event is out of the way. Wish us luck, and keep up on twitter and on the webretreat website.
I’ve been thinking a lot about community recently. About a year ago I returned from Build ‘11 with an urge to reboot the web community in Aberdeen. Bringing Refresh to Aberdeen seemed like a worthy goal for 2012. A few conversations and a bit of web design later we had a small team and a plan in place.
We announced Refresh in January, and have held a number of great events through the year. We’ve got a second Code Retreat coming up in December, and some exciting work in progress on the 2013 version of Refresh. Currently I’m knee deep in the new website build.
90-9-1
At the Northern Lights conf I was reminded of the 90-9-1 rule. In essence this states that 1% of a community make things happen, 9% contribute to those things occasionally, and 90% observe / consume.
To improve the activity of a community the 1% should focus on bringing some of the 9% into the 1% fold. This increases the amount of energy being spent making things happen – with clear benefits to the community as a whole.
One of the challenges with Refresh has been in quantifying the extent of the community. Judging by the number of people who turn up for our events the community likely numbers around 150. Judging by the numbers following Refresh on Twitter / Facebook the number is closer to 300. I suspect the real number is higher.
So how am I defining ‘the community’?. Who is Refresh for?
Refresh Manifesto
The Refreshing Cities movement has a very clear set of objectives. From the Refreshing Cities website:
Refresh is a community of designers and developers working to refresh the creative, technical, and professional culture of New Media endeavors in their areas. Promoting design, technology, usability, and standards.
The Refresh Manifesto
Let’s gather great minds
Let’s share all of our knowledge
Let’s all grow and learn
Let’s promote local talent
Let’s be more than we think can be
Let’s make our cities better
So, it’s people working in or interested in digital, creative, web. It’s ambitious, aiming to elevate the individual and the community. It’s opinionated, aiming to promote growth, learning and standards.
It feels like more than 300 people in the city probably care about this stuff.
Increase participation?
Firstly, should we be trying to increase participation? I think we should. There is an argument that you shouldn’t persuade people to take part – that if the passion is there then they will come forward.
I don’t buy this.
Exclusivity has a price, and the price is exclusion. Events like Refresh should offer a low barrier to entry to avoid exclusion. A very low barrier to entry. Our events are free, they are usually central, and usually unticketed. The only exception so far has been the coderetreat – because these have been oversubscribed and it would be impractical to try and accomodate unknown numbers. But you can’t force people to take part. You can only present the material.
Increase activities
Rather than focus on increasing the numbers in the broad community – we should focus on enabling the 9% to join the 1%. Anyone in the 9% with an idea should have an easy route to propose the idea, and get the wider community behind them to make it happen.
This route is available today, and it’s simple. Talk to me. Talk to me, or to Ian, or to Kevin. Post something on the Facebook. Tweet @refreshaberdeen. Let us know and we’ll help. Seriously. We love this stuff. Even stupid ideas – especially stupid ideas.
So that’s my focus for the year ahead with Refresh – help folk do stuff – to broaden and improve the Refresh Aberdeen calendar. Forget about numbers, focus on activities. If the activities and content are strong, people will join the 90, the 9 and the 1 percent.
The briefest of posts to link to the notes from one of the best talks at this years Build, titled “Unbuilding”.
This is the way to share slides by the way, with the full text of the talk and interspersed slides. No fancy embedded sliders, no weird interactive things, just lovely portable text and images.
One of the things I’ve been interested in for the past while is ownership over the content I create as I go around the internets.
The most obvious content is blog posts like this one. Which is why I moved from posterous to Statamic. My content now resides in my dropbox as flat text files. Lovely.
My name is Steven and I am an Instagram user
The next focus for me was my photos. Instagram is fun. It’s a guilty pleasure.
I don’t like all those photos existing only on Instagram. I can’t easily give you a link to ‘my instagram stuff’. It’s a weird experience. I want to own that stuff and do what I want with it.
IFTTT makes it super easy to grab an instagram shot. IFTTT stands for ‘if this then that’. So If I post an instagram shot then grab a copy and put it in my dropbox. Easy.
So I have the file, but how to pull that into my blog? Step one – repoint my ifttt.com recipe to drop them into my Assets folder in my Statamic filespace. I now have the image in the right place.
But Statamic uses markdown files to control the presentation of content. Having the image is fine – but I now need an .md file with some meta in the header, and ideally an image tag, the caption and a link to the original on Instagram.
The recipes
So let’s look at the recipes at IFTTT. We need two recipes. One for the image, and one for the statamic markdown file.
The first step was to make sure that the filename that was saved to my dropbox was unique. I might take ten photos a day titled “coffee” or “clouds” so the caption was no use. The created date includes a timestamp – so that’s likely unique. “CreatedAt” in IFTTT language.
The second step is to create our markdown file. This uses the ‘create text file in dropbox’ option in IFTTT. We’ll make sure again that our filenames are unique – but this time we’d like them to also be human readable – so I use CreatedAt-Caption to have the unique date and the simple name. We can’t set the extension, as unfortunately IFTTT only creates .txt files – we’ll come back to that later.
So the content field should contain something like this:
The title just takes the caption that you gave your photo. If you don’t give your photo a title this will be empty so make sure your templates have a default / other handler.
I’ve added an instagram category – as I’m repeating this process across other sites, so it’s nice to categorise.
The markdown image markup is simple – and uses the CreatedAt again for the URL. Now – this comes through with spaces in this instance, which is different from the URL created for the image. We’ll come to handling that later.
Finally on the IFTTT side of things, the < br > tags are converted into linebreaks in the text file. Without the < br > you’d get a single line text file – which Statamic would choke on as whitespace / newlines are important to the parser.
Version One
So with these two recipes running we end up with these two files:
/_content/stream/october 16, 2012 at 10:31pm batman test.txt
/assets/ifttt/instagram/own/October 16, 2012 at 10:31PM.jpg
So we have an obvious annoyances there. Filenames with spaces, commas and colons are not filenames I can make friends with, and Statamic won’t like targetting them.
I chose to clean this up using a couple of simple bash scripts that I can run as part of my deploy step (I publish by pushing to the server using git, so I can easily just run a couple of bash scripts before I commit).
This script is pretty long hand while I figure out the best way to shape the IFTTT process – there are neater ways to do this in less lines – but this makes it clear what’s going on.
# simple script to rename files created by ifttt.com and
# sent to dropbox. Need to clean spaces commas and colons
# from auto jpg names
# remove spaces and replace with -
for file in *.jpg
do
mv "$file" "${file// /}"
done
# remove commas and replace with -
for file in *.jpg
do
mv "$file" "${file//,/-}"
done
# remove colons and replace with -
for file in *.jpg
do
mv "$file" "${file//:/-}"
done
This script above reformats the filenames nicely just by stripping out stuff we don’t need. This is run in the images directory.
# simple script to rename files created by ifttt.com and
# sent to dropbox. Need to change .txt to .md and replace
# spaces with dashes to get them ready for statamic use
# remove spaces and replace with -
for file in *.txt
do
mv "$file" "${file// /-}"
done
# change extension from txt to md
for file in *.txt
do
mv "$file" "$(date +%F)-${file/txt/}md"
done
This one is a bit simpler and runs on the content directory. I’m not overly worried about the , and : in the markdown filenames. I replace the spaces with a – to maintain some legibility. I prepend a YYYY-MM-DD formatted datestamp to the filename, and replace the .txt extension with the .md extension that Statamic demands. (Note – this assumes you are running your updates on a schedule at least once a day – otherwise you’d need to base the YYY-MM-DD stamp on the date of the file.)
Version Two
So with these two shell scripts fixing things up we get there new filenames:
This gives us a working entry in the blog. But the image link is broken, and the categories don’t work, but the entry appears in the right place. Let’s look at part of that .md file:
IFTTT ignores our request for whitespace ahead of the “- instagram”. Without that indentation this isn’t recognised by Statamic. Quite rightly not recognised – the whitespace is important. We’ll need to slot that back in somehow.
The second thing is the spaces in the image filename. These are a pain. There are no fields we can use in IFTTT that give the same string for a filename and in the content of the text file. An option to allow that would save SO much time as we wouldn’t have to do any work to fix our image URLs. Even a numeric timestamp / uid would suffice.
Version Three
A wee bit of text manipulation within the file is all that’s needed. That’s for another post though…
My blog has been hosted on Posterous for quite some time. I decided to move it when Twitter bought Posterous. I finally have. I thought it worth documenting my reasoning and motivations for future reference.
Why move from Posterous?
The acquihire by Twitter meant, should twitter chatter be believed, that further work on Posterous was pretty much cancelled. The team were ‘excited to be working on Twitter’, rather than ‘excited about making Posterous even better as part of the Twitter empire’. Bye bye Posterous.
Painful escape
Moving your blog away from Posterous is pretty painful. Posterous doesn’t offer ANY export options. So the accepted mechanism is to write something yourself using their API, use the pretty decent WordPress importer, or use a paid service like export my posts.
I chose the WP route. A quick install of WP, run the Posterous importer, then run the exporter. I now have a nice directory of assets and a big wp.xml file. If I was planning to host on WordPress I had now moved – apart from some minor nasties with formatting, and file paths.
There is one more step to getting your code into Statamic – see below.
Why not WordPress?
Some of the content on my Posterous had been imported from a previous WP blog. I moved from WordPress for a few reasons. I grew frustrated by the knitting in boxing gloves feeling you get working with WP themes. The updates were a pain with the way I had my hosting setup. And Posterous was ‘the new hotness’. Who could resist.
I had some pretty specific requirements on my wish list:
No DB wasn’t on the list, but demanding content to be in file format pretty much dictated this. Open source wasn’t on the list either. As long as I have my content in files, including assets and meta data, I can port them to a new system. It’s half of the fun.
This was the main driver in moving, and the over-riding reason I didn’t opt for ExpressionEngine, a system I know pretty much inside out by now. Ownership over the content, postability, and the control over all aspects of the site were absolute requirements.
Statamic
There are quite a few options on a Ruby stack that satisfy my needs – but on Lamp things are pretty restricted. Statamic is a great fit for me though. It has a control panel that I don’t really use, but other than that everything is driven from the content files.
Here is an example of a VERY simple content file:
---
listing_image:
title: Move to statamic
categories:
- code
- stream
featured: no
author: Admin
---
##title
This is a tweet length blog post. Adorable.
As you can see, categories are set up right there. If that was the first use of the category ‘example’ it will add it to the navigation. No ‘categories’ section to set up. Just fire it in there. The post body can mix markdown and html – so my old posts from Posterous are all still stored as HTML. I can change that if I want – but for now it works just fine.
Templates
Templates use a combination of layouts, templates and partials to pull together your pages. The syntax is simple:
Routing is based on the content filenames. Everything just works as you would expect, and you have flexibility to split content into channels, streams etc… easily.
Statamic import
There isn’t an ‘import’ as such, but the PHP file in this gist does a great job of tearing that wordpress.xml file into individual markdown files with a basic meta header. It missed a few meta things for me, but nothing I didn’t want to re-address in any case. Your mileage may vary.
Backup and Deployments
This is the best bit. With Posterous if the service disappeared then so did my blog. Nae luck.
Now I deploy through git to my server, so I have full change history for rolling back changes, checking when I updated stuff, and can switch branches to try out new themes etc…
I also keep my local copy running on MAMP for a local fully working copy of the site. I also keep it in dropbox, so it’s on a bunch of machines at any one time.
So I now have a small directory with a bunch of text files which I can punt around as I see fit. If Statamic goes evil, and I’ve no reason to believe that it will, I can write a wee script to tear through those text files and reformat my meta data to suit another engine pretty quickly.
Next
So I’m pretty happy with the new setup. I really haven’t found anything that Statamic doesn’t let me do. I’ll update this if I do. It only took a couple of evenings to get this far – half of that was building a theme and learning the principles. A lot of the rest of the time was just hand tidying the exported files.
It’s worth mentioning that Statamic is paid software. As this is a personal site I get away with the $19 licence.
The next job is to get my other ‘stuff’ into this repo. So when I tweet / app.net / instagram etc… I either originate it here and syndicate out, or syndicate it back into here to keep an archive copy that I own.
So back a while I blogged about the Makey Makey. An arduino based bit of kit with the added fun of crocodile clips aimed at making electronics easy and fun for kids.
Well it arrived a while ago and it’s more fun than I expected, and I expected loads of fun.
The set up below kept the two boys entertained for a whole morning working our way through the various games on the cbeebees site. Well, I say the set up below. Over the course of the morning we’d tried just about everything as a button.
The Makey Makey just acts as a keyboard up down left right panel – with a space and return. You hook up those ‘keys’ using the croc clips to anything conductive, and then poke the button with something else that’s conductive. Like your brother, or a cauliflower, or a carrot.
Peppers don’t work very well. Bananas and Carrots are great. Toast only works when it’s got some butter and marmalade on it. People work ok too.
A great way to have fun with electricity, demistify electronics, and get to play games on a saturday morning.
This blog now runs on Statamic – a fine CMS which takes a nodb approach to storage.
It’s a young CMS, so unlike #eecms or #wordpress there aren’t a whole sea of extensions out there. You have to scratch your own itch a lot. That’s part of the fun. At the moment (October 2012) there isn’t any developer documentation for add ons to speak of, so it’s a case of scouring github for examples and working from there to figure out the shape a plugin takes.
I came across my first need to build an addon tonight while playing with the template for this site. I needed an avatar. So I needed a gravatar. So I needed to calculate an md5 from an email address. So I needed an add on. A quick Google for ‘gravatar statamic’ found nothing.
About 15 minutes later and bingo, this little snippet…
It’s a trivially simple addon – but it shows the simplicity of the Statamic approach that you can go from zero to working implementation in just a few minutes. Relatively little scaffolding nonsense to contend with, and intuitive structure, straight to the point.
The source is up on github, along with the docs if you might find it handy.
ScotlandJS was, I think, the first JavaScript conference in Scotland. It took place on Tuesday 26th July, and was a good day. So one of my usual run throughs. Links are a mix of the speakers twitter, own website, and links they mentioned in the talk.
Peter Cooper
Travelling down on the morning, I missed most of the opening keynote. Peter did a history of the language, and I caught the last ten minutes. Will have to track down the video.
Philip told the story of Shakey – a realtime multiplayer game based on an XML version of Macbeth. The live demo of the game worked pretty well.
It was really interesting to see how using Pusher forced an event driven design process. This focused everyone on the messages being transported from an early point. this approach seems particularly accessible for non technical participants in a project – which I need to test soon!
For the Refresh Aberdeen crowd, Shakey is like a massive ‘zone button challenge’ which cheats and has two buttons. But only two, showing the fun that can be had with a minimal interface.
This was a good talk – plenty coverage of an area that I’ve never really looked into unless things got disastrously slow / unresponsive.
A lot of the stack we often work in is outwith our direct control by the time we pull in a stack of libraries – so implementing a lot of this might be tough without some decent refactoring – but this is probably the talk that I’ve spoken about most since Tuesday.
Dnode is something I’ve had a tiny look at in the past and tane’s talk really helped make sense of what we can do with it. I personally find the ‘jump feom keynote to the editor to show the code’ approach to presentation can make it difficult to follow the detail – but Tane did a good job of verbally keeping you hooked into the code. I have a couple of projects in mind for dnode now.
I also love any talk that starts with “this stuff isn’t my job, I just do it for fun”.
RWD, Mobile First and Progressive Enhancement in one talk. Leo gave a good talk. This is the day to day for me, but if you didn’t have a good background on this it gave a good outline of the issues, and a consistent point of view.
Testing JavaScript. This was a good talk, highlighting a couple of new options for testing in JS. Discussing headless browsers, browser less testing etc… Some interesting discussion of BDD and TDD.
I could listen to Jim Weirich all day long. Brain the size of a planet. More enthusiastic than Johnny Ball. I’m not even going to try to describe how he made lambda calculus in JavaScript fun (and funny) but track down the video when it appears.
Off the back of Scotland JS some twitter chat suggested there might be need for Meetup groups in Scotland focussing on JavaScript.
So if you are a JavaScript dev working in Aberdeen / ‘shire get in touch with @refreshaberdeen and we’ll get something sorted out. And we’re talking the full spectrum of JS users – from ‘I use jquery sometimes’ through to ‘my whole back end is in node.js’.
I gave a wee talk on the raspberry pi at techmeetup Aberdeen last night. Thanks to Bruce, James and the sponsors for having me.
My talk very much focussed on the implications of introducing ‘proper’ computers to young people, and giving them access to simple computing from an early age.
My eldest son, Dugald, will be 4 on Sunday. I’m sure that’s well below the target age for the Pi. We’ve had the Pi a few weeks and he can already log on to a linux box. He still gets N and H mixed up sometimes, but he can log onto a linux box.
I was barely able to write a for loop at 14. He has 10 years on me. If he decides to pursue an interest in computing / code he has TEN years on me. By the age of 25 he could have TWENTY years coding under his belt. Get your 10,000 hours? Pah!
The discussion was lively, and I think one comment in particular, about dilbert being ‘diagnosed’ as an engineer, has huge implications.
If every child is given experience of computing, the ones who have an affinity with it will be able to explore, start early, and build an intuitive relationship with the computer. Those that don’t will move on to something else. It’s a nice thought that the Rasp Pi makes it more likely that these kids will experience Linux, Open Source, and the Maker ethic when first experiencing computers – rather than some closed down, dumbed down environment ‘for kids’. I’m looking at you VTech.
Here are my slides from the talk. If the video appears I’ll link it here later.
I’m reading the Geek Manifesto at the moment. It’s an important book, it presents a clear, concise case for the important role evidence based policy making should play in government, why evidence makes geeks happy, and why we should care about policy at all.
It also paints a depressing picture of the mix of backgrounds of the people that rule us, the lack of scientists, the lack of coders, and the general lack of understanding of the scientific method.
How you think is more important than what you think.
Evidence based policy seems simple to me. You try things out, measure results, and do more of the things that work well, less of the things that work less well. Be honest about your objectives, and honest about your assumptions. Be confident in your motives, and accept your ‘mistakes’ as sources of evidence.
It’s what I did in the lab when I studied chemistry, and it’s what I largely do in client work now when delivering web solutions. Learn from your results – both good and bad.
This leads to a direct link between what we do and why we do it.
Without a science background some of this may be inintuitive – but I think the book does a good job of covering the basics of scientific method, evidence first approaches, and the broader scientific / geek attitude to lifes problems.
There are so many important issues where irrationality, religion, knee jerk press and general dogma drive failing policies. A broader belief in an evidence based approach could help solve real problems.
Twitter brought to my attention a project to get a copy of the Geek Manifesto into the hands of every westminster MP. So I signed up and sent a copy off to Malcolm Bruce MP. I really do hope he reads it.
Steven Milne 