JavaScript Figma Plugins & Working at GitHub With Cameron McEfee

Welcome to Syntax. Today, we have a really great episode. We have Cameron McAfee on who has a very decorated past. He's he's worked at, GitHub in the very early days. He's worked at Sanity as a creative director, and, he's just one of those kinda cool guys who seems to do it all, design, development, products.

It it's really interesting to see someone who just, like, makes stuff happen, whatever in whatever medium it is that they they need to make it work on. So we're gonna be diving into that as well as, something he's working on called GuideGuide, which is a plug in for all the different software design, apps out there. Specifically, I'm curious about, like, how do you make a Figma plug in? Because that's it's kinda interesting that you can just build plug ins for Figma with JavaScript. So pretty stoked about that. Welcome, Cameron. Thanks for coming on. Yeah. Thanks for having me. It's, exciting exciting to finally be on this end of the microphone.

That's awesome.

So give us a rundown. I know I I gave a sort of half assed explanation of who you are, but, give us your pitch of of who you are and what you do.

Yeah. No problem. I've I've described it different ways over the years. I think product polyglot is where I ended up with just, I never never got too interested in Node particular pnpm Yarn of the spectrum and just, you know, most experts will go down one part of the path and I went in every possible direction, which, you know, makes it makes it hard to be hired for Node thing and you have to sell yourself harder. But, it's it's good because you can you can talk to all the different people and understand the different bits of everything.

But, yeah, like you said, I've you know, I worked at GitHub. I worked at Century, and those those were in creative capacities, but always had my hands in code. And I've always liked, moonlighting as a a software developer.

So these days, I consider myself a independent software developer. I've I've I think that's the lifestyle I like. The Yeah. The creative the creative thing's important to me, and I I care about it. I use it. But I think the I'd rather be mad at code than mad at the, you know, like, creative politics and that kind of stuff.

Yeah. What came first? The the code or the the creative design aspect?

The the design thing.

I went to school thinking I was gonna become a illustrator and then thought I was gonna be a a motion graphics artist because I I started learning Flash, and I thought that was really cool.

But then I realized motion graphics is extremely tedious, and I I couldn't stand it. And I started learning, action script at the same time and realized I could write code that would then animate the stuff for me, and that that kinda ruined my life because at that point, I realized I could just build tools.

Yeah. Very similar to my trajectory. I was going in motion graphics too.

Got into Flash. Even interviewed at a couple Flash jobs, and moved into Node and was like, yeah. I'm happy here. We can make we can make things happen with code in all all kinds of ways.

So, you have a a long history as being, like, a creative director. Do you wanna maybe give the audience some perspective on, like, what that entails exactly?

Yeah. Definitely.

I I think there are 2 kind of, like, 22 paths on the tech tree you can go down. There's the the creative director that's kind of the Don Draper type Wes you are the the creative visionary and everything comes through you and the people on your team are kind of like your minions that you use to work your creative work, and I'm not that style.

The other direction is more the, it is it is my job to create a creative space where the people on the team can be highly functional.

And so my my job has been more focused on how do I how do I become the roadblock to all the roadblocks so that the things that normally slow creative people down are not there and that they don't have to think about those things? So, like, removing the office politics, removing the the, like, project manage project management dysfunction, that kind of stuff so that all they have to do is come in and be creative and then show off their work. And the the way I've looked at it as, you know, it if a project fails, that's my fault and if a project succeeds, that's their fault. I think it's, like, it's really important that, a creative director is there to, like, amplify the people on their team and then kinda disappear.

Yeah. That makes sense. Especially as, like, that seems like the ideal, strategy for a any kind of director. Right? You you hear the word director.

Inherently, people think, hey, man. This might be the person that is creatively in control of everything. But in reality, you're more or less you're directing. Here, you're you you have, like, a overarching vision, but you also know how to unlock

the the talented people to do the talented work, which is, I think, a hard skill to get out of the way and and, you know, work that hard. Yeah. Yeah. And I I think that's where a lot of people flop as they're promoting is that realizing that when you when you take a promotion into some sort of management or organization mode, you have to turn off that creative part. And, like, there's there's places where you can use that.

Yeah. But but, like, that, your creative ability is no longer the thing that you were being judged by. And this you know, it's it's always good to bring that experience and have in your back pocket the answer, but then see if the room can solve the problem first.

Does does taste come into factor more at that point? Like, for sure, acting JS kind of like a a judge or a, yeah, arbiter?

Yeah. I would say that's a that's a an important part where your your footprint should still be seen. And I I think, you know, in in, like, the the GitHub work and the Sanity work, you can see where my influence was there without, you know, explicitly being imposed. And, yeah, a lot of that comes from taste of saying, like, you know, Wes, we will or won't make this decision, but you can figure out how do you wanna do it.

Mhmm.

And I'm always curious about this because it's it's not something that I I dip into a lot. Like, I I design stuff for for the website and and for whatnot, but it it's pretty much just like, let me just make stuff that looks cool and and and let her rip. But in larger organizations, you have, like, people everybody's got an opinion on something, and things get watered down, and people have all this feedback, and it's is there anything that you do to sort of, like like, shelter designers from that type of thing Wes it can be really, like, like, you still want them to just kinda go wild and to have and be really creative, but then there's this other part where it's like, there has to be some sorta feedback loop.

You don't wanna beat them down too much.

Yeah. It's it it is definitely a hard thing, and I would say that was kind of that was the crux of my trial by fire, in my career was Wes had a point where we had a marketing leader that was just causing all kinds of trouble for us in terms of, like, unrealistic expectations and all this stuff was happening. And I knew personally that it was not our fault that these things were not like, the the expectations were unreasonable and so it's not our fault that we were not delivering on them. But when I sat down and tried to articulate this, I realized that we just had no like, we had no structure, we had no project management, we had no documentation, we had no rules in place, we had nothing. And so, you know, ultimately, it was it was our fault because we were not able to to do this. And so I think my the realization I had was that all of the problems we had came down to ambiguity of, you know, we we couldn't answer questions.

