Simian Studios Blog

xip.io + MAMP Pro = Super-Easy Local Network Testing

Fri, 15 Feb 2013 11:15:18 +0000

I’m sure I don’t need to extol the virtues of working locally via MAMP Pro. One thing that has always annoyed me though is that to test on devices other than my main box, I’d have to either upload the files to a server or fiddle with something like DynDNS.

Recently though, I discovered xip.io. It’s a neat little service that takes 99% of the hassle out of viewing your local sites on any other device that’s connected to your network.

How to use it

First things first, make sure your local server has a fixed IP on your local network. You can do this through the router config options. If you’re not sure how, just search for “[your router make/model] assign IP to computer” or something similar. This isn’t strictly necessary but it will save a lot of hassle down the line if you reboot your router and all the local IPs change.
OK, so let’s say your server has the local IP address 192.168.0.1, and the local site you want to use with xip.io goes by the hostname example.local. In MAMP Pro, click on the example.local item under “Hosts”, then click the + button under the “Aliases” box.
Enter the alias in the form [hostname].[server IP].xip.io. So in our example, we would enter example.local.192.168.0.1.xip.io. Leave the box ticked and don’t worry about the drop-down on the right.
Hit “Apply” and restart the servers to update the config.
On the network-connected device you want to test, navigate to the alias you just entered, and weep with joy at how easy it was.

That’s it! Bear in mind that anything that relies on the hostname in your code (cookies, for example) will be using the alias rather than the usual local hostname so be prepared to tweak some configs if needed.

Of course, you can still take advantage of the simpicity of xip.io if you dont use MAMP Pro, you’ll just need to set up the alias by hand. Personally though, I think the time saved with Pro is well worth paying a few quid for - it can often be found on those cheap software bundle sites for a hefty discount.

Using Bitbucket for Automated Deployment of Multiple Repositories

Fri, 01 Feb 2013 17:31:37 +0000

I’ve recently started using Bitbucket as a kind of off-site backup for my Git repos - it works beautifully with SourceTree as you can have all commits pushed to the “origin” repo by default. Lovely.

Usually I work locally with MAMP, pushing updates to a staging server if I need to show the client or something. Before now, I did that with good old FTP, but I wondered if there might be a way to have my commits pushed to the server via Git.

Thanks to Bitbucket’s “services”, there is. I discovered Brandon Summers' awesome post and managed to get it working with a minor change. The only problem that remained was that Brandon's script only worked with one repo, so if you wanted to use it with multiple repos on the same server, you’d have to have multiple instances of the script available at different URLs.

So, I came up with a solution, which I’ve added to GitHub as a gist so you can fork it etc.

Usage

The script is essentially the same as Brandon’s so follow his instructions for the most part, then set up your root directory and repo list.

As an example, if you have repos at /home/projects/example/htdocs and /home/projects/another_site, you’d set it up like so:

/** * The root directory where the repos live. * * @var string */ $root_dir = '/home/projects/'; /** * A list of repo slugs that the script is allowed to know about, and their * locations relative to $root_dir. * * @var array */ $repos = array( 'example-repo-1' => 'example/htdocs' 'another-repo' => 'another_site' );

If Bitbucket tries to push to a repo that isn’t defined in $repos, the script will fail gracefully and do nothing, so you don’t need to worry about accidentally updating the wrong repo. Just check your commits before you push them to Bitbucket!

If you use this, please let me know how you get on with it! Any forks or suggestions for improvements etc are very welcome - I will be using this daily so if I come up with anything myself I’ll add it to the gist.

Photo: Colorful buckets 2 by ivanmarn

Blog Post Amnesty

Wed, 30 Jan 2013 08:31:49 +0000

Hello there. It’s been a while.

After a promising start to 2012, sadly my good intentions to post more fell by the wayside as other commitments piled up. After a while, I’d lost the momentum that I’d built up in the first quarter of the year, so even though I kept thinking to myself that I really should do a post, I also talked myself out of it by wanting to have something “good” to end the drought.

Well, enough is enough. I’m breaking the inertia of inactivity with this short and simple post, and I’m going to make an effort to follow it up and get back into the habit of sharing stuff.

I know that there are other people like me out there, who are full of ideas and want to share but are struggling to take the first step back. So this is a call-to-keyboards - find or make a clear half-hour for yourself and crank out a post. It could be a simple “I’m back” post like this, or it could be as simple as going into your drafts and giving an old idea a quick polish.

If you’re reading this, and I haven’t posted for a while, feel free to nag me! If you need a bit of help getting back into the swing of things yourself, let me know and I’ll badger you - post by post we’ll change the world, or at least our poor neglected blogs!

