Over the past two seasons, we’ve talked a lot about tools that can make your work faster and more efficient. Some of these tools we’re familiar with, others we’ve talked with other experts about. This week, we focus on the things that we keep ready in our inventory to make sure we’re producing the best work we can. From editors, to testing frameworks and more, we’ll take a look at what we rely on the most from day to day for productive development.

Followup Resources

Hosting

Coding

Libraries/Apps/3rd Party Tools

Testing

Documentation

Other Stuff

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

Have you ever listened to ninja sex party?

That’s, uh, Danny from Game Grumps, right? Yeah.

Yeah. You know a couple of their songs. You know a stage name? No, Danny sex bang. Yeah. I listened to Danny Don’t you know about 14 times tonight because it’s just a great song. Hey, everybody, thanks for joining us tonight on the dragon UX podcast. We’re gonna be talking about what is in our toolboxes? What are Aaron and I using when we build websites that make stuff easier for us? This is episode number 58. And I’m your host, Michael Fienen.

I’m your other other host Aaron Hill. Hey, Erin.

Are you surviving? You do Okay.

I every time I see the words covered 19 I keep thinking of keep reading as corvid 19. But that would be the bird flu right

that I don’t I don’t even remember. No.

It’s a joke. corvids are crows.

Okay, that’s, that’s above my paygrade son. Yeah,

I just I just call it corvid 69.

Folks, if you are enjoying the drunken UX podcast, please go by our sponsors over at New cloud you can hit them up at New cloud.com slash drunken UX for anything you need from Apple illustrations to interactive map platforms. Stop by check them out. Let them know that we sent you in and that you appreciate their support of the show. We support your we support your support. Support How many times can I say that in one sentence?

Yeah, you should check us out on the on the Twitter’s and it’s the giggles.com slash drunk and UX. Oh, actually, no. Twitter and Facebook is slash Duncan UX Instagram is slash talking UX podcast. There will be a test not on Snapchat.

Not on Snapchat. Folks, though, speaking of and I use this word support and all of this. I want to just give a quick shout out to all our listeners and audience out there because I was just going through analytics for the show since season three started over the last two months since we launched season three listeners are up a full 17% so far, amazing in two months, and so I am thrilled.

I think it’s pretty amazing. We’ve been doing this for three seasons now or it won’t be our third season. Unknown Speaker No one your birthday cake.

Season Four Season Four birthday cakes.

Season Four. Season Four you get birthday cake, okay. No, would be drinking.

I am in the world of whiskey but I am doing gentlemen jack. Oh, I was that it’s jack daniels but it’s like there Better jack daniels because to me jack daniels tastes like garbage. It’s like It’s like corn that’s gone bad. And the water out of it. That’s basically what it is right? But for some reason while jack daniels is terrible to me, gentlemen jack is delicious, amazing and great to sit back with and just sip on. It’s not like super compelling from a flavor standpoint. I think it’s selling quality really is the smoothness of it, but it does let me appreciate the sweet like that corny sweetness that comes through which I think is ruined in the lower end jack daniels.

I almost never drink jack straight. I always have it mixed with Coke. Yeah, Coca Cola. Oh,

fair clarification. We’re talking u ‘s podcast do not endorse the use of cocaine or any other powdery substance.

I’ve got Um, so a long time ago, one of our listeners, Justin m suggested Bazell Hayden. And I got a bottle back then and it was great. And he would you would suggested the balvenie Caribbean cask. Yeah. And I looked for it and I couldn’t find it. They had a had a marker on the shelf for it, but

he found where it should be. Right. Right. It was good. So it wasn’t there. Yeah, it’s that that was not virus related. Right.

So it’s like easier to find Carell right now than that. But I did find basil Hayden’s Caribbean reserve rye, which is like basil Hayden, rye, but with a rum finish. It’s done similar to the balvenie It’s really good. It’s like super Sperry curious. Yeah. It has the same kind of like smoothness that basal hidden has but like the the finish on it. It’s just like It almost, it makes me think of coconut. I mean, it doesn’t have coconut in it. But that’s that’s the first thought that popped into my head when I tasted it the first time.

Yeah, you’re getting that sort of Island flavor. So yeah,

yeah. It’s it’s quite good. And it was like, I think it’s like $30 or something. It’s really cheap for being like, you know, some special Yeah. Yeah.

All right, I thought it’d be fun. And I sat down. And I tried to think about this, because I’m like, have we done this episode? And as best as I can find, I don’t think we have,

even though another deal. not explicitly.

Yeah. Feels like we’ve maybe talked about around a lot of this stuff several times.

Well, we’ve, we’ve talked about, like, the hosts that we’ve used or like the,

we talked about web hosting. So that was a thing that came up

like I pointing

Yeah, so yeah, I wanted to talk about though like what we use on a daily basis that just makes our work better and you may agree with these. You may disagree with Some you may have your own preferences. And by all means, let us know if you have something that you think works really well or better than some of the things we mentioned. But

I think we should preface this. Let’s take each like, you know, 15 to 30 seconds to say, what it is what we work with on a daily basis, like what technologies we’re doing, just as a reminder, because I think that is going to provide context about why we’re used the tools that we use. So you go

first, sir, I so most of my work is done in either, obviously HTML, CSS, that mean those are Givens JavaScript, PHP, velocity, Apache velocity is a templating language that we use heavily in our content management system. And in terms of JavaScript, like I am lightweight with react and angular and some of that like I wouldn’t necessarily sell those services to somebody but I’m getting there. I think that mostly hits on like mice. I’m definitely like senior In the developer type, skill set,