We couldn't provide answers to, like, we we couldn't answer the questions but we also didn't have answers ourselves that we already had. Mhmm. We didn't have documentation for the processes. We didn't know how long things would take. And so, I think, honestly, just, like, sitting down and documenting everything was the solution to 99% of the problems. Because the thing that I learned is, especially being an early employee JS and if you're an early employee with the direct the word director in your title, even if you're not a director, which is my case, like like, by rank, not a director. By title, head director in there. And if you've been there for 2 weeks longer than the people that you're working with, if you have a piece of paper that says this is how we do things, people generally don't question it. And so that's it's you Node, that that was my takeaway JS, like, come in with the documentation and then, you know, when someone comes in and says, like, well, can, you know, can we make this green? Because green feels good. And, like, you know, we can say, like, nope. On this chart, it says Wes don't use green. And they say, oh, okay. And then then you move on. And once you do enough projects and you just write down how long it took, over time and it's like what the kind of project was, you start to see patterns in there and you can just, you know, make the sheet of this is how long this type of project takes. And so, you know, when someone comes to you and says how long is this gonna take, you know, to build a new web page or whatever, you know, you can say, like, do you want a good one or do you want a fast one? And if they say a good one, you say, well, alright. You're looking at 8 weeks, and they go, oh my god. 8 weeks. And it's like, well, here, let's talk about this. You know, you need a week to do the illustration.

Honestly, you need Node day to do the illustration and you need 6 days for you guys to, you know, whinge about how it you don't like how it works. And then we need a week to do the copy. And actually, Deno. We would need a day to do the copy and then 6 days for you guys to talk about how you don't like the copy. And then, you know, and you just you go through this process and and, you know, they feel off put by the time at the beginning. But then when you nail it at, you know, 8 weeks and you're not running over the, you know, over the things and your artists aren't mad and the marketing people are happy that they got what they want, it's like Yeah. Yeah. I mean, you know, believe it or not, knowing ahead of time is not that hard when you've done it, you know, a 100 times.

Yeah. And and and I'm sure there's a lot of egos at play too.

You you mentioned, like, having the the paper you can point to and and maybe getting some of the emotional side of it out of it. But, like, in terms of dealing with egos in that space or just in general, you know, hurt feelings Mhmm. Do do you have anything there that you've experienced, on how to mitigate somebody feeling hurt if their baby is not well received?

Yeah. I I think going into, like, going into a project and, you know, you eventually build a rapport with the people that you work with. But, like, going into a project where you don't have that, it's really good to explicitly state, like, this is where where the boundaries are of, like, this is my responsibility. This is your responsibility.

You don't have to enjoy this, but I am paid to do this and you are paid to do that. And, you know, there's there's still, you know, some some head butting that happens in there, but when you have that conversation out loud with people because because there's a lot of stuff. Taste is this very it's very touchy feely, and, you know, everybody has taste. Everybody thinks that their taste is good, and everybody thinks that they're good at their taste. And so Mhmm. You you're you know, they perceive that the Venn diagram overlaps or, you know, it it blends when really those are very separate circles. And and so it, you know, it it is rare skill that you meet someone that understands their place in the in the pipeline. And I mean I mean this as a, like, a defensive creative person but I also mean this as just a person that works in the in the, like, in Sanity team of, you know, if if the marketing people come to me and say, like, this is not converting Wes, well, you know, it's not my place to complain that it's not converting well. It's their job to worry about that. And so, like, that's not my place to give them a hard time about that. So, you know, it it kind of goes in every direction of, like, you know, it's it's it's just a lot of man managing expectations and being very clear and articulate about, you know, we are here to have taste and this is kinda where the boundary of that happens. And you are here to have your like, you have your goals and we're not gonna tell you how to do that part. And so that that mitigates a lot of it if you have those conversations up front. But then, you know, when you get into it, there's still some of that. You have to get in there. And, you know, you can you can worry about people's feelings, and I think there's a lot of space for that and where that's really important. But then I found a lot of value in being the scariest person in the room where people are Mhmm. You Node? Like, if you're in, I I think people in the creative fields are usually on the defensive a lot. And so one of the things that was important to me was that the people that I work with see my team as really great people to work with and me as a big brick warp. Because, you know, like, somebody has to be in there and say, like, we're we cannot do this. And I'm comfortable being the bad guy if it means that the rest of my team can operate comfortably.

Hence, you know, like, you you the the first time you meet a Vercel, that they prickle at that. But then once, you know, once you talk to them and they realize you're not an and you're doing it to protect your team, then you, you know, you you start to work together pretty well. Oh, that's awesome. And you're

you're responsible for a bunch of kind of neat things at GitHub, specifically the 404 or 500 pages, the design?

Yeah. That that was my, like, hiring test, that that a friend of mine told me, so back before I worked for GitHub, I was just trying to get a design job, and he suggested that I put some code on GitHub because that would make me viable, and I had no idea what that meant.

I didn't I didn't understand version control or Git at that point. And, so I, you know, I I pushed some code to GitHub, I think. I don't know if it ever actually made it.

But then he you know, a few a few months later told me that they were looking for an illustrator, and so I I applied to the job kinda blindly thinking, you know, I can I can draw? Let's try this. And so they they asked me or they, you know, they told me they got this this mascot that's a cat octopus thing, and they wanted to put it in a, you know, a different outfit. And so they they asked me to figure out or to to design images for the the 404 500 pages, and that Wes basically the extent of the the thing. And so I you know, Node me being naive to, copyright at that point, Wes just like, sure. Let's dress it up as Obi Wan Kenobi, and, you know, this this isn't the page you're looking for. You Node? Thought thought it was hilarious and sent it to them and they loved it. And, the CEO at the time came back and was like, hey. Can you make this parallax? And, you know, I I think the the sensible thing for an artist to say was no or, sure I can figure out how to download a library that'll do it. And instead, I wrote some really awful jQuery code to make a parallaxing library and, then open sourced that. And so I think that kinda won them over on that.

So, you know, it's it's still available. It's called plaques.

And I think that there's a big banner at the top that says, please don't use this. Someone else has made better code than this.

