Kristin Collins (Lead Programmer at Tighten) joins us this week to talk about some of her favorite tools & apps to use as a developer, from the everyday favorites to the surprise ones you might not have known you ever needed.

Links for this episode:

• colormind.io
• Whimsical
• Avocode
• Shift
• PhpStorm
• Laravel Shift
• Samuel L Jackson Ipsum

Transcript

Dave Hicking: Welcome to Twenty Percent Time, a podcast that takes you behind the scenes of Tighten, a web consultancy based out of Chicago, but entirely remote and spread out all over the place. We specialize in Laravel, a PHP framework, which if you're listening to this, you probably know that, but we're often pairing that with any number of JavaScript frameworks, libraries, and all sorts of other tools to get our job done. I'm your host, Dave Hicking. And this week I'm joined by the wonderful Kristin Collins, a lead programmer here at Tighten. Kristin, how are you?

Kristin Collins: I'm doing well, Dave, how are you?

Dave Hicking: Pretty good. For people who don't know you, who haven't met you, who haven't interacted with you online, who are you? What are you? What do you do?

Kristin Collins: Yeah, it's hard to interact with me online. I'm actually not on social media very much. So not in the Twitter sphere.

Dave Hicking: You're not on Twitter all day long?

Kristin Collins: No, never actually.

Dave Hicking: It might be a smart move.

Kristin Collins: Yeah. I thought that the social media sphere was getting pretty toxic actually. So I just bowed out of it and I just do my own thing now. I do it old school call the people I want to talk to and text them. So probably a lot of people don't know me. My name is Kristin. I've been a web developer for, I don't know, a long time now, I had a couple of jobs. I started working for Tighten after I sent them an email. I think it was Matt who responded to it. Love letter basically, said, "Hey, you guys sound great and the way that I like to work. So could you give me a shot?" And they said, "We'll keep you in mind if we have a job." So I started working here, and now I'm a lead and I've just been having tons of fun building open source work and doing different types of client projects and building my skill set. So it's been a lot of fun.

Dave Hicking: That's great. And I love when people come on the show and they start with how wonderful Tighten is. It's great. It really makes it sound like you're towing the company a line. No, I'm kidding. I'm kidding. Kristen's wonderful. And it's funny that you were just talking about a little bit of the work you do, because a part of doing that work for every dev is knowing your tool set. What are you working with every day? And you're on the show this week, because you want to talk a little bit about, I think your favorite tools, is generally the idea, right?

Kristin Collins: Oh, absolutely. Yeah. So most of the places that I've worked have their own set of software tools that they'll want to use for get management or their IDEs for code, but there's also a lot of tools out there that make web development easier. And especially if you're a freelancer, there's a lot of stuff out there that's free, that you can just get your feet wet with. So I wanted to introduce people to maybe some stuff they haven't heard before.

Dave Hicking: That's great. Before we start diving into specifics, I'm just curious about your general approach, because some people, I probably fall in this category. I am sometimes always on the lookout for, "What's the next thing I could try." Which of course then becomes a rabbit hole and you just end up... It's the problem with, to do lists. Every time you try a new app, you feel very excited, but that's just because it's a new app. Are you always looking for new dev tools? Do you tend to stick with what works and only reach for something new on occasion? Or how do you approach that?

Kristin Collins: So mostly my experience has been need based. So I'll have a particular need for something and then go looking for it. I also do attend more conferences now in my career. So I think I'm exposed to more tools now than I have to go out and look for and I bookmark them and go, "Oh, that would be very useful." But for the most part, this list is just compiled from a need. I was working on a project. I had a specific need and I found something that I really enjoy using.

Dave Hicking: That's great. So where do you want to start?

Kristin Collins: Let's see. So I think that a really great one to start with, especially for new devs out there, is this dev tool called Colormind. It's actually a website, colormind.io. And it's a free service that basically lets you generate color palettes for a web application. So it'll generate all of your color palettes if you want to, but recently I was building something for a Tighten block post and I decided to do it around the theme of Carmen Sandiego. And if anyone's popular with that, that there's a distinct red color-

