Gridlover, Codekit, Buffer and Flipboard

In our continual hunt for the best apps and tools for web designers we look at Gridlover, Codekit, Buffer and Flipboard.

Play

On this week’s show:

Hello from Geneva

Paul Boag:
Hello and welcome to Boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag.

Marcus Lillington:
And my name is Marcus Lillington.

Paul Boag:
And here we sit in sunny Geneva.

Marcus Lillington:
Yes, it’s very, very hot – hot like an oven Geneva. We haven’t been outside yet today.

Paul Boag:
No, I am scared.

Marcus Lillington:
You are going to get slapped round the face.

Paul Boag:
It was – well, getting off the plane, it was like, oh, I’ve just been hit by a wall of heat.

Marcus Lillington:
I don’t really think of Switzerland as being a ridiculously hot country, but it is at the moment.

Paul Boag:
No, it is at the moment. This is absolutely true. Of course, for all the listener knows, we might be lying about being in Switzerland, we might be at home. We could do that every week. This week we are from the Caribbean, yeah.

Marcus Lillington:
Let’s do it, anyway.

Paul Boag:
Yeah. Absolutely, and then what – so what you will need to put over this is some sound effects of Switzerland sound effects – yodeling cowbells.

Marcus Lillington:
Yodeling cowbells, yeah.

Paul Boag:
What else, ticking cuckoo clocks.

Marcus Lillington:
Yes. Every stereotype we can possibly think of

Paul Boag:
Toblerone – although that doesn’t make a lot of noise does it?

Marcus Lillington:
Well, I’ve been ordered to bring some home.

Paul Boag:
Absolutely. Do you know they do fruit nut Toblerone now? Best thing in the world ever.

Marcus Lillington:
Yeah, that would go down very well.

Paul Boag:
Yeah, yeah, absolutely.

Marcus Lillington:
Chocolate.

Paul Boag:
Chocolate, what do you want to talk about?

Marcus Lillington:
I don’t want to talk anything else but chocolate.

Paul Boag:
So we’re out here to meet a client so we apologize if there – or prospective client to be perfectly accurate. We do have clients out here, because we got Nestle out here, are we allowed to say Nestle? Well I didn’t know if we had an NDA or something…

Marcus Lillington:
It’s on our on our website, so.

Paul Boag:
Of course it is.

Marcus Lillington:
Yes. It’s fine.

Paul Boag:
That’s okay. Yes, so we’ve done work for Nestle. Of course everybody in the U.K. will hate us because for some reason, there is this perception that Nestle are an evil monster.

Marcus Lillington:
Yeah.

Paul Boag:
But it was quite interesting that getting to the bottom of that. Anyway, that’s a whole another show.

Marcus Lillington:
It is.

Paul Boag:
You’re picking your words carefully now.

Marcus Lillington:
No, well, no. I’m just going to say, I mean they – the people we work with at Nestle were very – they were very sensitive about it and they want to try and make it better. They were saying in some areas of the world they’re loved.

Paul Boag:
Yes.

Marcus Lillington:
But in this kind of…

Paul Boag:
I have the same problem. In Britain, I’m hated. But in other countries, I’m loved.

Marcus Lillington:
Really?

Paul Boag:
No. I’ve been personally hated.

Marcus Lillington:
Yes, fair enough. There was an official – just to get back to the Nestle point is I was watching one of the videos of their CEO but he was basically kind of saying well, it doesn’t matter, you can hate us, you can love us, we are making a million pounds a second. Kind of…

Paul Boag:
You’ve got to love that attitude.

Marcus Lillington:
I mean it wasn’t sort of like a – there wasn’t sort of gloating about it but it was kind of just stating the fact.

Paul Boag:
Yes.

Marcus Lillington:
We’re obviously doing something, right.

Paul Boag:
Yes, but just because you’re making money doesn’t mean you’re doing everything right.

Marcus Lillington:
Yes.

Paul Boag:
No, and actually it was a really interesting project to work with them because they were very exacting, weren’t they in their requirements?

Marcus Lillington:
Yes.

Paul Boag:
It really kind of pushed the envelope of good quality code, it was a good project to work on.

Marcus Lillington:
Indeed. Let’s move on from that before I say something else.

Paul Boag:
Yeah, go ahead, say something you’re going to have to edit this podcast

Marcus Lillington:
Yes.

Paul Boag:
Excellent, I love it. So if I just randomly say Nestle all through the podcast it’ll be brilliant; make it hard. So yes, we are in Switzerland to meet a prospective client, our apologies if the audio is maybe a bit more echoey, we are staying in Ibis that I previously described as the concentration camps of hotels, so it’s a slightly echoey room.

Marcus Lillington:
It is a little bit.

Paul Boag:
It’s a little bare, isn’t it? Minimalistic.

Marcus Lillington:
I slept on – he points at the bed, I slept on this side of the bed and woke up in the middle of the night could hardly move. And all I had to do was wriggle about a foot that way into the middle of the bed and it was suddenly a really comfy bed. It’s like you’ve just slept where every 10,000 people before me.

Paul Boag:
Yes. And they’ve never replaced the mattress.

Marcus Lillington:
No.

Paul Boag:
I don’t like to think about that.

Marcus Lillington:
No, no. In the middle of the bed, it was perfect.

Paul Boag:
There you go, see. Right so what I am annoyed by is you’ve got bigger room than me. Are we going to talk about web design at any point?

Marcus Lillington:
I don’t want to.

Paul Boag:
No, it’s overrated anyway.

Marcus Lillington:
Yeah.

Paul Boag:
You always end up with better rooms.

Marcus Lillington:
That’s because I am nicer than you, Paul.

Paul Boag:
Ah, you cheat, you got propositioned by two ladies that wanted to spend all your money at the reception.

Marcus Lillington:
I’d forgotten about that. Yes, it’s true.