I’m, I do predominately back end stuff now. So my day job is just like Ruby on Rails stuff. In my recreational time, like most of the coding I do is usually just plain Ruby. I have a couple of Rails apps that is maintained just for fun, but most of the scripting and stuff I do is Ruby. I will every once in a while I’ll dabble in some like HTML or sass, or I think I have some PHP somewhere that I maintaining. I don’t think I’ve written a PHP tag in a couple years though. Nothing against it. I just haven’t had any reason to. I do like a little bit with like DevOps stuff. But mainly, it’s like the, you know, the,

the database and like controller layers rise mostly where I work. So the start with the hosting is the first thing on our list web hosting. If you want a deep dive into this though, I would suggest going listen to Episode 43 Jeff Madsen joined us on that episode, we talked all about site hosting. So this is why I like this. Some of this stuff will maybe sound or feel a little familiar. But there’s a whole episode on site hosting. So that’s a good place to start. My go to his Digital Ocean.

Yeah, I like that a lot, too.

At this point in at this level of my expertise, I like running my own servers. Yeah, setting up your own what they call droplets, which are just virtualized Linux servers is very clean and easy. They have images for a lot of applications that are preset, you could just say I need a WordPress server and it’ll spin up a little server with WordPress on it.

digitalocean I think the reason I like it is because it’s the like, it seems to be the perfect middle ground between turnkey hosting and like wild AWS, right. Like you know the the full you’re getting They just give you like server space. And then you just, you know, here you go. Here’s the keys. And they’re, their knowledge base is incredibly good to write. There’s articles for just like everything.

And we probably recommended that in four different shows now and it’s gonna get recommended again, and this little one so

and, you know, it’s it gets cheap, like if you just need like, super, super bare bones hosting in just, you know, putting up a small site or something, it’s like $5 a month or something. And then like, for 10 a month, it’s like a, you get a modest, like, low traffic thing that you could put whatever you want.

And most of the, the shared hosts that you’re going to go to are at least four bucks a month already, and you have no control over anything so that it does it.

It does have a higher technical hurdle. Certainly. Yes. Yeah. Like you have to. You have to know how to do things like SSH, and you got to know like really basic like Linux stuff. terminal commands. Like you could they have, they have some turnkey solutions. Like if you just want to have like a WordPress droplet or whatever, like they’ll do that for you. But the real power from it is, is being able to SSH in and configure stuff manually. And

they’ve expanded their portfolio to the point now they have managed databases, they’ve got blown storage. We’ve talked about this, and we want to go way back on this episode 23. We talked about block and object storage and content delivery networks. digitalocean has spaces and I’m not going to go down this rabbit hole or nothing but just from the hosting standpoint, they solve all these problems. And they do it in my opinion more simply than AWS does, because it is kind of I don’t want to say it’s like geared towards the lower end. I think it’s geared towards people who just want to get stuff done quicker

in AWS is

what we’ll get there. Don’t worry the other is because if you’re not in that boat if you’re not somebody who wants to run a server and handle all that and take the time because it is a lot, I I’m evenly split between like Hostgator and Bluehost. Quite frankly,

I’d throw dreamhost in there too, right? Oh, I can’t, I cancelled my account with them after a very long time, like 20 years. I just wasn’t using it anymore. Because mainly because they didn’t have good rail support. But they were they were a great company. And I liked working with them a lot. Yeah,

these you know, these are affordable. They generally start at like $3 a month. If you get a promo rate or something, then pay a year up front. They’ll go up to four or five bucks a month, then so you’re kind of at digitalocean pricing. These are throwing a domain name into it. Yeah, yeah, that’s something worth noting. They’ll usually throw your domain registration in with it, if you keep it through them.

I think dreamhost is actually a registrar. So like they can register your domain for you. Yeah. And also post it. So that was a convenient thing. I don’t know if the other ones do it.

Part of what you’re paying for there is it’s it’s not a managed host by any stretch of the imagination, but they certainly are taking care of some of the server management. Basically, they do your updates and everything that you would otherwise have to do if you were on digitalocean. There are trade offs. Exit, go back, listen, Episode 43. We talked about all those differences and trade offs. A lot of the time worst case scenario, if you want a shared host, just google him and look at ratings guys. You know, these three will generally be at the top of those ratings, and will have the fewest problems and can’t go wrong, AWS, to their credit, they’re trying to kind of get into this game with lightsail. I think it’s worth mentioning. I’ve not used it yet. I am working with somebody who’s using it though at the moment for a WordPress site. incredibly cheap. I think it’s like four bucks a month. It’s one of those like, click a button, you got WordPress running and nothing to worry about. So that’s something maybe to watch as it matures. And that may become a much higher recommendation very quickly, I think in this space, at least if you want something known like WordPress, Drupal, they’ve got images for quite a few different systems. Now, I threw GitHub on this list. And I know that’s weird. But GitHub is sort of hosting.

I can see that it’s

code hosting. It’s a place to code repos. Yeah. And I think I wanted to mention it specifically because I don’t use Bitbucket anymore. I have abandoned Bitbucket. I liked a bit bucket because they gave you unlimited private repos if you had a.edu email address, which I used to have. But now GitHub has basically given you that there are some limitations, but I’ve never, at least with my personal account ran into those limitations.

I’ve used Get lab before

hosted or self hosted?

Oh, the kid lab calm

