RWD Podcast Episode #25 : Stu Robson

Justin Avery: Hi everyone, and welcome to another edition of Responsive Design Weekly Podcast. This week is Episode 25, I believe, and it is coming from sunny, yet cloudy, I wouldn’t know because it is the evening, it is dark, sunny Wales. We’re here for the web.is conference.

And this week we’re sponsored MailChimp, again. Thank you very much, MailChimp, you guys are awesome. If anyone’s looking to send out newsletters, I highly recommend MailChimp. My guest this week uses MailChimp as well, he thinks it’s awesome.

My guest is another author of a weekly newsletter, all about Sass, though, and he’s also just taken on another project which, he is writing a lot about Sass for another website, as well. But I’ll let him introduce himself. Ladies and gentlemen, welcome Mr. Stu Robson.

Stu Robson: Oh yeah, how are you doing. Yeah, yeah, so yeah. So like Justin said, what, I hold the microphone? This is quite bizarre. One microphone, two people. This could get, well-

Yeah, so, as well as Sass news, the weekly news that I do, using MailChimp, I’m also now the editor for the Sass Channel on Sitepoint, so every couple of day, every twice a week, Tuesday, Thursday, is a new Sass article, so I’m doing those, getting new writers on board, trying to sort of make the … Make the channel more diverse, from basic to intermediate to advanced, we’re having, you know.

And then I’m also doing a, called a meetup in London called London Sass. They were, first one of those in October, which seemed to go really well. Loads of booze, loads of muffins left over, so there’s no muffins next time.

So that was really good, and I’m sort of writing a book about Sass as well, but it’s not really officially announced yet.

And uh, yeah, so that’s about it, really. I’m a front-end developer. So I’m a jobbing front-end developer. So my last job was to fix a website till it worked [00:02:00] in IE 6, 7, and 8.

Justin Avery: Now, I’ve got questions around the work that you’re doing, from a front-end point of view, and kind of from a Sass-y point of view. But before I get to those questions, we have a, each week I ask the previous guest to ask a question, and I gave you a heads up on this, about the fact that you have to ask a question. I didn’t actually give you a heads up about what question was going to be asked.

But the last time I spoke with the guys from Zurb Foundation. And one of the previous questions from someone was, what is your favorite CSS property? And Jordan actually answered, inline block. And so, as a followup to that, the question was, what is your favorite HTML property, or element, or thereabouts?

Stu Robson: Yeah, so like Justin said, today we’re at the web.is conference in Cardiff, in Wales, hosted and arranged by Craig and Amie from Five Simple Steps, and B Squared, and FoundersHub, and loads and loads and loads of great stuff.

And one of the talks that really resonated with me, I think is the best talk of the day, best talk of the conference so far, because day two’s tomorrow, was Phil Hawksworth’s talk on the web.is about links. The web.is, the link.

So I suppose it’s the a tag, is the, is the one. Synergy there, you see. So yeah, so yeah, for me, right there, the best, favoritest element of HTML is the a tag, because otherwise without it, you would only have one page, and not have the web.

Justin Avery: Wouldn’t get you anywhere.

Stu Robson: Yeah. I’m quite impressed with that.

Justin Avery: That is an excellent answer. And as Stu alluded to before, we’ve got, usually what we’ll do with the podcast is I’d Skype Stu in, and Stu would have his microphone, and he’d be on Skype, and I’d record it. And we’d have two channels, and I’d have my own mic, and we’d be miles away. But at the moment, we’re sitting, like, a foot away. It’s quite, it’s very intimate, I must say. We’re sharing a beer, it’s lovely. [00:04:00]

But we are passing a mic back and forth, so it is kind of a little bit awkward. But it’s lovely, nonetheless.

But so, as Stu was saying, he’s doing, so I think you’re like Mr. Sass now. So the back of your laptop is just Sass stickers. And Sass has taken off heaps recent–Well, not recently, but it’s had a huge, big following. Is it …

Has it been something that we’ve been desperate for for ages, this pre-processor for CSS, or, and seeing as this is a responsive podcast, do you think the fact that we’ve had responsive design which has added another kind of variable into it, and another layer of, like, all these different break points, which has even, like, forced a preprocessor even more to the forefront?