Dave Hicking: A great color scheme.

Kristin Collins: Wonderful, right? And I was able to just pop in that red color as my main brand color that I wanted. And it generated a lot of other colors that go well with it. So I didn't have to spend a lot of time, because I'm not necessarily the best at designing web applications. I didn't have to spend time thinking about what colors went with that red. It just generates it for you, and it gives you a lot of good examples of how to use those colors in a cohesive way.

Dave Hicking: That's nice. Does it keep in mind... This is my hobby horse, I apologize. Does it keep in mind accessibility in any way? Because sometimes when you generate colors, if you're trying to pick a color scheme, there are some companies, including Tighten, that sometimes fall in this trap, you have this fantastic, great primary color for a brand. And it's tough to make work with white text or to make it accessible. Does Colormind keep that in mind at all?

Kristin Collins: It does.

Dave Hicking: Excellent.

Kristin Collins: So it generates five different colors for you. Outside of your basic error text or success text. So it generates five colors and you'll have a dark brand color and a light brand color and that corresponds with a dark text and a light text. So it'll pick up on, "Oh, if your brand color is dark", it'll go ahead and pair that with something that is a lighter text to pop that out for accessibility. It's very nice.

Dave Hicking: That's very nice, excellent. Colormind.io. Great. All right. That's a-

Kristin Collins: And it's free.

Dave Hicking: It's free, even better.

Kristin Collins: Yeah. It's great. The guy who made it, he also provides material kit downloads. So if you work with the material kit framework or aesthetic, you can pay for those and then you can download them and then you don't have to do the custom configurations yourself, which is nice. I have done that before on one of my projects, but it's optional to pay for.

Dave Hicking: Excellent. That's a good first one. What else? So that's for colors, because I feel like getting a color palette... I'm sure there are some people listening to this, when that's a part of what they need to do, that is very exciting for them. But I know that there are also quite a few devs listening to this who are like, "I get very afraid when I have to do that." So that's great.

Kristin Collins: Yeah. The next thing that I use heavily that I'm actually using a lot in my current role right now is, it's an application called Whimsical and it's free for a couple of documents. And Whimsical is really nice, because it has the structure to let you map out data like database object models, I'll use it for, but they also have a lot of components for wire framing. It's not as robust as some of the other wire frame tools that people will use for professionalism. But especially if you're just trying to get things on a page, to figure out the idea of where stuff's going to go, especially for a developer, it's really nice to just be able to play around with that. With the database model, you can put it directly above it because all of their objects interact with each other. And so, Marcus and I have been using this a lot on our current project because it's a multi-tendency environment. And if anyone's worked on multi-tenancy before, you'll know that the database structure has to be really thought out ahead of time, because you want to make sure that all of your relationships are defined going into it. So being able to drag those around, and then also build wire frames based off of it has been really great. And like I said, it's free for your first four documents. And from what I can tell, the documents are endless. I haven't run into an issue with a page running out. So it's a really great tool. And then, if you end up working in a team environment or wanting to share it, I think it's pretty reasonably priced after that.

Dave Hicking: Yeah. So do you find that... Because sometimes when you're using a tool to just get stuff on a page, some of them, there's always a fine line between how quick can you work with it versus how polished does it end up. There's always that continuum of when you're trying to do wire framing at all. Do you find that with Whimsical, you feel comfortable enough sharing that with maybe a client? Does it look okay enough for that? Or do you tend to use Whimsical just for, "Nah, this is just for me, my internal team so we know what's going on."

Kristin Collins: I have shared these mockups with the client, they didn't provide their own designs. And some people can definitely be turned off when something is not hyper polished-

Dave Hicking: Oh, That's a whole other conversation, Kristin.

Kristin Collins: Yeah. So I do think you have to judge your client, right?

Dave Hicking: Yeah.

Kristin Collins: You have to figure out what they're comfortable with, but with my client that I'm working with right now, they honestly... It's good to have a base for communication. Sometimes if you just tell people, "Oh, I have a book." They picture a paperback, maybe their favorite colorful title. Other people might picture a leather back book with a hard spine. So sometimes, just having a picture that everybody can reference, even if it's not hyper polished to just say, "Hey, this is what I picture an avatar looking like", or, "This is what I picture a sidebar looking like." It really helps drive a conversation forward and helps you build up that functionality faster.

