On today’s episode we’re going to talk all about different text editors and the ones that I’ve tried over the last four, five, six years or more. Right here on Your Website Engineer podcast, episode no. 470.

Hello, and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and this celebrates the ninth anniversary of Your Website Engineer podcast. Just 2010, it seems like so long ago. And so, not very long ago, as I continue to develop and talk about different things in the WordPress space. So, 470 episodes is what it takes to get to nine years. And I’m excited to get to that 500+ mark next year. And that will be really exciting to get to that 10-year threshold.

So, that’s just kind of a “hello and intro” to the show today, as I have been doing this for nine years. And it has slowly gotten better of a show, and it is slowly continued to help me both learn WordPress, and to explain WordPress in an easy to consume manner. And it’s just given me an opportunity to meet all kinds of cool people from around the world. And so, that is something that’s really, really exciting.

So, today let’s go ahead and dive in. I’ve got a couple announcements to share. And I have a plug-in. And of course, we’ll talk about the snippets — or, not the snippets but we’ll talk about different code editors that we can talk about.

And okay, let’s go ahead and dive into these announcements. The first one is all about WP Tavern’s new design. There’s no more woodgrain. It’s a kind of a more minimalistic website. And it is one of those ones that just got an overhaul over the last couple years. It’s been continuing to look like that woodgrain, it looks like a tavern. You know, that’s kind of the thought process behind it. You go to a bar, you go to a tavern, and you kind of talk about WordPress. And that’s kind of the premise of what WP Tavern is.

And they’ve taken a step and they’ve redesigned the whole thing. It is very neatly organized, it’s very minimalistic, there’s not a lot there. And it is something that Justin Tadlock, who just recently joined the team over at WP Tavern — he has joined and he did a rewrite of the whole thing.

It looks like there is using some stripped-down CSS version of the Tailwind CSS, and it is a utility first CSS. And it is one of those things that the front-end is just regular WordPress with a few plug-ins and there’s not really a whole lot going there. And so, that is the new look of WP Tavern.

The other thing that I want to share with you today is about the Black Friday banner gone wrong, and you may have seen this. There was some outrage on Twitter and there was some outrage throughout the community. But basically, the Yoast SEO plug-in had a update that went out on the 25th of October, and it had added the code for 30% off a Black Friday sale. And the thing was that outraged the most amount of people was it was a thing that showed up on every WordPress dashboard that had the Yoast SEO plug-in installed and activated.

And this was causing a huge ruckus because it wasn’t just for admins, it was for every user on the site. So, anyone that had backdoor or back-end access to the WordPress site could see this big banner. And so, it was one of those things that the outrage came in through the community, the CEO of Yoast said, “The Black Friday banner was not the best idea. We’re truly sorry for the annoyance and difficulties that it may have caused. We did not think through this properly. If you want, you can update to the new version of the plug-in without that banner.”

So, it left a lot of people scrambling when those sales came up, when most people were trying to spend time with their families and away from their computers. And now, all of a sudden, dozens or if not hundreds of sites that you might’ve managed now have that big banner happening up there.

So, I understand that Yoast is trying to make money, but it just wasn’t the best execution of plan. Especially when it was on every WordPress page in the WordPress dashboard. So, there’s a whole article there, if you want to read about what happened, and where that went, and a bunch of comments, if you want to read what’s happening on WordPress Tavern.

And then the other one that I do want to share is about this WP Snippets Until Christmas. And this is one that I mentioned on last week’s show, or a couple weeks ago. And I’ve been starting to get them and they’re really cool. There’s some really neat things that are showing up in the snippets in themselves.

So, the first one was how to use a custom post type to send a notification as an HTML email to users by user roll. So, maybe you wanted to have something on your website where all of the admins get a certain email, or all the customers get a certain email, and then here is just a snippet in order to do this. And it creates custom post type, it adds all of the features needed and necessary to make this work. So, I would say this is a little bit more than a snippet because it’s got five, six, seven different snippets of code that need to be added, but there’s lots of cool things in it.

And as I’m recording here on December 4th, there are four different plug-ins that are there — or different snippets that are there. So, if you’re interested you can still sign up for that. There is a link in the show notes for episode no. 460.