Darker Inactive Tabs in Chrome for Mac

Thu, 08 Mar 2012 07:56:35 +0000

I've recently made the switch from Firefox to Chrome as my default browser and by and large I'm very happy with the decision.

One thing that was niggling me though was that when you have a lot of tabs open, it can be tricky to tell which tab is active. I tried playing with some of the available themes but didn't really like any of them - all I really wanted was the default theme but with slightly darker inactive tabs. So eventually I decided to just do it myself.

Confession time - I didn't do it from scratch all by myself, but instead used the excellent tool over at ChromeTheme.net, although on looking at the files generated it seems really easy to make your own themes if you're familiar with JSON.

Installation instructions

Download the theme
At the bottom of the window, click on "Continue"
You're done!

More info

Ironically, seeing as this theme is meant to enhance usability, there is one slight usability issue - the "close tab" buttons are quite hard to see on inactive tabs. Sadly Chromium and thus Chrome don't let you skin them yet so there's nothing I can do for now. However I think it's a minor loss for a big win - the buttons are in the same place as always and are perfectly visible on active or hovered tabs.

As the theme was made for personal use, I've only tested it on OS X Lion but as far as I can tell Chrome on other systems does a much better job of distinguishing inactive tabs anyway.

That said, if you find any issues let me know and I'll see what I can do to fix it up!

CodeIgniter Conference 2012

Wed, 07 Mar 2012 11:19:22 +0000

I love CodeIgniter. So when I found out there was a two-day conference dedicated to it in my home town, it frankly would have been rude not to have turned up.

Codeigniter Conference 2012 (or CICONF, from now on) featured talks from people like Phil Sturgeon, Jamie Rumbelow and Harro 'WanWizard' Verton, who should be familiar to anyone who's worked with CodeIgniter or visited the forums.

The talks were all CI related of course, but the overriding theme of the day was "how can we do cool stuff with CodeIgniter?" - there were talks about why CI is great for building APIs, how to use MongoDB with CI and how to get PHPUnit and CI running together for proper unit testing, as well as more generalised talks extolling the virtues of CI and sharing some useful hints and tips.

Talk Highlights

The talks were all interesting and useful, but the few I've picked out below were really the stars of the show for me.

Nick Jackson - API-Driven Development

Hungry Puppy by Carol Adams

If you haven't heard of API-driven development (aka "eating your own dog food") before, it's quite simple. Instead of building a cool web service and then tagging an API on later in response to user demands, the idea is that you build the API first, then build your application on top of it. That eliminates a lot of the gripes people have with APIs - unreliability, bugs, glacial development for example- because the API is automatically a first-priority concern.

It's not worthwhile for smaller projects obviously, but if you think you might need an API at some stage, it's probably better to bake it in from the start than try to muddle one together as an afterthought.

The reason CodeIgniter works well for API-driven development is that it has lots of useful libraries and helpers that take care of things like authentication, plus the MVC pattern already has you thinking the right way in terms of separating your domain logic, data handling and presentation.

Nick also shared a few useful tips, such as the fact that you can use CI's built-in form validation library to validate incoming API calls which saves a lot of development time over rolling your own validation.

John Crepezzi - Unit Testing with CodeIgniter

Test Me by cancsajn

Unit testing is like exercising regularly and having a healthy diet - we know we should do it and that the benefits are numerous, but breaking the inertia of inaction can be very difficult.

John's talk was mainly a beginner's guide to unit testing with PHPUnit, peppered with CI-specific tips.

The thing I really liked about John's talk was that it made it feel very easy to get started with unit testing in CI - even if you have no unit tests on a big code base, you could start by just adding a few tests to your models, or you could just write a few very general "smoke tests" - does it work, yes or no?

Adding unit tests to my base (or "skeleton") project has been on my to-do list for a while now but John's talk has inspired me so when I get some time to do it I'll give it a try. It would certainly be a nice feeling to embark on new projects knowing the basics are in place so that I can add unit tests for important stuff without having to do a whole bunch of setup each time.

Alex Bilbie - Introduction to MongoDB

Before CICONF I'd heard of MongoDB but if I'm honest, wasn't quite sure what it was for or how I would use it in a project.

Luckily for me, Alex did a stirling job of explaining the concepts behind Mongo and its pros and cons for different systems.

Essentially Mongo bridges the gap between traditional relation databases and key-value stores. Instead of rows you have documents, and instead of tables you have collections.