Dave Hicking: For sure. My phrase of the year is that words are tricky. And so, anytime you can have something where you have a shared way to understand what a word means, because like, even if it's something like, "Okay, we need to build a login page." There's some hidden complexity there and there are assumptions. And if you say a login page and whether it's your client or if you're a dev at an internal company or stakeholder, they hear login page and they're thinking, "Oh, well I can log in with maybe Google and I can log in with this and I can have all this stuff versus..." No. It's like a box, with some fields in it. To me, what I've enjoyed about watching you use Whimsical is, it's a very convenient way to have an excuse almost, or have a really good reason to say, "Let's make sure we're on the same page when you say this, because here's the visual thing that I mean." And it's certainly more polished than me scribbling something on an iPad.

Kristin Collins: Absolutely. That's the key.

Dave Hicking: All right. Whimsical, great choice.

Kristin Collins: Let me see. Oh, so I will promote one of the paid services that I use, I guess. This talk is not sponsored by anyone, by the way. But if someone would like to, that'd be great. There is this great tool that I love, that I found when I was freelancing and it's called Avocode, like avocado, but Avocode. And it's fantastic. So basically what it does is, it allows you to import pretty much any image or design file you want to. It'll take anything from a PNG to a full blown PSD design file. You import it and it allows you to perform inspections on those images, just like you would an actual editor. And that may sound like, "Okay, yeah, but Photoshop can do that stuff too." Well. Photoshop can be expensive for a freelance developer. When I first started with Avocode, I think it was 13 dollars a year. They have upped their price since then, because they've gotten a lot more robust features, and they really deserve it honestly, but it's a lot cheaper than some of the other options out there. And what I really enjoy about it is that, it also lets me inspect PNGs. So when I was freelancing, I would get a lot of people who would just send me a phone picture or they'd draw something out. And if you have a Photoshop program, you can only accept things in a certain format, but with Avocode, you can take pretty much any design file that people we're already working with and you can bring it into your environment.

Dave Hicking: That sounds handy.

Kristin Collins: Oh, I love it. Like I said, I use it all the time.

Dave Hicking: Yeah. Is that one of those things you find yourself reaching for often?

Kristin Collins: Often. Not so much of working at Tighten. Tighten gives us, again, I'm plugging, but now I'm not getting paid for this.

Dave Hicking: We love Tighten. Well, you're kind of getting paid. Not getting paid extra for the podcast, but it's 20% time.

Kristin Collins: Right. It's not sponsored. So Tighten gives us a lot of available tools. We have a designer on hand, Noemy, she does a lot of work as far as getting the right colors are telling me how to do something. It hasn't really been an issue. Except for, I think on one project, I did have to pull it in, just because the client was really specific about spacing, but they only gave us PDFs. And so, a PDF-

Dave Hicking: You love getting PDFs. Yeah. That's super helpful. No, it's better than nothing, but you're not going to get pixel perfect accuracy out of a PDF.

Kristin Collins: And that's what they wanted. And so, that's when I found myself going back to Avocode, because it has the little ruler function on any image. I was able to import that PDF, get a ruler, draw the line and get the appropriate pixel length between it. So it was pretty great.

Dave Hicking: That's awesome.

Kristin Collins: Yep. I love it.

Dave Hicking: All right. Well what's up next?

Kristin Collins: Let me see. Well, another handy, free tool that's out there that I was using, is called IcoMoon. And what it does is, it will create a font file for you out of images and SVGs. So SVGs can be super handy for displaying icons. I know we use them a lot, but honestly, unless the framework really is set up to handle SVGs, sometimes it can be really hard to get those SVGs in line with text or to get it to transition to a different color when you're hovering over the state. Also, if you just have a PNG version of something, obviously that's not going to work for an icon, right?

Dave Hicking: Yeah.