And then the last thing that I want to share before we dive into the big part of the show is about a plug-in that I found. And this is a plug-in that is a new plug-in on the WordPress repository. I like finding these new ones. But it’s called “Mail Archiver” and will automatically archive all emails sent for your site. It stores them in the WordPress database, or you can send them to an external service. So, it allows you to catch emails sent by WordPress itself, or any plug-ins. You can enrich them with details regarding their sending, you can archive them in the WordPress database or send them to external services, and you can view archived emails in the WordPress database.

And so, what this does is basically, you know, you want to make sure that some of these things that are automatically happening are actually automatically happening. For an example, with Blue Commerce you want to make with the customers: Are they getting the emails that are being sent out when they have purchased something for your site?

If you have automation software — we talked about AutomateWoo a few weeks ago — and we’re checking there to see, “Oh, did those emails go out as expected?” You can see exactly what those messages look like without having to sign up a bunch of different email accounts and do a bunch of testing on your own.

So, that is something that I wanted to share today, that’s the plug-in: “Mail Archiver.” You can find that by searching for “Mail Archiver” on the WordPress repository, or, as always, you can find the link in the show notes for episode no. 470.

All right. Today, let’s go ahead and dive into different text editors. And I guess I probably should set this up just a little bit. I’ve been transferring all of my settings, and I’m moving from a Sublime Text — which we’ll talk about a little bit here in the show — and I’m moving to a VS Code, a Visual Studios Code. And the main reason why is — well, not the main reason, but one of the reasons is so many good things are being said about this application. It’s one of those plug-ins, or applications, that can be used across platforms. So, it can be used on Windows or Apple hardware and whatnot. And it so customizable and there’s so many things that you can do with it.

But I thought I’d walk down memory lane just for a little bit and tell you some of the other code plug-ins that I have used, or code applications that I’ve used in the past.

And the first one is called Coda 2. And this is probably the very first one that I used way back in the day. I think this was released, I don’t know, back in about 2012? 2013? I’m sure that I used other text editors before then, but this was one that I really felt that it worked well for my workflow. And that is one of the key things, that developers should find the tools that find them the most productive.

And so, at that time, when I was first learning to just use a little bit of PHP — I was mostly working in HTML and doing some CSS — Coda was a perfect one for me. It is a paid plug-in. It only works on Macs. And so, it is a paid plug-in for $99 and it only works on Macs, like I said. And they do have a free book that comes with it, so you can kind of walk-through and learn how the application works.

But basically, what code editor or Coda is, is — it has some things built into it. So, it has an FTP editor built into it, so you could make a change, and then drag it, or automatically send it via FTP. In the meantime, I’ve learned that that’s probably not the best way. We should set things up on a serving site, make sure that everything works there, and then push all of the changes at one time, versus, what they call quote-unquote “cowboy coding.”

The other thing that I really liked inside Coda is that is has a web kit/web inspector so you can preview. There’s a live preview right inside of the editor. So, if you had a big screen you could pull that up and you could make a change — you could change a CSS color from orange to purple, and then you could see that automatically refresh inside of the site.

And I think that it worked well for WordPress sites. It was mostly HTML that it really worked well for, but the WordPress sites you still have to load up your local install, and then you can make the changes and whatnot.

It also has a built-in database editor. So, you could see that. You could also get to a terminal. It wasn’t the easiest. Basically, they had kind of a row of icons across the top. So, you could see your code, you could see your icons, and those icons would be like, “Oh, here’s where you get to Terminal, and here’s where you get to the database, or the MySQL area, and whatnot.”

It worked really well, you could see the project you were working on. You would open things as a project and then you would save your settings as a project. I think it worked really well. I really like the feature of the CSS helper. And when you typed in a hex code — like right next to the hex code there would be just a little icon that would be the same color as the hex color. And that was really helpful as I was starting to get used to different hex colors, and trying to figure out what that looked like, and how to write the best CSS I could. Like I could see, “Oh, well that’s a blue color, that’s an orange color, that’s a green color, or whatnot.”

It did feel a bit heavy as an app and there wasn’t a lot of keyboard shortcuts. That’s kind of where I didn’t really like it, as I continued to learn about some of these different code editors. So, I stuck with that for quite a few years, and then realized that there are much better options that are out there.