Stu Robson: Yeah, I think it’s, to me, Sass and preprocess sort of came to the forefront sort of when Sass got the SCSS syntax. So you could essentially write CSS and it would validate, still.

But yeah, we were, responsive web design. Using a preprocessor I think is a no-brainer, because you can inline your media queries, nest them within the module you’re working upon, so you’ve got all of the CSS for that element of the page in one code block, rather than sort of having it in a separate file, or you know, at the bottom of the CSS file like you would if you were writing pure CSS.

So I think it is that idea that, it allows you to sort of maintain your CSS a little bit more easily and make it more comparable, I think, is a word. Because you can just, you know, it’s there in one block, so like, you know, if you’ve got .module or .media object, for say, for example, bad example, you can have, like, your media queries within that, so you know that that affects that code, you don’t have to go off, you know, down into thousands of lines of [00:06:00] code to try and find your media queries.

So yeah, so in terms of responsive web design, it does help that. And then also, it helps with quickly … With Sass 3.2 that came out a couple of years ago, you can now sort of, with the @content rule, you can sort of generate stuff for IE that you might want to put in a media query as well.

So you can sort of support all the browsers, give them like, a basic stripped back sort of desktop view for the sample using some of the Sass. And it just makes it nice and easy and more organized and maintainable, really.

Justin Avery: One of the, one of the problems that has come up from trying to, so these days we’re using more JavaScript, and there were some great talks today about how progressive enhancement is still the way to go.

I think one of the quotes from one of the speakers was around Jake Archibald’s comment back to someone says, everyone has JavaScript enabled. And he’s like, your JavaScript doesn’t work while your JavaScript is being downloaded. Which I think is a great call.

But one of the things that a lot of front-end developers or people are after is, trying to marry the interactions with JavaScript up with the break points that you define within CSS. Have you worked on any projects where you’ve had to base those together? Or have you got any particular tricks up your sleeve or advice as to how best to handle break points within Sass, to make them more readily available, or easier to build with?

Stu Robson: Yeah, no, I’ve not really tied up, or found the need yet so far to tie up, JavaScript with Sass or CSS. I think Aaron Gustafen … posted-

Justin Avery: Gustafson? [Inaudible 00:07:51]

Stu Robson: Posted recently about the standard [inaudible 00:07:53] of redesign, where they used JavaScript and CSS and basically said that he did have to rewrite the code a couple of times. [00:08:00] So, tie in the same thing.

But in terms of like, yeah, break points and stuff, it’s, um … You’ve got things like, um, ideas of naming break points with variables, of big, small, large, or iPhone, tablet, desktop.

I tend to never name my break points. So it’s never very, I realized, because if you do that, you’re sort of, being sort of declarative of what the viewport, what the viewport is. So if you, so I tend to sort of, you know, start at zero, but not zero, and move up and if it breaks, like Stephen Hay, if, you know, start with mobile first, and if it, if your design turns to shit, insert a break point, basically. I might have to beep that.

Justin Avery: There’s no beeping. Actually I should beep on it because it is a G-rated, um, but I’m sure that’s not really a swear word.

Stu Robson: [Inaudible 00:08:55]

Justin Avery: So the, the original plan of the podcast was that we would ask the same question over and over, and then we’d have a beer in between each time we answer it, and see how that went. But we’ve bailed on that for now.

It’s interesting you mention, like, starting from zero. There was a, I was writing down some thoughts the other day about how the iPhone 6 came out, and the 6 Plus, and how the media queries-

I remember when the 5 came out, and everyone was like, oh, what’s the media query to target the 5 device? And I think someone mentioned today as well how the iPad Mini, yeah, yeah, it was like, an untargetable device, because it had the same dimensions, or same, same viewport, and same, um, pixel density and ratio, yeah. And how that we should back away from device-centric things.

And I think we’ve done that, because with the iPhone 6 and 6 Plus, no one’s asked for them. Because we’ve probably already made things for the Samsung. But what’s, starting at point zero, do you have any thoughts on [00:10:00] things like the watch, for instance?

Like, when you do start at a zero viewport, how do you design for something which is too skinny, almost, for a single column of content? Have you run into any issues around that, or worked towards those things?