Kristin Collins: So IcoMoon is a free service. They provide a lot of their own icons for free, but you can import any type of icon file. Like I said, PNG, SVG, and it will generate a font file for you based off of that. So just like how Font Awesome has their own font for their icons, you can generate your own and just import it. And then, you would use your icons the same way.

Dave Hicking: Yeah. That's really handy at a place, again, we're plugging Tighten, like Tighten where sometimes, especially if it's a project where we have Noemy on it, where she's often generating custom icons for a client for whatever reason. Well, typically we love Tailwind. We'll often use Tailwind and we'll use Heroicons or we use whatever, but sometimes you need something custom, that's similar or in a different style and yeah, that does sound handy.

Kristin Collins: Yeah. And so, just like with a font, it helps you create responsive sizes for those icons. It helps you change the color a lot easier if you're doing it inside of a button with text. You don't have to write different styles for the SVD versus the text, because that font file is now text. So it's pretty great. And I've used it recently on some of my own projects as well. And it's one of those things I just go back to time and time again. Oh. One of the other things I introduced to a couple of people that I work with at Tighten is, it's a software called Shift and it's not Laravel Shift.

Dave Hicking: Not Laravel Shift, which we love.

Kristin Collins: Which I love, but it's something completely different. It's an app manager. So it's one single app that houses other apps. So it lets me switch between email, Slack, Trello, pretty much everything. And I'm one of the few devs in the world that doesn't have a hundred tabs open on her screen. I like to keep things very organized and I like to be able to find it quickly. And so, Shift is something that I pay for every year, but it's $100 a year. It's super worth it for me because like I said, I can keep everything organized, in a list view. It also helps with notifications, because I know what I haven't read or what I have read based on the application itself. I don't have to keep toggling back and forth. I just have all my notifications in one purview and it saves me from having a million tabs open at one time. So I love it. I use it every day, personally and professionally.

Dave Hicking: No, that's great, because I wanted to ask because some of these awesome tools that you've mentioned, they almost sound almost like a little under the radar. You don't really hear people talking a lot about them. Do you have things like, whether it Shift, that you can consider your essentials, your day to day things that you rely on? Obviously I'm assuming you have an IDE or a text that you rely on, but are there other things that are like, "Yes, these are my day to days"?

Kristin Collins: Yeah. So Shift is a big one. It's my email client manager. It's my Slack manager, Trello board manager. I use it every day, personally and professionally, to manage all of my stuff. I think everybody uses GitHub now. That's probably a bad thing to say.

Dave Hicking: That's okay.

Kristin Collins: Because they're our competitors, but all my personal projects and professional projects are in GitHub. I've used other services, but I always go back to GitHub, just because of its ease of use. My favorite IDE of all time is PHP Storm.

Dave Hicking: Mm. Is that what you use currently though?

Kristin Collins: Yes.

Dave Hicking: Okay.

Kristin Collins: I use it for everything. I even try to use it for projects that aren't PHP based, which is ridiculous. I have to download different Git Brains products. But what I like about it is that, I do like doing a lot of things manually with my project work and I like having that terminal toggle, but there are things that I don't like having to set up in every project. I don't like having to set up PHP unit for every single project to run my test coverage. I don't like having to manually run a linter when I'm saving my files. So there's stuff that IDE takes care of. I also had to use it recently to track my Git history and have some really great interfaces for Git management and working through your branches. I use it to resolve merge conflicts, because even though it sounds like it would be a lot of fun to just scroll through a whole file and look for hash code. It sounds a great time.

Dave Hicking: It sounds great. It's a great time. It's a great use of your time too, I'm sure.

Kristin Collins: Right. But I love in my editor, that I can just click the route project folder and go down to the get tab and be like, "Oh, Hey, I need to resolve my merch conflicts." And it will pull up all the files for me that contain merch conflicts and specifically pull it out for me. And there's a lot of Git managers out there that will do it, but I like having it directly within my IDE-

Dave Hicking: Yeah. You want it all in one place.

Kristin Collins: Because again, I don't like a lot of windows and don't like a lot of tabs, so I like just having it there.