Paul Boag:
Dare anyone to give you the money.

Marcus Lillington:
It was like the old days being a pop star.

Paul Boag:
Was it?

Marcus Lillington:
Yeah

Paul Boag:
There we go, oh, you managed to get that into this show. We got…

Marcus Lillington:
People need reminding

Paul Boag:
You very subtly dropped it in with the prospective client when we met them.

Marcus Lillington:
Did I?

Paul Boag:
Yeah. Don’t forget you were name dropping majorly.

Marcus Lillington:
Yeah.

Paul Boag:
I can’t remember who you were name dropping but it was somebody.

Marcus Lillington:
Genesis.

Paul Boag:
Genesis, that was it.

Marcus Lillington:
Yeah.

Paul Boag:
Have you actually met them?

Marcus Lillington:
Of course, I have.

Paul Boag:
I made you tell your Spice Girls story, which is always entertaining. Anyway, yes, so here we are. You can tell I work still on holiday.

Marcus Lillington:
And what a great way to leave that: your entertaining Spice Girls story. And with that, we move on.

Paul Boag:
No we’ll never go. We ought to do it like one of those things, we hint at it often but never tell the story and then let people fill in the gaps in their minds.

Marcus Lillington:
Fantastic.

Paul Boag:
Perhaps people in the comments to this podcast, if you could write what Marcus’ entertaining Spice Girls story might be and if anybody gets it right, they win. That could be interesting comment.

Marcus Lillington:
But it’s not that entertaining.

Paul Boag:
And also there is nothing to win.

Marcus Lillington:
No.

Paul Boag:
Alright, so I’ll send you a copy of this flashy magazine book with my chapter in. How about that?

Marcus Lillington:
That’s pretty good.

Paul Boag:
Well, I’ve got hundreds of them, they gave me loads. I can’t get rid of them.

Marcus Lillington:
Wait, a lorry came round?

Paul Boag:
A little bit like that. This is very generous of Vitaly but nonetheless I don’t really know what to do with them all. Anyway…

Marcus Lillington:
Yeah, come on.

Paul Boag:
So.

Marcus Lillington:
Let’s move on. Do what we’re supposed to be doing which is talking about apps I have never heard of.

Paul Boag:
Second week of being weekly again with the one app – is this – I’m suffering from this pre-recording problem again, we’re saying that obviously this is now…

Marcus Lillington:
August.

Paul Boag:
No, no, according to this, this is like probably the beginning of October or late September we’re actually…

Marcus Lillington:
So we’re about a month ahead?

Paul Boag:
Yeah, about that, something like that.

Marcus Lillington:
But that’s fair enough. It should have been once a week.

Paul Boag:
So the problem – well yeah, we need to get a few behind me because I am speaking so much in September and October. The problem that we’ve got is I’d like to talk about Boagworld app but…

Marcus Lillington:
Which will be out by then?

Paul Boag:
Well, will it? Because it’s got to get through the Apple approval process.

Marcus Lillington:
Good point, yeah. Takes about a month usually. So it probably won’t be then?

Paul Boag:
Yeah, no. Okay, I can safely say that the Boagworld app is in beta at the moment, I have no idea where…

Marcus Lillington:
I’m looking at it right now.

Paul Boag:
It’s very nice. This show basically…

Marcus Lillington:
I’ve actually decided, you will love this.

Paul Boag:
Why?

Marcus Lillington:
Because it’s got a joke section.

Paul Boag:
Yeah.

Marcus Lillington:
I’m going to do best of the old jokes…

Paul Boag:
No, that’s so…

Marcus Lillington:
On the first few weeks of this podcast.

Paul Boag:
You’re going to go through old jokes.

Marcus Lillington:
Best of though, best of the old jokes.

Paul Boag:
But you’ve never kept a note of those jokes.

Marcus Lillington:
Somebody has because they’re on here with the person that sent them in which is…

Paul Boag:
Oh, that’s from that website, that was briefly created and then he gave up.

Marcus Lillington:
Right, there you go.

Paul Boag:
So you are going to now have to start keeping a proper record.

Marcus Lillington:
Well, not while I’m doing best of…

Paul Boag:
No, that best of, that’s terrible. So basically some of the guys at Headscape… what’s really cool is that they’ve done this completely of their own bats with no request from us, to be honest no time. They must have done it mainly in their spare time, which is very cool of them.

Marcus Lillington:
No, but they obviously because they are all listing, they may count that they spent 100% of their time on project work, but actually it’s probably about 20%, rest of time just dicking around.

Paul Boag:
Well, I think this is a cool use of dicking around time, to be honest.

Marcus Lillington:
Yes.

Paul Boag:
So they – yeah, they have made a little Boagworld app that they’ve just been messing around with themselves really and yeah, I think they just wanted to play with something different and we don’t get to do a lot of iOS development, we do a little bit – so this was their chance to have a little play and they produced the app that hopefully either will be in the app store when you hear this or will be shortly thereafter hopefully.

Marcus Lillington:
Yeah.

Paul Boag:
And have a little play with that but anyway that’s our app, not the apps that we’re actually talking about this week. So let’s get on to our first app of the week. Okay, so our first app is gridlover.net.

Gridlover.net

gridlover.net

Marcus Lillington:
That sounds interesting.

Paul Boag:
Are you being sarcastic?

Marcus Lillington:
No.

Paul Boag:
You do love grids, do you?

Marcus Lillington:
I don’t know… some sort of sci-fi, sort of sex thing.

Paul Boag:
Okay. Yeah, I must admit when I first heard the name gridlover that was immediately what I thought, Mark.

Marcus Lillington:
What was that film called that I didn’t watch the sequel, Tron. That was all kind of grids wasn’t it?

Paul Boag:
Oh I see kind of that kind of grid. I’m very sorry, it’s going to be a little bit of a disappointment to you than this actually…