Stu Robson: Yeah, so obviously the fallacy is that I don’t start at zero. I probably start somewhere around 280 pixels, I think, is a [mean 00:10:23] width. So that’s sort of, so it just about works, probably looks better at 320 pixels, to be honest.

But in, that’s another point of view of break points and screen ratios, and stuff. Like, 320 by 480 is an actual LCD screen that’s been on the market since 1980-something. You know, but like VGX, VGA, and XHGVA, and VGA and all that. So it’s actually a, it’s a standardized width, anyway. So like, the fact that, you know, so 320 is going to be, like, a base, you know, a width of something for a long time to come, I think. He says.

But as for, as for watches, I am … I guess it depends. I didn’t see any [stage 00:11:14] personally, it’s like, Andy was saying today the fact that you wouldn’t want a watch that would buzz and beep, and I wouldn’t want a watch that buzzed and beeped, and I wouldn’t, certainly … Excuse me. I wouldn’t certainly, you know, check my watch for browsing on.

I’d probably do the Dick Tracy stuff. Just because, and I would have to get a, you know, a yellow overcoat and a yellow trilby hat. But apart from that, I would, you know … App-wise, probably is something different, but then that’s apps, so it’s around with the industry that I don’t even want to touch.

So yeah, so … In terms of minimal viewport, it’s like, yeah, start at zero, but I don’t start at zero. I start right at 280, because, you know … [00:12:00] You know, it’s, you have got standardized, not browser widths, but visual display unit widths of, that have been around for years. Like, 320 by, well, it’s 480 by 320. Not because it’s landscape. But it’s, you know, it’s standardized. So that, you know, so that means sort of Apple mucking about a bit, really.

But then it’s, yeah. Yeah. How’s that, then.

Justin Avery: No no no, it’s good. I, you need to run with it when you’ve got the idea. So with the, I know, in addition to all the Sass stuff that you’ve been doing, you also, like, you’re a front-end designer, you went out freelance a few years ago, which I think is awesome.

I remember the, I think I was in Australia, and I was following you. And the reason I know Stu is I approached him to do one of our interview series many years ago, when I was going to do a trip around Australia, and my now-wife Laura wouldn’t have had me do this Thursday night while we’re on our holiday trip. So a bunch of people wrote some great interview questions, and answered them for me, and Stu was one of them.

And since then, he’s gone out and he’s done and, you’re doing quite well. You’re doing some great work. And recently, I know that you’ve been working on some search-based stuff, right?

And for me, search-based stuff is really interesting. Because when you go down to the small screen, like, what is normally a traditional desktop search, where you have so many different options, and ways to facet things and find more information, you now don’t have that screen space to allow you to do that. How have you kind of approached that whole problem with the project that you’ve been working on? If you can comment on it.

Stu Robson: Yeah, I think I can comment on it. It’s not live yet, that’s the only thing-

Justin Avery: Well, don’t say the name, then, [inaudible 00:13:53]

Stu Robson: Yeah. Um, unfortunately it’s gotten to, basically, stakeholders saying that they want their search results higher than [00:14:00] another part of the businesses’ search results, which I find bizarre, because you’d think it would be sort of organic.

So yeah, so paring it down to the, luckily I, the project I worked on, they had the wireframes sort of already done before I started, because I’m a front-end developer, so I just sort of turn PSDs into HTML, sometimes. They had the UX done and tested, so as to how you sort of thought the user flow would work on a, on a desktop.

I think, if I can’t, I can’t really recall correctly, I’d have to check my laptop, which is not here. But I don’t think I got a mobile view of the wirerames at all. So essentially it was like, what patterns can we use to pare it down? Because obviously, the search engine effectively is a search box. And then on desktop, this would be a search box, some tabs for sections of search, so be it, you know, people, courses, and papers of stuff.

And then within that you’d have, on the desktop you’d have sort of, you know, facets of drilling down the results by, you know, has it been published-

Justin Avery: By school.

Stu Robson: By school, or was it being published this year, or such and such. So it’s, to get that pared down to mobile, it seems sort of …

Because I was building it on top of something that was already there. So like, the, the actual idea to get to the navigation was already defined for me, within an [off-canvas 00:15:35] role. So the fact that the user would be able to understand what an off-canvas thing was sort of helped decide that, so that you’d get-