Dave Hicking: I was going to say, I've got this mental image. You've got Shift on one side of your screen maybe, very small because you want to, then you've got PHP Storm taking up a lot of your main screen.

Kristin Collins: Yep. Definitely. And then, my secondary screen is used for my browser just to display the application I'm working on in some documentation. Yeah.

Dave Hicking: Okay. All right. Any other day to day essentials that you can't live without?

Kristin Collins: I use my Terminal a lot. It's one of the reasons why I'm a dedicated Mac user now, because I can't do PowerShell and I will never do that again in my life, but I am. I'm very used to the Terminal. I use Homebrew a lot for my customizations. I do a lot of file structure stuff through my Terminal as well. I've configured my .bashrc profile recently. So I have some nice coloring to my terminal and style. So that's when I use all the time.

Dave Hicking: So this is maybe a bit of an aspirational question, I guess, but are there any tools that you use, whether it's on occasion or regularly, that you wish were a little better or that you wish had a feature that would just make your life so much easier?

Kristin Collins: Yeah. So, okay. So maybe I'll throw somebody under the bus here, because-

Dave Hicking: We can do it gently.

Kristin Collins: We could do it gently. Yeah. So what I really want in its entirety, is to have a library of code that I use a lot and I'd like for it to be multi-language. So I take all my notes in Bear, which is a markdown, so I could tag it that way, but it doesn't copy and paste well. If I'm building something, let's say a component in Tailwind, you have the tailwind playground, but I'd like to save that locally so that maybe in my IDE I could save a component and then pull it in. Or just have some sort of application that I could quickly navigate through that I could copy and paste, because there's a lot of things that you end up reusing a lot of the time, specifically based around users. Like I was saying, displaying avatars, or displaying default avatars, login or authentication stuff that you use all the time, roles and permissions. I would really love to have my own library of reusable components that are in every language. Currently I haven't found that.

Dave Hicking: Integrated into PHP Storm, of course.

Kristin Collins: Yeah. That would be ideal if it was integrated into PHP Storm so that I could just insert that in a function or look it up very quickly.

Dave Hicking: Maybe this could be our next 20% project. I'm not sure.

Kristin Collins: Yeah.

Dave Hicking: We always need-

Kristin Collins: Oh, maybe I should build that for myself. Yeah.

Dave Hicking: Sure. We don't exactly need more open source projects at Tighten, but that sounds like it'd be very useful actually.

Kristin Collins: Yeah. I would love it. And it would be nice to be able to share it with members of the team, so that you have this collective, but almost be like a code library, where you have this collective way of checking stuff out or putting stuff in kind of thing.

Dave Hicking: Mm, interesting. So I started with a almost philosophical question about your approach to tools. I want to come back to something like that, which is more like, not your approach to tools, but I think one place where people, I'm one of these people even though I'm not a dev, get stuck, is first of all, sorting through. Or also just getting stuck with... I don't know, over that hump of," Well, this kind of looks useful, but I don't know. Do I really want to learn this something new or whatever?" And it sounds like you have your tried and true tools that you stick to, but obviously you reach for these very specific things when you find that they solve a problem. Do you find that you have to work to get over that hump of, "Well, do I really want to do this? Do I want to change my workflow?" Or is it just like, "Hey, if I need it, I need it. And I go from there." I guess basically, do you get bogged down in decision fatigue or in like, "Well, do I want this or do I not want this?" Or is it pretty straightforward?

Kristin Collins: I do. Yeah. And sometimes I try to trade out for things to optimize it even more, or sometimes save time or save money. I've tried different ides than PHP Storm a lot, I've tried a lot of different IDEs over my career.

Dave Hicking: I think that's like a right of passage for most devs, right?

Kristin Collins: And sometimes you work for companies and they have specific IDEs that they pay for and they want everyone to use the same one so that you can set up your configuration. As far as that's concerned, I think that I'm now a proponent of, find what works best for your workflow and just stick with it and learn how to use it well. I still work on configuring PHP Storm to be the best. I recently just figured out how to zoom in on text, using my scroll bar. That used to be something I did manually. So yes, I'd say I still do that from time to time, but for the most part, and I think that's why I wanted to come on and talk about these tools as well, because I do know that people have a hard time picking them. And I wanted to say, "Hey, this is stuff that I use every day and try it out. So maybe that gives you a little bit more confidence to try it too."