Yeah. Okay. For those who don’t know, you can actually go get get labs source code and run it on your own server right set up your own, which is cool. Very cool. It’s open source.

I think that is handy. Um, I use get lab before I, I think I stopped using them because I didn’t need private repos. And now it’s kind of moot because you can you get private repos anyways without having a pro account.

Yeah. Um, but GitHub Pages, I think is something worth drawing attention to now, because with the increase in things like static site generators, like Gatsby and some of those, is that github.io? Yes. Okay. But the thing is, you can alias a domain name to it. So you can set up a sea name with a domain and have your site hosted at GitHub. Unknown Speaker Okay, cool. So like if you go

good example of this. For folks who are looking for another web developer podcasts to listen to, and I have no doubt you’ve heard of it syntax. Last time I checked syntaxes website is ran through markdown that’s hosted in GitHub. And then they use a static site generator to pump out the actual website on GitHub Pages that I may be wrong about a couple of those details. I don’t know for a fact they’re hosting on GitHub Pages, but I think they are. And I know their show notes all run through GitHub. So when you look at like, the the show notes for one of their episodes, there’s an edit button on them and like any, you can go in there and if you saw a link that was wrong, or a typo, you can actually issue a pull request to their show notes and fix stuff for them. which is I think, super cool.

Yeah.

Outside of that, I don’t know what you use.

Um, I would say as a one of the easy ways to spin up like a Rails app or something or throw it up online. Is it Heroku Heroku is like free plan they give you like, I think one dyno or something

I would just love exactly once. So

yeah, it’s I mean, it’s nice, like the Heroku toolbelt is really cool and like deploying to Heroku is like stupid easy. But it like for production, it gets pricey real quick. And the only the only advantage it has is that the Heroku deployment pipeline, you can connect to GitHub, and you can set up like continuous deployment, and like, you know, deployment triggers and everything. And it’s really nice. And it it takes, like, if you don’t want to have to pay like a DevOps person. It’s a cost effective solution, or maybe for testing like an app that

you’re building.

Oh, yeah. Like the the free plan is perfect for that, like, you know, single use a single user, it’s going to be slow, but it’ll work. Yeah. And that’s fine. But I mean, you can also use it for as your production environment and they can do you know, they have a whole like, review pipeline, the more money you throw at it, the more options they give you. It’s It’s great if you don’t want to have to fuss with AWS and all that. Right. But speaking of AWS their interface is awful. Like I I feel like they’re just remember that Scott you had we’re like, it’s technically alcohol. Yeah. Like AWS is like, well, we technically have a user interface. It just it feels like every single page is like a fuck you to the user. It’s just

a lot. It’s it’s Facebook, but for you know, yeah, for cloud services, it’s just, it’s everything. And that can be very

daunting. They have so many options, and they, they’re not they don’t do anything with any consideration at all to making the experience feel smooth. It’s just like, like, Yes, everything is up there. If you know how, if you know the arcane series of tricks you have to do to get it.

You’ll have no problem. But it does make it powerful. Yeah, makes it incredibly powerful. The the ability to scale stuff You know, the way everything in our works with each other is is very nice. We host our entire web infrastructure in it.

It’s, it’s cheap. And if you haven’t looked at AWS lambda stuff, check it out. It’s wild. Yeah, it’s like they have all these like supercomputer things available for image recognition. Yeah. And like language and lexical analysis and everything else. And you can just like connect to it. And if you’re a low volume user, it doesn’t cost very much.

Yeah, they’ve got a free tier on most of their stuff. They now have a whole and you kind of mentioned that they’re like, their whole machine learning platform is now available, which includes stuff like the image recognition and image training and all that. I wouldn’t even know how to begin. That’s there’s a team at work that is committed to ml and the stuff they’re doing is crazy. Cool. And so outside of my Yeah. Here’s my question. Yeah, if you’re wanting to get into something a little bit more powerful, we’ve we’ve mentioned the two big players, digitalocean and AWS. How would you recommend somebody decide between them?

I would say, start with digitalocean. Unknown Speaker Until, until you

know, you don’t need it. Yeah,

yeah, whatever you save in AWS per month, you’re gonna pay much more than that in headaches. And like digitalocean takes a lot of those headaches out, the ship just works. It’s basic. AWS is for like, if you’re doing like a higher volume site, or if you need some, like high end DevOps features, or, I mean, I guess something to be said about just doing it. So you can learn to manage AWS better, because that is a lucrative path to go down and professionally

and from if you’re just looking at hosting, I would say digitalocean is pretty much the one yeah, basically. Yeah. AWS is going to be good if you need to do a lot more than host basically right. I think this may be the way to look at it.

The headaches from using the UI and knowing how to connect everything. If you’re not already familiar with AWS then just go with digitalocean.

So let’s talk about that code editors. Because if you are doing web development, sorry designers and I, I guess one thing that is going to be lacking from this episode, I listed nothing design tool wise, because I’m not a designer and Aaron’s not a designer. So yeah, we apologize in advance. omission. My, my day is currently split between two and I’m slowly getting off of one I have for the last few years mainly used atom which is get hubs text editor. Yeah, simple out of the box. It’s a very basic text editor. Clean tons of plugins for it for all kinds of stuff. And really has worked very well for me for a long time and I probably won’t outright get rid of it. At any point. I have a feeling

Adam had a Adam had a plug in. Um, they have we’re doing pair

yeah hearing paired coding. Yeah. teletype. Yeah, I knew where teletype we were talking before the show about some of this. As soon as you started saying, I’m like, Oh, you know, we should have brought up teletype. So Good, good. Yeah.

