What to Steal. Finding Inspiration in Web Development

Yeah. I excited to talk about ripping people off and and where it's okay because we often get that. Like, is it okay to be inspired by somebody's website? Like, at what point does it go from being inspired and saying, oh, I love that effect. I wanna do that in my own website or, oh, that was that's a really neat function. Also, like, it's it's also bizarre in open source in in general. Right? Like, design is one thing, but, like, actual code where people we publicly put it available, where do you draw the line on being okay and needing to credit versus just being fine with being inspired with how things are done?

Yeah. Fonts I find I find most of my new fonts by landing on a web page and getting that, oh, like, what is that? You know, like, when you have to inspect element to figure out what are they using there, and often I find some really neat ones. And almost always when I find a really neat one, it's something from Creative Market, which I also find a really good

Oh, yeah.

Yeah. I've I've downloaded a couple off of there. Yeah. Behance is like, like, divine art used to be back in the day. Right? Deviant art.

Deviant. Oh, yeah. I that was Node thing that I was saying wrong in my head for Yarn.

And then I was like, oh, it's Deviant. Like, you're why did I think it was Deviant?

Oh, I'm an idiot. Oh, and so how do you find them on on Behance? I guess because the font authors what do you call someone that makes a font? An author? No. There's gotta be a cool word. There has to be a cool word for that. Let's let's find this out. Let's ask, ask ai. What do you call like a foundry type designer? Type designer. Be, like, a cool, like like, font flamer or something like that.

Type designer. Yeah. Type designer. Anyways, type designers go on Behance and show show their wares.

I find that a lot of these designers are now like, first of all, there's a like, so many indie designers making really nice fonts, which is cool. Yes. And they'll often let you download, like, a free one that is missing, like, the numbers or, like, one of the letters will have, like, a trial. And I love that because, like,

Yeah. I I find the the point you just made there about, like, reimplementing designs as a great way to learn. You said for Scott scale, but literally for anything. Like, if you find a website that looks awesome or they're doing an effect where, like, it's different blurs or or a really cool border trick or something like that.

Just simply reimplementing that yourself, like, right click like, what is it? The warp warp .dev? Is that the website? I had made a TikTok probably about 6 months ago, which is I landed on it. I was like, oh, how do they do that? You know? They have this really cool outline around their elements. I think they took the effect down now, but I'll link up the the actual video. And I was immediately it was like, I have to learn how they did that. And it's just so much to learn when you both if you're trying to design it in Figma or whatever or if you're trying to, like, actually implement it with HTML, CSS, JavaScript.

Yeah. Especially Wes a new pattern that somebody stumbles across helps your end users. Like, if it makes for a better end experience, it's just one of those things where it's like, yeah. Can everybody please implement this? Like, I I did a video the other day in centuries date picker for ranges, and they allow you to type in, like, 4 days or 32 minutes, and you can just filter very quickly for a range based on typing in minutes or days.

And I was like, man, can everybody steal this? You know? Everybody needs to implement this pattern or or specific layout.

So I'm a big fan of

Yeah. To me, it's such a a clear thing. And, like, I've never been, like, called out by anybody or or, like, been in trouble around this. But, like, to me, it's such a clear thing, and I have a hard time sort of describing where it is. But if if you're obviously blatantly ripping off the layout, like, you looked at somebody else's website and you're, like, I'm just gonna do that and and put it in my own, that's too far. Right? And, like, there certainly is license for being inspired and taking out aspects of it, but you just have to make it your own rather than ripping it off 1 to 1, because I've seen that many times before where it's super frustrating. You go back to the Vercel Node. Like, somebody I forget who it was. Somebody launched a new website the other day, and someone's, like, looks like Wes site. And I looked at it. I was, like, this is awesome. Like, I'm Yeah. I'm glad that. So, like, I didn't I went I didn't go to the website and go, they're stealing my whole thing. You know? But I looked at it and go, like, oh, I'm if if that even happened, coincidences exist. Right? Like, I'm not so big in my head to think that that would somebody took inspiration from it. But if that happened, they did a good job at at being inspired from it, but not straight up copying it. They say, I like the feel and the vibe of this website, and I've decided to implement something that feels similar in my own website.