You know, it's it it it you can trust it as much as you trust anyone's code from more than a decade ago. But Yeah. Right. Yeah. You know, it's, it it was it was a lot of fun, and, you know, it's they're still there. The I think I think the parallaxing might be gone, or I know that it was rewritten at one point. But, yeah, it was that was my Yeah. It's little fingerprinting. Image now.

You're you're not responsible for the the unicorn when it goes down, are you? No. No. That was Okay. That was there. And,

thankfully, we don't see that as much anymore. But, yeah, it was it was, the the Octocats and then the Unicorn, you know, every few days.

Oh, that's good. The the Octocatz is really interesting. Oh, man. I'm sorry. I was just on the four zero four page, and all the parts are still individual images.

But it's not parallax any longer, which is interesting. So they must have ripped that out, but just kept the the individual images. That's amazing that the four zero four page is still the same thing, because that was, what, 10 years ago that you did that, at least?

I I'm I'm, like, honestly surprised that they haven't taken it down. You Node? Considering how ever probably every other part of the code Node has changed except for Yeah. Maybe 1 under construction GIF that lived in the code code base forever JS a joke.

You know, I'm I'm surprised those those pages are still there.

Oh, that's great.

I I was curious about the the Octocats as well because there's, like every time I'm at a conference, I get a whole bunch of Octocat stickers, and they're they're all different. I'm like, man, like, is there 1 person designing these, or is it, like, the Simpsons where just the same people they have the same style that they're able to reproduce?

Yeah. It's, well, when it started, it was, it was just me for a while. Like, if if you go to, octadex.

Github.com, it's a list of all the ones that they've made.

Don't know how often they update it now, but it's it definitely gets updated. But there's a little avatars on there that tell you who did them. And, I did a bunch of them to start out. I think I'm still the one that has done the most of them. But then a few of the the other, GitHub designers did some of them. There was a GitHub engineer that did a couple, which was really cool. And then once the creative team at GitHub, like, officially became a thing, we started formalizing how that worked and we would hire illustrators and we documented style guides of how all that stuff worked. And then at some point, you can see a very clear change in the style where we brought in the actual illustrators that understand anatomy and all this stuff. They they came in and things got really good and unscalable for me to manage, and which was good because that was in my transition into the leadership role and it's like great. Yeah. I can finally achieve the dreams that I've had in my brain by letting other people do it for me.

Man, some of these ones that you did are cute. It's super cute.

I I definitely feel like I hold the title for most beloved ones like the Dia de Bos Muertos Node and the the Grim Reaper. Excuse me. The Grim Repo.

Yeah. Those those ones are definitely some of the, like, the hottest ones we ever had. Just, like, people love those ones.

I definitely have stickers of ones that you have designed. So that's Yeah. Pretty similar.

Plastered all over my MacBook. I was did you you ever got in trouble with using, like, the Simpsons or or memes or anything like that for these types of things? I'm afraid to say it out loud because then somebody's gonna find it. But Yeah. Like, right, it I don't believe that we ever got any, you know, like, cease and desist things on that. Yeah. You know? And maybe it fell under Sanity, and they just didn't wanna bother or, you know, nobody had heard of this small company named GitHub.

But, yeah, it we didn't run into issues with it, but we definitely hit a point pretty early on where we decided, okay, we can Wes cannot keep doing this and, you know, tempting people to attack us. So, yeah, you'll also notice the the point where the the use of IP got cut off and we started going down, like, cultural routes and whatnot. Yeah. Because at some point, it it started out as, like, you know, how many fun versions of this can we make? And but then at at some point, we started realizing people were identifying with it. And so then the mission became, okay. How do we make it so that people can be the octocat? And, like, that that Wes, you know, talking about taste and, you know, how you influence that. One of the things that I really wanted to avoid was trademarking the Octacad. Because if we did that, then we had to be super litigious about it. But if we copyright it, then we can we can still protect it, but we can make it so that if someone wants to use it and we're cool with that, that's totally fine. And so, you know, then it became communicating to people, like, you you know, you can't use this to make it the logo for your business. Like, you are not the Octacat, but you can use it as your avatar and get up. Like, that's great. I'm glad you identify with this, you Node. You know, make it how you want. You can make your own. Add pink hair or, you know, do whatever you want to it.

Yeah. I went down that route. I think it was a couple of months ago. I had an idea for a, like, a, like, a a Sanity sticker.

And I was like, I wonder what the licensing on Octocat is, and and I realized, yeah, you're not allowed to to do it. And I have been served cease and desist in the past, from freaking Patagonia.

So I I don't know that anymore. Yeah. Trademark mountains?

No. It was the actual Patagonia logo. I took the Patagonia sticker,

and I just, like, replaced Patagonia with JavaScript and same logo, same same everything. Right? And then I I had 10,000 of them put into packages made, and I got them. I I took a picture of it. I put it on Instagram. I'm not lying. 45 minutes later, I got a cease and desist in my email box, and I was like, it was the devs. The devs at Patagonia followed me on Instagram, and they, like like, hotshot it at the legal right away. So I I had to cut 10,000 packs of stickers open and take it out of of them. And now somewhere in a landfill, there is 10,000 Patagonia JavaScript servers.

In Scott's house, there's at least, like, 40 of them because you sent me a whole bunch of them. I got one on my my monitor over here. I can see it every day.

But I I, like, had posted a photo of it Node time, and Wes is like, you gotta take that down, man. You can't you can't keep that up.

Now now that I know a little bit more about cease and desists and, like, how they're the, like, the first line of, like, spooking people out of any legal trouble, I probably probably coulda got away with it, but at the time, I was just like, I'm not getting sued by Patagonia.

Yeah. Right. Yeah. Yeah. And and I IP is such a a sticky scenario because, you know, like, you know, being a creative Vercel, you know, I I care about it on both ends of the spectrum. And, you know, it's people people come in and use your logo to make it that like, themselves or they wanna use your content. It's like, well, no. Like, you need to be creative with your things. This is this is me. You can't use me to sell you. But then there's a they'll also this whole world of stuff of, like, I want you to be able to use it and enjoy it and, you know, I don't care if you mess with it. Everybody doesn't understand it until they do. And then, yeah, you get a a lawyer in your inbox and it's you know, suddenly you're afraid of how how to use things.