Marcus Lillington:
This is basically maths, isn’t it?

Paul Boag:
It is, maths for designers, yes. So this guy, I found this when I was working on the new Headscape site. Insert link here, there you go I remembered that. I mustn’t forget to start doing that.

Marcus Lillington:
Which is very nice the new Headscape site.

Paul Boag:
Yes, thank you very much.

Marcus Lillington:
I like it a lot.

Paul Boag:
I am bloody talented.

Marcus Lillington:
I didn’t say that…

Paul Boag:
So, yeah, so one of the things that I was determined to sort out was this thing of vertical rhythm, have you ever heard about this?

Marcus Lillington:
Yes.

Paul Boag:
So, I mean essentially if you are not a web designer, it’s the idea that if you have two columns of text side-by-side that they should line up with one – each line of text should line up with one other. So it essentially is a vertical grid, think of light-gridded paper, but it’s remarkably hard to do on the web or at least – alright that’s how I perceived it, and it is hard to do, let’s be honest and especially when you’ve got things like images being added into one of the columns and they are fixed height and all the rest of it. But I really kind of wanted to nail this down. As it happened it didn’t really matter on the Headscape website because I didn’t often have multiple columns of text.

Marcus Lillington:
I was racking my brains trying to think where there was…

Paul Boag:
But – but this is before I’d started it and I decided I wanted to read up and get my head around it because every article I’ve read about it seemed to make it really complicated sounding and you have to work out what kinds of baselines and maths and bleurgh and that’s not really my strength but then I found gridlover.net. Now, this is a really good tool if you’re a designer to help establish kind of a type system. So I don’t know how much you guys know about typography but essentially if you are creating a – you’ve got body text, header one, header two, header three, et cetera. There should be a relationship between the sizes, kind of rhythm to the scaling of them, scaling up. That’s why you have things like 12 point, 14 point, 18 point, 32 point, et cetera. I missed out 24 but anyway. So there is a kind of natural scaling to them and there are lots of different kind of rhythms, if that makes sense, different formulas for how that scaling should work. None of which I really know – knew before which is terrible really because I did a course…

Marcus Lillington:
Yeah, I used to be a designer.

Paul Boag:
Yeah, and also I did – university I did a course which includes big amounts of typography but nobody ever taught me this which is weird.

Marcus Lillington:
Maybe you weren’t paying attention at that point.

Paul Boag:
Probably not, it wouldn’t be unusual or one of our lecturers was stoned. That’s the other common occurrence.

Marcus Lillington:
He thought he taught you it.

Paul Boag:
Yeah, probably. So go on, what we’re you going to say?

Marcus Lillington:
Let’s just say between kind of body text and I don’t know, heading one you got all these different. Where do you normally make the overlap then because you’ve got up to heading six.

Paul Boag:
Yeah.

Marcus Lillington:
So…

Paul Boag:
It’s up to you, you can break it down as you want but…

Marcus Lillington:
Basically I’m not trying to say that you never go down that…

Paul Boag:
No, not normally.

Marcus Lillington:
And normally there’s an overlap because when you did – same thing applies to making documents you have headings, main headings, sub-headings, sub-sub headings.

Paul Boag:
Yeah.

Marcus Lillington:
And then you realize that your sub, sub, sub-heading is actually smaller than your body text. That would be, oh dear.

Paul Boag:
That’s why you can start using other things like color or weighting or whatever else. But anyways it’s just something I wanted to get my head around. So gridlover made it really, really easy for me. Essentially what you do, I’ve got the app up here which is no good if you are listening to a podcast but so you kind of launch this app and it gives you a load of dummy text and what it’s done, is it’s kind of worked out the different sizes, so there is – you’ve got a whopping great title and then you’ve got heading one, heading two, et cetera, in the body and so. And it is has put all of this on like essentially lined paper, isn’t it?

Marcus Lillington:
That’s good.

Paul Boag:
And you can see how everything fits into the lined paper all the way down. Go check this out for yourself.

Marcus Lillington:
Is everything centered on the line isn’t it?

Paul Boag:
Yeah, everything is centered on the line the whole way down. So it means everything lines up very neatly. And then there you can kind of play around it’s got little sliders, so it’s got – you can change the base body font size and as you increase that, it actually increases the headings as well proportionally. And you can also mess around with your body line height which is obviously the space between elements and it will do that across the whole thing but where it is quite interesting is you might look at it when it originally loads and go blooming heck that title is enormous, it’s uncomfortably big. So you’ve also got a scale factor which allows you to then kind of fiddle around with the related scales of how big the text, the headings are compared to the body and so on and so on. So there’s all kinds of things you can play around with. Once you’ve got it looking as you like you can then – you can hide the grid if you want to so you can get a sense of what it will look like without the grid, but finally you can show the CSS and it will give you all of the related CSS for that – the headings, sub headings, et cetera, et cetera.

But, where it got really interesting for me is this – this is great, so you’ve got your 16 point body text, you’ve got your heading – H1 which is in this case is 87 pixels, et cetera – sorry 16 pixels, that one’s for body not points. So it provides you with everything you need but it has also got those available in rems and ems, right. Now what gets really interesting is when you then combine this, now I am getting a bit techie now, but there is a CSS pre-compiler, which we will talk about in a future episode called LESS, and LESS allows you to have like variables, so you can say…

Marcus Lillington:
It allows you to have more.

Paul Boag:
It allows you to write less CSS.

Marcus Lillington:
I get it.

Paul Boag:
But what’s really nice about this is you can set, using the kind of em setting here, which is a proportional increase. So if you know – font size is one em and then H2 is 2.3 da da da et cetera. So what’s really cool about this is you can go in into less and you can set the – your default size as 12 pixels, for example, or 14 pixels, whatever you choose, and then in – when you are writing so you’re H1, you can go, you can have a variable of base font size is one – is sorry is 14 pixels and then under, say an H1, you can go base font size times and then you’ve got the figure…