And the next one that I moved to was Sublime Text. And I think I went straight to Sublime Text 2. The Sublime Text 3 was under beta at the time, so I went to the Text 2. And it is a freemium version. It does cost, I think, $80 for the license, but you can use the entire thing completely free. But every once in a while, every — I forget how many saves — but it pops up like, “Do you enjoy using Sublime Text? Would you like to purchase now?” And you can just hit dismiss, but it is just a complete pain if you use it over, and over, and over again, and you have to dismiss that very, very frequently.

So, it is free to use if you don’t mind that open dialogue box, but after that you can use it completely. All of the features are there in the free version.

It’s more of a total IDE, and IDE stands for Integrative Development Environment. And it gives you the ability — what I would typically do on my Mac was — there’s an icon, the Sublime Text icon is in my finder, and so, what I do is I just take a whole folder, and I drag it onto the icon, and then it opens up everything that’s in that folder. And it’s really nice, so you can navigate between folders, and files, and you can get to everything. And it is fast. Like, super fast. I mean, you would open it up and you would have — even if somebody would send me a file that’s megabytes, 10 megabytes big, you can open it up, and you can search for it. You can search through it and it just feels really, really snappy.

It’s very lean. There’s not any toolbars or configuration dialogue boxes. You have to go into the settings and then type some things into the configuration. It’s almost like a big JSON file that you go in and you edit. So, you make your fonts bigger, you change the font, or you can make your tabs more spaces — every tab equals five spaces, or whatever. You can do all of that and you can set all of that up in the configuration file for Sublime Text.

Works on all platforms as well. And it has plug-ins and themes to customize it to make it your own. So, things like, you know, you wanted to have a different color scheme or whatnot, you can customize it with different colors that are there. You have all kinds of packages that you can install. And I’m sure that I was only scratching the surface of what it could do with my basic HTML, CSS, and PHP programming that I was doing when I was using Sublime Text.

And so, there’s a link in the show notes where you can download, or you can just go to sublimetext.com.

Then, shortly after I was there, then all these people started talking about Atom. And there’s one called Atom, it is at atom.io and it is free. It’s built by GitHub. It was released back in 2014. You can add packages to extend the plug-in. All of the packages are stored on Github, and so, you can have access there, you can see them there. And you can do customizations. It comes with a complete manual on how to customize things. It has the ability to do themes as well. You can increase the sizes. You know, you can do all of that good things.

But it just feels slow. Like, if you have a big project, and you’re clicking between tabs, or navigating between tabs, it is really, really, really slow. And I don’t know, that was the big reason — even starting up, like, “Oh, okay, I’m going to open up this WordPress theme file,” and it would take seconds to open, whereas Sublime Text would just automatically open it, and just be really, really fast. And so, that was kind of the reason why I moved away from Atom.

And then, about the same time I was kind of dabbling in the Atom market, a new plug-in, or a new program called VS Code came out. And this one is completely free as well, it’s cross-platform, and it’s developed by Microsoft. It was kind of… I don’t know, it was like, “Aw, do I really want to have an application designed by Microsoft on my computer?” But, it turns out that all of the top programmers that I follow — people like Wes Bos and Scott Tolinski, and those are two guys from the Syntax.fm podcast. But you look at different articles online, and there’s so many people talking about all of the features in VS CODE, and I’m like, “I better just go ahead and give it a try.”

And so, it is much faster than Atom. It works very similar to Sublime Text, where it’s really, really fast. It’s really customizable as well — you can do themes, you can do plug-ins. And so, I’ve added some plug-ins to show different icons next to files. And so, if I wanted to make sure that if I saved something as HTML, it shows a little HTML icon next to it, which is really handy. And all of these things, I mean, there’s tons of different packages and things that you can install. You can do a code spellchecker. So, even though code is a little bit different than regular spelling, it can see if you have double letters, or if it doesn’t match different things. And it is really cool.

I’ve been taking some classes — not classes, but watching some tutorials on how to set this up. You can have Git history set up so you can look at your Git changes and your logs. And you can do different themes, like I said. There’s an extension that is a bracket pair colorizer. So, this is a extension that colorizes and matching pairs so you can make sure that your pairs of your brackets, or your parentheses — they all match up perfectly well.