One of the coolest things about Mongo (in my opinion anyway!) is that it is schemaless, which means you're not restricted to a certain set of fields. For example, if I run an online store selling books, DVDs and CDs, the data I might want to store that relates to a DVD won't map exactly to the data I want to store about a book or a CD. In MySQL I would either have to have separate tables and join them, or store them in a single table but with loads of fields, most of which would be empty. In Mongo, I store them in a single collection and each document would contain just the fields relevant for the item it represents.

Another nice thing about documents is that you can store arrays inside the JSON-style objects that actually hold the data, so you don't need link tables like you would in a relational system - for example if I wanted to store different tags that applied to the items in my store.

Mongo also makes it easy to replicate your database as a backup, or shard it if you need to load-balance.

It's not all gravy though. Mongo doesn't have transactions or joins so that automatically precludes it from being used for stuff like billing. There are workarounds, and you can even use Mongo and a traditional SQL database alongside each other, but obviously different projects will have different requirements.

Mongo looks like good fun to work with so I'm glad Alex's talk has helped me add it to my list of possible things to use.

Jamie Rumbelow - Who Needs Ruby?

Trail Tracks 1 by Travis Price

Jamie is someone who's had a big influence on the way I use CodeIgniter so quite a bit of his talk was stuff I already knew or practiced, but it was great to see how passionate he is about what he does and he was probably the best "performer" of the conference.

One thing Jamie talked about that I hadn't thought about previously was the idea of having form validation rules in the model rather than the controller. It makes sense when you think about it, because the rules relate to the data, and putting them in the model keeps the data logic in the model. You have to use a slight hack to do it (manually map your data back to the $_POST server variable) but it's not a heinous crime.

Another thing Jamie talked about that I've "kinda" been doing for a while without realising was presenters. The idea is that you add an extra layer between the model and the view, so your view gets its data from the presenter rather than the model itself. What this does is cleans a lot of the logic out of your views and makes it easier to maintain down the line. It also means you're sticking to the "tell, don't ask" principle of telling your presenter what you want from it and letting it decide what to return rather than asking a whole bunch of questions about what it can give you.

The Social

Just Beer by Jayesh Nair

As with any conference there was a healthy social scene as well as the "work" part. I missed the organised evening activities sadly but I managed to get a good bit of pub time in and hang out with people like Adam, Jamie, Ian and Andy which was great fun.

One thing that was nice was that we were already in central London so we could see a few sights in between pubs and restaurants - on the Saturday lunchtime I even managed to have a quick wander around an art exhibition!

Next time I'll have to make sure my calendar is clear and go the whole hog with the social, from the stories I heard the people who went out on the town had a whale of a time!

Overall

In my books CICONF 2012 was a very enjoyable experience - I managed to learn a lot and have a good time too. I would have preferred it to be in the week rather than on a weekend as I need to give my brain a bit of downtime but it wasn't as strenuous as a working day so it wasn't really a hardship.

I'm looking forward to seeing what Phil and co. can come up with for CICONF 2013!

12412 January - Responsive Web Design

Fri, 24 Feb 2012 07:27:58 +0000

For me, one of the most fun things about working on the web is the fact that there's always new things to try out - be it a new technology, a new framework or just a new way of thinking about the way we work.

The tricky part is trying to keep up with everything - it's so easy to fall behind and then feel like you'll never catch up.

That's why I think the 12412 initiative is such a great idea. Commit yourself to learning about something new each month and by the end of the year you'll have experienced a dozen things you hadn't tried before.

So, for January's effort I decided to finally get around to learning about perhaps the biggest talking point of the last couple of years - responsive web design.

What is it?

Responsive Design, Responsively Illustrated by James Mellers

In essence, "responsive web design" is the buzzword (buzzphrase?) that encapsulates a bunch of techniques which aim to make a website "aware" of the canvas it has available to display itself on - the canvas being the user's browser window.

Such techniques include a fluid- rather than fixed-width grid system, media queries and the use of JavaScript to selectively load content based on the size of the viewport.

The concept of fluid-width designs is not a new one of course, but the advent of media queries and the huge leaps in the quality of small-screen browsers have made it easy and necessary to consider the context in which our designs are viewed.

For example, a fixed-width design at 960 pixels will look great on a desktop monitor or laptop, but a smartphone with a screen only 320 pixels wide will either introduce horizontal scrolling or zoom out to fit the whole page in the viewport, forcing the user to manually zoom in if they want to actually read your content.

A responsive website would instead display a different set of styles and perhaps even different content based on the space available to display it. If you want to see what it looks like in the wild, check out the recently-launched Smashing Magazine redesign by Elliot Jay Stocks and resize your browser window - there's everything from a wee narrow layout for smartphones, right through to a super-wide layout for the big screens.

How to do it?