Marcus Lillington:
It’s all there ready for you.

Paul Boag:
Yeah, it’s just brilliant, it is really, really good. So it’s a great tool for designers to help them get vertical rhythm going and I found it massively useful and I am intending to revisit Boagworld to make it the same kind of look and feel as the Headscape site which shouldn’t be a massive job. But one of the things that I am going to do as part of that is introduce this kind of vertical rhythm which is really lacking from the current Boagworld site. And this makes it so easy to do it. So it’s a really useful little tool and it does – vertical rhythm, it sounds one of those like pretentious typography things. But it does make a design look so much more structured and designed basically…

Marcus Lillington:
Professional.

Paul Boag:
Yes, absolutely. So I think if you’ve been avoiding vertical rhythm, check out gridlover.net because it does make things a hell of a lot easier.

Codekit

Codekit screenshot with the strap line - like steroids for web developers

Paul Boag:
So next up we have a tool for developers really, well front-end coders at least.

Marcus Lillington:
Yeah, because you never have – we won’t ever have anything for developers, will we?

Paul Boag:
We are. I am going to get Craig on the show and I am going to get him suggesting stuff. And we’ve got two other developers as well, so there are people we can get on to talk about.

Marcus Lillington:
If you could get all three of them on that will be great.

Paul Boag:
That’d be chaotic.

Marcus Lillington:
It would be hilarious though.

Paul Boag:
It would be.

Marcus Lillington:
Imagine Tom. He wouldn’t say anything, would he?

Paul Boag:
He might do.

Marcus Lillington:
He might do.

Paul Boag:
Tom has led on this Boagworld app I think.

Marcus Lillington:
Yeah, great work but he doesn’t strike me as the kind of person that we feel comfortable sat it in front of a microphone.

Paul Boag:
He is a massively chatty guy, you can’t shut him up. So there you go.

Marcus Lillington:
Anyway but, yes.

Paul Boag:
Yeah, so…

Marcus Lillington:
CodeKit, use it every day.

Paul Boag:
CodeKit. Actually it’s a really useful little tool, it has made my life so much easier. I am sorry guys this one is – I am pretty sure this one is Mac only which is a bit frustrating, yes it is. But there will be the old Mac only. I am trying to create a reasonable mix. Obviously at this stage because I’ve been picking apps…

Marcus Lillington:
Will we do any Windows only apps?

Paul Boag:
Probably because I think eventually the idea is once we’ve done a few of these weeks people are going to start suggesting stuff.

Marcus Lillington:
Course, yes.

Paul Boag:
And there will be Windows users that will suggest apps, so…

Marcus Lillington:
Do you think that’s fair then?

Paul Boag:
That’s fair. I want to be fair about these things. Obviously Macs are better.

Marcus Lillington:
Well, obviously.

Paul Boag:
After all those years, all those years of hypocrisy where I used to tease Mac users, do you remember that?

Marcus Lillington:
Yeah, it is such a long time ago.

Paul Boag:
It’s a very long time ago.

Marcus Lillington:
Mind you they weren’t as good then.

Paul Boag:
We moved across at the right time, didn’t we?

Marcus Lillington:
Apparently Apple is now the most valuable company ever.

Paul Boag:
I know. It’s stupid, isn’t it?

Marcus Lillington:
Ever, ever.

Paul Boag:
I know.

Marcus Lillington:
And you look at what they have made from a hardware and a software point of view, and you think well it probably wasn’t – this is a massive understatement but it’s not that difficult. It’s – if you look at it.

Paul Boag:
This is right up there with what you were doing over breakfast, while you were sitting watching the cycling going…

Marcus Lillington:
Oh, no that really is that’s just – that’s just the strongest bloke will win.

Paul Boag:
That Hadron collider, not that difficult.

Marcus Lillington:
No, see that is difficult. No, it’s just – ignoring – that’s too strong, but kind of pushing away this kind of we need to make everything as cheap as possible. Let’s make it as good as possible.

Paul Boag:
Yeah.

Marcus Lillington:
Within a particular budget. And that’s what they have done. And now they are the most valuable company in the world. Isn’t that a lesson to everybody?

Paul Boag:
I’m sure it is. I’m sure there’s more to it than that.

Marcus Lillington:
Quality.

Paul Boag:
Quality over quantity or quality over cheapness.

Marcus Lillington:
Exactly.

Paul Boag:
Yeah, I think there’s more to it than that.

Marcus Lillington:
Well and get real designers.

Paul Boag:
Simplicity as well and, yeah.

Marcus Lillington:
So that’s all part of the quality thing, surely?

Paul Boag:
Okay. So, Apple – you’ve heard it here first.

Marcus Lillington:
Simple.

Paul Boag:
Marcus is going to go create the most valuable company in the world as from tomorrow.

Marcus Lillington:
I would but I’m too cheap. That’s the problem. And I failed because of it.

Paul Boag:
Yeah. There you go, see. You’re the least cheap person I know. Spend a fortune on silly guitars and things.

Marcus Lillington:
I haven’t bought a guitar for years.

Paul Boag:
It’s like – go back to them thinking of oh well it’s easy. Well, a guitar is just like strumming, isn’t it?

Marcus Lillington:
Yeah and it’s just a bit of wood with some metal on the front.

Paul Boag:
Yeah, exactly.

Marcus Lillington:
It is.

Paul Boag:
Yeah. There you go, see.

Marcus Lillington:
Playing guitar is easy. That’s why I’m so good today.

Paul Boag:
So, CodeKit.

Marcus Lillington:
CodeKit, yeah I’ll leave you to it.

