[Music]
Lea Alcantara: You are listening to CTRL+CLICK CAST. We inspect the web for you! Today we’re talking to Sean Smith about super charging your text editor. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:
Emily Lewis: Emily Lewis!
Lea Alcantara: This episode is sponsored by Visual Chefs,…
[Music]
Lea Alcantara: You are listening to CTRL+CLICK CAST. We inspect the web for you! Today we’re talking to Sean Smith about super charging your text editor. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:
Emily Lewis: Emily Lewis!
Lea Alcantara: This episode is sponsored by Visual Chefs, a web development focusing on content management system integration and custom web application development. Visit visualchefs.com to find out more.
Emily Lewis: CTRL+CLICK would also like to thank Pixel & Tonic for being our major sponsor.
[Music ends] So Lea, it’s our first episode after a major launch …
Lea Alcantara: [Agrees]
Emily Lewis: We rebranded my company, Emily Lewis Design!
Lea Alcantara: That is right!
Emily Lewis: [Laughs]
Lea Alcantara: I feel like we need to have a sound effect at this point. [Laughs]
Emily Lewis: We do. Really, we need sound effects.
Lea Alcantara: [Making weird sound effects]
Emily Lewis: This has come up before. [Laughs]
Lea Alcantara: [Laughs] Yeah, so we’ve got a new name, new logo, identity and more focused consistent messaging, and for those that don’t follow us on Twitter, you should, but we are now Bright Umbrella.
Emily Lewis: It has been such an exciting time.
Lea Alcantara: [Laughs]
Emily Lewis: I mean, super, super stressful and really busy.
Lea Alcantara: [Agrees]
Emily Lewis: But it’s really exciting to finally be able, at least for me personally, to let go of that feeling I’ve had since you came on board that the name of the company just didn’t reflect what we were.
Lea Alcantara: [Agrees] I mean, it is nice to have to go through this kind of exercise as well because it really I feel like we’ve focused our company even more.
Emily Lewis: Oh yeah.
Lea Alcantara: Yeah, yeah.
Emily Lewis: It was a good process. I think it let me answer a lot of questions about myself professionally, about the company, where I wanted the company to go … Fortunately, to reinforce the fact that you and I are very much still in the same page about what we want.
Lea Alcantara: Yes.
Emily Lewis: But it was also really cool for me. I’ve never gone through a branding process.
Lea Alcantara: Yes. [Laughs]
Emily Lewis: To go through a branding process, to be treated like a client. You treated me like you treat the clients that we do branding with, and it’s very hard to describe. It’s emotional, and it’s exciting.
Lea Alcantara: Yes.
Emily Lewis: And it’s frustrating.
Lea Alcantara: Yes. [Laughs]
Emily Lewis: And it seems to move too fast while moving not fast enough.
Lea Alcantara: Yeah. I feel like branding your own company is always complicated, and because I work with you, I did try to be objective, but it was very interesting because while I was trying to be objective and take your thoughts and decisions and ideas, I also had to keep my own ideas as well.
Emily Lewis: [Agrees]
Lea Alcantara: Because it had to be a combined brand.
Emily Lewis: [Agrees]
Lea Alcantara: It had to reflect both of us. So it was definitely an interesting journey mixing it up that way as opposed to just like it’s just me versus it’s just the client and now it’s kind of like, “Okay, there’s sort of a client, i.e., you, but it’s still me as well.” [Laughs]
Emily Lewis: Yeah. We have an episode scheduled for later this year to talk about the rebranding and that sort of merging of identities.
Lea Alcantara: [Agrees]
Emily Lewis: But a few quick notes about the rebranding before we get to today’s episode with Sean. Bright Umbrella is now the official producer of the CTRL+CLICK CAST. We also used Pixel & Tonic’s Craft CMS to run our site, which turned out to be really fun for you.
Lea Alcantara: Yes.
Emily Lewis: Because you kept telling me about how much fun you were having. [Laughs]
Lea Alcantara: Well, it was definitely interesting once we decided to choose Craft, which we will probably talk about a little bit later in that future episode and blog posts.
Emily Lewis: [Agrees]
Lea Alcantara: But it was just so like easy. [Laughs]
Emily Lewis: [Agrees]
Lea Alcantara: I thought it was easier than I thought it would be, and I think part of it was because I had so many options on how to enter the content.
Emily Lewis: [Agrees]
Lea Alcantara: And one of the most interesting things about Craft to me was the Matrix fieldtype which we used on our portfolio case study section of our site, and speaking of that, Anthony Colangelo, sorry if I mispronounced your last name, actually wrote an article for A List Apart about longform content with Craft’s Matrix, so we’ll link to that in the show notes.
Emily Lewis: I have to say — and you did pretty much all of the development — but I got to use the site like a content author would use, and it’s so easy.
Lea Alcantara: [Agrees]
Emily Lewis: I didn’t have to ask you how to do anything.
Lea Alcantara: [Laughs]
Emily Lewis: I was just like, “Oh, new entry, boom!” [Laughs]
Lea Alcantara: Yeah, it’s true because this entire process has been going so rapidly that we haven’t even had a chance to run through how I put it together. [Laughs]
Emily Lewis: [Agrees]
Lea Alcantara: And yeah, you haven’t even asked me a question, and it’s already like done.
Emily Lewis: The easy part, that’s the part that’s nice.
Lea Alcantara: Yes.
Emily Lewis: Not only for the developer, but for me as the user.
Lea Alcantara: Yeah.
Emily Lewis: So we are going to be blogging a lot more also about the rebrand. I think Lea you’re going to talk about or write about the logo and site design.
Lea Alcantara: [Agrees]
Emily Lewis: I’m going to write about some of the messaging that we have on the site.
Lea Alcantara: Yes.
Emily Lewis: I mean, it spiders to everything we have, from our proposals to our social media profiles and activities.
Lea Alcantara: Yeah.
Emily Lewis: So we’ll be sure to include a link to our blog RSS in the show notes along with some blog posts about our launch announcements … we even blogged a bit about the rebranding process and how it helped us get to the name Bright Umbrella.
Lea Alcantara: So if you’re interested in that and looking forward to more of that, please make sure to subscribe to our feed, and we are working hard to spread the word about this rebrand, and we’d love to have some help, so if you can follow us on Twitter, we are @abrightumbrella, and we’re also “abrightumbrella” on Facebook.
Emily Lewis: All right, so to today’s episode. Special guest, Sean Smith, is with us to talk about something most of us developers touch everybody, the text editor. But not just your average everyday out of the box editor, the editor is super charged to help you develop better and faster. Sean is a developer and owner of Caffeine Creations in Toronto, which specializes in building websites and CMSs for small businesses. Sean is also an active member in the ExpressionEngine community, curating the #eecms Daily online news, and even working as a Customer Advocate for EllisLab back in 2012. Welcome to the show, Sean!
Sean Smith: Hi Emily. Hi Lea. It’s great to be here.
Lea Alcantara: Awesome. So Sean, can you tell our listeners a bit more about yourself?
Sean Smith: Well, I lived overseas in South Korea for 14 years where I met my wife.
Emily Lewis: Oh cool.
Sean Smith: And I have two kids. I moved back to Canada in 2011 to Toronto where at the time I knew nobody, so it was quite the adventure, and I feel very fortunate to have gotten a job right away. And then recently, about seven months ago, I moved on to working for myself.
Lea Alcantara: Very cool. Very cool.
Emily Lewis: So I’m just curious, how do you like working for yourself?
Sean Smith: It’s the best thing I’ve ever done.
Emily Lewis: Yeah. [Laughs]
Lea Alcantara: [Laughs]
Sean Smith: Everybody should do this.
Lea Alcantara: Well, I don’t know not necessarily about that, but I definitely can understand your sentiment of being able to have your own hours and your own clients and stuff like that.
Sean Smith: Yeah. When I was working in South Korea, I was teaching at a university, and I had a lot of free time. Like I worked 12 hours a week, three-day or four-day work weeks with 20 weeks of vacation.
Lea Alcantara: Wow.
Sean Smith: Yeah, why did I leave? Don’t ask me. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Sean Smith: So I got used to having a lot of freedom and being able to set my own work hours and what I wanted when I wanted to do things, and working for myself brings back a lot of that.
Lea Alcantara: [Agrees]
Sean Smith: Like I’ve worked more than I did when I was in Korea, but I still have the flexibility and the freedom to do what I want.
Emily Lewis: Yeah, that’s how I feel, although I feel like I’m working harder than I’ve ever worked in my entire career. But at least it’s for me, like I benefit from it. [Laughs]
Lea Alcantara: Yes, exactly [Laughs]
Sean Smith: Oh yeah, you’re not lining the boss’ money or lining his pockets with money.
Emily Lewis: Yeah. [Laughs]
Sean Smith: [Laughs]
Emily Lewis: Oh, so let’s talk about text editors. First, I kind of want to find out from you, Sean, but also you, Lea, what text editors you’ve used in the past and what your current you’re using today. So why don’t you answer that for me, Sean, and then Lea you let me know.
Sean Smith: Well, when I first started doing websites, it was just a hobby. I didn’t even own a computer. [Laughs]
Lea Alcantara: Oh wow!
Sean Smith: I was doing it in the office, and so I had a copy of Dreamweaver, and that’s what I used to do everything in there, and then I got more serious. I realized I liked it. I got a computer and got into it. Basically, at that point, I used Dreamweaver at home, and afterwards, I moved to Notepad++.
Lea Alcantara: [Agrees]
Sean Smith: Yes, I’m on Windows, so Notepad++. I believe it works on Mac, but I’m not sure.
Lea Alcantara: [Agrees]
Sean Smith: In any case, I used that for years. I was really, really happy with it. And a few years ago, there was a lot of buzz about Sublime Text, so I gave it a shot, and I switched over, and that’s what I’ve been using since then.
Lea Alcantara: Cool, so for me, it was way less complicated, Notepad on Windows.
Emily Lewis: [Agrees]
Lea Alcantara: I was a Windows person for the longest time, and especially when I started HTML and stuff when I was like 13 or 14 years old, so Notepad was it. There wasn’t any really super charged anything. It was just Notepad. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: And then once I went to college and started taking websites a lot more seriously, I started looking into better text editors, and I was still on Windows, so I think there was something called like HTMLPad that I used. Yeah, and I think that was the first one I actually paid for because I think it was like $20 or whatever, and I thought, “Well, okay, this seems really cool. It autocompletes my HTML.” That was like my main motivation is to just have it autoclose the tags. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: And just have a little bit of color coding at this point, so I think that was HTMLPad, and then when I switched on to a Mac. And I think a lot of our listeners will probably relate to this, I went through so many text editors, through all those like Mac software packages.
Emily Lewis: [Agrees]
Timestamp: 00:09:49
Lea Alcantara: There’s usually like this Mac software saying, “Buy this bundle for $50 and you get like a ten different pieces of software.” And inevitably there’s always a text editor there, so there’s been Coda. There’s been Espresso, and recently, and actually like before I tell you what I’ve been testing thus far, Coda used to be like the main one that I’ve been working on because I just liked how it looked and all that fun stuff, but I’ve been recently testing Sublime Text because people have been raving about it.
Emily Lewis: [Agrees]
Lea Alcantara: And then there are supposed to be a lot of ways you can customize it, et cetera and so forth, so that’s the one I’ve been testing out so far. And what’s great about Sublime versus like other ones too is they let you just test it out for free.
Emily Lewis: Oh.
Lea Alcantara: Yeah. So you just get like a little bit of a ping saying, “Okay, you tested it a while now, we’re not going to like lock down the software anytime soon, but please give us money.” [Laughs]
Emily Lewis: [Agrees]
Lea Alcantara: But this allows me to actually test out all these different features.
Emily Lewis: Let’s see, back in the day, I was also a PC user. I think the first thing I wrote HTML in was Notepad or something like that.
Lea Alcantara: Sure.
Emily Lewis: But then I had a job for the government, which meant I worked with FrontPage.
Lea Alcantara: Oh god.
Sean Smith: Oh.
Emily Lewis: Yeah. [Laughs]
Lea Alcantara: [Laughs]
Sean Smith: [Laughs]
Emily Lewis: And even in my early days, I was a bit of a freak about my code quality so that was painful. And then there was a tool from, I think it was Macromedia called HomeSite. I think they made it.
Lea Alcantara: Right.
Emily Lewis: It was a small text editor.
Lea Alcantara: I remember that.
Emily Lewis: And then I went to Dreamweaver, and Dreamweaver is still what I use today.
Lea Alcantara: Interesting.
Emily Lewis: I used TextMate for a couple of years because my boss at the time, Ian Pitts — who we’ve had on the show — he was like talking about how great TextMate was, so I used that for a while, but then I ended up going back to Dreamweaver. Then I think it was — I don’t know — sometime last year we had someone on the show talking about how great Sublime was, and so I went and tried that. I tried it, I went back to Dreamweaver, so that’s where I am today.
Lea Alcantara: Interesting.
Emily Lewis: [Agrees] I think I’m the odd person out. [Laughs]
Sean Smith: You tried Sublime Text and rejected it?
Emily Lewis: Yeah.
Lea Alcantara: [Laughs]
Sean Smith: [Laughs]
Emily Lewis: And I guess we can talk about all my personal oddities…
Sean Smith: I have no idea how it could happen.
Emily Lewis: But yeah, basically I did. I don’t want to hog the conversation, but I think we’re going to talk about it later, but for me it came down to, and this is why I’m hoping this show is going to like encourage me to break out of this mindset, but I use what I’m most comfortable with.
Lea Alcantara: Sure.
Emily Lewis: Because that’s what I’m fastest with, and I can’t…
Sean Smith: Yeah, that’s human nature.
Emily Lewis: Like Lea, you talking about testing, I don’t have time. I don’t want to.
Lea Alcantara: [Laughs]
Emily Lewis: I don’t want to try a bunch of stuff.
Lea Alcantara: Sure.
Emily Lewis: I just want to go in, I want to write my code and I want to get back to whatever else I was doing. So I think it’s part laziness and part curmudgeon-ness. I don’t know… [Laughs]
Lea Alcantara: [Laughs]
Sean Smith: [Laughs]
Lea Alcantara: Well, I think what this just show was how very personal a text editor can be for a developer.
Emily Lewis: It is, yeah. So I want to talk to Sean a bit about this concept of super charging a text editor because this is something I don’t do. I don’t customize. I mean, I think I’ve made a few changes in Dreamweaver’s preferences so it doesn’t change my code for me, but I basically just use it as a text editor, and I leave the defaults. But what is it to super charge a text editor? Is it to customize it via preferences, or is it to install stuff?
Sean Smith: Well, I’m not so sure about “super charging.”
Lea Alcantara: [Laughs]
Sean Smith: But I would prefer like “customizing,” and I do it to a limited extent. Basically, I think you need to set it up so that it works for you and the features that you want work in way that you expect them.
Lea Alcantara: [Agrees]
Sean Smith: For me this is setting up the theme. I don’t like dark on light or I mean, light on dark.
Emily Lewis: Oh right.
Sean Smith: It’s backwards to me.
Lea Alcantara: Interesting.
Sean Smith: It’s not how you read a book, and it bothers my eyes.
Emily Lewis: Right.
Sean Smith: So I always choose a light theme so it’s white or off-white background with dark-colored texts.
Lea Alcantara: Cool.
Sean Smith: And expanding, I forget what the correct word is, but when you’ve got an opening and your closing tag and you’ve got a bunch of stuff between it, you can click a button and it collapses.
Emily Lewis: Oh right, yeah.
Sean Smith: So I want to be able to open and collapse …
Emily Lewis: So you use that kind of feature a lot, like the collapsing?
Sean Smith: All the time, especially with a file that’s really, really long. It helps me drill down and focus on what I want to see.
Emily Lewis: [Agrees]
Sean Smith: And of course, syntax highlighting, that’s the most important thing. If there’s no highlighting, it’s not really readable.
Emily Lewis: And when you’re talking about highlighting, you’re talking about the color of the text in the editor, or are you talking about like if there’s an error that it highlights it for you, or are you talking about something else?
Sean Smith: The color of the text.
Emily Lewis: Oh.
Sean Smith: Depending on what language you’re using. So if you’re using CSS, you’d have different colors, depending on whether it’s an attribute or a selector or you’re using curly braces, or the brackets.
Emily Lewis: Oh right.
Sean Smith: Or whatever part you’re using would have different color highlighting.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Sean Smith: So it’s easy to drill down to what you’re looking at. So for ExpressionEngine tags, the parameters would be highlighted between the opening and closing quotes.
Emily Lewis: Well, this kind of brings up something, so I don’t think a lot of text editors know ExpressionEngine coding so how do you make it?
Sean Smith: There’s a package for Sublime Text that you search for using Package Control and install ExpressionEngine, and everything is color coded.
Emily Lewis: So it’s a matter of finding an add-on that’s been developed that you have to extend the software with?
Sean Smith: Yeah, but for the ExpressionEngine, when you don’t have to, it just works. It’s already been done. I’m not sure how …
Emily Lewis: Oh, you mean it comes like already in the box and everything?
Sean Smith: Well, no, with Sublime Text, you need to install Package Control, and there’s a number of tutorials out there. One of the things I really wish Sublime Text would do is would be to improve the GUI so you don’t have to sit there and try and figure things out.
Emily Lewis: [Agrees]
Lea Alcantara: [Agrees]
Sean Smith: But you install Package Control, and then you go into Package Control, select install a package and type in ExpressionEngine, boom! Now, whenever you’re working in ExpressionEngine code, you change the code type to ExpressionEngine, and everything is highlighted.
Emily Lewis: Yeah, I had to do something similar for Dreamweaver, but I did, as I mentioned, I tried Sublime and I did install that Package for ExpressionEngine, and while it was a little clunky to follow the instructions, it was kind of straightforward.
Sean Smith: Yes. [Laughs]
Emily Lewis: It wasn’t horrible, and I say that because I had to install something for Dreamweaver, and I don’t even think it was the installation. It was more like getting into the configuration of the software itself to let it recognize Sass, so I could get the coding colors to work.
Sean Smith: Oh, you need to install a Sass plugin.
Emily Lewis: Well, for Sublime, you mean?
Sean Smith: Yes, which is what I’ve done.
Emily Lewis: Yeah. So with the Dreamweaver, it wasn’t simple, like there was a whole long tutorial that I had to read through to find out like what bit of code in the config file to update with whatever. So that was a bit of a pain in the butt, which probably that should have forced me to start using something else. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: But I stayed with Dreamweaver, and I write my Sass in it now. [Laughs]
Lea Alcantara: Well, I mean …
Sean Smith: Well, I can understand that because once you’ve got it done, you don’t need to do it again until you buy a new computer.
Emily Lewis: [Laughs]
Lea Alcantara: Yeah, I mean, it was the syntax highlighting that made me really want to try something like Sublime because it feels like there’s a large extension or add-on community for Sublime, and there are enough developers that do a variety of tasks on it that there is almost immediately, if you think about it, there’s going to be a syntax highlighting add-on that you can just plug in and install, like there’s a Twig add-on, which helped me when I was working on the Craft site so I could see the differences between just a regular tag versus a Twig tag.
Sean Smith: Yeah, and actually I’m doing something using Smarty. It’s a different programming language, and I just check Package Control and there is Smarty plugin so I’ve got that going too.
Emily Lewis: Now, Lea and Sean, you guys have worked with others like Coda and such … do they have that same sort of extensibility or is Sublime superior in that way?
Sean Smith: Yes, Sublime is easy to use and basically, you can do whatever you want with it. I used to use Notepad++, and there was a package for ExpressionEngine tags and some other stuff, but it was a little bit difficult at that time to get it to work correctly, and I switched to Sublime Text like two or three years ago. So I don’t know if it’s improved or not since that time.
Emily Lewis: All right, so syntax highlighting is one way to make your text editor work better for you because, yeah, it totally helps your scanning and seeing your code properly, but what about the font? Is it either defaulted or you add a different type of font?
Sean Smith: Oh my god, I had not thought about fonts until you talked to me last week and you mentioned that Dan Benjamin article.
Emily Lewis: [Laughs]
Lea Alcantara: Yes.
Sean Smith: Wow! So I tried out one of the fonts and I love it. It’s way better than the default. I don’t know what the default on Windows Sublime is. It’s probably New Courier, but I installed DejaVu Sans.
Lea Alcantara: Yeah.
Sean Smith: And wow! It’s way more readable, I’m not switching back.
Emily Lewis: Wow!
Sean Smith: It made a big difference. It’s so much easier to look at.
Lea Alcantara: But is it because of the anti-aliasing is better? Is it just because the shape of the type is just a lot more readable versus the previous typeface you’re using?
Sean Smith: I’m not a typographer, so I don’t really know. All I can say is it’s cleaner and easier to read.
Lea Alcantara: There you go. [Laughs]
Emily Lewis: Yeah. Just looking at Dan’s article, he did a little screenshots of each font, and that one you mentioned, it also seemed to have a nice weight to it.
Sean Smith: Yeah.
Lea Alcantara: [Agrees]
Emily Lewis: It’s not too light. It’s not too heavy, but it’s got a nice weight to it.
Sean Smith: I was going to try more than one other fonts, but as soon as I tried that one, I was like, “Okay, I’m done. I don’t need to look anymore. That’s it.”
Lea Alcantara: I think what’s interesting when I was reading these articles is that another thing that he had written was that the good fonts also look great in different particular sizes. When I try to write code, I don’t write code at 10 point or anything like that anymore. I try to put it at 14 to 16, but a good font, a good monospace font should also look great at 10 point so that if it opens by default at that size, that it’s still quite readable. I think that was one of the things that annoyed me a little bit about Dreamweaver to just move back a little is that a lot of the default things … One of the first things that I did, because I used Dreamweaver to teach back when I taught in MacEwan in Edmonton and I taught people how to code, everyone used Dreamweaver because everyone had Adobe Package installed for students, and the first thing I taught them how to do was change the font size. [Laughs]
Timestamp: 00:20:23
Emily Lewis: [Agrees] Because the default is so small.
Lea Alcantara: Yeah, yeah.
Sean Smith: Well, I think it’s made for like 18 year olds with like killer eyesight.
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Sean Smith: I’m over 40, I don’t have the killer eyesight anymore.
Emily Lewis: Sean, you mentioned that you also prefer a light theme. I’m curious, Lea, what about you? What is your preference?
Lea Alcantara: I like the light on dark.
Emily Lewis: Oh really?
Lea Alcantara: Yeah.
Emily Lewis: I’m like Sean. I like dark text on a light background.
Sean Smith: I’m curious, Lea, why do you like the light on dark? What about it works for you?
Lea Alcantara: You know what, I think it’s just a 100% pure aesthetic preference. I’m more neutral, like I don’t have any issue with dark on light or anything like that, but I feel like if I have a browser open, it’s most likely dark on light, and then having the text editor light on dark, it’s very clear what window is what, you know?
Emily Lewis: [Agrees]
Lea Alcantara: Like that I’m working, here’s my programming screen and here’s the output.
Emily Lewis: So it’s contextual, it sets the context of that window?
Lea Alcantara: Yeah, yeah, yeah. So for me, that’s part of it. The other part is again, like just aesthetic preference. I like light on dark designs just in general, like on websites and stuff like that.
Emily Lewis: [Agrees]
Lea Alcantara: Because I feel it looks like it’s really stark.
Sean Smith: It feels like The Matrix.
Emily Lewis: [Laughs]
Lea Alcantara: It is. It does. [Laughs]
Sean Smith: [Laughs]
Lea Alcantara: But I think that’s it’s a 100% just pure aesthetic preference, plus that additional contextual difference.
Emily Lewis: Like I said, I do dark text on light, and for me it’s again I go back to the old saying, it’s like “that’s what I’ve been doing my whole career, why do anything different?”
Lea Alcantara: Yeah, yeah.
Emily Lewis: But I will say there are times, and this is clear in my mind because I just finished four weeks of crazy coding, that when you’re staring at a code in the screen where it’s a white background and dark text for a long period of time, like I was, and you like look away, you can still see white spot in your vision.
Lea Alcantara: Oh yes.
Emily Lewis: It’s kind of like you look at the sun.
Lea Alcantara: With the halo in your…
Emily Lewis: Yeah. [Laughs]
Lea Alcantara: Yeah. [Laughs]
Emily Lewis: So that’s probably not so good for your eyes. [Laughs]
Sean Smith: That’s why I use an off-white so it’s not as bright.
Lea Alcantara: Well, I’m curious then like how many of you have glossy screen?
Emily Lewis: Oh, my screen is glossy. It’s an iMac.
Lea Alcantara: Yeah, me too.
Sean Smith: I’ve got one glossy and two non-glossies.
Emily Lewis: Does it make a difference for you, Sean?
Sean Smith: Well, I do coding on the non-glossy one.
Emily Lewis: Oh.
Lea Alcantara: Yeah, sometimes I think about adding like a matte overlay, but glossy looks so pretty with colors. [Laughs]
Sean Smith: Actually, talking about context with the dark on light. When I’m using ExpressionEngine and Low Variables, I use a lot of code snippets.
Lea Alcantara: Yeah.
Emily Lewis: Right.
Sean Smith: And so in the control panel, you can set it to use, I think it’s called Code View.
Emily Lewis: Yeah, code format…
Lea Alcantara: Yes.
Sean Smith: In which case, it’s light on black.
Lea Alcantara: Yes.
Sean Smith: I do that in the control panel so it’s obvious to me that that’s a code snippet.
Lea Alcantara: Right.
Sean Smith: And I very rarely edit in the control panel because I’m editing the live files so I get it in my text editor.
Lea Alcantara: Sure.
Sean Smith: But this way, it’s clear to me that it’s a code snippet and not just a textarea with some copy in it.
Lea Alcantara: Sure.
Emily Lewis: I think that is an excellent point, Sean. I do the exact same thing. I do it more for the client than I do for myself.
Sean Smith: I hide the code ones from the client. They don’t get to see them at all.
Emily Lewis: Yeah, well, I have some clients who I use some of Low Variables for things like search engine marketing code snippets.
Lea Alcantara: Oh, like the meta.
Emily Lewis: Yeah.
Sean Smith: Oh sure.
Emily Lewis: Or not just meta, but like if they have campaigns running through Google AdWords like they sometimes need to be able to go in and just change the tracking and campaign codes and things like that, that are all housed in Low Variables, and I want them to have that sort of, you know … When you’re not a programmer and you see a field that looks like code, you’re like, “Oh wait, okay, I’m editing code.” You know?
Lea Alcantara: Right.
Sean Smith: [Laughs]
Emily Lewis: It puts them in a different mindset…
Sean Smith: “I’ve got to be careful.”
Lea Alcantara: Yes.
Emily Lewis: That they need to be careful, that they’re messing with code at this point, so it’s exactly for that reason on that contextual aspect. So I’m curious, Sean, you built the Emmet Snippets tool … like an EE-specific tool for Sublime. Can you talk about that a little bit?
Sean Smith: Well, I found out about Emmet a couple of weeks before I found a way to do it, and it revolutionized things for me. One of the things I like is it’s basically available as a plugin for almost any editor. So if you like Coda or you like Notepad++, I think there might even be something for Dreamweaver, you can use Emmet, and it’s just so incredibly powerful.
So I can pop out a whole HTML template just by typing a few <div>s with angle brackets around it, and boom, it’s done. So I was really happy with just using Emmet just for a straight HTML, and then I saw a post on the Meta Q about adding in custom snippets for Emmet, and I was like, “Well, this is perfect.” It even used ExpressionEngine as an example. So I went with it and I built out a whole bunch of them, and I can type out a whole Freeform form with all contact fields, whatever, just by typing freeform:form and it’s done.
Emily Lewis: Wow! So you created a snippet that you kind of just have a shortcut for it, and then it fills all in?
Sean Smith: Yeah, I just type in freeform:form tab, and it spits out everything.
Lea Alcantara: Yeah, and I think that’s like basically text expanders in a nutshell, right?
Sean Smith: Pretty much.
Lea Alcantara: It’s pretty much almost creating your own language in some ways because at some point, even though you can type everything out, that still takes a lot of time.
Emily Lewis: [Agrees]
Lea Alcantara: And it gets really, really annoying.
Sean Smith: And if you’re typing it out manually, you’re making typos too.
Lea Alcantara: Well, another difference to that, I think what’s interesting about this type of thing versus, say, I know in Coda, there’s the Snippets View where you actually create a snippet, and then you have to find it, and then you have to double click it. It’s there to help you save time, but I actually ended up never using them because I had to open the window, I had to go and search for it, and then I had to go and click it, but with something like this, it looks like you just have to remember what you’re looking for and what the syntax is and then it fills everything out for you.
Sean Smith: Yeah, and that’s kind of why I put in the documentation so it shows the expanded copy as well as the shortcuts.
Lea Alcantara: [Agrees]
Emily Lewis: I’m curious about two things. I guess, first, how do you define what the snippets would be like…
Sean Smith: What I’ll use… [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: So it was just as you were developing, you’re like, “Oh, that would make a good snippet.” And you just made it then, or did you make it later? Was it like …
Sean Smith: Well, the first few days was basically me just brainstorming things that I would use all the time. Some of them were obvious. Some of them were add-ons that I use free that I always have to look it up, like CE Image. I use that all the time, but I can never remember the parameters or the syntax for it.
Lea Alcantara: [Agrees]
Sean Smith: It’s like, “Oh, when do I want to use a pair or a single?” I can’t remember anything. So now, I can just tab in and it fills in the parameters that I use the most.
Emily Lewis: How long have you been using these snippets like in actual production work?
Sean Smith: Well, I was using it for about six weeks, and then it broke.
Emily Lewis: Oh.
Lea Alcantara: Oh.
Sean Smith: It doesn’t work for me, and I tried them with three different computers, and I haven’t had the time to fully figure out what happened, because I didn’t change any code. I didn’t update or make a new commit or whatever with it. So I think something auto updated in Sublime Text and broke it.
Emily Lewis: Oh.
Lea Alcantara: Interesting.
Sean Smith: I haven’t heard anything from other people who used it. I did get one tweet. Somebody said, “Oh, I love this thing,” and this was after it was broken for me. So I think it’s still working for other people. It might be local to my computer.
Lea Alcantara: Do you have beta downloads of the Sublime perhaps? Because you know how some people, they use the daily commit or something like that of the text editor versus the stable one.
Sean Smith: I was using the most recent stable version 2 and version 3, so my desktop has got version 2, and my laptop has got version 3 because it’s newer, and they were both working. And then one day, they weren’t, and I had a little bit of time. I tried troubleshooting and figuring it out. I wasn’t able to, and I haven‘t had time since then. It’s definitely something I want to fix because it’s driving me batty whenever I’m trying to actually type stuff, I have to go back to the old way.
Lea Alcantara: Interesting, so this kind of leads towards question about actually developing these tools. I mean, how did you get even started to begin creating this add-on for Emmet, which is an add-on for a text editor?
Sean Smith: Yeah, that’s the best part. It’s an add-on for an add-on.
Lea Alcantara: Yes. [Laughs]
Sean Smith: Well, like I said, I saw the post on the Meta Q, and the link is actually in the docs for the download for the EE Emmet Snippets, and in this article, the author talks about making your own Emmet Snippets, and he gives an example. So I took his example, and it was free to download.
Lea Alcantara: Sure.
Sean Smith: I downloaded it, and I looked at it, and I just kind of hacked my way through it, and I looked at a little bit of documentation and it was kind of just like trial by fire.
Lea Alcantara: That sounds like web development in a nutshell too. [Laughs]
Emily Lewis: [Laughs]
Sean Smith: Oh yeah, anytime you need to learn a new feature, you just got to figure it out.
Emily Lewis: [Agrees]
Sean Smith: Tutorials or looking at somebody else’s code, and that’s basically what I did, and so I had it set up in Git and Dropbox.
Lea Alcantara: Yeah.
Sean Smith: And I’d add something, and if it stopped working, well, I would revert back and try again, figure out what I did wrong.
Emily Lewis: [Agrees]
Sean Smith: And they’re really sensitive about — oh geez, I forgot what it is. When you have to use a back slash before some other codes so that it uses that character, what’s that called? Escaping.
Lea Alcantara: Escaping.
Emily Lewis: Oh.
Sean Smith: It’s really important to escape certain characters.
Emily Lewis: Oh, I even see you mentioning that in some of the documentation for the EE Emmet Snippets.
Lea Alcantara: So I’m curious, before everything exploded, how drastically did having something like this affect your workflow? Did you immediately find timesaving …
Timestamp: 00:30:03
Sean Smith: Absolutely, it was way faster.
Lea Alcantara: Yeah.
Emily Lewis: I can just see like the EE paginate.
Lea Alcantara: Oh yeah.
Emily Lewis: That’s three minutes of typing right there. [Laughs]
Lea Alcantara: [Laughs]
Sean Smith: Yeah, because you always have to go and check the documentation.
Emily Lewis: [Agrees]
Sean Smith: And then you have to copy and paste it, and then you have to fit it in to whatever you’re using, and because I wrote this myself and I used Bootstrap for most of my sites, all my snippets have Bootstrap code built into them, or most of them do wherever there’s HTML.
Emily Lewis: [Agrees]
Sean Smith: So it just works for me.
Emily Lewis: Yeah, this would be smart for anyone to do, just follow their own internal conventions for how they name things, and whether it’s Bootstrap or something else.
Sean Smith: It’s not like I’m making it so you can’t fork it or whatever. It’s totally open. Do what you want with it. If you want to take and make it work with Foundation or your own custom system, then go ahead. I use it, and I want to share it with other people because I got so much free help from the community that the least I could do is this.
Emily Lewis: Do you feel like once you resolve the issue of how everything not working for your install, do you think you can add to this, like continue building this?
Sean Smith: I might. When I stopped working, I kind of hit all of the tags that I regularly use, but if I find something that I’d start using more regularly or it’s just one of those things that I might use once in a while, but I don’t want to have to figure it out again, then sure, yeah, I’ll add it in. It just takes a little bit of time, but the time to put it in is totally worth what you save with it.
Emily Lewis: Right. Well, I mean, that leads to the next question I have. Whether it’s utilizing something like the snippets, text expanders, or any other sort of package that you install in Sublime or customization you make — and this is I think why I tend not to take on anything new — is that do you feel like there’s a learning curve? Because I do. I feel like it’s disruptive to my workflow as opposed to — I don’t know. I guess it’s that initial struggle seems just more disruptive than it’s worth to me.
Sean Smith: Oh, do you mean like when you switch and then things are not where you’re used to them?
Emily Lewis: Yeah, like even Lea when you say you’re trying out all these different ones, it’s like there’s got to be a learning curve when you’re introducing something new, you know?
Sean Smith: Well, yeah, there is some learning curve when you introduce something new, but this is a text editor. It’s not like you’re learning new code. You need to learn how to customize it to the way you want it, and now, that might take a little bit of time, and there might be things missing from the editor that you previously used, but there might be things that are new that you didn’t have.
Emily Lewis: [Agrees]
Lea Alcantara: Yeah, for example, for me, when I’m testing all these kind of things, it’s not like I’m trying to add like several types of functionality. A lot of it is how does this look with the code that I normally work in terms of syntax highlighting, or am I able to indent and clean up the code easily, [laughs] which seems so like minor, and can I do that with my keyboard. It’s like if there’s something that’s just quick that I don’t have to go find and search and click and click and all these kinds of things, like if I can just select and click a few buttons on my keyboard to get it done, that’s really half the time that I’m fiddling around with it.
Sean Smith: Actually, I need to learn how to clean up code quickly because I tend to inherit a lot of sites.
Lea Alcantara: Sure.
Sean Smith: And I would find that the indenting is terrible or the way it’s done, I just need to find a way to fix up somebody else’s code so that it works for me.
Lea Alcantara: I do know that Sublime does have under their edit section there, they’ve got like this line, and a simple one is just un-indent everything and then to re-indent everything. [Laughs]
Sean Smith: I did not know that. Oh, there it is now.
Lea Alcantara: Right.
Sean Smith: I didn’t know that.
Lea Alcantara: Yeah, yeah, you see, that’s one of the reasons why I want to test these types of editors because those little things where we’re always indenting everything.
Emily Lewis: [Agrees]
Lea Alcantara: That’s like a developer’s life, but one of the things that frustrates me is if I’m working with other people’s code or even my own code because sometimes you’re just fiddling around and then everything is on the far left hand side as opposed to like indented into your tree or whatever, how do I force that new snippet of code that I just plugged in that’s all the way in the far left to be nicely tabbed on the right without having to manually press tab ten times to get it there. [Laughs] With Sublime, you can just select the entire block of code and tab that entire block by just pressing I believe like Shift + Square Bracket.
Emily Lewis: Yeah, you can do that in Dreamweaver.
Lea Alcantara: Oh.
Emily Lewis: You select it, you hit Shift + Tab, it tabs it all over.
Sean Smith: Yeah.
Emily Lewis: And you can go backwards on indent.
Lea Alcantara: Yes.
Sean Smith: Yeah, Shift + Tab and Tab works, but the whole un-indent everything, that’s kind of new for me.
Emily Lewis: So what would you say would be the absolute must have? This is such a hard question because I get that everyone’s workflow is so custom and it is a personal experience, but would there be any must-have text editor settings and/or tools that you would recommend, Sean?
Sean Smith: Well, for me personally, I need to have built-in collapsed like open and close tags so I can just drill down into what I want to see, hide everything else. Text editing, syntax highlighting … I know there’s a whole debate about spaces versus tabs for your indenting.
Emily Lewis: [Agrees]
Sean Smith: I prefer tabs. I’m sure some people are cursing at me now, but c’est la vie. [Laughs]
Lea Alcantara: [Laughs]
Sean Smith: I think for each individual person, you need to find what works for you the most important. For me, it’s the collapsing and syntax highlighting, and having a dark on light theme.
Lea Alcantara: Okay, so what do you think text editor developers … So for example, if you were talking to Panic, the developers of Coda, what would you tell them to help improve their editor?
Sean Smith: Well, I haven’t used that one, so maybe …
Lea Alcantara: But like the text editor developers in general, what should you tell them, and this would make life easy for everyone?
Sean Smith: Specifically for some like Sublime Text, being able to install and update some of the features should be easier.
Lea Alcantara: Yeah.
Sean Smith: The first thing you have to do is install Package Control, and to install Package Control, you have to follow a tutorial or drop in a line of code somewhere. It’s a big pain in the butt. It should just be built right in.
Lea Alcantara: Right.
Sean Smith: And if it’s a third-party thing, pay them. Buy that Package Control and bake it right in. Once Package Control is in, as far as I’m concerned, everything else is good with Sublime Text. Other editors, I don’t know because it’s been so long since I used them, but presumably, they should also have an easy way to add in plugins or customized themes and stuff, just a couple of clicks and you’re done.
Emily Lewis: Before we finish up today, can you think of one thing that you would suggest to someone that they could do immediately with their text editor right now to improve their workflow?
Sean Smith: Oh, well, get syntax highlighting for the CMS or the code you’re using if it doesn’t already have it.
Emily Lewis: Yeah.
Sean Smith: I mean, if you’re doing PHP or Java or JavaScript or whatever, those are all baked-in to things. But if you’re using a CMS, a lot of it, you have to find the plugin. So you’re talking about Twig or ExpressionEngine or I mentioned Smarty. Get those plugins, so that you can see the custom CMS tags easily.
Lea Alcantara: So we do have one final question, and it’s from one of our listeners, Kevin Lozandier. Do you think programmers could try too much to make one type of editor become more like a different type of editor?
Sean Smith: Sure.
Lea Alcantara: [Laughs]
Sean Smith: If you want it to be like a different type of editor, why don’t you use the other editor?
Lea Alcantara: Sure. Sure.
Sean Smith: I don’t know why you would want to make something into something else. If you want the extra features, then why don’t you use that other one, unless it’s missing key features from what you’re currently using. I don’t know, I just don’t see why you would want to put a square peg in a round hole.
Lea Alcantara: I can think of one. It’s because if you’re one of those people who keep buying text editors and then at some point, you’re like, “I can’t believe I just spent $100 on this one and then I should have spent the $100 on this other one.” Right? It could become an expensive thing if you’re doing something beyond like a regular text editor.
Sean Smith: Yeah, I could see that.
Lea Alcantara: Because Coda is $99, and Sublime is what, $80?
Sean Smith: Something like that.
Emily Lewis: Maybe that’s another note for all of the text editor developers out there, the companies that make these text editors, is offer a trial or offer that period of time where you can use something for free before you have to make that investment.
Sean Smith: Yeah, I would think at least a 30-day trial, so that you could fully figure out and have time to customize what you want or learn how to customize it.
Lea Alcantara: Sure. So we talked a lot about text editors, but we’d like to get to know you a bit more.
Emily Lewis: [Laughs]
Lea Alcantara: So before we finish up, we’ve got our rapid-fire 10 questions so our listeners can get to know you a bit better. So are you ready?
Sean Smith: Fire away.
Lea Alcantara: All right, I think we already know this answer.
Emily Lewis: [Laughs]
Lea Alcantara: But question one: Mac OS or Windows?
Sean Smith: Windows, I’m not an evangelist.
Emily Lewis: [Laughs] What is your favorite mobile app?
Sean Smith: Oh, favorite mobile app? Probably WordHero.
Lea Alcantara: WordHero, interesting.
Sean Smith: It’s like a Boggle-style game.
Emily Lewis: Cool.
Lea Alcantara: So what is your least favorite thing about social media?
Sean Smith: Oh, just crappy headlines that just draw you in that’s basically spam bait.
Lea Alcantara: Oh right.
Emily Lewis: What profession other than yours would you like to attempt?
Sean Smith: Astronaut.
Lea Alcantara: What profession would you not like to do?
Sean Smith: Kindergarten teacher.
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: Who is the web professional you admire the most?
Sean Smith: Oh, that’s tough, there are so many. I don’t know, Erik Reagan or Carl Crawley.
Lea Alcantara: What music do you like to code to?
Sean Smith: 80s heavy metal.
Emily Lewis: [Laughs] Awesome. What’s your secret talent?
Sean Smith: My secret talent? I can touch my nose with my tongue.
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs] What’s the most recent book you’ve read?
Sean Smith: Some fantasy book that was really crappy, so it’s not worth reading.
Emily Lewis: Lastly, Star Wars or Star Trek?
Sean Smith: Can I say both?
Emily Lewis: [Laughs] Sure.
Lea Alcantara: Sure. [Laughs] All right, that’s all the time we have for today. Thanks for joining us, Sean.
Sean Smith: Oh, it was great. Thanks for having me.
Emily Lewis: In case our listeners want to follow up with you, where can they find you online?
Sean Smith: On Twitter @CS_sean. At Skype, createsean, and my website is caffeinecreations.ca.
Emily Lewis: Awesome. Thank you, Sean.
[Music starts]
Sean Smith: Thank you.
Lea Alcantara: We’d now like to thank our sponsors for this podcast, Visual Chefs and Pixel & Tonic.
Emily Lewis: We also want to thank our partners, Arcustech, Devot:ee and EE Insider.
Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com.
Emily Lewis: Don’t forget to tune in to our next episode when Ryan Masuga returns to the show this time to talk about Software as a Service and give us some updates about Devot:ee. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.
Lea Alcantara: This is Lea Alcantara …
Emily Lewis: And Emily Lewis …
Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!
Emily Lewis: Cheers!
[Music stops]
Timestamp: 00:40:49