Dave Hicking: Yeah. That's honestly a great way to sum up what we're talking about here today. And I don't even know if I have any great questions for you aside from, basically asking. So we talked about some under the radar tools, we talked about some everyday tools. We're a Laravel shop, heavily. Are there any Laravel specific tools that you use that you enjoy using, that you'd like to plug? And if not, that's totally fine.

Kristin Collins: We mentioned Laravel Shift when I was talking about the different Shift. I got introduced to Laravel Shift at Tighten. Previously I had done all the upgrades manually and oh my gosh, it's so worth the money. I think it was $12 to upgrade this one application we were doing and it blew my mind how fast and easy it was. I was like, "$12 for that? Sign me up." So as far as Laravel is concerned, I love the ease of using Shift to upgrade the application. Let me see, what's some other stuff. Tinkerwell, I've used Tinker well before. It's not something I reach for everyday, just because I'm generally within an application. There's very few times that I'm thinking of, "Oh, I wonder if I can hack on this Laravel function", and I don't already have a Laravel application set up to handle the request. I used to use it more when I was freelancing, because I would try to help people on Stack Overflow and answer questions. And in that context, it's helpful to just have an empty environment so they can plug in that code and run it, and then see what the problem is. But it is a good one. I remember when I heard about it at Alarcon, because I had been looking for years for something to just help me out with that. So that's a good one.

Dave Hicking: Yeah. I never thought about it in the context of, if you are trying to help somebody, because we've talked about Tinkerwell internally, at Tighten certainly before. I'd never thought about in the context of helping, like that Stack Overflow use case, which is really interesting. That's cool.

Kristin Collins: Yeah. Or if you have someone on a team with you or someone sends you a question, "Hey, I'm having a hard time with this." Plugging in the code makes it super easy. So that was nice.

Dave Hicking: Well, all right, Kristin, is there anything else about tools that you had on your list of stuff that you wanted to talk about or anything else that you wanted to bring up?

Kristin Collins: Let me see. Oh, one fun one for everybody.

Dave Hicking: Yeah. Let's end with a fun one.

Kristin Collins: Let's end with a fun one. So the thing that you utilize a lot when you're creating applications is Lorem Ipsum text. Everybody has heard of this, Lorem Ipsum. And it's just filler text. Well, I like to take it a step further, because I'm done with Lorem Ipsum text by itself. There is a Samuel L. Jackson Ipsum out there, just Google it. And it generates quotes from Samuel L. Jackson, from his famous movies. And I find that so much more fun than just general Lorem Ipsum text. So I go to that one a lot and it's on my list of things to try to integrate that with the Faker PHP library. So I can just fake Samuel L. Jackson text.

Dave Hicking: I was going to say, try to figure out how to just get that right into PHP Storm, but no right into Faker would be interesting.

Kristin Collins: Yeah. That would be great. Yeah. You guys that are maintaining it, watch out for that PR for me, because I use that all the time.

Dave Hicking: They're going to look at that going to be like, "Wait, what?"

Kristin Collins: They're going to be like, "Um, we are no longer a family friendly company if we integrate"-

Dave Hicking: Well, you might need a family friendly toggle or some sort of bullying to say, "Yeah, give me all of it, or meh."

Kristin Collins: Maybe the cleaned up-

Dave Hicking: Let's pick from a smaller pool of quotes. Yeah.

Kristin Collins: Yeah.

Dave Hicking: Well, all right, Kristin, thank you so much for joining today. I really appreciate it. This has been a lot of fun and I thought I had heard of every tool that we use at Tighten, and there are indeed some that I had no idea about. So this was educational for me. Thank you so much. And yeah. Thanks for joining.

Kristin Collins: Thanks for having me on and letting me just talk about stuff that I use. It's been fun. Thanks Dave.

Dave Hicking: Thanks.

Kristin Collins: All right.