Yeah. Oh, yeah.

Let's talk about Century. What what kind of stuff did you do at when you were at Century?

So I when I got hired, I was the 2nd designer.

Chris was the the product designer, and I was basically everything else creative.

And so I came on and, was working on all of the marketing content and doing illustration for that. And, my title was always creative director, but it was kind of silly to say I was directing when it was just me.

So the the goal was always to eventually grow the team and, turn it into, you know, a a full fledged thing. But in the the beginning of that, I did, like, a illustration for all of our stuff and kinda created this isometric style, which, was by no means groundbreaking, but was different than what our competitors were doing at the time. And, took some of my code backgrounds and, did some I think it was some, like, SVG and CSS related animation on the the homepage to do like a it was like a power outage scene and the the the lights would, like, slowly flicker out in the Oh, yeah. Behinds being like, you know, the you've you've had the deploy and now everything's, you know, falling apart. Sorry. Cursed again.

But my my favorite my favorite part was, like, the the power outage rolls across the Sanity, and then the the call to action button, like, flickers on, like, it's, you know, backup generator has come on.

And so, you know, I I was doing that kind of stuff, and we would do blog posts and would make illustrations for that sort of thing.

And then hit a point where just, like, I couldn't keep up with it. And so hired an, an illustrator to actually come on board. And when I brought her on, we sat down and we talked about the illustration style. But at that point, our competitors were starting to do kind of, like, similar, looking illustrations. So we decided, you know, how do how do we capture what's good about what we are and, and, like, what's good about what she did and, you know, create a new style out of that. And so from that, she came up with this new style that had a lot of the, like, blocky geometry, but a lot more fully, anatomical characters and had a lot more range to it. And then I I took her illustrations, and I designed a new brand on top of that that felt more in line with it because ours, at that point, was very gray and neutral.

And so we we introduced, like, you know, pinks and oranges and became this, like, kind of weird unicorn spectrum. When I when I pitched it, I described it as Taco Bell, but good, because it was it was very, like, like That's so great. It was, like, very, very nineties Taco Bell style. And I even had a reference image of the Taco Bell that was near my house because, you know, we Node these, you know, like, jaggedy lines and these colors that worked, you know, kind of from that palette. And so, you know, bringing her on, she changed the the illustration style into that, and my my capacity became more designer and, like, designer developer and kind of providing guidance brand wise. And then compared Node illustrator and copywriter, and just, like, started growing the team from there. And and this this wasn't about the time where I had that, you know, Node of come to Jesus moment about, like, what it takes to to run a good creative team. And so, I sat down and I made a chart of all the roles that should exist on a team, and then I wrote down who JS responsible for it. And it was something like, you know, 12 or 15 different roles, and I was 13 of them. And, you know, that that doesn't seem scalable, and that was, you know, reason number 1 for why we were so slow. And so I I I created, like, here's the chart now and here's what the chart should look like and the roles I need to hire to do that, and just slowly started checking my way down that list of, you know, bringing people on that could could do those things. And as I would release a responsibility that, you Node, and or JS as they take that on, I would release that responsibility. And at some point, my job became more, the the political and organizational on the taste side and then still software development because I I love to write the code. So but, you know, they they would design it and illustrate it and all that, and then I would build it. Oh, yeah. Cool. No. Sorry. I got 1 more question about the illustration because I always find this super interesting.

We have a a bunch of illustrators that do my stickers and some of the the syntax shirts as well.

And I watch them, and they're all they're all iPads. They just sketch it right out on the iPad.

What what's your process for illustrating something like that from idea to getting it into, like, an SVG?

I probably scare illustrators. Or, you know, it's it's that one one of those things where it's like you can't watch another person do a thing. And so I I I come from the the last generation of creative tools where the pen tool was everything. And so Yeah. I I start and I sketch and I get it kind of close to where I think it's gonna be, you know, enough that my brain understands the, you know, the anatomy of what's going on. And then, you know, back when I was illustrating more, I would scan it and but now, you know, I can take a picture with my phone, which is fantastic. But then I'll plop that into illustrator. And with the pencil and the mouse, I just start clicking away. You Node, the I'm a, you know, a a fiend for Bezier curves. And, so it's just you know, I I go in there and, like, I I work all in vector. You know? And I think, like, a a lot of century artists are, you know, you know, bitmap Bos, and they they paint stuff, and then we'll convert to vector later potentially.

But, I, you know, I always prefer to work in vector because, you know, I I don't know what I'm gonna do with these things eventually.

But, but, yeah, that's that's mostly my process, pnpm tool. And, you know, it it it it makes other artists uncomfortable, but I'm pretty fast with it. So it's, you know, it works for me. How'd you get good at the pen tool? Just straight reps? Yeah. You just kinda go out and lift every day, and, you know, eventually, you get you get to swallow with the the pencil.

Yeah. That's amazing. It's it's the keyboard shortcuts relate. You know? Like, you gotta get your alt your alt key and all these things and you figure out, like, you know, which which one changes, how the paths work. But yeah. Yeah. That that and the pathfinder. The pathfinder is the one that lets you, like, merge shapes. And so, you know, that those 2 are my go to tools.

Alright. Let's talk about GuideGuide. So this is a, plug in you've had for how long? Tell us what it is and and how long you've been working on it. Yeah. I think I launched it back in 2010.

So prior to getting the job at GitHub, I was, an intern, which I it was a job at a design firm and or a a motion graphics firm, and they had hired me thinking I knew how to do motion graphics because they had seen my videos, which they didn't realize at the time were all based on, you know, code generating.