teletype is really cool. It’s super cool. If you’ve never used the before, it’s it’s basically like, you have the editor open with one person hosts, they create a portal, and then one or more other people like connect to the portal in their atom editor. And so you can all edit the same file, but it’s all like hosted by the person who’s running the portal. So that person is the person who’s like saving actually has the file on the device. It’s pretty great though. Like, it feels like if you’ve ever done collaborative editing and Google Docs, it feels like that. It’s not perfect, but it’s the best one that I’ve seen. Yeah, it’s it’s pretty good. It’s

been it’s worked fine every time we’ve used it for anything. At work, but my problem with Adam has been increasingly, especially with plugins. performance has started to become kind of an issue with it. It’s it’s, it’s built on electron, right? Yeah.

So So is slack and atom is also electron. And those are just resource along now.

I’m slowly switching to VS code, increasingly, Adam is gonna hang around into my muscle memory for it goes away. VS code is certainly more. The way I describe it is, you know, it’s a text editor. It’s a code editor. But it also blends in a little bit of IE kind of functionality. It is not 90 and don’t let anybody tell you it is because it is not. But it does. Like it has a really good code cross referencing features that you see in a lot of IDs. So if you’re working on a function, as you type the name, it’ll give you a quick link or a pop up or something that will describe what should go with that function. And if it knows how the rest of your code is,

Well, I can tell a sensor Something that wasn’t viewed in Visual Studio is to do that. Yeah,

that I find really useful. And like I say Adam can do that with plugins. VS code can just do it though, which is nice. So it’s the the footprint is smaller. It comes with some stuff baked into it like GitHub, the GitHub integration which again, you can get an atom through plugins, already is there in VS code and works real nice and clean just out of the box. I like that. You can set up workspaces for different environments. So slowly, I’m kind of I think, gonna switch over to VS code and eventually once I think once it’s all my new work is going into VS code, all my old work is still an atom. And once I finally take the time to open everything up in workspaces in VS code, I will finally be a convert. Funny story about VS code.

There is a Robocop plugin for Robocop as a linter for Ruby. Yeah. And tell folks willman otter is a linter is It checks like syntax and style. And then makes suggestions about it. It’s like, imagine someone’s sitting over your shoulder and be like, Oh, you should use another space there. Or you should make these two things line up together. Or you should use this method. instead. It’s I alternate between wanting to punch it and wanting to be like, Oh, thanks, dude. Usually punching it though, but it has an autocorrect mode. And so if it, if it sees things that it thinks are like, trivial changes, it will just make them if you pass it the dash a flag. Well, Visual Studio code has a Robocop plugin, and one of my co workers had that enabled. And it ended up actually introducing a bug into production, because it changed the method in a way that ended up having side effects and caused some time So I it’s nothing against Visual Studio code there. But it’s just the funny. Be careful.

Now thinking about pair programming and shared programming, do you use code pin at all? or anything like little j s?

JSP? I occasionally see like demos in those I think. Yes, code pen I used when they interviewed in my current job. We did some. There was a technical interview, and we did preparing for that. So

I’ve gotten to where I like it. Yeah, especially like just when I’m trying to share stuff or get something across certainly embedding it. You can embed code pins in websites. So if you write blogs about coding or anything, and you want to share examples, it’s a good way to share an example. Mm hmm. I used it just the this last week. I was that talking with my The rest of my team about a CSS implementation for a feature we were looking at. And I said, here’s how I think it can be done. And so I just rather than trying to like mock it up in our existing code base and committing stuff to GitHub and doing all that, I just open code pin real fast, wrote up three lines of HTML for the element, and then typed up some CSS and was able to just give them a link and be like, Here, look, here’s the thing working the way that I was describing so that they could because sometimes, as you may realize, talking to people like this on a show may not always get a point across perfectly when you’re talking about code and things like that. So they right you need to see what somebody’s talking about. I love code pin for that. If you’re familiar with Chris Kohler, this is maybe of his he runs CSS tricks, which will come up here in a little bit. But great tool, you can use it for free, set up an account and save your stuff. I’m sure there’s probably a premium version of it for something but

yeah, I personally the the editors that I use I’ve been using these for 10 years now. I’ve used Adam, Adam briefly just for the teletype feature because it was really good. I use sublime, and I use VI. And it depends on what I’m doing. And what I need to do.

I used supply for a good while before Adam.

Yeah, I like sublime. Really, all I need is I need an editor, that dark mode that does syntax highlighting. Yeah. And like, and that’s enough. That’s like, I don’t need fancy features. I discovered last year that I sublime has a, a go to definition thing in the context menu, which is super cool. So like if you have a method, and the method is defined somewhere in the project, you can like right click on the method invocation, and then it’ll jump you to where it’s defined. That’s cool. I do actually use that a bit.

That’s the only reason that I went from sublime to atom is for the opposite reason, which is that sublime was almost too basic for me. And so when Adam became available and allowed us to bring in linters, and things like that, and plugins, it was like, Man, this is like better sublime. So,

like, so like tomorrow morning, when I sit down for work, what I’ll do is all, I’ll open up a terminal window, I’ll usually open up a couple tabs, we do a lot of microservices at my job. So I’ll usually have like three or four tabs open to change the title of the tabs to be whatever service it is, spin up the service. And then I’ll have sublime open, and usually a browser also. And like that’s, that’s my like stack that I work with for apps. I will use vi if.