Paul Boag:
CodeKit. You just don’t care about what CodeKit is. I’m going to get – this is my job is to get you excited about CodeKit.

Marcus Lillington:
Right.

Paul Boag:
Right. As you can see here, it’s like steroids for web developers.

Marcus Lillington:
That’s what it just says on the screen.

Paul Boag:
I know. Well it must be true if it says it on the website. It – in a kind of weird way it is…

Marcus Lillington:
Steroids aren’t particularly good though, are they?

Paul Boag:
No, they’re very bad for you.

Marcus Lillington:
Yeah.

Paul Boag:
Yeah. So CodeKit is bad for you.

Marcus Lillington:
Exactly. That’s not a very good strap line.

Paul Boag:
Yeah. Essentially CodeKit makes you…

Marcus Lillington:
It kind of kills you.

Paul Boag:
Yeah. So that’s all good then.

Marcus Lillington:
CodeKit kills.

Paul Boag:
CodeKit kills. Yeah. They ought to have one of those cigarette warning things. Oh, that amused me, walking around duty free with you when you were looking at cigarettes. The signs are so massive now, aren’t they, smoking kills. And all these really grim…

Marcus Lillington:
Blindness.

Paul Boag:
Yeah, but on the back they have these really grim pictures as well which is like…

Marcus Lillington:
No you don’t miss those.

Paul Boag:
No, they are really disgusting. So anyways that’s the CodeKit. Right.

Marcus Lillington:
But, yeah, you just have to buy them, shows a packet of fags – cigarettes – to Paul…

Paul Boag:
Yes.

Marcus Lillington:
Just buy them duty free and they don’t have any pictures on so these ones don’t kill you.

Paul Boag:
Oh, right. That’s good. Once you take the outer label-off, you’re fine; you’re not going to die then.

Marcus Lillington:
A, they are much cheaper, B, they don’t kill you.

Paul Boag:
Do you know what they ought to do? They ought to get rid of that outside packaging if it’s so dangerous.

Marcus Lillington:
Yeah, absolutely, what are they thinking? Oh dear.

Paul Boag:
I know. It’s all these labels that can kill you, see.

Marcus Lillington:
Exactly. Absolutely.

Paul Boag:
Yeah. Right. Kids don’t smoke. Marcus is disgusting.

Marcus Lillington:
Right. CodeKit, come on, it’s can’t be that good. You haven’t managed to say more than their own strap line.

Paul Boag:
You keep distracting me. Right. CodeKit. So, I have said its name a lot. Essentially it’s, right, this is the problem that it solves: it solves two problems really. Let’s do its main problem.

Marcus Lillington:
Okay.

Paul Boag:
If you’re doing – if you’re working on CSS, right, so one of the things that everybody is into, I mentioned it a minute ago, is this idea of pre-compilers. Which is essentially if you write your CSS using something like SASS or LESS, what you could do to is all kinds of cool stuff that you can’t do in regular CSS, right? And so, you do all these fancy moves but ultimately you’ve got to output CSS because that’s what the browser understands. So, you need a way of getting from LESS and SASS to CSS. There are a variety of ways of doing that. You can do it using Java script, but obviously you don’t want to do that for a live site. You can do it using server side code… Why do…

Marcus Lillington:
You’ve got an ambulance or a police car arriving.

Paul Boag:
It’s ambulance. But why do the sirens on European police vehicles and ambulances sound like they’re from kids TV programs. They don’t sound scary, do they? They don’t sound “get out of my way.”

Marcus Lillington:
Yeah. La-la-la…

Paul Boag:
La-la-la.

Marcus Lillington:
Yeah, anyway, so you nearly got to an explanation there.

Paul Boag:
I nearly did. Right. So you have to basically…

Marcus Lillington:
CodeKit converts your LESS and your SASS to CSS. Move on?

Paul Boag:
Yes. But move on.

Marcus Lillington:
Okay. Is there something else?

Paul Boag:
Yeah. So, you can do it on the server side, you can do it in Java script but essentially this does it as a desktop app. But it does – that’s just a start of what it does and this is – I originally downloaded it for exactly that purpose; I wanted a way of developing locally in LESS in my case and it outputting CSS. But that’s the beginning of what it does and it’s much cooler than that.

So for a start it will do that live in real time, right? So, so let’s say, I’ve got a coding window here, I’ve got my website right next to it, alright? It will automatically refresh the browser every time I save my LESS and update it in the other window. In fact, in most cases, it will inject the new CSS directly into the page without even refreshing it. So, it just magically appears. It’s wonderful.

Marcus Lillington:
I know.

Paul Boag:
So that’s really cool. It’ll also do a load of other stuff. It’ll also, for example, minimize all of your CSS, right? So, it doesn’t just output CSS, it’ll also crush it all down and make it as small as possible which obviously improves performance.

Marcus Lillington:
Yeah.

Paul Boag:
But it won’t – it doesn’t stop there. You’ll also receive – it does sense Java script as well, which is great, or J query or anything like that. And what’s really great about all these things is that it keeps the original version, the uncompressed version that you work on. So, you’ve got this nice readable code to work with and then it’s outputting a kind of minimized version alongside it, which is obviously what you link to in the web page.

Marcus Lillington:
Yeah.

Paul Boag:
So, it’s the best of both worlds. You’ve got this highly compressed code but also a really readable code with all your comments and stuff like that in. You can specify if you want it to skip compressing certain files etc., etc., but generally it will compress everything. It will also check your syntax and make sure that your stuff validates if you want it to do that, or you can turn that off if, like me, you produce horrible code. But it also and this is the other thing that I really like, it will also compress your imagery for you as well.

Marcus Lillington:
Okay.