For the results page, obviously, the first thing you’d get would be like a form block for search. And then you’d get, um, a … Because it was, um, tabs on the desktop, essentially, [00:16:00] I went with turning that into, like, a select box. A fake select box, so you could do that. And then the, as for the facets, essentially because it was, the grid was defined already from the, because I was building it in to an existing design. So that was all sort of roughly 320-ish anyway.

So like, that was quite easy, just, and basically you just dropped it into an off-canvas thing. I don’t think I used a hamburger. Sorry. I don’t think I used a menu icon. And that tested really well. Things that didn’t test really well were the, you know, it needed to, what we needed to, um, make definitive that is a box of something. Could say, adding a border. As soon as we added the border, it tested even better.

But yeah, so it tested really well with the off-canvas techniques to sort of hide the facets away. Because it essentially, when it said search for something, they’d get … We, first off, they’d get, like, the web … Excuse me.

First off they’d get the results for the website, the entire website. And then they could, like, select from that. Go, go to the tabs. So that they’d get sort of, you know, if they, you know, depending on what they typed in, they probably, chances are they’d get the top five results, anyway. But then they could drill it down by pulling in the off-canvas, sort of, to filter it down a bit with the facets.

So yeah, it’s quite a fun project. But it’s just a shame it’s gone back to the bureaucracy of, I want my search results higher in that department. Which is, I’d love to be in those meetings, but luckily, unfortunately, I’m not allowed.

Justin Avery: I always, um, because I, in my day-to-day job, work with an enterprise search, as well. And the question, or not the question. But the answer we always you go back with is like, you want your searches, or your things to rank higher? Write better content. All right? Tag it better. [00:18:00] Have more people linking to it, is always the best approach, rather than try and push things up because they should be higher.

If they should be higher, they will be higher. Because they’re more popular. But that’s, that’s my own little rant on that.

Sass has kind of saved me, well, Sass has saved me a hell of a lot of work. Are there any things that you would say, so someone was getting into Sass, things that they should really focus upon getting right first, like, just the, kind of, basics where they break it into partials, or, and also is there anything coming up in the latest version of Sass which has solved a few problems that may have had people sort of sitting back?

Stu Robson: Yeah, so, um, fundamentally, there’s people that love Sass, and there’s people that don’t like Sass. And it’s, the people that don’t like Sass seem to, I always feel that they seem to think you have to take the whole thing and use every single aspect of it, whereas day-to-day I probably just use, like, three main parts of Sass.

So I think, if you were going to try it, and start out with it, it’s like, look at the basic sort of features that have been there for years, since 2006, ’07. And go with those first, and just start to use those, like, you know, declaring your colors in a variable, so that you can just sprinkle them throughout the site. And then if it needs, needs to change, you can just change that variable.

Which happened to me, back in August. I was working on a project, and I think three weeks into the project I got told the color red was wrong, compared to what their PSD was giving them. So obviously, you can grep that within Terminal to find and replace and change. But it’s just a little bit easier just to change a variable. Save-

Justin Avery: Change it once.

Stu Robson: Yeah. Yeah, change it once as a variable, save it, and it compiles it, for its stylesheet. So that’s really good. So there’s variables, nesting, like I’ve [00:20:00] said about media queries, where you can sort of keep all of one code block, of one element of a page sort of in maintainable, nice, easy space rather than sort of, um, well, for media queries, to have it like, you know, not, you know, the declarative sort of basic features, and then for media queries you add stuff at the bottom of a page of CSS.

It also, I think that also helps you from writing crap CSS a little bit. Because it sort of forces you to put it within the block of the code for the element, rather than just put it at the bottom of the CSS file, which you would do at the end of a project, last-minute, because you know, time’s rushing.

Whereas if you were using Sass, you’d put it within the element, probably or what you, you know, because it’s there. It’s a little bit easier to, easier to sort of [grok 00:20:50] with.

As, in terms of stuff that’s come out in 3.3 and 3.4 that’s just come out, the stuff that’s in 3.4 I’ve still not got to grips with, yet. I’ve had a look at some of it, and the, the selector stuff, it sort of baffles me as to why I’d need to use it. They do say that it’s good for frameworky stuff, and I don’t work with frameworky stuff, so.