Yeah, tell me about that. I’m curious about vi feels like an interesting way to spend your life coding. So

I am Vi power user, my, my, my team lead is like really skilled in VI and he knows a lot of like cool vi tricks actually a couple people in my team knows a cool vi tricks that I forgotten about, like making multiple panels and stuff I don’t do that. Vi for me is if I’m SSH into a digitalocean droplet, we mentioned that earlier, and I have to edit like a config file or if I have to just make an inline edit somewhere on like, a page or whatever. It’s just, I, I’ve used it for so long that it’s just easier than using Pico or nano or any of those. But like for my my main editing now I prefer sublime because it has syntax highlighting, I can use my mouse, I can do multi line editing. And it shows me like, I don’t know it does it just it does just enough markup on the text to where I can read it easily and have multiple files going just terminals and Basic editors. That’s all I need notepad and

FTP. That’s all I need. And I can get you. Yeah.

That’s I mean, that’s what you and I started on. Oh, nice too. Yeah, funny because it’s true. Yeah.

So I want to talk just quickly about, like, I’m going to group some of these. So this is going to span some stuff. So libraries, apps, and third party tools. These are just things you know, whether they’re packages or actual applications or whatever. I’ve got four that I feel like I’m going back to a lot lately that don’t fall into the category of code editor or hosting or anything like that. The first one is open WC. Open WC is an NPM package you can install. It’s a scaffolding for web components. It allows you to initialize like a basic outline the web component with lit element and some of this stuff, just to make it quick and easy. It includes like a testing framework and a linter, and all of this stuff for it, and a gulf pipeline. So it’s real quick and easy to do. Start making a web component. And we’re doing a lot more of that at work. And as a result, I found myself coming back to this quite frequently. The second is WP gulp. I’m going to go through these kind of fast. There’s not a lot to say about them other than that they exist. And I’m using them, but we’ll link them in the show notes. Is that like the Gulp JS compiler,

but for WordPress, kind of?

Yeah. So it’s, again, it’s a script, just install? I think it installs right NPM and maybe does not have to go look for it to be sure. Otherwise, you just clone it. Maybe just clone the repo is what you do. But what it does is Yeah, it’s got your Gulp file all set up and everything. It’s set up to streamline developing themes and plugins and WordPress, Unknown Speaker okay,

so that it’ll automatically compile JavaScript and CSS that’s associated with those and

nice,

yeah, it’s nice, it’s clean. It’s super easy, and it gives you a way So that like, if you do a lot of theme development or plugin development, you’re not constantly rewriting Gulp files and recreating stuff. This just comes in, it’s ready to go. And I found it to be relatively agnostic on you know, it’s, it’s not very opinionated, I think is the phrase, you know, you can adapt it to whatever your workflow is or where your files are kept or anything like that, along with WordPress is WP dev kit. We brought that up on the show before Chris Weidman was on with us to talk about that. It’s just a quick Docker environment that lets you spin up WordPress environments and have them run in a container so you can develop against them. Yeah, and to a lesser extent, just Docker in general. One thing we’re doing with Docker, that’s kind of cool right now at work is we’ve taken like all of our dev tools. So all our stuff like Gulp and all that we’ve made Docker compose file with all of it so that any dev can go grab that file and run Docker compose up dash dash service ports, blah, blah, blah, and have all of our dev tools at the ready for them browserify Gulp, some people are on Mac, you know, we’ve got different versions of some of these things. And so it was becoming problematic sometimes with like, users need to know which version of node should I be using which version of NPM should I have? all this kind of stuff. And so having it all Docker eyes now means you don’t have to care. Just go grab it started and run Gulp, and it’s already set up for you correctly.

I had. I mean, in Rails, like, everything is built around Ruby gems, like we just Rails is a gem itself. I can’t think of any that I would specifically call out other than to say that like the ones that I use, the most often would probably be Like our spec and guard for automated testing, and then Capistrano for deployment, I like annotate because it helps keep your keeps a frame of reference and all of your class files and binder. I like pry. You can throw like, somewhere in your script file if you want to have like drop to a console while it’s being executed and then poke around for debugging. It’s like having a break point. Like you can just you can use the pride and binding of color to do that. There’s just a lot like the Ruby gems thing is

deep well to go down.

Yeah, it really is like I yeah, it’s a big Yak to shave. And the other thing that I listed was PG admin. I do a lot of stuff with Postgres PG admins, like it’s not, I mean, it’s not a it’s good enough. Like if you just want to do like a gooey to like look at the tables because you don’t have to match But like remembering the SQL commands and the console, I do stuff that console too. But Postgres commands are kind of arcane. So I just,

I don’t think that’s any worse than using like either like MySQL Workbench or even in select PHP myadmin locally to connect to stuff.

Yeah. My SQL workbench is better. It’s a better tool if the query browser is a better tool than PG admin. They’re the one I listed was Travis CI. This is sort of like when you had GitHub for hosting. Yeah. Travis CI is a third party web service that you can connect to your GitHub repo and it will handle doing if you have like a testing framework or anything else, it’ll handle like running your tests, running any winters you have or whatever else. It’ll just run stuff for you. And you can even have it hooked up to do automatic deployment. Yeah. And they have free platforms for it, too.

It’s super cool, right? Because you mentioned like testing, if you do a pull request, you can have a GitHub action that runs Travis CI runs your tests. And it’ll it will report. In the pull request, it will add a