It sounds a bit daunting at first to consider that you'll be designing for so many different use cases, but really it's quite simple, providing you keep it in mind from early on in the design process. Retrofitting is certainly possible but not as easy as building responsively from the ground up.

First steps

As with any design, the bedrock is a solid grid system. Rather than using pixels though, we use percentages to allow our design to grow and shrink with the browser window.

Once you've got your grid layout built, you'll probably find that there are certain points where the design stops working quite so nicely. Perhaps on narrower screens your lovely horizontal navigation drops down onto two lines, or maybe on a wider screen your paragraphs get too wide and become hard to read.

These are your design's breakpoints and this is where media queries come in. If you determine that the minimum width your navigation can be displayed nicely at is 600 pixels, then you would set a media query to alter the styles at anything below 600 pixels, like this:

@media screen and (max-width: 599px) { /* styles for screens < 600px wide here */ }

Delving deeper

FitVids.js

Once you've done that and fixed the main breakpoints in the design itself it's time to consider the content.

As the design gets narrower you might want to change the font sizes, leading and perhaps margins and padding on your content to make it easier to read on smaller screens.

For richer media such as images or videos there are a few things we can do. Setting a max-width of 100% on an image will make it resize so that it never escapes the boundaries of it's containing element. Thankfully, browsers are intelligent enough these days to resize an image proportionally rather than stretching and squashing our beautiful photos and illustrations.

Videos are a bit more tricky, as the iframes used by the big video-sharing sites for their embed codes don't respond in the same way as images or even the HTML5 video element. Luckily for us, Chris Coyier and the clever guys at Paravel have come up with FitVids.js, a jQuery plugin that takes your videos and makes them properly responsive with a single line of JavaScript.

As responsive web design begins to mature, I'm sure we will see the niggly problems such as videos being squashed but in the meantime we can just do what we have always done and design defensively, making sure our content is still usable if not beautiful when we hit those breakpoints.

It's that easy?

Well, yes and no. The basics of responsive design are fairly straightforward and shouldn't be hard to get to grips with. Anyone who's designed with a fluid or elastic layout before will be familiar with some of the issues faced, and adding media queries for breakpoints is straightforward.

What can get tricky is when you have a relatively complex design that needs to be converted from flat comps to proper HTML/CSS goodness. One way around this problem could be to design in the browser, gradually layering up the design until it looks great but with the responsiveness baked in from the very beginning. Then again, it may just be that we need to design with the fact that the layout needs to be malleable always in the back of our mind.

Sure, responsive design gives us a lot of challenges, but it also helps us to serve users better so I think the challenges are worth overcoming. No doubt there will be browser improvements, JavaScript fixes and innovations in CSS that will smooth the path and make it easier for designers to dabble with responsive design.

How can I learn more?

I can't not mention "the book" on responsive design, the aptly-named "Responsive Web Design" By Ethan Marcotte. It's very well written and Ethan's enthusiasm for responsive design really shines through and makes you want to get involved.

As well as the book, there are or course thousands of articles online. .net has a bunch, Smashing Magazine has a few and you'll also see a few on sites like 24ways. Of course, you could always do a Twitter search for the #RWD hashtag too.

Start now!

One thing that I like about responsive design is that you can start right away. Even on an existing fixed-width design, and even if it's just a single breakpoint so that it's easier for people to read your stuff on a mobile device. I know that's not really the idea but if it benefits the user then some responsiveness is better than none in my books.

I'm currently working on just that for this site - it's readable enough on a tablet but on a mobile screen it's a bit small, so keep your eyes peeled for a new "mobile version" soon!

Conclusions

Overall I think this was a great start to 12412 for me - it's something that will influence my design work from now on so a good thing to make acquaintance with early on.

Writing this up has made me wonder why I haven't gotten to grips with responsive web design sooner - perhaps I was just afraid that it would be too complicated but in honesty the only problem it's causing me now is that I want to responsive-ize everything I've ever worked on. That's partly why I'm posting this at the end of February - I've been having so much fun experimenting I've not gotten around to writing it up!

I'd love to know your thoughts on responsive design - what were your first experiences with it? What have you discovered that wasn't immediately apparent from reading books or blog posts? Have I totally missed the point with my "single breakpoint" idea? Let me know in the comments!

New Adventures In Web Design 2012

Thu, 02 Feb 2012 09:04:48 +0000

Following on from the successful first event - my first ever web conference - in 2011, New Adventures made an equally successful return with their 2012 installment last week.

The first event set some very high standards in terms of the quality of the talks and the general attendee experience so I was eager to see what Simon, Greg and the team would manage to pull off this year.

Anticipation