And so they hired this this, motion graphics artist that couldn't do motion graphics and realized that we gotta build a web department around this guy. And, every year my bosses would take this long vacation and, you know, we wouldn't have any client work to work on. And I had been doing all these Photoshop mock ups of websites, and every time a client would say, you know, can we take a a link out of the the navigation? It would crush my soul because I had to update 17 files and, like, re like, remeasure all of the little buttons and get them all Oh, yeah. You know, stretched out. And I just I got sick of doing this, like, this Node tedious task over and over and over. And so I started looking at scripting because I knew that was a thing, and wrote myself a little script that would let me put in a a number of segments and a distance, and it would just, like, plop guides in there e equally spaced.

And that was kind of my, like, caveman make fire moment where I was just like, oh my god. I I just pressed a button, and I saved an hour and a half of work.

And so on one of these vacations that my bosses took, I dove into how the Photoshop plug in system worked. And, you know, back then, it was like it was, you'd build, like, a a Flash plug in, basically, that would then work with, like, an XML. And, it would it would just, you know, it would interact with Photoshop.

And I added a interface where I could put those those numbers in instead of having to do it in Node. And I'm like, that was that was so cool. And I think right about that time, I published that on my website. And, you know, at that point, I was nobody. But then I got the job at GitHub. And at that point, GitHub would always post Wes somebody got hired. And I think, and, like, that that week after I got hired, Guy Guy exploded.

I I never you Node, like, I mean, in hindsight, I should have looked looked it up then. I never did. So I, you know, I have no idea where it blew up, but I, you know, I was starting to hit, like, millions of downloads and was, you know, seeing people installing it in, you know, big name companies that I'm sure don't want me to say that they were customers. But it was just it was everywhere. And it was a free plug in at that ESLint. And, you know, it was great.

You know, in in hindsight, looking at all the tweets because, like, you Node, I had to turn off notifications at some point because people just kept talking about it. It was, you know, it Wes very very exciting, but very disruptive.

In hindsight, everybody was excited about, like, how how it was free.

And so, you know, like, naively at that point, it was like, you know, people are loving that I'm I'm solving this problem for them, which, you know, definitely at that ESLint, a Photoshop based web design was the case. But they they were really in love with the free thing.

And then year years later, I decided, you know, I'd I would like to earn money for this effort I put into this thing. And I started charging money for it, and, I think I shared a a graph on Mastodon on my site visits. It, you know, it went from, like, 50,000 page views a month and then just, like, tanked immediately when I started charging money. And, you know, the my my my, wonderful popularity died right there. But, but also my amount of money that I was earning started going up. So, you know, I can't can't complain about the trade off. But, I yeah. I apologize. I skipped I think I skipped describing what the plug in does. It's so the the whole point of it, you know, started out JS, like, how do I measure space between stuff? But the whole point of it is grids are a really important part of design.

And, you know, I like to describe it as lining stuff with lining up stuff with other stuff.

You you know, you we'll see a young designer come in and they just plop stuff on a page and it's it's all misaligned and things are kind of out of whack. And, you know, a grid is the the invisible structure that exists in a page so that your your brain your brain doesn't have to solve where stuff is and it kind of understands, like, what's going on. And so guide guide is a plugin that lets you put in, things like, you know, margins and columns and rows and specify, or, like, we Wes put these things in and then you run it and it puts guides in your document, that, you know, they they don't print in the files that you export. They're just there while you're designing and help you line stuff up. It was so much more relevant 10 years ago when we didn't have Figma and Sketch and, you know, better design tools. You know? Node it's it's still relevant, but, the the tools have gotten so much better these days.

Photoshop added a feature that was basically identical to what I had built. Yeah. So, you know, I'll take credit for their inspiration there.

But, it so, you know, it's, it started out as it started out as script where I would add values in JavaScript and then became a plug in where I can work in the interface. And then it hit a point where it became, like, my personal testing ground for stuff. And so, you know, like, I don't know, halfway through its lifetime ago, I added a text parser to it so that, I could create this language that I call grid notation that would let you write out, kind of like equations that create grids because I wanted to start doing stuff. I mean, honestly, I just wanted to try it. But I wanted to do more powerful things like, you know, every tool you'll see will let you put in rows and columns and, gutters. Like, these are kind of, you know, Node topics. But then if you want to add, like, margins to your columns or if you're, doing, like, if you're the kind of designer that loves incorporating math into what you do, like, you know, using the Fibonacci sequence or the golden ratio, the tools don't tools don't support that kind of stuff.

And and, you know, like, they're they're very on the rails. And so I wanted to I wanted to go off the rails. So I created this language that lets you put in equations, for how you outline things and let it just do the math for you and figure out, you know, where things go and how to evenly space stuff.

And so it's that's what it's evolved into is this this kind of power tool for how do I how do I put guides in this document so I can line stuff up in the ways that I want that are beyond what these built in tools can do for me?

Yeah. That's really cool. So you you you yeah. You essentially made your own language called with grid notation.

Did you have to write, like, a whole parser for that?

The first time I did it, I I have rebuilt GuideGuide, I think, 8 times Node.

And I I think that's the last time, I think.

But the 1st time I did grid notation, I wrote my own parser, and it would just I I think the the method was called chomp, and it would just, like, chomp like a Pac Sanity way through a string and interpret stuff. I think I would, like, split on spaces and then try to interpret, like, what was in each token to figure out what it was supposed to do.

When I rewrote it for the current version, I, switched to a JavaScript based parser called, moo, I think. And it's, I'll I'll look it up so you can put it in the show notes. There there's a, a type of parsing style.

It's like e n r b or something. And it's it's basically this it creates this parse tree of, like, you you tokenize your string, where you, like, chunk it up into little little bits of meaning, basically, but it's a whole bunch of substrings.

And then this parser has a tree where you set up things that are kind of like regular expressions, but it's more like pairings of types of tokens that have meaning. And it just, like, rips through your document and, associates these and then comes back with a an abstract syntax tree where it's it's like, here's everything that's in this text in the form of JSON data.

And then from from there, you can say, like, like, then then you can start using logic on this. But it's yeah. Like, it starts as regexes and, you know, you can you can write a regex of, like, this is an integer or this is a a pipe character or this is a tilde.