So, I’m just, like I say, getting into the meat of this and just learning more about VS Code. There’s one, too, that I see here as I’m looking at it — is one called “Better Comments.” And so, if you put a question mark in your comments, then that means that it turns it blue. If there is an exclamation point, it turns it red. So, you could put like “deprecated method — do not use.” Or question marks should say, “Should we use this as part of the REST API, like a question so you can see it in your code?” And then, you can add a to-do. So, if you type “to do,” then you can say, “Refactor this code, make sure that it works with our new APR, or whatever.” And you can see that as you’re scrolling through code — like, all of the things that need to be fixed. And so, that’s super, super handy.

It has different keyboard shortcuts, which are awesome. Like one that I didn’t mention with Sublime Text that is just incredible is there is a keyboard shortcut that you can use to move whole lines of text up and down. So, maybe you have a list, and there’s five things on the list, but you want to move the bottom one up three spots. Instead of highlighting it, and cutting it, and then moving it up, and pasting it, you can basically use this keyboard shortcut. And it’s a self-defined keyboard shortcut. And you can just use it, and you move up the line three times, and hit the up arrow three times. And it’s so cool. And that’s one of the great things about Sublime Text. That’s one of the great things about Visual Studio Code.

And the cool part is that Visual Studio Code has the same keyboard shortcuts as other code editors. So, if you’ve been on Sublime Text for years, and years, and years, you can go ahead and just import all of those things, or sell CSS code that, “Hey, I want to use the Sublime Text keyboard shortcuts,” and it’ll just work.

Another thing that is really cool is font ligatures. I’m not sure if this is really a reason to use a different code editor. But, font ligatures means that some of your code, or some of your things, will look different. So, for example, a code ligature would be if you are making comments — maybe some of the text is in italics or a cursive type font. Or, I’ve seen some that have a — if you do the less-than-and-equals sign, instead of having it as two separate things, it turns it into a less-than sign with an extra line underneath so it’s less than or equal to, which is kind of a neat thing. So, that is font ligatures. That’s built in.

It has an Emmet built in, and so that’s built in straight for HTML and CSS. And so, that’s always looking at your code, making sure that different things are closed, and making sure you have matching pairs of H1 tags, or P tags, or whatever. And so, that’s really handy. And the Git is built in. And a code editor, or a terminal, is built in, so you can have access to code, and your editor, and you can see the changes in Git, and you can track bugs, and everything. You can do that all within one application with multiple different windows, which is super handy, and it’s really cool that all of this stuff is built in to a code editor.

So, I’ve been using VS Code probably for the last month or so. I’ve been really tweaking in on the settings. The cool thing that I like is on my desktop — I use a 34-wide inch monitor, and I like to keep the resolution really, really small for most things, and so I can fit the most amount of things on my screen — web pages, the font is kind of small, but in a text editor, I love how I can change the text font. So, specifically just for that application, it’s really big, and all of the rest of the things continue to stay small on my computer. So, when I’m digging into code, if I’m looking at it I can easily see it, and I really, really like that feature.

And then, I’ve used the Wes Bos Cobalt2 theme. And so, it’s kind of a bluer theme, it’s got a bunch of cool colors, and stuff built it. And I’m trying to figure out how to customize his themes, Cobalt2, and he uses a specific yellow in a bunch of his things, and I’m trying to turn the yellow into orange. Because of course, as you know if you’ve been listening for a while, that orange is my signature color, and so I want to make sure that there is orange built into my code editor.

So, like I said, you could go down a rabbit hole, and spend hours and hours, and even probably weeks just customizing a tool bar, or a tool that you’re using to develop, or make modifications to a plug-in or a theme, or make customizations to your WordPress site. But I think you kind of get set up, get to a point where, okay, this works. And then, when you’re struggling, and you’re finding something that, “Oh, I wonder if I can do this.” And then, that’s when you go and look for, “Oh, is there a package that can do this? Is there an extension that you can add?”

And, like I said at the very top of the show that each tool — there’s different tools out there, and one you might find that works perfectly for you, but there’s others that work perfectly for others. And so, the big thing is to find the tool that makes you the most productive, and you just get joy every time that you open it up, and you’re excited to start working because of the system that you’ve set up in place.

So, that’s what I want to share with you this week. Take care and we’ll talk again soon! Buh-bye.