After what seemed an eternity of waiting and tweeting about how much we were all looking forward to it, including almost double-booking my hotel room because I forgot I booked it way back when I got my ticket, the event was finally upon us.

Like the first event, the conference-eve social was ably handled by the Erskine Design team in the form of Erskine Bowling. I missed out on actually being in a team again but there was plenty of opportunity to meet, chat and catch up, as well as the excellent idea of being able to pre-register for the conference itself which certainly made things easier in the morning.

The day

Having braved the infamous Holiday Inn Express breakfast, we made the short trip over to the Albert Hall to be greeted by a crack squad of volunteers who quickly shepherded us through into the lobby for an extra hit of caffeine and the chance to have a quick mingle. I must give praise to the Albert Hall staff for their efficiency and politeness at this point - it's a small thing but it all adds to the overall experience of the day for me.

Once we were all settled Simon kicked things off with a quick introduction before handing over to the first speaker...

Dan Mall

Dan's talk was one of the ones I was most looking forward to, having admired his work for some time. I mean, the guy redesigned the Star Wars website - you don't get much more geek kudos than that!

Dan's talk was titled "Design-ish" and explained some of the design-related lessons Dan has learned from working with clients like LucasFilm and Crayola. What I thought was really great was that Dan gave us a behind-the-scenes look at his working processes, discussing things that worked well and things that didn't work so well in equal measure.

A good example of this is when he spent hours trying to come up with some kind of way to map the relationships between Star Wars characters, only to be blown away by the knowledge that his contact at LucasFilm had amassed off his own back. The lesson there was that we should get to know our clients as well as possible, because their knowledge of their domain will always trump what we can come up with through an algorithm.

I got to chat with Dan in the evening and he said he was really nervous about giving that talk for obvious reasons - standing in front of 600 of your peers and telling them your failures is the stuff of nightmares for a lot of people! But I'm really glad he did it because the lessons learned are incredibly valuable and for most of us having access to that kind of knowledge without the pain of learning the hard way is rare indeed.

Naomi Atkinson

Photo by Jelson25

Next up was Naomi, who essentially gave a masterclass in self-branding for web folk, as well as a call-to-arms for the web community as a whole to look at what we can do to make the world a better place.

The branding masterclass part was done by looking at various celebrities - not my favourite group of people in the world but Naomi rightly pointed out that they are all masters of self-branding. The first example was Puff Daddy / P Diddy (etc.) - I think he could rename himself anything he wanted and people would get on board with it, no matter how ridiculous. The takeaway from this is not to be afraid to rebrand where needed, but also not to be afraid to build upon an existing brand.

Jordan was next under the microscope - surprisingly we can all learn something from her and that is to not be afraid of self-promotion. Jordan is probably the best example of this with the seemingly endless variety of ways she manages to get herself noticed. I don't think I'll be launching my own magazine anytime soon but the concept of deciding how you want to be noticed and who by is very powerful indeed.

Finally Naomi set her sights on everyone's favourite mockney, Jamie Oliver. Jamie is probably best known for his work on projects like Jamie's School Dinners, Fifteen and Ministry of Food. What links these projects is that they all benefited others and the lesson here is that we can work for the greater good at the same time as helping our own branding. Just because a project helps others, doesn't mean there's nothing in it for us. Naomi is a good person to attest to this, having done a lot of work for charitable organizations.

Naomi followed that up by extolling us to look for problems in the world that we can use our skills to solve. I agree that we spend a lot of time on the web trying to solve what are relatively minor problems, when there are people struggling to find clean water or food to eat. Imagine what a difference we could make if 600 people each made a small commitment to solve a "real" problem!

Travis Schmeisser

Photo by Jose Carli

I must admit that I didn't know much about Travis before New Adventures, but the title of his talk - "We Used to build Forts" - alone was enough to pique my interest.

Travis thinks that the web industry has lost some of the creative spark that it used to have, and that we need to rediscover our sense of self-expression through our work.

I can personally relate to this - it is all too easy to get bogged down doing the same thing over and over again and forget why we loved working on the web in the first place.

Travis went on to share ways in which he feels we can recapture the energy and enthusiasm of those early days, with lots of short-and-sweet snippets to take home.

One that really resonated with me was "loosen up" - I've written in a similar vein before but Travis is simply saying that not every piece of work is going to be a masterpiece. Another was "make for the sake of it" - things like Strong Bad never really served a purpose other than being entertaining, so why not do something creative just for the fun of it? It doesn't even matter if other people ever see it, just making something is enough to get your creativity flowing.

Robbie Manson

Photo by Carsten Schlipf

Robbie's talk was titled "The Mindful Designer". For Buddhists, mindfulness is very important on the path to enlightenment and Robbie's talk showed that to be true for designers too.