And then you tell the parser, like, you know, an integer can be followed by the, you know, like, the string p x for pixels. And so if you ever see, like, integer p x, that means that's a a unit input. Or if you see a pipe character, that's a guide thing. And then what you get on the other end is just a you know, a JSON blob that's you know, like, here's an array of all the tokens we found. And then from there, you can start doing science on top of that. Just loop over them. Yeah. That that's how how Babel works, and and that that's how

pretty much every JavaScript parser, TypeScript works JS that somebody has wrote an AST parser for that language.

And that's how ESLint works, actually. And then you can just start looping through them and saying, alright. Well, if this thing is preceded by this thing or if this thing has occurred before, then throw an error. That's really interesting, and I had never seen this. It's called no no contacts Moo, a highly optimized tokenizer Lexer generator used to tokenize your strings before parsing them.

Yeah. And I I can provide more of the links for that because it's it's a multistep chain. There's like a the Lexer for it, which is what tokenizes it, and then there's the actual parser for it, which I think I'm forgetting the name of that one. But, yeah, it's a it's a fun rabbit hole to go down of, interpreting text.

Yeah. Yeah. We, 1 question we had previously, I've asked many times, and I I think we've gotten to the bottom of it, was, like, can good colors be calculated? And we we think the answer to that is is Node. But I'm curious if I'm curious, a, your answer to that, and, b, can good design be mathed?

Can you calculate good design? Can it be good at Oh, god. That's a that's a good question, and I don't think will be solved in my lifetime.

It's funny. My actually, my my dad, asked me about this recently. He wants to he wanted to build a business card where, he's Scott, like, this logo that's got multiple chunks of colors in it and he wanted it so you could, like, click on the colors and it would change the colors and basically generate palettes for you. And he was asking me how practical this project would be. What I ended up telling him was just that you you can math colors for sure. And you can do stuff where you, like, are comparing, contrast levels and these these type of things. But taste is such a hard thing of Mhmm. Like, you can put these 2 colors together, but should you? You Node, and that's I don't know that there's a way to solve that. I mean, maybe maybe we just haven't figured out enough math to do it. You know, may maybe we can LLM our way through it and just, you know, statistically come up with good color combos, but I, you know, I don't know that that you'll ever come up with a color library that has good taste. I think that I think that's just like the the permutations are too complex there.

And then as far as, like, kidney, yeah, kidney math design, I I think I I don't know. Like, everybody is, you know, scared about AI right now taking our jobs. And, you know, we will definitely cut out, like, a whole base layer of I don't don't even know if you can call it creativity, but of, like, templatizing, like, that kind of level of things. Right? You know, like, you know, did did Squarespace take our jobs? Like, you know, they they built a bunch of really great templates that take, you know, design out of the the factor for most people. And so, like, you know, some designers lost their jobs from that, maybe. I don't know. But, like, the the AI stuff is only ever gonna get as good as the information we give it. And so, you know, it's I I think as long as we are still being creative, we've Scott an an edge on that. And so, like, you know, I I don't know if we'll I don't know if we'll get tools that can design better than people, so much as design as good as the last thing that they saw.

Yeah. It's it's you look at MidJourney, and you ask it to design you a website, and it kicks out things that were really popular on Dribbble 3 years ago. Dribbble. You know? And it's it's the whole, trends have changed since then. But, obviously, whatever it's been trained on has not been been updated on that just yet. So I always think that's interesting.

Yeah. I think I think the the beauty of creativity is that it's, completely unhinged. And, like, you can't control it and you don't know when it's gonna happen. And, you know, like, I I don't know if you're this way, but, like, I'll I'll wake up and there's that that, like, liminal space between being awake or between being asleep and my kids coming into the room where my brain kicks into gear and it's like, the the reasonable part of me is still asleep. And so it's just like chaos and and things and interesting things happening. And I wake up, and I've I've had multiple times where I've woken up at, like, 3 AM and thought, like, this is great. I'm half awake. I need to write this down. And then I look at it in the morning and just, like, what in god's name was I thinking? And Yeah. But it but it's like I hit the like every night. Yeah. That's but that's where creativity comes from. It's like it's it's this it's turning off good, like, good sense and just letting your brain run run with it. And, you know, I don't I don't think I don't think we can build a tool that does that for us because the tool is always following some sort of rule. Like, you know, it just like, you know, like, if you think about the resolution of the screen, like, you know, it it looks beautiful Wes the edges are nice and smooth, but if you get really close, it's still squares. And so I think I think, you know, with with creative tools, you know, you can zoom far enough back to feel like, oh, this is creative and great, but it's still working with the rules that it's been given.

I I love your liminal space comment because I have on my to do app. Essentially, it's a just a a to do board, and it's called ideas to be filtered. And it's specifically for any time that I am in that space and I have my biggest Wes idea ever, I throw it in ideas to be filtered.

And the concept is is that I will then take it from the ideas to be filtered, and I will put it into my actual to dos to create the thing. The thing is is that, like you mentioned, so many of those ideas just don't go anywhere, aren't good. So my ideas to be filtered is just mass bunch of, like, dead ideas.

Just an idea graveyard.

I I have a question about building a plug in.

You know, as a engineer, you, you know, can challenge and take tasks on programmically.

Was it intimidating at all? And, like, what was the process of even building a plug in like? And how did you just get started with that?

I I hesitate or Wes, not hesitate. I don't know how to answer that because you're you're, like, condensing a 13 year journey into Node decision.

Like I love it. I think it you know, the the that decision then versus now is very different.

Like, going into it now well, if if I rewind 5 years before the the previous or or the the current iteration of GuideGuide, I was just building them one off. And, you know, every time I would make a plug in, I would have to rebuild the entire thing, and it would take a year to build or, you know, whatever it is. And then I I finally, like, realized and actually, I I took Wes course on React and learned about how to, you know, build these more sensible applications.

And, I so I built it as a React app. And it's it's basically like a inside out API Wes I've got the the plug in, which is a React app, and it's it's just, you know, like, I I don't know that headless is the right word here. But it's Scott, it can make method calls to do stuff, but they don't do anything. And then you plot that inside a wrapper that then has, a connection between the application and the the plug in. And so the the plug in says, I wanna add a guide, and then it it just, like, calls out and hopes that somebody ESLint. And then the plug in hears I need data guide and then does it in the format application.