But yeah, no, it’s good. so there’s, 3.4.6 is out now, and then that’s the Ruby version, which everyone complains about, it compiles, like, really slowly. But LibSass has just reached version three, which compiles really quickly. And they’ve decided now that they’re going to sort of try and get it to feature parity between the two before they release big new stuff, so that there’s not like, a-

Because you know, going back a couple years, it was like, last [vers 00:21:39] of Sass was sort of every other week. Whereas I, you know, I worry that it, starting, it was starting to be a bit of LibSass versus Sass, which, for the community as a whole, the Sass community, it’s not a good thing this, you know, certain things that could make it become a LibSass versus Sass thing.

But luckily they, you know, they [00:22:00] decided that let’s just get it–So that, if you want to use Ruby you can use ruby-sass. If you want to use grunt or gulp, so you can use LibSass version, which is wrapped in node-sass, which I have to say, because everyone forgets that.

Well, everyone, everyone thinks it’s like, grunt-contrib-sass, or gulp-sass. But that is using node-sass, which Andrew Nesbitt works on. Which wraps LibSass into Node. So it can use it, so that’s like, it is like, you know, there’s like, four stage, three stages of it doesn’t work.

But yeah, and loads of people are quick to, quick to complain. And it’s like, well, it’s open source software. It’s like, you could, you know, rather than-

Justin Avery: [Inaudible 00:22:44]

Stu Robson: Rather than complain, yeah, rather than complain, yeah, rather than complain, you could just sort of, you know, pull up your sleeves and try to help, rather than just a screenshot of the code that doesn’t work.

Justin Avery: Are you, so when I, just getting away from, well, maybe not getting away from Sass for a sec. But when we first got in touch was on the interwebs. This is why I love the internet, too, right? And loud people walking by the [street 00:23:10]

There, there isn’t … I’ll just point out, Stu is, Stu is sparing some change.

Stu Robson: [Inaudible 00:23:20] Thanks very much. Take care of yourself.

Justin Avery: Thank you. That’s never happened before, to be honest.

Stu Robson: Yeah, yeah.

Justin Avery: Yeah, a little bit. Yeah, yeah, yeah. Yeah. Would you like to say hello?

Guy on the street: Hello.

Justin Avery: Thank you very much. That was our special guest, wandering down the street, just making sure everyone was fine with the Welsh hospitality. It was strange, never happened before. Probably edit this bit out, yeah.

Stu Robson: [Inaudible 00:23:47] you’re usually at home.

Justin Avery: Yeah, not too many people wander into my house. Not too many people. Sorry. I’m not going to edit this out, because it just goes to [write up 00:23:58] but ah-

So [00:24:00] what, uh, yeah. So when we first got in [trouble 00:24:03] when I first researched you, was on the interwebs. Which is what, I think it’s great. So if anyone’s listening, and they want to learn more from Stu, or ask him a question, just @StuRobson? Just one word?

Stu Robson: [Inaudible 00:24:15] I tweet a bit, yeah.

Justin Avery: Stu, S-T-U Robson. He’ll either look like Get Smart, or David Bowie, Bowie-

Stu Robson: No, [inaudible 00:24:22] Sass is coming out of his ears.

Justin Avery: Or Sass coming out of his ears, one of them. So you should just tweet him and ask him questions, because that’s how I got to know him. And now I’m sitting with him in Cardiff. But when I did ask you those original questions, it was very much responsive-y, right? So it was all about, like, what do you see the future, and how have you seen things go …

So whether it’s Sass-y or not, like, how have you seen the whole, since then, because it’s more, it’s coming up two years now, since you asked those questions. Like, how has things progressed, from your opinion, and like, where do you think we still need to fix problems? Where, where should the listeners concentrate their efforts in, if they want to contribute to something, or work out a problem? What do you think we’ve done well, and what still needs to happen?

Stu Robson: Um, yeah, I could, yeah. This is quite a tricky one, to be polite.

Justin Avery: Don’t be polite.

Stu Robson: It’s getting to the point now where every aspect of responsive web design, every issue with it, every problem with it, seems to just actually just generally be web design, now. Like, performance is an issue, but performance has always been an issue, but even moreso with responsive web design, but then it’s like, well, not necessarily, because not everyone’s always had a good connection to the internet, or still doesn’t have a good connection to the internet, regardless of whether they own a mobile device or not.