comment that says, You cleared all your tests or you failed these tests or whatever. And you can even block merging. If it hasn’t passed, it makes sure that the test suite passes and make sure that the winters pass. It makes sure that you’ve like, written up your pull request description correctly. And then it checks to make sure there’s an approval like it does all those things. And we use Travis for our continuous integration.

In ci, yeah, right. That’s what the CI in Travis CI means. The next so let’s use that as a segue Testing, testing frameworks, so to speak. And I say that because my first thing on this list is something that is not strictly a testing framework or tool at all. It’s Private Internet access. I don’t mean that abstractly, like you should have Private Internet access. I mean, like, the the company but VPN? Yeah, the VPN Private Internet access. The reason I I list them under this as a testing tool is it for me, because I developed sites for international audiences that are not just audiences but offices. So you know, we’ve got offices in France or in Japan or in the UK, Australia, I sometimes need to simulate being one of those users because we are doing something that is like a geo targeted feature, right? Things like GDPR compliance, for instance, come into this so detecting a user if they are European and presenting them with a certain behavior for privacy standards. For me a VPN becomes an incredibly valuable testing tool. Yeah. And PII a Private Internet access is probably one of the better trusted

I use. I use Nord VPN, myself Nord nor I heard hi I’ve heard good things about PII.

So I just I say that only because of that, like, it’s, it’s kind of a weird thing to say for testing. But from an actual framework standpoint, I’ve pretty much gone all in on Cypress. It’s a JavaScript based integration test framework. It uses like mocha and several other assertion libraries in it. So you can pick what assertion library you want to use or assertion syntax, it probably supports it. And right now, like I’m, I’m not doing crazy wild tests with it, like you can. I’ve seen it comes with when you initialize it, you can actually have it initialize all the example files. And some of the examples are gnarly. Like, it really makes you realize how powerful that tool is. In my case, I’m nowhere near any of that yet, but I’ve definitely quickly come to love like it pops up like beautiful gooey that anybody can relate to. For the most part, from a development standpoint, see what’s passing or failing. I’m pretty sure there are GitHub actions that can tie into it and like Travis CI and everything. So those have been really valuable I think to me from from a testing standpoint,

your tools are more front end testing. I yeah. Most of the back end testing I do is like, like I mentioned our spec earlier, I’ve been learning a little bit more about mini tests, I still I still like our spec better. They’re just both different. Ruby testing framework

is fair for me to call like our spec, more of a unit test, or R spec. m. unit tests for folks who don’t know unit tests, test, like the embodiment that containment of like a piece of functionality, like given a function with this, I should get, you know, one back, whereas integration tests generally confirm outcomes. So like using a form and making sure The form output is right without caring about how the form does what it does.

So I would say, our spec, what our spec gives you is a, we use DSL, the domain specific language. Basically, it gives you like, additional vocabulary that you can use in Ruby to write tests. And the the advantage of our spec is that it’s easy to read it. And so it doesn’t look very Cody. Yeah. It doesn’t look like like you can read it out loud. Right.

And it would make sense to someone who maybe didn’t do Cypress very much works that way. Yeah, the assertions are designed like, it describes whatever and it’s like, yes, it Yeah, should equal one. And

yeah, that’s sounds a lot like that sounds like our spec. Our spec, on its own, would be primarily for unit tests, but generally, you also include Vera, or Selenium? Or?

Yes, plenty among familiar with,

easily. poltergeists. Oh, it’s a chrome driver is the browser driver now, which works with Selenium. Those are for like browser based integration tests. And then capybara gives you kind of like working with the DOM through automated uses, like you say, like, okay, like, load this page up at this address. And then it should like, have these traits and everything else. And you click on this button, do this and this. But these are like really Ruby specific things. I included Expo as a testing tool. There’s an app for your phone, an expo app, it’s free. And then you set it up on your app on your computer. And then like you run Expo on the computer, and then it shows a QR code in the terminal. Like it generates a QR code in the terminal and then you point to Expo app on your Phone at the QR code and then somehow it loads the app onto your phone. And like connects with your computer. It’s like fucking magic. Like, I the first time I did it, I was like, holy shit. It’s, it’s pretty cool. If you do any, like mobile development or anything, check out Expo. It’s pretty awesome. I’m not sure what else I would use for test as dev tools a lot in the browser. But that’s kind of like, I think everybody uses dev tools.

You know, I didn’t write this in the show notes. But you bring up Dev Tools makes me think of things like lighthouse and some of those but I think that actually saying something like Dev Tools is fair because checking out like page performance using the performance profiler and stuff for things you’re building just in the browser is an incredibly important step to making sure stuff’s working right. Optimize we is neat. Is that ever a previous job that lets it’s like JavaScript thing. And then it lets someone do like a B testing and then get stats on how each version of AB test worked on the UI. So that sounds like mine, which is Google Optimize. Guess

it’s similar.