And so now building a plug in takes me, like, 3 weeks because it's you know, there's, like, a a week to to hook all that up and a week to do the the like, rebuilds the the UI Sanity looks like the app, and then a week to do the marketing stuff.

So, like, in that in that regard, it's not that intimidating anymore because it's just, like, you know, I just need to read the docs and figure out how to connect these things.

You know, going going back more than a decade, I don't I don't think I knew what I was doing. It was just, I I know I can do scripting, and I can do a bit of math and I I wanna not do math anymore. And so it was just, you know, can I write code that does this? And it's it's it's the, you know, the, you you get that urge late at night of, like, I've got this idea and I should go to sleep, but instead I'm gonna read these docs and try this and, you know, it's Yeah. 4 AM. And it's be last night. Yeah. Yeah.

Yeah. So so, you know, like, I I don't I don't know that it was intimidating back then, but it was because I was naive about what I was getting into. And, you know, now I've learned so much that it's not intimidating because I I know what I'm into. So, you know, it's somewhere in there, it's been Scott, but, you know, it's it's just, you know, Software developers are driven by fixing things, and so, you know, I I couldn't turn it off if I if I wanted to. Yeah.

So Sketch, Figma, InDesign, Illustrator, and Photoshop, they all have JavaScript APIs for interacting with it and adding guides on top of your your artboard?

Yeah. They do. Each of those apps has JavaScript APIs of some sort. Some of them have, like, lower level languages. With Photoshop, you can use c plus plus, which would be the better one to use, but it's not my wheelhouse. But, with all these plug in systems, you usually have 2 environments. You've got, like, the the WebView esque environment, which is where you have your, your interface, and you can build whatever you want in that that sandbox and, but it doesn't it doesn't know anything about the application. And then they all provide some sort of way of public messages up to the next level environment where it's kinda more like a Node. Js type world where, there's some sort of, API to interface still with JavaScript with the, with the host application.

That's cool. I had no idea that you could just build Like, I I always thought, oh, yeah. You could script it with JavaScript, but you can also embed, like like, a Wes view UI. I often think about these, like, audio editing tools.

You buy an audio audio plug in to, like, add auto tune or whatever, and every single one of them have these hilarious, like, knob turning interfaces. And I often wonder, like, oh, what what are these things built in? And I'm curious Node if if any of them are yeah.

My best friend in the whole world,

owns Goodhertz. Oh, yeah.

Yes. And he builds audio plug ins for a living. And even though he does more of the CSS, side of things, they use WebTech. They use SVG.

They're using HTML.

They're using JavaScript inside of these things for the interface. I'll post some of his because they do have wacky interfaces as Wes, and some of which are gorgeous and, really interesting. But, yeah, I know they use WebTech. We should get them on the show. We can talk all about it.

Yeah. That's cool. And in order to make it feel native, do you just have to, like, reimplement the UIs of of Photoshop and whatever? Or do you just kinda go with, a generic macOS look?

It it depends on the platform you're working on.

So Photoshop in their current iteration, they've gone through, I think, 3 since I've been doing this. They have, like, their current version is is not actually a browser. It's like a an an interpreter that mostly simulates a browser, but it it supports web components. And so they've built out a suite of web components you can use that will mimic their styles that they're using in the app. So, like Cool. That's that's a case where you don't have to do as much work styling. With Figma, there's I think JS, mostly unstyled. So, yeah, by by default, you would get it, like, just various HTML, but you can then go in and you, you know, recreate your own version of their interface.

I think sketch injects a bit of native style. So, like, the the inputs you get have an orange highlight around them instead of the native blue, but you still have to implement a bit of a bit of it. So each of my plug ins has, like, the there's, like, the the core where that that logic doesn't change anywhere. But then there's the the API, which is what communicates between the app and the the plug in. And then there's, like, the the style layer that is on top of the the core. And I inject components that have been styled to fit the the current, the absolute.

It looks like it blends in. Yeah. That's cool. That that's

kinda similar to React Native and if you've ever built a Raycast extension.

Because Raycast uses React, but it's Raycast is a 100% native, and they just they just use React to make their own components, and to interface with their low level APIs. And you can't use HTML, CSS inside of it, but you can use JavaScript, to sorta architect it. And then then the the compile step, brings it to whatever, like, drop down is in Raycast. I thought it was always neat that they make these things accessible via JavaScript even if they're not actually rendered in WebTech.

Yeah. And it's it's I love this as a format of the, you know, like, the the app can be written in whatever it is, but they expose JavaScript as the API because it's it's so accessible, you know, for better or Wes, but it's the the barrier to entry is pretty low. And, you know, it it gets more complicated once you wanna be a competent software developer and add things like, like, you know, TypeScript and whatnot. You just have to start building out the pipelines that work within these systems.

And they're all so quirky in their weird ways. Like, the the Photoshop system well, all the Adobe systems have when you're using JavaScript to interact with the application, you're using something they call extend script, which is a version of Wes 3 that they implemented, which is great because, like, order of operations works differently in that. And so your transpiler will take out parens that you put in to enforce order of operations.

But that then breaks the logic because the interpreter interprets it differently. So you have to do crazy things like that. And they, you know, their their stack traces their stack traces don't include column numbers. So if you wanna use Century, which I do, not I'm not I'm not plugging. I just like the product.

Yeah. Of course you can. Like, yeah.

You can't you can't add you you can't add minified code because, it'll just tell you it was on line 1, which was, you know, super great.

So you I had to, like, hack up the the minifier so that it would break everything into lines at least. So, you know, like, I I get a vague approximation, but I at least know the line of code that it was on.

I think because I can only get, you know, line numbers on the the exceptions. So they've all got these weird quirks. Sketch Sketch uses JavaScript, which compiles JavaScript into objective c.

And when I first started with the sketch one, you could actually write objective c with which JS this, like, nightmare of brackets instead of, any sort of sensible syntax.