So performance is like, it’s not a responsive web design issue, it’s a web design issue, it’s that. I suppose you could say pictures, maybe, it’s just a, an issue. Not really, I suppose. I suppose that is responsive stuff.

Well yeah, so that needs fixing. Yeah, here we go. [00:26:00] I, I, I’ve, I, I’ve always had a disdain for the picture element, just because the amount of code you have to include in your HTML to output it, have I got another solution, which is not to say use JavaScript, no. But then, I don’t think there needs to be. I’m a great fan of Paul Robert Lloyd’s slide decks, when he’s talking about responsive images, where there’s like, you, you know, at two times, your icons, and then if it’s like, if your site is a photo site then yes, probably, or a jewelry site, then yes, have really high-def photos.

But if it’s just like, a filler bit of photo for, you know, his, in his slide deck. His, his point is like, he’s got a news article about a job center, and at the top of the article is a photo of a job center somewhere in the country. It’s like, that doesn’t need to be at two times if I’m on an iPhone, or a retina MacBook. Because it’s not, you know, it’s just filler. No killer. It’s just filler.

So it’s, it’s not the fact that responsive, or picture’s an issue, it’s the fact that it’s like, you should be thinking more about what you need to retinize, I suppose. Or high, HPDI rather than retinize, because there’s Android users as well.

So that’s a thing that still needs, sort of, fixing. But I think that’s a case-by-case kind of thing, as well. You know, it’s, you might want to use picture for something. It’s like, I’ve only used it once on a site, and really I should have used source set, because of what I was doing, I was [proofing 00:27:36] a two-times picture, you know, picture would be great for, if I was doing the whole Jason Grigsby thing, which I’ve forgotten the name of.

Justin Avery: He did, like, the dog, right? The-

Stu Robson: Where he zooms into the President’s face.

Justin Avery: Yeah, yeah, yeah, yeah.

Stu Robson: Art directed.

Justin Avery: Art direction, yes, I’m sorry. Hello-

Stu Robson: Yeah. But then, that’s got to be really tricky to put on the, [00:28:00] that’s got to be really tricky to put on the, um, you know, to get CMS to do that. I don’t think that’s been solved yet, either. So-

Justin Avery: Hi [Shane 00:28:10]

Stu Robson: So yes, I, so yeah, so it’s, um, it’s, that’s a tricky thing, though. I don’t think, it might, I don’t think it needs to be solved as much as some people say it needs to be as solved as.

So there’s that. I’m trying to think back to the questions you asked.

Justin Avery: I think, what have we done right, but what else needs to be fixed?

Stu Robson: Um-

Justin Avery: What are the issues you’re running into, still?

Stu Robson: It’s, it’s, it’s not–Well, the issues I run into now are more sort of, business-y rather than, like, coding stuff. So to get, like, sign-off from clients. And it’s like, because I’m a jobbing freelancer, so you know, I’ve just done, you know, a couple of days of trying to fix IE 6 and 7 and 8 on a site that was built responsively with Bootstrap apart from, it wasn’t because the in-site-

The header and the footer was built using Bootstrap, but as soon as they went to actual content, they decided to just declare their own class names. Which, anyway, so I did two days of that. And my point was … You have to ask the question again.

Justin Avery: It was just around what, what are we doing wrong and right, right and wrong?

Stu Robson: Um, yeah.

Justin Avery: I actually think, so, and I’ll interrupt you really quickly. You were talking about using Bootstrap. And then earlier, like, I was supposed to ask this earlier, it skipped my mind. You were talking about not using a framework, or you were talking about frameworks. And you do a talk, right, about picking the best out of frameworks, and, well, what is that talk, and how can people apply that?

Stu Robson: So essentially, yeah, I’ve done it, I’ve done the talk twice, now. I’ve done, I’ve done it really, really drunkenly and really quickly at 12 Devs. And then I’ve, I’ve done it sober and a little bit too quick at, from the [inaudible 00:30:00] [00:30:00] in September.

And essentially it’s, I’ve got, I’ve got a bee in my bonnet about pre-defined frameworks that, you know, you just, you just download code from GitHub, and then just, or download using EO, and just make a start on it. It’s because fundamentally you don’t really know the code you’re using.