The idea is that just by being mindful of our design processes, we can produce better work.

For example, if working in a team, the earlier we open up to our team members, the earlier we get to benefit from their experiences. Or by getting away from the screen and experiencing "positive disruption" we can change the way we think about our work.

Robbie used lots of great examples to illustrate his points and to be honest I'm finding it hard to do his talk justice so my recommendation is to take the time to watch the video - it's well worth it!

Trent Walton

Photo by David Ritter

Trent is another of my design heroes so I was particularly excited to see his talk and it didn't disappoint.

Trent's talk was titled "Break Everything" and centred on the value of breaking the rules for the sake of progress. By breaking the rules we can discover what is possible, then we can develop our understanding of it, and then we can improve it.

Essentially by breaking the rules we're pushing things forward, so we should seek out new and exciting ways to do so.

Developing understanding may not always be a walk in the park but it's necessary. However the fun we can have while breaking the rules in the first place more than balances it out.

I thought Trent's talk was an excellent complement to Travis' - if you're going to create something for the sake of it, why not break the rules at the same time and see if you can come up with something really groundbreaking?

Cameron Koczon

Photo by Lars Sundstrom

Cameron, perhaps better known as Fictive Cameron, named his talk "The Potential Impact of Design".

The impact of design can be broken down into three separate but related segments: elicit emotion, induce action and effect change.

The idea of designing to create emotion has had a lot of attention lately - the idea being that if you can create an emotion in your audience, they are more likely to act - for example by signing up to your service, or donating to your charity. If you get enough people to act, you can actually effect real change in the world.

The main focus of Cameron's talk was how we as designers can use that idea to either find something to fix and create a startup to fix it, or join an existing startup and use the power of design to help them fix their problem.

A good piece of take-home advice was that a lot of people are afraid to do this kind of thing because they're afraid that they know nothing about business and are worries about competition. Cameron used an anecdote that most electric fences are actually switched off most of the time - the cattle learn that the fence is electrified and know not to go near it again. Once the cows have learned this behaviour, the fence works just as well when switched off. Cameron explained that the two fences of experience and competition also have no current, and that if we take the risk we will find that neither of those obstacles is insurmountable.

Denise Jacobs

Photo by Arjun Kartha

Next up was Denise, whose talk was totally different to any other talk I've ever seen at a conference.

Titled "Your Brain on Creativity", Denise part-narrated, part-acted a story involving a disembodied brain trapped in office-cubicle hell and a mysterious man who shows up and liberates the brain from its bindings and shows it how to be creative again.

The main take-home from Denise's talk for me was that you can't force creativity. Ever had a great idea in the shower? That's because when our brains are relaxed, they're more likely to be creative. Techniques like just taking a few deep breaths or laughing at something are enough switch that "creative brain" on and get the ideas flowing.

Denise also noted that fear suppresses creativity - if we're worries about getting things wrong, we're not going to create anything. This resonates with me personally due to my attempts to worry less and do more and it's nice to know I'm on the right track.

It was definitely a memorable talk, personally I found that the story element made the salient points stick in my head much better than a "normal" talk - kind of like the old "memory palace" trick that mentalists have used for centuries to perform astonishing feats of memory.

Frank Chimero

Photo by Frank Chimero

Finishing off the day was Frank, who first came to my attention with his project The Shape of Design - a Kickstarter-funded book on the "why" of design rather than the "how".

Frank's talk was perhaps the most philosophical of the day, with plenty of great soundbites on the role of design and our role as designers in the world we inhabit.

For example: the tiny pony. A tiny pony is an incredible thing that we take for granted. The phrase itself stems from the time Frank saw a tiny pony in the Apple Store and everyone else just acted like they couldn't see it. It's always useful to be mindful of the tiny ponies in our world - for example the fact that you're reading this article at all. To reach you it's been converted into a digital format, split into lots of tiny pieces, whizzed down some long, thin pieces of metal and glass (perhaps halfway around the world!), been reconstituted into the single document and displayed on your screen.

Frank's talk ended with a really powerful quote - "The world is not yet done. Lucky us" - while we are shaped by the world, we can also shape the world. What a great way to end an inspiring day!

Winding down

Photo by tobiwei

As before, the afterparty for the event was at the Escucha club and as before a generous bar tab helped get the conversations flowing, not that it needed much help after a day jam packed with conversation points.

It was great to catch up with old friends - some of whom I hadn't seen since the first New Adventures - and I managed to meet and chat with some new people too, including most of the speakers which was great - everyone's so approachable and happy to just chat, if you've never had the guts to just go up to someone you really should try it.