I’m a big fan of Google optimized for and this is good for the UX side of drunk and UX, but they let you set up a B tests with a number of criteria, you can go in and change markup or conditions or anything really nice for giving you like a curve in terms of you know, how confident they are. If one thing is performing better than another reporting system, it’s real nice, very easy to use, for the most part, plugs right in the Google Tag Manager. Or you can just install it manually if you want. You do need to have Google Analytics running because it uses like goals as its way of knowing what what is better than what. So you need to know how to set up a goal in Google Analytics and be familiar with that. But outside of that, optimize has been my go to AV tester. I think at this point I would be hard pressed to use something else I think at this stage a documentation This one’s easy. Yeah. Astrium I used for a while. What is that so Astros a view dot j s base based pattern library generator. So like pattern lab are used to, but it was pretty simple to use. I’ve started moving away from it. And I’ll explain why in a moment. The nice thing about it is it’s simple to use. It runs like on GitHub Pages, for instance very easily. So if you had a project and you wanted to have the style guide, be a part of it and be available on GitHub Pages. You could just install Astra minute and plug your stuff in and be ready to go. The only reason I am hesitant a little bit to recommend it is because it does appear to be an abandoned project. I think it’s not been touched in like three years, but it does still work. So if you’re wanting something very simple and quick, I think it’s still worth looking at. My go to though at this point for pattern libraries is fractal man, I don’t think I’ve seen it. Oh, it’s so nice. It’s a just go in and you can install it from NPM. It uses by default, it uses handlebar templating to generate like code samples, and markdown for the notes and documentation on everything. You can import whatever style sheets or JavaScript into it you need. But man if you need to document patterns and code and design standards or branding standards, anything like that. Practice is very cool. I think it’s a practical build. I’ll have all there’ll be a link in the show notes, certainly, but I’ve gone all in on it and our new design system that I’m working on at work is going to utilize it entirely

should be of no surprise based on my other answers tonight, but I just do my documentation and markdown. Yeah. I it’s GitHub friendly. The nice thing I like about markdown is whether or not you have a markdown interpreter, the the markdown syntax like it reads, nice. Yeah. I mean, I’m sure you used to do like ASCII stuff back in the day. I mean, there’s just like, you know, there’s ways of formatting a document using just the characters in your keyboard that make it readable, like, you know, you use dashes or stars to indicate bullets in a bulleted list. Use like hashes in front of something to kind of indent it as a as a heading.

It’s the gateway to a lot of other documentation too.

Yeah, it’s widely used, like a lot of a lot of documentation. frameworks like we use one at work. I don’t remember the name of it, but all the source files for Just markdown files.

I’d mentioned the syntax earlier, the syntax podcast and that’s their show notes, their markdown files when you go edit them those markdown files. And like I said with fractal, if your, your template when you build out like a button and you’re going to show how a button works now it should look, that’s all done with the handlebar markup. But when you write your notes about it, the notes file there readme.md file, it’s markdown. And so that’s why it’s like markdown is kind of your gateway into other more powerful things down the road quite frequently. So and your first run in with it is going to be in GitHub, probably if you’ve never gotten into that stuff. You’re going to have to if you do any GitHub work, so I want to round out everything with just some recommendations on resources, things that we use a lot in our day to day to learn about stuff. One of my big ones is Smashing Magazine,

have a huge picker. They’ve got

a huge breadth of articles, well researched. well written, well edited tons of information. And I’m usually Yeah, it does mean sometimes you’re going to sit down for 15 or 20 minutes to read. It’s not a three minute article, but their stuff has been over the years consistent. Our next episode, we’re going to be talking about something new coming from Smashing Magazine, which is super duper cool. But they they really have over the years, consistently, I think, proven themselves and along with them. The other big one is a list apart

is that um, development?

Yeah, as elements set up well, this year, I mean, how many years ago now? But same kind of thing, right? Long articles generally, but great articles from industry leader, folks on all kinds of topics. Not everyone will be interesting to you, but that’s okay. But great research material and stuff to treat it. Those two sites. Unknown Speaker Crisco, your CSS tricks? Oh god. Yeah.

Man. How many times A day do you go reference that site at this point?

i? Not much because I don’t see it anymore. Yeah, that’s fair. Yeah, but it’s but but when I did when I did, though, a while

Yeah, no, it’s it’s still a good site to go reference once in a while or man, they’ve got a, we haven’t talked much about it. But CSS Grid if you’re getting into grid layout at all, there’s a great article at CSS tricks that is like everything you need to know about grid, and it really is like it is everything. So it’s there’s a ton there, but it’s super cool. And anything front end wise, whether it’s designed development, UX libraries, tools, there is an aggregator called web designer news.com that I frequent that I find really helpful for sort of helping me get to the cream a little bit, so to speak, so that I don’t wade through lots and lots of bad articles every day. And it’s exposed me to a lot of stuff like it UX booth and UX collective and sites like that, like, it keeps a lot of those things up in front of me specie boy has been mentioned on the show a number of times. And you’ll see their stuff featured on that site web designer news.com. You know, they’re an aggregator. That’s all they are, but it’s nice.

digitalocean has great if you use digitalocean actually, you know, I referenced digitalocean knowledge base, even on non digitalocean

Oh, totally. Yeah.

I there was like, one time I had to set up IP tables locally, or I had to fix my IP table stuff locally. I run Linux on my desktop. And I knew there was a knowledgebase article about that. So that’s what

I mean how many times we fail to battle so given them props for the amount of effort, like like they really yeah, they they took that belief of, you know, good SEO is good marketing kind of thing. Like Yeah, they really took that to heart and they they Have a content strategy, it makes sense. And they said, we’re going to move into that space and own it. And boy, did they. They their documentation can’t be beat, in my opinion. Not even close. Yeah, we’ve talked many, many times. You know, we’ve dropped the names Steve Krug and Donald Norman, in book, just any any book that they’ve written Design of Everyday Things, rocket surgery Made Easy, I don’t care, go grab anything. We’ll put links to some of their stuff in the show notes. But you don’t need us to do that. They’re easy to find they’re everywhere. Don Norman is one of the founding members at the shockingly the Nielsen Norman group was in g.com. We’ve referenced them plenty of times. You know, these guys are absolute, like stalwarts in the field. Anything that has to do with developing user centric and user facing things and doing it right. You know, these guys have opinions on And you may not agree with him every time and I wouldn’t expect you to. But it’s also hard as hell to argue with him on a lot of stuff because most everything they put out is backed by a shit ton of research.