And then like, with things with Bootstrap, you’re downloading a shitload of code that you might never need. And if you’re really lazy, you might actually upload, like, 110K’s worth of CSS, where if you used something like Addy’s uncss, as a Grunt plugin, [inaudible 00:30:33] plugin, you’d probably qualify that down to like 6k, or even less.

So like, frameworks, for me, it’s like, you know, you want to, I think you want to know and understand every sort of aspect of the CSS or the Sass or the HTML that’s being used. That’s not to say you should write it yourself, either. I’m a great believer of, like, beg, borrowing and stealing other people’s code. So like, HTML-

The thing that got me was when HTML 5 boilerplate select color was pink. And it got Paul Robert Lloyd’s goat, as well. And we, and Nicholas Gallagher opened an issue on repo, on the GitHub repo, and people were like, yeah, we love the pink. And it’s like, no, that doesn’t, you don’t really understand, the problem is that it’s not aesthetically in agreement with the rest of the design. Yeah, it’s a nice shade of pink, but it doesn’t go with, like, the, you know, your corporate brand, perhaps. But yeah, we love the pink.

But yeah, so they’ve got rid of that now, then it’s just, you know. So from that point it’s like, oh, I shouldn’t be using other people’s code. I should have my own sort of set of standards, but not Standards with a capital S, of like, code that I just go to and use. And it’s the same with, um … Compass, for Sass, I started using it, but it put in code I wasn’t happy with. So I just stopped using it.

And it was just like a personal preference, that was. It wasn’t that there was anything bad [00:32:00] with the code that was outputted. It was just that, I didn’t like how it was done. So it was like, well, I’ll just do it differently, so I’ll just make my own mixins.

Which was, you know, which is essentially what not, Compass is. Because Compass is a lot more than just, you know, CSS 3 mixins, which a lot of people seem to believe that’s all it does.

So yeah, so it’s like, you know, borrowing other people’s code, changing it to how I want to work, is like, is like a really big thing for me. I’ve got a hashtag I use, which is #Codealicious. So every now and again, like, if someone writes about the fact they’ve made their own framework based on something, or something else, I like, retweet it in #Codealicious and stuff.

Because it’s like, yes, it’s, there’s two, there’s two ideas of mind. It’s like, I was at a Smashing Mag workshop and conference bootcamp on Monday. And one was like, Addy from Google did like, the top ten, like, commandments I suppose. But not commandments. For like, why you should use grunt and gulp. And [yaiman 00:33:03] is like, well why, why bother, just like, reinventing the wheel?

And it’s like, essentially what I’m saying is, do you reinvent the wheel but don’t, it’s like, you know, nick the tire of the Ford Cortina, and a, and a, you know, a Vauxhall-Astra rather than, like, you know, make a Lexus, essentially.

Justin Avery: That’s a great analogy. So I’m going to ask you, so, two more questions. One will be, like, what question will you have for the next speaker? And hopefully they won’t be tonight. Because-

Stu Robson: The next speaker [inaudible 00:33:40]

Justin Avery: It’s to you, no, the next speaker, because it is chilly out here. But, uh, the other one is, like, if someone was getting, or not getting started in Sass. If someone’s using Sass, is there one particular mixin, like, do you have a favorite mixin that helps you with your, and again, we’ll keep this responsive. Is there one mixin that helps you generally with web design, [00:34:00] and then specifically with responsive that you would recommend?

Stu Robson: Yeah. So going back earlier when I was talking about supporting IE with mixins and things with Sass. I, part of the reason why I moved from Less to Sass is that it was a, no. Part of the reason why I enjoyed using Less at the time is that it wasn’t … No, I’m trying to think. It was available in Sass, but it wasn’t in Less, so I wrote a blog post about what I’d wanted it to be in Less. And then a client said, I want you to use Sass. So as a jobbing freelancer, I said okay, I’ll learn.

No, he wanted to use Sass. So as a jobbing freelancer I said, well then, if you’ll pay me a daily rate then I shall learn Sass. Because I need, I need a roof over my head.

But yeah, so essentially it’s a mixin that, you pass it a media query, and you pass the content of an element within that media query. And you can say yes or no. And if you say yes, basically you’ll output same code with, you know, dot, less than, IE.