Totally. And, like, I would say, like, the rule is if you can screenshot a section of your website and put it right beside the one that is supposedly copying you. And if you show it to enough people because that's the others sometimes sometimes people are like, this person ripped it off, and everyone's like, I don't I don't really see it. You know? Like, that's kind of a popular pattern that you've seen there, and I think it it's pretty clear. It's too bad that there's Scott, like, a a litmus test for this type of thing, especially because, like, we're all we're just saying we're sitting here being like, yeah. Like, the vibe, and it feels good. You know? Like, there's not a very clear ESLint. And, like, culturally, there's different cultures have are okay with copying different amounts of things. You know? Mhmm. So it's it's kinda hard to to do it. Yeah. I I that's funny. Why we're we're saying this episode. A fun funny story there. My parents had a tea store.

their copy. That is that to me, it feels wrong. I've I've had it with my my course sites I'm sure. Quite a few times, and I understand why people do it because they're trying to launch a course, and they're just like, okay. Wes, like, what else do I need on the website? Oh, I need a FAQ. FAQ is the one that gets ripped off quite a bit.

And I've had people, like, straight up copy paste it, and then I've had people just, like, kind of rewrite it, but keep the same, like, funny tone. Mhmm. You know? Like, like, I have one where it's, like, decided to become a heavy diesel mechanic instead of Node.

I'll refund it for you. No problem. You know? Like and, like, that's the word mechanic or something? Stick. Yeah. And then they they kinda just rewrote it being, like, decided not to become a coder and and be a farmer? No problem.

And it's like, come on. You know? And the reason why I I don't like that is because I don't want my whole I don't know what you call that. My whole, like, brand of of how I form things in the words and and the things that I do on my course websites, I don't want the that to be a shtick or a gimmick because once the same thing with my my parody purchasing power, I have had thousands of people copy my purchasing power, which I am very happy about. I love that people it's catching on, and other other courses Yarn offering different prices for different countries. I love that. What I don't like is that when like, a lot of people just straight up copy the, like, the banner text and the coupon codes. Like, it it'll be like, Brazil love. You know? Like, that's the coupon code for for Brazil. And they'll just use that. Like, like, make your own coupon code. You know? That's my my whole vibe, and I don't want it to be like, oh, they're just using some plug in that everybody's using, and, there's no

That's great.

I also, like, one thing you can do is you simply just ask the person.

Hey. I don't the my big thing is I don't wanna step on your toes. Yep. So, like like, one of the examples JS, I don't know, about 6 months ago I forgot the name of the person. I it's in my DMs. He was doing this, like, videos of, like, how do you pronounce x, y, and z in, like, Vercel side programming language, you know, like, NGINX and things like that. And I was just like I was like, man, we gotta do that for web development. You know? But I was like, I'm not just gonna straight up come out with videos doing the same thing, but for web development even though, like, you see you see that a lot. So I was just like, hey, like, totally fine to say no. Like, would would you feel weird if if we, we did this for web development? And he's like, totally totally fine, dude. Like, no problem there. And, like, he was really cool about it. And, like, many times, I've had people approach me being like, hey. I don't wanna step on your toes by by doing something. Like, is this cool? And Yeah. Almost always, it's like, oh, yeah. Totally fine. But I appreciate

Yeah. I I actually had I had a guy rerecord one of my courses totally in English.

It was a free one and then sell it. You know? Like like, write down I still have this video I like because Node of one of the it was my JavaScript 30 course, and I start the course off by playing the drum kit that we make. And I go, and I go, woo. Welcome.

And and it I'm not lying. He goes, boom or, like, whatever.

And I was just like, dude, first of all, don't take my free course and rerecord it and then charge for it. Second of all, don't steal my, like don't steal it so much that you copy my woo.

Yeah. I I was on this website the other day. I was doing buttons for my upcoming course, and I was just like, I need a better button. Mhmm. And I went to this website, and it was like, unreal. I went through 92 buttons, and I didn't find one that I'd, like, hit with me. Yeah. But it's amazing how many different button designs there could possibly be. So don't hit with you, you can, yeah, you can start. Yeah. You Node remix them. You start with one of the Scott feels.

And what I ended up doing is I I then moved to CodePen, and I I did a just a little search on CodePen for button or jelly button or, like, just kinda, like, different words for things. You could sort by most popular, kinda get a look, and there's often some really neat stuff that's on there.

Yeah. They always have such next level stuff. It's amazing that, like, they're still cranking them out. It's wild. Like Yeah. Every couple days, there's something new that comes out. And, oh, they all Somehow underrated. Website roundup. Yeah. Very underrated.