Yeah. And now now it supports ESLint, which is JavaScript ish looking. So it like, that feels a little bit more comfortable when you do it, but it's all of them have this weird compilation confusion and chaos in there. Figma, you can't do multiple, files. You get an HTML file, which runs your plug in and, a JavaScript file, which runs your API. And so if you want to add a a React app in your plug in, you have to ESLint the entire React app into the HTML file because it evolves the entire file.

And it's you know, you you run into all these weird edge case things that you have to figure out how to account for in your bundler and basically, to to make this stuff work.

And how are you architecting all this? Do you have a big webpack config or anything like that?

Yeah.

This is this is one of those things where I wish I had listened to syntax before starting this project because, I I committed hard to common JS right before I did this. And Oh, folks. That's why you gotta listen.

Yeah. I if if if there's one thing to take away, it's listen to Sanity, because I I've been And by century. Listen to syntax and by century. That's Yeah. Wow.

But but I I have been picking out bits of common JS for a long time, and, I'm I'm using Webpack, which, you know, I I wish I could move on to Vite, but Vite doesn't spit out multiple assets, from what I've seen. Like, it's it's very much designed to, like, just spit out one thing whereas, like, I need I need different types of outputs for different things because you you'll have to, like, output your your plug in JS, but you also also have to output your, your interface JS and do these things separately.

I have a Vite setup that kicks out a different CSS file for every single course, and it's I'm doing some stuff to make it work. And, like, yeah. That's not easy. I agree.

Yeah. But it's like I I can see obsolescence happening as I'm sitting there because it's you know, like, I'm I'm using I'm using Jest, and, I've hit some sort of issue, with my tests where if I test I can test 1 plug in, but if I test all the plug ins, I hit some sort of memory leak where it eventually just fails and I I don't get any test results.

And, and, like, I'm I'm I'm just watching an issue where it's like a problem in Wes that they just kinda won't fix.

And the the the sketch version, it uses libraries that was that were created by sketch for interacting with them, but they're written using, Webpack 4. And so everything is Webpack 5 except for the sketch version, which is Webpack 4 because I can't compile this in that. So it's like it's just like it's a nightmare of gotchas everywhere, and I I know it's gonna ruin my life at some point in the future.

Oh, man. Alright. Well, we're we're approaching, the time here. It's at, 55 minutes. So I think we wanna wrap it up. Is there anything that you wanted to hit that we didn't get to?

No. I mean, the the I got to talk about my interests, which is always fun to do. So, yeah, I think I think I'm good.

Nice.

Cool. Well, let's get into the part of the show where we talk about sick picks and shameless plugs. Is there anything you would like to sick pick?

Yeah.

I I I've got a list of 3, and I can go through them fast. But, so the the first one is the amber mug, which yeah. I've, for the longest time, resisted buying an expensive mug that keeps my my tea Scott, but then the 1st time I realized I had hot tea after 90 minutes, I was sold. So, I would say, like, if you can get over your ego, get one of them. They're great.

Then, I wanted to sick pick the the band Waterparks.

That's like a pop punk band that's been around for, you know, about as long as GuideGuide.

And I've I've been enjoying their music, but I I went in a rabbit hole researching them, and they really won me over when a guy posted on Twitter that he got a tattoo of one of their song titles. And the tattoo artist accidentally wrote the same word twice in the tattoo and, like, fucked it up. And so they went into Spotify they went into Spotify and Apple and all these services and updated the name of their song to to match his tattoo.

So Nice. Like, I figured, like, okay. These these guys are my band from now on. Oh, that's awesome.

And then one one for Node.

Execute program is a really cool website for learning different things, not to take attention from y'all. But, that that's been cool. I I I'd like I I haven't even used it in the last year, and I I just left it active because I I was enjoying donating to them just because of how much the like, they it's it's like a they they give you a challenge and you type it in and, you, like, you learn the stuff as you do it, and they do a lot a lot of, like, cycling repeats of it. And it just a really cool system to learn. And now that I'm learning Swift, I wish that there was something like that for for that.

Totally. Yeah. Love it. Good. Those are some sick pics. Oh, yeah. Wes, who was it? GitHub sent me an ember mug one time for being a GitHub star. So I do have 1. And and you are absolutely right, Cameron. It is you pick it up after a half an hour. Oops. I forgot my tea. Still warm.

Yeah. I whenever I end up having a a drink in regular mug, I'll come back to it and pick it up and nearly do a, you know, comedic ESLint take Wes it's like, oh my god. This is tepid.

That's great.

Do you have any shameless plugs for us? Is there anything you'd like us

to pluck? I mean, obviously, GuideGuide. I just launched the the Figma version. I'm trying to spread the word as far as I can. So that's, guide guide Scott me. And I'll you can do, slash syntax.

I've Scott a it'll give you a 50% off the 1st year of using it. Oh, wow. Wow.

Mostly trying throwing it in there so I can, track to see if converting is working. I It's been great. I've been experimenting with different types of promotion and, finally made my 1st sale. It cost me $3,000 of promotion to get Node license. But so may maybe deciding not to do that. But Yeah. It's, you know, it's it's worth tracking.

Pricing on this is really good, by the way. I I should just say, this is not a I loaded the page, and I saw, what, 9 $9. And then I was like, a month? And it's a year. That's that's a awesome price.

Yeah. I've I've gone through different iterations. It used to be a lot more expensive. And with this one, I decided to to scale it back to try to fit more how I want people to use it. And, it's it's actually I I call it, sort of pay what you want. Like, the all the tiers are exactly the same. They're just, priced for different intended uses. So you could just buy the cheapest one and get all the benefits.

But, you know, I've I've got the different plans there in case you wanna do it the way I kind of wish you would do it.

And then my other shameless plug is just, my website cameronmcaffee.com.

There's not much to look at, but, you'll be able to find where I, operate there.

Tech.

Well, thanks so much, man. This has been been incredible.

Really loved hearing everything here.

Yeah. Thanks for having me. It's been fun. Ned. Thanks.