SitePoint Podcast #166: Front End Development with Mason StewartBy Karn Broad
Episode 166 of The SitePoint Podcast is now available! This week Kevin Dees (@kevindees) interviews Mason Stewart (@masondesu) of Zaarly and disusses the likes of SASS Less, jQuery and many other parts of the front end development world.
Listen in Your Browser
Play this episode directly in your browser — just click the orange “play” button below:
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
- SitePoint Podcast #166: Front End Development with Mason Stewart (MP3, 33:16, 32.0 MB)
Subscribe to the Podcast
Kevin and Mason discuss how all the frameworks and languages offer the front end developer so many ways working up great things on the web.
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/166.
Kevin: Welcome to SitePoint Podcast. I’m Kevin Dees and today I’m joined by Mason Stewart from Zarlee and here at Cowork, welcome to the show.
Mason: Hey. How’s it going?
Kevin: It’s going all right. How’s has your day been going?
Mason: Uh, pretty good just code slapping so far.
Kevin: You mentioned Zarlee and that you worked there, but what is it Zarlee?
Mason: Zarlee, there’s a whole lot of different ways that you can describe kind of what Zarlee was and is. Basically, it’s a hyper local market place, and what that kind of means in plain English is that we have a platform where you can say like “hey I need somebody to deliver like three dozen cupcakes to this office party we’re having and we’d like them to be homemade and, you know, peanut butter chocolate chip”, whatever. Then that sends out push notifications to everyone around and you can do it for any kind of service or thing you need. I had somebody help me haul some lumber on Zarlee, because my car isn’t big enough to move it. So I just basically got on Zarlee, said “I need this at this time”, and I pushed out a notification and a really cool dude showed up and helped me unload all kinds of stuff. We’re also coming up with some really cool seller tools to make that an easier thing for sellers too. So, you can say like “hey I’m a painter I can repaint your exterior of your house for X number of dollars” and that’s something they can almost sell. It’s a service that they’re offering to a number of people verses just a one-time thing. It’s a really fun platform, it’s a really fun platform to work on.
Kevin: Right and most of your interaction is all clients’ side right, because you’re using Backbone, so it’s very fast very slick?
Mason: Yeah, so what we do, we have like obviously very complicated modeling for all of this in the back end. Backbone allows us to replicate the parts of those models that we need. So, you can pull down your user model or a model for a listing and the listing can have all of its meta information, it’s price, it’s location, and who asked for it, and what time, and all that sort of stuff. We’re able to have a really rich kind of ecosystem of information and chunks of data locally on the client, and Backbone makes that pretty much a dream come true.
Kevin: Pretty cool, so, get into kind of the grass roots with where you started with all this because every person’s story that I’ve ever heard is always has some interesting detail of how they got into the web because it’s so young and it’s so new and it’s so exciting and it’s rapidly changing. I was wondering if you could tell us a little bit about how you got into the front end inside of development. Did you go through school?
What was that whole process for you?
Mason: Yeah, for me I’m 28 years old and I think when I was probably 14 or 15 I started writing HTML.
Kevin: So, he’s got 14 years’ experience at this point.
Mason: Well, sort of but.
Kevin: If you count those early years, right?
Mason: If you count using the blink tag as experience.
Kevin: That’s experience, I put that in my resume.
Mason: Yeah I have used the blink the flame tag and the Marquee tag. So, I started out doing HTML and doing like python scripting and pearl scripting back in the days when we had like CGI bins.
Kevin: Yeah, no big deal. I’m 14 just writing this awesome code.
Mason: Real dorky stuff. Loved computers, had a lot of fun, had some cool jobs, but basically when I was like 20 I was like I don’t want to use a computer anymore. I’m done sitting behind a screen so I just quite cold turkey for about 5 year, didn’t write a single line of code.
Kevin: Not at all?
Mason: I moved to Japan, hung out, worked in an orphanage, did a lot of stuff, and then I came back and I was like you know what, I might write a little code. I kind of stumbled into a little job writing code at this shop. A really tiny shop, and kind of caught back up on like 5 years of web development over the course of a couple weekends. From there I kind of jumped in after jQuery was already in full swing, after CSS was everywhere. When I left, CSS was just kind of a twinkle in everyone’s eye. Then when I come back it’s everywhere. It was really kind of a cool time. I felt that was a cool time to jump into to web development. Now, I look at the resources that we have available now, and I’m just like gosh. This is literally the best time for anyone to be. I look back at the bozo stuff we did 10 years ago, and I’m just like, you know, that was horrible what we we’re having to try to pull off with tables and stuff. Now, web development is such an incredible experience.
Kevin: What are those things that you just mentioned, those three?
Kevin: Right. Sort of like PHP will compile down to HTML. In a way they’re pre-processors right?
Mason: Yeah, I think so, also, sorry to Marco, Marco Suarez, we love you.
Kevin: You got to call him out man.
Mason: Marco really does know how to code. He actually writes some pretty good deal code for Zarlee, but he’s one of our designers and we pick on him sometimes. But he is a good coder. Marco is a great example. Marco is an incredible designer he knows his way around HTML and CSS really, really well, and can certainly get stuff done in jQuery. Is Marco gonna sit down and write like an epic Backbone controller, no, but that’s fine.
Kevin: That is when you don’t even have to know what that means.
Kevin: Very utilitarian. Yeah, mostly just effects and that kind of thing.
Kevin: So, to kind of sum it up really quickly, designer, you can start with jQuery right?
Kevin: Yeah, it’s about putting the pedal to the metal by not running out of gas to quickly right.
Kevin: Right. Definitely we’re past the days of do it from scratch. That used to be kind of back when jQuery was still sort of in its infancy. You had prototype and all these other things but people were still kind of rolling their own sets from scratch.
Kevin: Yeah. I think that’s really sound advice, when you’re talking about experimenting. A kind of an experimental physique or facade about you, right. You just want to get out here and kind of play with the play dough and see what happens.
Kevin: That’s a little bit about frame works and I wish we could dive more into those but they’re so unique and so different. It really just comes down to using them. You’ve really hinted a lot at things like coffeescript Sass and I know LESS is another one and there have been some people who have been kind of adverse to that and I don’t necessarily want to do something that’s taking the control away from them to kind of use these tools. It some context that’s true, right, because you don’t always want to use these pre-processors in some cases, especially like smaller projects like a plug-in for jQuery. You don’t want to integrate a bunch of the frameworks into a plug-in that needs to be small, or, like a script that you want to just kind of share. Where do those things come into play and are they good or bad or it’s it kind of circumstantial?
Kevin: The big issue that I would really like to talk to you about here is the integration of these pre-processors into things like IE’s and like for example Fire bug, if you’re using Sass or LESS you can’t exactly just inspect them and say this line is code and get that precisely. There are a lot of tools that have been built around the static flat file and then on top of that you have to be able to compile those pre-processors. So, you have to be able to compile Sass, LESS compile Coffeescript and for those people I do want to point out that there are like apps out there specifically for Mac. I’m not too familiar with the Windows side of things but you can get things like code kit or I think there are some other ones out there. So, don’t be threatened by the compiling of this stuff it’s super easy to just find the app, download it, it’s worth the cash. Usually there about $20 so do be afraid of that. But, I want to focus more on like the application side of right the IDE not picking up on this kind of thing or you know. What’s your take on that like is that big enough of a down-side to not using these things?
Mason: No. I honestly don’t feel the pain at all. The reason is, at Zarlee we use SCSS, and in development mode I write some styles for something and then I hit inspect element. I see the generated CSS, but if I hit, it will say at line 500 of main.css if I click right there it will show me in the comments right above that block exactly where it came from in the Sass.
Kevin: Which is awesome.
Kevin: I like how this conversation has been kind of leaning more towards Sass because I have used LESS in the past and the more and more I use Sass the more and more I understand why it’s kind of superior to LESS. LESS is appropriate, don’t get me wrong, but, it’s more appropriate for smaller kind of projects. When you use Sass like you’re mix-ins don’t actually become like a class that’s just empty in your style sheet that kind of thing. There’s a lot of little tid-bits that happen because of that. Like you were talking about compiling and like the comments like all that stuff, if you were to state the differences between LESS and Sass, LESS is easier to write and it’s kind of nice to start there but eventually you want to go over to Sass I think.
Mason: Yeah. I think that’s a fair approach.
Mason: We’re really lucky at Zarlee, because everyone has an attitude of let’s use the best thing for the job, even if that means switch out major technology for this other technology. Again, within reason, we’re not constantly switching from closure to ruby to .net. We’ve never switched to .net sorry.
Kevin: You might.
Kevin: Dang that jQuery, I hate it.
Mason: Well, we actually, really interesting at Zarlee we did actually swap out jQuery for Zepto for a few months.
Mason: Except for IE obviously.
Kevin: That’s crazy.
Mason: Yeah. We just.
Kevin: But you did it.
Mason: We did it we tried it. I respect Thomas Fuchs and the whole Zepto team they’re super smart and the source is really great and I respect the hell out of jQuery team too. Ultimately we switched back for a number of different reasons, but that was a great experiment. I love Zepto and would use it in some other projects but as far as dealing with some of the extenuating circumstances that Zarlee with supporting IE and everything we ultimately just said we’re going back to jQuery. That kind of attitude as long as it’s not completely out of control is, you know, just test it and see. Give it a shot.
Kevin: I think you’re absolutely right there the proof is in the pudding. The best thing do is if, I think, if there’s like an internal project that’s really small or maybe you’re throwing together like a word press site that’s gonna be fairly simple and straight forward, I think you can probably get buy-in on one of those projects, probably not the bigger ones because people are kind of adverse to change to begin with. So kind of turning into a fun kind of thing verses a do it my way kind of approach so I think that can help as well. We’re running low on time. We actually did get through all the good questions. So, this is absolutely awesome. I have a few questions for you and then we can wrap up.
Kevin: Number one how did you grow that awesome beard? That is amazing. Is there like Miracle Grow or something.
Mason: No, it’s just a fast growing beard.
Kevin: It’s a fast growing beard.
Kevin: Very nice. Where can people find you or can they get in contact with Mason and find all of his awesome creative ideas?
Mason: Sure. Best ways to find me generally is on Twitter @masondesu, M-A-
S-O-N-D-E-S-U, just like it sounds. You can go to my site at masondesu.com I haven’t updated it in quite a while in fact I think some parts of it are actually pretty broken but there is a cool pixel art version of my face with a rainbow beard that you can click on. Just click view best feature on the top left and my head will pop with a rainbow beard.
Kevin: That’s very cool man.
Mason: That and Twitter I think are the best places to find me.
Kevin: Great so there’s your inspiration, rainbow beards. All right, well, Mason thank you so much for coming on this show. It’s been an absolute pleasure.
Mason: Yeah, no problem.
Kevin: Really smart guy and I think you’ve proved to the world that you’ve got the chops.
And thanks for listening to the SitePoint Podcast. If you have any questions or thoughts about today’s show please feel free to get in touch. You can find SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m. You can find me on Twitter @kevindees, and if you’d like to leave comments about today’s show check out the podcast at sitepoint.com/podcast, you can subscribe to the show there as well. This episode of the SitePoint Podcast was produced by Karn Broad, and I’m Kevin Dees, bye for now.
Audio Transcription by Speechpad.
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.
- 1 Three Keys to Being a Productive Software Engineer
- 2 How to Improve Site Performance (and Conversions) with Dareboost
- 3 How to Add Real-Time Notifications to Laravel with Pusher
- 4 Tech Stacks, Frameworks, Being Creative, and Being Real, with Tim Holman
- 5 A Walkthrough of CSS Length Units You Can Use for Font Size