All in all

It should be obvious by now that I had a thoroughly enjoyable time in Nottingham - the New Adventures team more than lived up to their own high standards.

The only bad thing about New Adventures is that it has to end, and it's a bit of a downer on Monday morning to be sat catching up on emails and doing everyday stuff when you're still buzzing from the event and itching to get out there and change the world!

Colour Picker Bug Workaround for Adobe Fireworks CS4 in OS X Lion

Mon, 16 Jan 2012 09:27:31 +0000

Last week I finally upgraded my iMac from Snow Leopard to Lion. I'd heard some stories of incompatibility with certain software but the only thing I could see that would really affect me is the famous Fireworks Colour Picker bug.

Basically, if you're using Fireworks CS4 in Lion, the default colour picker is just plain broken. You can choose colours from the defaults provided but if you wanted to select a colour from the document itself you're S.O.L.. It doesn't seem like Adobe is in much of a rush to fix it either - after all, they'd far rather you shell out for an upgrade than actually bother to do something tedious like support users who paid a pretty penny for the then-but-no-longer latest version of their product. Nice, huh? </rant>

The workaround

Fortunately, there is a way to carry on using CS4 without having to upgrade or install any extra software. Yes, it takes a few extra clicks, but once you get into the habit it only takes a second or two.

Click the coloured tile as usual to bring up the default colour picker panel:
Click the little coloured wheel at the top right to bring up the Apple colour picker:
Click the little magnifying glass at the top left:
Click anywhere on the screen to sample the colour:
See that the coloured tile to the right of the magnifying glass has changed to the selected colour and click "OK"

That's it! You just saved yourself £146.37, my friend! Feels good, doesn't it?

This workaround also has the added benefit of making it easier to precisely select the colour you want, so it's a double-win.

Or…

As pointed out in the comments by Chris and Scott (thanks guys!), there is another method you can use which is the eyedropper in the "Colors" section of the main Tools panel.

All you need to do is click the pencil icon if you want to change the line, or the bucket if you want to change the fill:

Then click the eyedropper just above:

Then click your colour.

It won't work for everything like the technique above, for example the canvas colour or the colours used in a filter, but for just changing basic fill or line colours you might find it a bit easier.

Please let me know if you found this tip useful, and definitely let me know if it helped you save some money - I'll send my guys round to collect soon ;)

Main image: Colours 4 by Billy Alexander

Smile CSV Scraper for FreeAgent and Xero

Tue, 10 Jan 2012 07:17:13 +0000

Are you happy with your bank? I am. I use Smile and they're five-nines awesome - I heartily recommend them to anyone who banks in the UK. The real killer feature - their ethical policy as part of the Co-operative Bank - something all commercial banks should have in my opinion.

One thing they don't do though, is allow you to export your statements in any kind of format - which is kind of a pain for users of services like FreeAgent or Xero as it makes it hard to reconcile your banking transactions. I resorted to copy-pasting the data from the table and reworking the CSV by hand - a bit of a drag to say the least.

No more!

That continued until last week, when I saw a tweet about Aral Balkan's CSV scraper for his HSBC statements - a similar problem, which made me wonder if the code could be converted to work on the Smile statements.

Luckily, Aral is generous enough to share his scraper code under a Creative Commons license, so I got to work and came up with this:

The bookmarklet

Smile Prepare CSV

Drag the above link into your bookmarks toolbar to create a shiny new bookmarklet:

How to use it

My script works in exactly the same way as Aral's:

Sign in to your Smile account and navigate to a statement
Click the "Smile Prepare CSV" bookmarklet
Click the little "copy to clipboard" icon that appears in the row of buttons above the statement:
Paste the generated CSV into a plain-text editor
Save the file with a .csv file extension
Upload the saved file to FreeAgent or Xero

More info

The CSV generated is in the format described by FreeAgent on their help pages. I'm reliably informed that it will also work with Xero, but you will need to teach Xero what each field in the CSV means the first time you upload.

You can view the source if you want to see what's going on, my comments aren't as entertaining as Aral's I'm afraid but it should be easy enough to see how it works. The first part of the file is just includes, the real code starts at line 323.

Credits & licensing

Really all I've done here is take Aral's work and make a few tweaks, so huge kudos to him for not only coming up with the idea but also being cool enough to share the fruits of his labour under a permissive license.

As such, this code is released under the same license as Aral's - the Creative Commons Attribution-Noncommercial 2.0 UK: England License.

Thanks also to the authors of the components that do most of the heavy lifting, they are:

jQuery by John Resig
Clippy by Tom Preston-Werner
jQuery Flashembed by Brad Robertson