We have a list of a 1000000 different places to get inspiration, which I really like because, like, I found there used to be this, like, website CSS reset, and I used to always go there for, like, new Wes it CSS reset? No. No.

I forget what it is. Anyways, it was one of these websites that you could see, like, new websites and get inspiration from. And then I found, like, a lot of these, like, inspiration websites turned into here is a huge photo with text overlaid on top of it. And it's like, that's that's not real. That's not like, obviously, these are nice landing pages or whatever, but it's not this is not really what I'm looking for for my type of thing. And and what I found is instead of, like, going full website, go component Bos. You know? Look for okay. I'm really working on a button here, so Scott just linked up the button example. So go component by component.

Obviously, I guess, when you're you're first designing a website, you do need an overall vibe. But when it when it comes to alright. Now I'm doing the button. Now I'm doing, a layout for products.

Then you can kinda go component by component and say, what is this? Like, I went to this there's this website called bentogrids.com.

I was working on a a bento grid, and I was like, alright. Like, how do people do this? You know? What do people put in these grids? How do how are they responsive? And there's thousands, maybe not thousands. I think thousands thousands of Bento grids on here.

Hundreds.

And just awesome, awesome website for seeing what other people have done and different ideas. And you could pick 2 or 3 little yummies out of each of those and make your own.

That's a that's a really good way to to put it. I like that a lot. I I had sort of written off a lot of these, like, really fancy ones because of exactly what you just said. But, yeah, you still can pick up color schemes and approaches to them.

This Bento Grids 1 is also really good because these Bento Grids are often on websites that themselves are really well designed.

Quite a few purple linear knockoffs on this. Quite a few. But some some good ones on there as well. That's that's the other frustrating thing is that, like, the designers at Tolinski did such a wild and good job that literally their own style has become, like a meme or a gimmick. It's not bad style. Still looks really, really Node.

Yeah. But it's it's so good that now

Browse so a free plan gives you 8 apps and websites.

Interesting. Yeah. It's it's curated. And that's the other thing is, like, you're paying for somebody with good taste Yes.

To, like, obviously, browse a web and find them, but, like, probably take in submissions and and go through them.

It's like they're like, welcome to the app. Let me put 14 different bubbles over top of the buttons to let you know what they do. I'm like, get out of here. Yep. Let me use the app. You know? Yeah. I know how to use the Internet. If it's if it's so hard to use, I shouldn't need your bubble. You know? Give me I don't mind the tips.

Every like, you know, when you're waiting for something to save, they throw up a little tip. I like those. Photoshop has that because Photoshop slows how. They throw a little tip up. You read a tip while you're while you're waiting for it to save or something, and, you learn a thing or 2.

I don't want any wizards. And then, like, they, like, save the wizard progression in, like, local storage so you, like, sign in on a new app and it, like or, like, the wizard and the emails newsletter sign up form and the cookie banner all battling it out. It's like, please get this stuff off my screen, and let me use the app. No wizards.

use like, when I'm designing something or, like, if I'm thinking about designing something, I'll just take screenshots and throw them into Figma for the design that I'm working on Mhmm. So I can kinda get a lot of I always try to make sure that I can get the URL in so so I could go back to the website and and reference it in the future. What I would really like is some sort of, like, AI based thing that automatic and I thought about it. Automatically I I thought about this exact thing today. Let let me finish what it is. No.

Like a screenshot, and then it will automatically process ESLint, and then it will automatically detect what is in it and auto categorize it based on, like like, website, UI flow, green, orange, you know, and then you can sort and filter based on all that stuff. Bro, I I this is a you didn't have to finish because I had the exact same thought.

The mood.

Yeah. And they can find similar because then you can use the the vector embeddings to find similar ones to that. I think that would be a really cool application and, like, ideally, something that also ingests CSS screenshots.

Because sometimes on Ios, I hate I hate people take screenshots the most, but sometimes the only way to, like, I wanna save that for later is take a screenshot of it, and then, like, I want it to all come into my own personal Pinterest where I don't have to manage it. You know? I just wanna dump a whole bunch of garbage and have it auto sort and filter itself.

That's gotta exist. Somebody build that.

I don't have anything else. Do you, Wes? Nope. That's it. Thanks for tuning in. Catch you later. Peace.