Paul Boag:
So you can get it to run through all your imagery and kind of shrink it down and make it as small as possible. So, it’s a really, really useful tool. It also – when it’s validating your code, it’ll give you a log of obviously everything that’s gone wrong, where stuff has gone wrong. If it has problems compressing – sorry, if it has problems converting from LESS to CSS it will tell you exactly where the problem is and what the problem is. It’s a really good app and I highly recommend it. Now, while Grid Lover was free, this one is going to cost you something but only a massive total of $25, which is totally worthwhile in my opinion. It will support all kinds of different kind of frameworks and it supports LESS and it supports SASS, but it also will validate stuff with JSHint, JSLint, it has got team collaboration tools. You can look at the website. It’s got loads of really good features. Really useful app, I highly recommend it. So, yeah, that is CodeKit.

Buffer

Buffer in action

Paul Boag:
So, now we come to an App for you website owners. Have you actually used this one?

Marcus Lillington:
No, but I know what it does.

Paul Boag:
Right. Well we can skip this part because if you know, and that’s fine.

Marcus Lillington:
Well, I just – I’m not a – I don’t use Twitter maybe as – from a sort of a business point of view, I just kind of occasionally…

Paul Boag:
Faff around on it.

Marcus Lillington:
Yeah, I don’t really – I’m a kind of like, yeah sometimes. I tend to respond to people – I use it as a feed…

Paul Boag:
Right.

Marcus Lillington:
…rather than a publication medium. So therefore, Buffer doesn’t really do anything to me.

Paul Boag:
Yes, so as Marcus said, we’re talking about Bufferapp.com.

Marcus Lillington:
Yes.

Paul Boag:
I believe.

Marcus Lillington:
Yes. That is correct.

Paul Boag:
They promote themselves as a smarter way to share, maybe – that may be an appropriate strap line. Essentially…

Marcus Lillington:
It’s better than steroids for web developers.

Paul Boag:
Yeah. That is true, it’s more descriptive. Essentially this is for new website owners out there that are looking to build a relationship with your audience through social media. Well, actually no, that’s not strictly true. This is more of a broadcast tool rather than a communication tool. There are tools like HootSuite et cetera, which will insert link here, which I’m sure we will cover in a future episode. But Buffer is essentially for scheduling updates to social networks. So, whether it be scheduling to Twitter, Facebook, LinkedIn, whatever. You can go in, enter a tweet, enter a Facebook update, etc., and it will push them out to all of the social networks. So nothing very mind-blowing in that in itself but there are some nice features to it. There is a fundamental flaw with a lot of these scheduling tools, right? And the flaw is this, if I’ve got – so I want to send out a tweet, right, about some great thing I’ve discovered.

Marcus Lillington:
Go look at the new Boagworld app, we’ve just launched it.

Paul Boag:
There you go; perfect, perfect example. My problem is I have to go into to my – first of all, I have to find an app that actually allows you to schedule because what you don’t – the reason you want to schedule is essentially so you don’t bombard people with tweets all at once. So classic example is, I sit down at the end of the day and I read on my RSS feeds and I find all these interesting things. I don’t want to pump those at people at all the same time, right? So I want something to schedule them, spread them out a bit. The problem with other scheduling tools that are out there is you have to go in and say okay, so I want this one to go out at 10 o’clock and I want this one to go at 11 o’clock, this one 12, this one 1 and, et cetera. And you have to kind of go in and set the times which is a bit of a faff to be honest. What buffer does is it kind of does away with that. So you can’t schedule an individual post to go out at 12:45 on a Tuesday, right? It doesn’t work like that. What you do instead is you create a schedule, right, a universal schedule, so 12 o’clock, 1 o’clock, 2 o’clock, 3 o’clock, whatever your schedule is. And then essentially your buffering tweets sort of services updates to be released at those pre-set times and so once you’ve done that setup once, you can then just keep feeding the buffer and keeping it full up with stuff to go out, make sense?

Marcus Lillington:
Yes, totally.

Paul Boag:
So, it’s a really, really cool…

Marcus Lillington:
Until you have more items than you have in your pre-set buffer.

Paul Boag:
That’s okay. I think buffer can only hold 10 items at a time. I don’t know, it used to be, I don’t know whether that’s updated now, I need to check. But even I, who is more a prolific reader, and I’ve never filled up the buffer.

Marcus Lillington:
Right.

Paul Boag:
So, there is more than enough there. And so, of course, the buffer is going out almost as fast as you are filling out, so it’s like a leaky bucket in that regards. Where I think things get quite interesting with buffer is how easy they make it to fill that buffer, right? So there is like loads of different ways that you can do that. For start, they’ve got a browser extension, so you can go to a page, just click up, and there you go and you can fill in your details and it adds to the LinkedIn and the rest of it and then you can say, so for example, in my buffer I’ve got three accounts. I’ve got our Facebook page, I’ve got Boagworld link Twitter feed and I’ve got the Boagworld Twitter feed. So I can decide which of those I want it to go out to and whether I want it to go out all three, et cetera. You can also set things like – for Facebook, you can set what sum now appears alongside it and that kind of stuff. So it’s got really good browser extension that works really well. In addition to that – and I guess here is the kind of disclaimer bit because we have been involved although it’s not been – time of recording has not gone live. They’ve got a mobile app as well, they’ve got – they’ve definitely got iPhone… oh and Android, yes, so they’ve got iPhone and Android apps and they’re working on iPad version as well, so making it really easy to feed your buffer through those things as well.