Yeah. I, back in Episode 38, staying out of technical debt. We talked about Martin Fowler’s refactoring book. He literally wrote the book on refactoring. I that that is a book I actually do refer to in text now and then just to stay stay fresh on a I have had, I think, in the past three months. It’s been probably a handful of times when I’ve had to do like a formal refactor like, iterative, you know, incremental changes and identifying a code smell and then applying a remedy to it and everything. It’s worth picking up. It’s, you know, the 2030 bucks or whatever, get it and read it and try to apply it to your work.

And this one’s stupid, but I’m going to Say it as a resource, but like Google and Stack Overflow.

It’s true. I mean,

yes, is an issue of kind of media literacy literacy, right? Like knowing how to find the answers, because there’s there’s a joke, and it’ll be up on our Instagram. Actually, by the time you’ve heard this episode, but it’s like, you know, they deleted StackOverflow. So congratulations, you no longer know how to be a programmer. I mean, we all reference these things so frequently, and not just like, knowing that they exist, that you can get answers there, but knowing how to get the right answers out of them. Yeah, learning that skill can be incredibly valuable. Because there is just such a wealth of knowledge in whatever it is you need to know. But knowing how to go find it is certainly a skill unto itself. It’s not something to be ashamed of. It’s something every developer does. every developer does. Oh, yeah. Any developer that tells you otherwise? Isn’t lying.

There’s just there’s too much to know. I don’t think it’s possible to know everything you need to know. And have any room left in your brain? I don’t know, I’m, maybe I’m wrong there. But

it’s a simple matter of efficiency in some cases. Yeah, I, I know for a fact I could write a chunk of code x that would take me an hour. Or Yeah, I find the people who have already written it in five minutes, and use their code as the basis for what I need, like, or you that’s just efficiency at work at that point is, you know, don’t reinvent the wheel kind of stuff. And so yeah, don’t I wouldn’t trust the developer that says they don’t use StackOverflow or Google?

Or you get like some weird error showing up in your log file or something? And you’re like, Oh, that’s strange. And then you just type it into Google. And then search is like, Oh, yeah, it’s because of that.

Oh, God. Yeah. Because nobody writes good error codes. Discuss that to the final one on my list is Twitter. Yeah, one of my things is I used to have Feedly set up and tons of RSS feeds from all of these sites. And I’ve tried to read all the time, I still read all the time, the way I do it is different. By and large, I’ve curated my people I follow on Twitter such that when I see somebody I follow, recommend an article. I kind of just trust their instinct. And I’ll use that to decide what to go read quite frequently. It helps expose me to different stuff, it helps me read people that I wouldn’t otherwise have ever seen, and gets me some diversity in that material. And so I found Twitter to be really useful in that area. And even if you don’t use Twitter a lot, get your account and just follow like some of the big names and see the stuff they share and the things they put out there and who they’re amplifying. At the very least. It’s just a good way it’s it’s a good discovery tool still for some of that.

Yeah, I it’s Twitter is a fucking hell site, but Yeah. No, that’s like there’s, there’s a short list of sites that like, whenever they briefly go down occasionally I’m like,

I’ll let you stew on that while we get to our sponsors. And we’ll be back right after this break. The drunken UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school, city or business? Well, new clouds interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and are ready to design an artistic rendering to fit your exact needs. Map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration or to view their portfolio, visit them online at New cloud.com slash drunk in UX that’s in you. cloud.com slash drunk in UX. Before we get out of here, I do want to give one other shout out real fast. If you get a chance run by the site pin, podcast talk script. As it turns out, by nothing more than sheer coincidence, they just have the week before this episode comes out, put out there Episode Number 54 tools we love.

And yeah, that this this is just a great minds.

Yeah, great minds think alike moment. They just released their seats to the punch, but they’ve got a very different list from us, a very interesting list. So we’ll have a link to their show in our show notes as well. Go Check that episode out and and see you know what they recommend that we didn’t in some cases, in many cases quite frankly, for that. Otherwise, folks, check us out on Twitter or Facebook slash drunken UX or Instagram at slash drunken UX podcast. You can find all those places hit us up on slack at dropping UX comm slash slack. Leave us a rating or review wherever you’re at or you listen to us on Spotify or you check us on pod chaser iTunes. Just hit the little star button or like button if you’re feeling squirrelly leave us a review. It does really help us out and helps our reach the start of the show. Our growth to start season three has been incredibly nice. I would love to see us keep that up. And we do that through yours. Unknown Speaker Wait, you’re not gonna say the thing. I was trying to I was trying to trick you.

I was ready to kick us out and be gone and I thought I had no, I guess I have to say the thing. Before we can get out of here, yeah, so the longer I don’t say it, the longer I can keep you from going to bed, you’re kind of

cool frog. Frogs close in your

centipedes closer, folks, despite any tool you want to use, even if it’s different from ours, if it’s something better if you think you’ve used them better than us for the better recommendations, that’s all well and good. You work the way that makes sense for you. You do the things that make you more productive and make you more efficient. That’s all that really matters, except for one last piece of advice, which is keep your personas close and your users closer Bye bye.

There it is. Later.


This episode of The Drunken UX Podcast brought to you by nuCloud.