Which has been done, there’s several versions, like Jake Archibald’s got a version where you can spit out an entirely different stylesheet. That’s a great idea, but then it’s like, are you penalizing IE, you know-

Justin Avery: Two downloads.

Stu Robson: Because there’s two downloads, where they’re on, probably on a crappy machine with a slow connection. Well, possibly a slow connection, probably not. But at least the-

Justin Avery: Like a government connection.

Stu Robson: Yeah, a government connection. But it still is two downloads rather than one. A breakup, do a similar, a break point does a similar thing, which is a Compass plugin which I really, I really liked.

But yeah, so that’s, that’s like the, for me, that’s the one I use pretty much daily. And that’s probably the, you know, because like, going back to the fact that I only really use variables and nesting and don’t use, like, the full, like, the Jedi powers of Sass. It’s, you know, it probably only is nesting variables and my little mixin that I use day-to-day, because it just seems to work, and just works [inaudible 00:35:57]

And I’ve, I’ve never had a problem, with the like the, four hundred and, [00:36:00] four thousand ninety-six line limit, with, oh, you’ve not had that yet. And I’ve done, I’ve done a few big sites. Not loads of big sites, but I’ve done a few big sites. Not worried yet, so so that’s pretty, yeah. So that’s what I’d suggest.

But yeah, there’s [inaudible 00:36:16]

Justin Avery: And so finally, then, you’ve had a, I don’t even know how long this has gone on for. But a question for next week, so that our next guest will answer a question like you, with your a link, and I think that, that is actually the best element, right? Like, that is the best HTML thing ever, is the a link.

What’s your question for the next, the next guest?

Stu Robson: Okay. This could take somewhat, quite a while of me just, as big blank pauses of me thinking.

Um, so in terms of responsive web design, what would I want to ask the next guest? Um … Do you, do you, no. You’ll have to come back to me on that.

Justin Avery: That’s okay, we’ll come back.

Stu Robson: Um … It’s a long pause. You can edit this out.

Justin Avery: A stretch. No no no, I don’t do editing. I never do editing. It goes straight out. It goes straight into Amazon S3, and then that’ sit, it’s done-

Stu Robson: Cool. That’s it, shocking. That’s even worse-

Justin Avery: It’s going to make the newsletter, [inaudible 00:37:30]

Stu Robson: That’s even, that’s even worse than my, my newsletter editing for Sass News. So yeah, so [inaudible 00:37:36]

Justin Avery: Well then why, well, while you do ponder, where can people, so you need to think about a question as I said. But where can people follow Stu, where can they check you out, see what you’re writing? Have you got any exciting projects coming up?

Stu Robson: Um, so yeah. So pretty much @StuRobson, everywhere. [00:38:00] My domain is AlwaysTwisted, one word, which comes from a, when I used to be in a band, we had a local one, free magazine that did a review, and it was, and I think it was like a, always twisted, slightly bizarre eclectic mix of rock and blues and heavy metal. So always twisted, slightly bizarre has always stuck with me.

So yeah, that’s pretty much where you can grab me from. I’m always on Twitter. Some people would say it’s sort of, it’s wired to it. It’s just that, um, I can type really fast, really.

So going back to, in terms of your question. It’s like, um, if Ethan, my question will be, if Ethan didn’t come up with the, like, the holy trinity of responsive web design, which is flexible grids, fluid images, and …

Justin Avery: Media queries.

Stu Robson: Media queries. Yeah, essentially. Quite essential, media queries. Do you think we’d be having a plethora of still, an increase of M [dot 00:38:59] or do you think someone else would have thought, wait a minute, we could have, you know, built one site for many rather than several sites for a couple?

Justin Avery: That’s a very interesting question. And I don’t even know who’s going to answer that for next week. But that’s the end, for this week-

Stu Robson: We’ll find out in three minutes.

Justin Avery: We’ll find out in three minutes when we go back inside. It’s freezing outside in Wales. It’s not that bad, actually. But I want to thank Stu for joining me outside on this cold evening, over a lovely beer in the middle of the web.is, we’ve left everyone inside.

Thanks for you, thank you everyone for listening. Thank you to MailChimp for sponsoring this week’s edition, and yeah. Again, thanks everyone for listening, and we will see you again next week. Thanks Stu.

Stu Robson: Cheers, thank you very much.