Main image credit: "20 Pounds" by Stephen Davies

Looking Back, Looking Forward

Thu, 05 Jan 2012 02:40:15 +0000

In case you somehow missed it, we're at the start of a brand new year so it's time to look back over the last twelve months and think about what we're going to do in the next batch of lunar cycles.

I've never really been one to go overboard on new year's resolutions - I prefer to keep them general rather than overly specific. I know, goals should be SMART - but I don't think of them as goals as much as reminders of already-held personal values. So here goes.

Looking back

Overall I feel 2011 was a great year both professionally and personally, though there is a fair amount of overlap between the two.

I attended my first conferences, met lots of great people, visited some new places and learned a lot of new stuff, plus I managed to fulfil my ambition to do some public speaking - only for ten minutes but it's a start.

I released my first piece of public code and wrote my first article as a guest author, both of which have been great experiences and ones I hope to repeat.

I broke out of an exercise rut and took up running, managing to complete the Pine Ridge 10K and the Grim Challenge towards the end of the year.

One thing I started that is still ongoing (forever, most likely) is a commitment to be more "authentic" in all areas of my life. This is probably the most important thing I did in 2011, as it has the potential to affect everything else that happens for the rest of my days - perhaps I'm just being dramatic but I quite like that thought.

Looking forward

Inspired by Ant's "2012 Challenge List", here are my aforementioned vague resolutions for 2012, these in addition to keeping up the positives from last year:

Consume less

It's easy to consume content online. Blogs, Twitter, news sites and the like have practically infinite amounts of interesting content. However, most of it isn't necessary for personal or professional development.

So, I will aim for quality over quantity in my content consumption, which will give me time to...

Share more

I've been blogging for about 18 months now but haven't managed to keep up any consistent level of output. Towards the end of last year I started to remedy that and in 2012 I aim to share more often - be it my own original work or things I find that interest me.

To this end, I'll be reworking my blog slightly into a more tumblelog-style affair to make it as easy as possible for me to share stuff. I'll also aim to share more away from my own site and Twitter account, be it speaking in real life or writing elsewhere.

I'm talking about books here - the tangible variety preferably but eBooks will do just fine too. I have a slight addiction to web design and development books - if I see a new book out and it's related to what I do, I've gotta have it.

When I commuted daily this wasn't a problem as I had about two hours a day to read on the train but since I started working from home that part of my day has vanished. I'll aim to reintroduce reading time into my day and work through the stack of books that has been steadily growing.

Experiment more

In 2012 I want to get out of my comfort zone as much as possible. I managed it quite well in 2011 but there is always room for new experiences. Taking up running was an experiment that really paid off for me - being able to complete my first races was a great feeling.

This year I will aim to take as many opportunities as I can to try new stuff in all areas of my life. For professional development I will be taking part in the 12412 initiative and encourage you to do the same. For personal development I'll formalise my bucket list so that I can use it to help me seek out opportunities.

Let's go!

There we have it. If you've taken the time to read this far and notice me failing to live by the above manifesto then you have my full permission to berate me loudly and publicly.

Happy new year!

Photo credits: main image - Fireworks by Daniela Sanchez. Looking Back - Pico Island by Guglielmo Losio. Sharing - For Us 2 by Spiz. Experiment - Lab Work by Nina Briski.

Simian Studios Blog

xip.io + MAMP Pro = Super-Easy Local Network Testing

How to use it

Using Bitbucket for Automated Deployment of Multiple Repositories

Usage

Blog Post Amnesty

Darker Inactive Tabs in Chrome for Mac

Installation instructions

More info

CodeIgniter Conference 2012

Talk Highlights

Nick Jackson - API-Driven Development

John Crepezzi - Unit Testing with CodeIgniter

Alex Bilbie - Introduction to MongoDB

Jamie Rumbelow - Who Needs Ruby?

The Social

Overall

12412 January - Responsive Web Design

What is it?

How to do it?

First steps

Delving deeper

It's that easy?

How can I learn more?

Start now!

Conclusions

New Adventures In Web Design 2012

Anticipation

The day

Dan Mall

Naomi Atkinson

Travis Schmeisser

Robbie Manson

Trent Walton

Cameron Koczon

Denise Jacobs

Frank Chimero

Winding down

All in all

Colour Picker Bug Workaround for Adobe Fireworks CS4 in OS X Lion

The workaround

Or…

Smile CSV Scraper for FreeAgent and Xero

No more!

The bookmarklet

How to use it

More info

Credits & licensing

Looking Back, Looking Forward

Looking back

Looking forward

Consume less

Share more

Read more

Experiment more

Let's go!