We’ve done a new look and feel for that which will appear on the app before too long, we should make it feel a bit sexier hopefully. So that’s – there’s that – then you can email your buffer as well, which is another bonus, so any device can be used to just email the buffer to keep it topped up. So it’s really easy to feed your buffer, it’s a great tool for really any website owner that wants to kind of talk about various bits and pieces whether it be trivial stuff like I ate toast at breakfast or whether we are talking about sharing links from third-party sites also obviously promoting your own stuff as well. So great tool, check it out, bufferapp.com. Let me just check on pricing for you. The free – there is definitely a free version and you – that’s another really important thing I missed out actually which is it’s got really good analytics. So those – a lot of these kind of scheduling tools have analytics but sometimes they’re so hard – there’s so much information that is actually useless. Well this keeps it really streamlined and they don’t tell you too much if that makes sense. They tell you enough but don’t kind of overwhelm you with too much information. The free account is probably fine for most people. Believe it or not, they are so focused on the free account that they don’t actually tell you what the pricing is before you signed up.

Marcus Lillington:
It’s that one up there.

Paul Boag:
What apps and extras? I doubt it. Yeah, the apps and extras section is about how they integrate with all kinds of things. So I mean you can see from there that they’re build into things are Pocket, Instapaper or Reader which is really nice. So you’re reading your RSS feeds in Reader or reading something in Instapaper and you can send it straight to your buffer from that. I mean there’s loads of stuff it’s integrated with here. You can integrate it directly with WordPress, if you want to, you can add a little buffer count on to your website of how many people have buffered an article, just stack loads of kind of add-on and extras and they’re really working hard with third-party suppliers. So check them out from that point of view. Yeah, if you pay for it, you get things like team member support and I think you can add more social networks and stuff but I’ve never got beyond the basic version I think for most website owners the free version will be absolutely fine. But it is worth checking out, give it a go, highly recommend it and what I love about this is the team are actively developing it all the time. So they are spending a lot of time integrating it with more stuff and that kind of thing, okay? So that is bufferapp.

Flipboard

Okay. So we come to our final app of the day which is as you guys will all know by – if you listened to last week’s show, is a mobile app and sometimes we pick a mobile app that’s useful for web designers, website owners or developers, other times we just pick a mobile app that does things damn well and this particular choice is a kind of combination of both of those.

Marcus Lillington:
Okay.

Paul Boag:
It’s an app called Flipboard, do you use Flipboard?

Marcus Lillington:
No.

Paul Boag:
Oh, see now Flipboard, I think you’d really like. I would have thought the vast majority of people that are listening to this will have come across flipboard because it’s a very well-known app. It is only Marcus who is incredibly ignorant. But for those of you that haven’t heard of it, I will explain it really for Marcus let’s face it.

Marcus Lillington:
Yeah, okay. I’m going to listen.

Paul Boag:
It’s worth actually downloading it. It’s a free app. So essentially it’s an alternative to RSS feeds. What you do is you go into this and you can load up different themes essentially whether it be feeds about cricket in your case or web design or whatever else you can mix them up and it produces a really nice kind of virtual magazine for you to use. It’s kind of first of many of these kinds of apps and in a lot ways it’s still the best. So it’s great if you’re a web designer or website owner or a developer because you can fill it up obviously with themes about development, running a website or web design and it’s a great visually pleasing way of kind of keeping up-to-date and so it’s kind of relevant from that point of view. It’s got really nice iPad app, this iPad app is even better than the iPhone app.

Marcus Lillington:
I haven’t got an iPad.

Paul Boag:
Ah. You’re so deprived.

Marcus Lillington:
Is there a Mac app?

Paul Boag:
No.

Marcus Lillington:
Well that’s rubbish then.

Paul Boag:
It’s got an iphone app, what do you want?

Marcus Lillington:
A mac app.

Paul Boag:
I’ll let them know… you’ve got it have you?

Marcus Lillington:
Yeah.

Paul Boag:
If you open it up, you’ll quickly – I expect it will pre-populate itself and you basically – you flip it. Because it’s called a flipboard. You see?

Marcus Lillington:
Yeah, so I can pick stuff.

Paul Boag:
Yeah. And I said I wanted to talk about it for two reasons. One is its usefulness as web designer and another is its ability to essentially, that it’s a good app.

Marcus Lillington:
Food.

Paul Boag:
Yeah, food there you go, one of the categories. What makes this so good as an app is the flip effect, right? And this – the reason I want to talk about this is because this has become a big issue recently. There’s a really fancy word for what I’m going to talk about that, that I can’t pronounce and I’m not even going to try and pronounce it but essentially it is this concept of taking real world interactions and bringing those onto a device, right, onto an electronic device. And Apple do this a lot. This is their thing. So for example, the calendar app on the Mac has got little torn edges to make it look like a real calendar, right?

Marcus Lillington:
Yeah, I like that but yeah.

Paul Boag:
Yeah. Well, this is the interest here, or the fact that if you go into Kindle you get – you can turn a page we’re not on the real Kindle but on the IRS app, you know, and you get that page turn thing.

Marcus Lillington:
Yeah.

Paul Boag:
And this is…

Marcus Lillington:
So what is that word?

Paul Boag:
It is – I can’t, I can’t say, honestly.

Marcus Lillington:
What’s the word, Paul?

Paul Boag:
I can’t say that. Somebody can spell it in the comments for you, or something. So it’s really embarrassing that you can’t say keywords in web design. So this is very much kind of divided the web design community at the moment, right?

Marcus Lillington:
Yeah.

Paul Boag:
You’ve got half the people that kind of think – well, this is a great idea because it makes it much easier for people to make the transition and to understand stuff. So for example tabs have become a very good example of something that’s made that transition well. Because we’re used to tabs from books and filing cabinets and stuff like that and there is something that can translate well, we can understand them. We work with them. There’s another school of thought that says, well, hang on a minute, this can be taken too far and you end up with as you said the little teared bits on the you know, the…

Marcus Lillington:
Cabinet.

Paul Boag:
…calendar app. I think…

Marcus Lillington:
Yeah, we don’t need those. Sometimes, we do.

Paul Boag:
Yeah. What I don’t know? Yeah, with this, I don’t – as always with these things it’s not a black or white situation, is it? And that’s really why I wanted to mention Flipboard, right? Go and look at Flipboard again, if you haven’t looked at it for a while. Because it’s very misleading, right? I think it hits the middle ground that’s really good. So it obviously tried to copy a book, right? And so you turn a page in a book and it feels like doing that but if you actually look at it, it’s not – you’re not turning a page like a book. It flips in the middle of the screen, a book doesn’t…

Marcus Lillington:
No, no.

Paul Boag:
Right? So, you’re actually folding the page in half in effect.

Marcus Lillington:
Yeah.

Paul Boag:
So it’s done something very clever which is that it’s taken something we know from the real world and it has carried that across enough for it to feel familiar and to look something that we’re comfortable with but it hasn’t copied it outright. It’s gone – okay, this is a different environment, we can adjust accordingly.

Marcus Lillington:
Yeah.

Paul Boag:
And that, I think it is really good and really worthwhile that to not copy things blindly but to interpret them online and that was really the point I wanted to make because this is turning into this huge debate and actually I think it doesn’t need to be a debate it’s not an either/or there is this kind of middle ground where, yeah, you can take from the real world, you can take from those things that people are comfortable with but that doesn’t mean you have to take them wholesale, it doesn’t mean you have to take them to the extreme, you can take the essence of an interaction without copying the entire thing. And, for example, I think it’s iBooks, when you turn the page on that it’s an identical, you know the page curls and you get the shadowing that you would get as you turn the page of a book and you even get that slight bleed-through onto the other page where you can kind of see it as the other pages occur it’s so – it’s such an extreme version. While what I love about Flipboard is, yeah, you could turn pages, which is the interaction but it doesn’t copy every aspect to the experience. So I think that’s just such a good lesson to be learned there.

Marcus Lillington:
Yeah, you don’t have to go the whole way.

Paul Boag:
Absolutely, so that is Flipboard. Okay so that wraps us up for this week except from Marcus’ joke. I’m just so disappointed in you.

Marcus Lillington:
Best of. If they’re called the best of they are going to be good.

Paul Boag:
No, that isn’t the best of them, that’s just the ones that got recorded.

Marcus Lillington:
Might be. If you remember we used to have a guy called Ian Lasky who used to send us many, many jokes, I found one of his.

Paul Boag:
Right.

Marcus Lillington:
Okay? And I quite like this, so.

Paul Boag:
This is the height of laziness.

Marcus Lillington:
Yeah.

Paul Boag:
The only reason…

Marcus Lillington:
Reusing content? You’ve never done that before have you?

Paul Boag:
Oh, stabbed through the heart.

Marcus Lillington:
Be quiet.

Paul Boag:
I reuse content in different mediums.

Marcus Lillington:
Okay, well I’ve only got one joke telling medium alright? Two men walking their dogs through a graveyard. One says to the other, morning, second guy says, no, just walking my dog… which is a good joke.

Paul Boag:
It’s a good joke. I don’t remember hearing it before.

Marcus Lillington:
See.

Paul Boag:
So there we go. All is good with the world. Alright, guys, thank you so much joining us on this week’s show. If you could go along to boagworld.com/podcasts then you will see all of our content, our podcasting content and we have got hell of a lot there. So there is a lot to look back at and if you check out boagworld.com/season/4 you’ll find everything on this season and this episode in particular, we’d love to hear on that page, on the season’s page. Hear your suggestions for other apps that we ought to include on the show especially Windows apps because I haven’t used Windows for years.

Marcus Lillington:
Just because you can’t remember how to use Windows.

Paul Boag:
No. And also developer apps would be much appreciated as well.

Marcus Lillington:
Yes.

Paul Boag:
But if you are going to include developer or Window apps, please explain why they are good and what they do because otherwise I am not going to know.

Marcus Lillington:
Yeah.

Paul Boag:
And also I have to say I would – I’d be more than happy to accept audio files as well. If you want to just send me an audio file of your little review of an app that would be really cool as well, you can send that to [email protected] Alright, thank you very much for listening, and we speak to you again next week. It’s so nice to be able to say that again weekly show, state you love it.

These amazing show notes have been transcribed by our friends at Pods in Print. If you need transcription done, I cannot recommend them highly enough.

  • http://twitter.com/Colin_WT Colin Gray

    Glad to have you back guys – I’ve missed the podcasts! And don’t worry – I’m a waffly format guy, good stuff :)

    Apps-wise, my current mission is to get on top of the mountain of to-dos in front of me, so I’ve been looking around for a great project management app to help me. My main requirement is for it to be totally cross-platform – I need to be able to add tasks on my phone and have it reminding me to do things in the background on my PC.

    My progress so far, through a bunch of totally useless apps to….

    Basecamp: Good, but a bit too simple. Not enough power for task management, grouping of tasks, projects, etc. This surprised me given the amazing write-ups it always gets.

    Trello: Great little app for organising projects, but falls down just a little on organisation. The cards get a bit complicated when it’s a big project.

    Podio: This looks like the one for me. They’ve just released an updated Android app, which brings it up to par with the iPhone, and it’s amazing. The web app is super flexible – create your own Podio ‘apps’ which can record anything. Task management isn’t quite perfect, but it’s powerful enough for now, and they seem pretty receptive to new features and feedback so maybe I can help them develop it.

    Anyway, hope that helps – I think it’s a subject that comes up a lot, especially with freelancers, so worth telling the story! If you mention it on the Podcast, tell anyone to drop me a msg on twitter if they have any questions about how I use it.

    Cheers guys, and keep up the good work. I’ve been listening since getting an episode or two for free on Web Designer mag, around episode 8, so, again, good to hear you back on air :)

    Colin
    Wild Trails Media

  • Designer023

    Great podcast. Loved this one :) The points you made about Flipboard make so much sense now you have highlighted them too. Keep up the good work

Headscape

Boagworld