Search

563: Getting Pulled by the Algorithm, AI Training Data, and SVG Drawing

Download MP3

There's a special guest on the show who takes aim at the billionaires in web dev, do we know better than the algorithm for news, why is AI training data such a secret, Chris and Dave discover JetBrains, monorepo struggles, and SVG drawing tools.

Tags:

Guests

Bernie Sanders infamous mittens picture with a accessibility web standards blue beanie photoshopped on top.

Bernie Standards

Web · Social

Trying to get billionaires out of the JavaScript ecosystem.

Episode Sponsors 🧡

Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the shed--Rupert, and with me is Chris--in the office--Coyier. Hey, Chris. How ya doin' today?

Chris Coyier: God darn right. Super well. Thanks, Dave. Thanks for having me here on the show.

Dave: Oh, no. Thanks for having me. Oh, my God! Another visitor. Chris, hold on. No!

Chris: There's always somebody at your door!

Dave: There's like an 80-year-old man standing outside my door.

No, you can't come in here!

[furniture breaking]

Dave: AH!

[speaking in an old man's voice] Hello, Christopher. It's me.

Chris: Who are you?

Dave: It's me, Bernie Standards, and I'm here to talk to you about getting billionaires out of the JavaScript ecosystem.

Chris: You're the guy with the mittens, right? With the things.

Dave: That's correct! I wear mittens when I'm coding on websites to keep my fingers warm.

Chris: Yeah? So, how do you feel about click handlers on divs, huh?

Dave: They're terrible! They ruin the dignity of human beings. But we need to get the billionaires out of the JavaScript ecosystem.

React: owned by a billionaire, Mark Zuckerberg.

Google owns Angular. Evan You, probably a billionaire. We don't know.

[Laughter]

Chris: Uh-huh.

Dave: We need to get these billionaires out of the JavaScript ecosystem. They're ruining it for everybody.

Browsers, too. Browsers are controlled by the right fists of billionaires and trillionaire corporations. We need to get them out of the open-source and the creative collective commons that is the Web.

Chris: I struggle to disagree, old man. I mean I don't really love how you broke into Dave's cabin, but I guess--

Dave: I'm going to go. But remember; it's okay to be angry about capitalists. But it's up to us to dismantle the systems of power that affect our everyday lives. Thank you.

[furniture breaking]

Dave: [speaking in his usual voice] Well, hey! That guy, Senator Bernie Standards, wow.

Chris: Right in your own backyard. I didn't even know he went to Austin regularly.

Dave: Yeah! Just comes through. I guess he has my address. That's wonderful.

[Laughter]

Chris: Yeah. I would think he finds live microphones with some kind of radar.

Dave: Just kind of gravitates to them.

Chris: Yeah.

Dave: He just loves the open Web, I guess. That's interesting. Yeah.

Chris: Makes sense. Mm-hmm.

00:02:38

Dave: Anyhoo... What's going on, Chris? Oh, man.

Chris: I don't know. I was thinking about... not that I want to dwell on it because I feel like it's a little... I'm sensitive to overplayed news lately.

Dave: Ooh...

Chris: don't know why that's on my brain, but there are so many shows that are like, "Whatever happened in tech?" Like some little story about some little something. "Oh, Drake was copied, his song. There's an AI song." Now everything you hear is on that, like that's what's going to be Hard Fork, and that's what's going to be on Dithering, and that's going to be--

I almost prefer... I don't know. Last week, you were talking about a thread. I don't want to be pulled along by the news of the moment. I want to keep on a thought thread for a longer period of time. I'm kind of feeling that at the moment, I think.

Dave: It's funny. Just like switching to Mastodon. I know Andy Bell hates it. Andy Bell hates Mastodon. "It's boring," and I agree it's boring, but man, it is giving me life.

Chris: I tend to disagree with Andy on this one - as much as I love you, buddy. But it depends on where you are, I think, and what you need out of social media at the moment.

Dave: Yeah. Yeah.

Chris: I just could care less about Twitter. I'm checking in at least a couple of times a week just because something happens, like there's a newsletter I read and it links to a tweet, so I click the thing. All of a sudden, I'm on Twitter, so it's irresistible to click at least the @mentions tab - or something - and see if you're being talked about in some way. Then I'm back in there.

I find it lifeless, my time, for my niche of Web dev stuff, lifeless of that type of thing. Then my blog post auto-publishes there, and I don't demand high engagement out of that. It's just a title with a fricken' link on it. But the amount of likes and stuff on there is just nobody I recognize. It feels lifeless to me.

00:04:32

Dave: Yeah. Recently, Musk changed how Twitter checkmarks work, right? Advertisers get a yellow checkmark. That's cool... Not! [Laughter]

But then... Which, maybe that's actually okay to validate, like, this isn't an advertiser of a reputable company or something. But then you pay for your blue checkmark, and that gives people visibility.

I actually am not opposed to paying for a service. That's actually super cool. I think you should pay for something you like.

Chris: Yeah.

Dave: Maybe you should highlight people who pay for the service so that other people... CodePen Pro, a great example, right? Pay for a service you like.

Chris: Oh, gosh! Yeah, no doubt. Right? You get a big ol' yellow pro badge next to your name.

Dave: I think that's cool. I think it's really bastardized, but I've seen people who are like, "Ah, man. Maybe I will sign up for Twitter Blue because it gives me editing, and it gives me longer videos, or it gives me a couple of other features." I just was thinking, "All of these features are available on Mastodon for free." [Laughter]

You can edit posts on Mastodon for free. You can have longer videos, I guess, on Mastodon (if you run your own instance). It's sort of up to your instance.

Chris: You know what's nice? You can even do the, like, "Oops, I forgot the alt text. I'm doing to add it, edit," which is a nice one for Mastodon. Good job.

Dave: Revolutionary.

Chris: Yeah. And we're supposed to on Elk, right? I feel like the Elk team needs to start accepting my money somehow. It is a tremendously nice website experience for Mastodon. My gosh.

Dave: Elk is wonderful. There's actually a little heart button, so you can sponsor the Elk team in the GitHub, so maybe I'll do that.

Chris: Yeah. For money, that's okay. But I like the, "I want something."

Dave: Right, right.

Chris: You know? Give me something, a cool feature, and I'll give you some money. This seems like a fair trade. I don't know.

Dave: Yeah.

00:06:38

Chris: I'll tell you what I want, Elk team. I want to make polls. You don't have that in your authoring experience. Make that pro. I don't know.

Dave: Yeah. Make that. I'm up for it. I'll do a pro badge. Give me a pro badge.

Chris: Yeah. Pro me up, baby.

Dave: I forgot how we got to this. You were saying news. Yeah.

Chris: News. It started with AI, which I will circle back to in a hundred years.

Dave: Yeah. Tyler Stika had this really good post about how Mastodon has confirmed what I already knew is I'm better at picking, curating my feed than an algorithm is, and I thought that was beautiful. I just thought, "Yeah, I can control who is in and out or mute or block or whoever I want."

Chris: Mm-hmm.

Dave: That is beautiful. That's a beautiful way to enjoy the Web. I'm using that as an example because I find myself way less blasted by news.

Chris: Mm-hmm.

Dave: I say blasted in an emotionally manipulated sense. It's like, "Hey, man. You were just caring about this. Now you've got to care about this other big thing. And now you've got to care about--"

Chris: Right.

Dave: "Now you've got to be mad about this thing. And now you've got to be--" and that's what I feel like Twitter does to you is it just--

Chris: Right.

Dave: --throws you around like a beach ball.

Chris: Part of me... I think it's a criticism, and I hear it. I've heard it a couple of times just this week is that that's what you don't get, though, is some kind of zeitgeist out of your Mastodon. There's no, like, "I know what's happening because--" essentially, because there's an algorithm that's telling me so. I know what's hot right now.

But, as soon as there is that, it turns into the outrage machine - or whatever. So, that's dangerous, and I feel like that's what people push back against and what they miss. It's like both.

Dave: Right.

Chris: Tricky-tricky.

Dave: Yeah. There are a few... This is very macabre. It's very weird to be like, "Hey! Download my app," when there's a school shooting happening or something like that. Very dark, but it's just like--

Chris: Right.

Dave: You do have to read the room, and I would say Mastodon's weakness is there's no real room, so you may not know what's happening when you start it. Yeah, so you do have to read the room and figure out.

I don't know. You have to take a broader approach, but that's where pairing it with RSS is awesome because I can get my news in a really slow format.

Chris: Mm-hmm.

Dave: Pairing it with a YouTube feed of news, resources you trust is also helping me. AI, you were saying AI.

00:09:29

Chris: Well, yeah. That is on my mind a little bit because the Washington Post had a great article about proving what a model was trained on, which seems unbelievable that that has to be breaking news.

It's like, "Oh, we figured it out, people. This big company that have released public products trained on public content just straight up didn't tell us what it was trained on," which feels like should almost be illegal. Like, "What?!"

Dave: Yeah.

Chris: So, anyway, they figured it out because they used science and researchers and some cool, open-source project that unearths it somehow. But they figured out the websites that it was trained on. Now, some of that was juicy because it was like, "Oh, look at this horrible crap it was trained on," some neo-Nazi site or whatever, like, "Wow! Really?! That made the cut?"

Dave: Some Nazis in the--

Chris: It's super neat. Good job.

Dave: Yeah.

Chris: But people were vanity searching it, like, "Was my website in there?" I was curious, of course, if CSS-Tricks was in there because I've used Bard. I even have a little AI space in Arc that has all the AI tools on it so I can click over to one and use it because I'm trying not to be ignorant of how it all works and all that stuff.

Dave: Mm-hmm.

Chris: Bard is an easy one to bookmark and just use real quick because, once you're in, it's just a URL, and you can use it. Once in a while, I'll pop over there and type something into it that seems interesting or whatever.

I can type in. I wrote this, but I needed a rainbow gradient, and I know what that looks like in CSS. It's just a linear gradient with a bunch of color stops of red, green, blue, whatever.

Dave: Mm-hmm.

Chris: But also, choose nice colors. If you just use the named colors, it doesn't turned out as nicely as somebody's nice, handpicked rainbow colors. And it complied nicely.

But I'm like, "Okay, so where did you get that?" Probably Stack Overflow. I don't know what you're scraping, but there's so much code there.

Dave: Mm-hmm.

Chris: I was curious if CodePen would be on the list. It's not.

Dave: Yeah. Interesting. Okay.

Chris: No Pens were used in Bard's model. Notably, Open AI publishes absolutely nothing. Open AI, Dave, publishes absolutely nothing about what they're training their stuff on.

Dave: Right. Right. Classic open-source maneuver to not publish stuff. Yeah.

Chris: Yeah.

Dave: Yep.

Chris: Closed AI, maybe a better name.

Dave: [Laughter]

00:11:52

Chris: Yeah. Anyway, but it's trained on a bunch of things that know CSS, right? Was CSS-Tricks one of those sources? Yes, it absolutely was with millions of tokens or whatever was the training data that it pulled from that.

Am I absolutely furious about that? Somewhere... somewhere above mildly displeased. Nobody asked me. Nobody provided me an opt out. Nobody did nothing. You know?

Dave: Right.

Chris: Now, that is just publicly posted on the Internet, so nobody had to ask me to visit my website either. Google didn't ask me if they could scrape or learn from my website in which to build a search engine, and I'm not mad about that.

But I'm not mad about it because it helps people find the content. It helps drive traffic to the website, which helped me build a business around that. There was a lot of helping people do something involved there.

Now, all of a sudden, that math has changed because I don't... We're just going to read all your content and provide another product and not send people there and not tell people where it came from. That's a different math to me.

Dave: Mm-hmm.

Chris: We want to provide an answer based on your content and not tell people where it came from and not send people there. That's just different.

Dave: And you get no credit, basically. Yeah.

Chris: Credit, traffic, nothing. I get absolutely nothing out of this.

Dave: I looked it up myself, and I've got to wonder, Chris. Did they not see the copyright in my footer because--

Chris: [Laughter]

Dave: --I have that.

Chris: Yeah.

Dave: I update that every year pretty religiously, and I'm surprised they even had the gall to do that. You know?

Chris: Right. But there's nuance, of course, because they're not just... You don't type in a search term and it outputs an exact paragraph that Dave Rupert wrote. That's not what happens. It's just training data. It will upload a paragraph that might be highly informed by something it read on DaveRupert.com, but it's not like plagiarism. They didn't just copy and paste your paragraph.

Dave: It's 0.00001% Dave Rupert-ish. [Laughter]

Chris: Yeah, and now I'm doing what I don't want the Tech News to do, but that's why the Drake thing is interesting, too. It's not a copyright violation because it didn't sample anything from a Drake song. It just sounds like one because of the training data. Interesting.

Dave: Yeah. Well, and it's not illegal to figure out Drake's formula and write a song that's similar to his. It maybe makes you look like a chump, but it's not illegal.

Chris: Yet... [Laughter]

Dave: Who is that? Owl City, they copied Postal Service one-to-one.

Chris: Hmm...

Dave: That's a whole band built off of copying something. But yeah. Nah, it's an interesting world.

I think what's interesting to me... You had some things at the end of your post, you know, what you wanted to see. Do you want to talk about those?

00:14:55

Chris: Well, kind of, just because it's one thing to complain.

Dave: Yeah.

Chris: But this even comes up at work and professionally, I think, for all of us is that you can criticize, let's say, what somebody else is doing at work, like, "I don't like that. I don't think we should do that." That's easy to do.

Dave: Mm-hmm.

Chris: What you need to do, though, is not just criticize but say, "I think we should do this instead."

Dave: Right.

Chris: That's harder to do, right? It takes some more thinking. I think decent, general advice is hold your criticism until you have an answer to that question because just being critical with no alternative is just so useless. You know?

Dave: Yeah.

Chris: Unless what you're saying is, like, "I'm criticizing it because I think it's harmful to society," or whatever. At least you're rationalizing why you're against it. I think that's okay. But if it's just like, "That's a bad technical choice," you're like, "Really?! With no context and no alternative? Not useful."

Dave: Right.

Chris: Rather than just criticize AI, I'm saying, "Okay, maybe it's useful, but allow me to opt-out or, better, opt-in," but baby steps.

Dave: Yeah. They kind of juked that whole thing. They know opt-in is better. But they just said, "Well, we wouldn't get a good product if we made people... the New York Times opt-in."

Chris: Yeah. And it's 50 million websites. That's a lot of websites, but I bet you could have 50 million rows in a Google Doc or a Google Sheets thing.

Dave: Yeah.

Chris: Just tell me what websites you used.

Dave: Yeah.

Chris: Why not? Why is that so secret?

Dave: Yeah.

Chris: And allow me to opt out of it. But I think you can't because of immature technical reasons.

Dave: Mm-hmm.

Chris: Like training a model takes a really long time and a lot of computer power. So, if one website says, "I don't want to be in that model," you have to stop and rejigger your model, which could take another - whatever - three months of computer power to do.

Well, then fix it. Have a period that allows people to opt-out. Then you say, "After this date, we're going to start training the model, so that's the cutoff time for it," or something, for God's sake.

Dave: Yeah.

Chris: Then credit the source if you can, like if the technology is too immature to do that, then wait longer. Keep working on it then. It's not like - whatever - Orville Wright took a plane in the air and then started Delta Airlines with his rickety ass stick model. It was like, "Ah, maybe we should wait until it's safe for consumers before selling tickets."

00:17:32

Dave: Ah, yeah. That credit one is big to me.

Chris: ...attempt to do it. I think they kind of do.

Dave: Really? Yeah, I don't know, but I would actually go a step further and say I think it's maybe a human right to know. If a computer is making an algorithmic decision and showing you content that was generated, you have the right to know that. I feel like you do, right?

I feel like you should have the right to know that. I feel like you should have a right to know how it got to this, what sources, like you're saying, informed it, and how it got to this because, if I'm reading an algorithmically generated news site and just, "Oh, you know, it's just 8% Nazi," I should be able to do that.

If I my dad sends me a link or whatever, I should be able to go, "Cool, dad, but that is 82% Nazi, dad, so we don't like that one." I feel like we have a human right, possibly. It's not one now, but we have a human right to know that stuff.

Your Midjourney, you need a human right to know what prompt generated this or what series of prompts.

Chris: Unlike the artists that find out just because if you type in a banana, like Paula Scher would draw it, well, guess who it was trained on then if it can pull that off. You know?

Dave: Yeah.

Chris: They just have to find out through guess and check - or whatever. Why is it that way, though, Dave? Is it secret because it's proprietary? Is it secret because they think this is big business and, if they give away their secret sauce, then that's giving away their business advantage? If you tell us how it was trained, that's--?

00:19:17

Dave: I think people put $10 billion. Microsoft has put like $10 billion into this - or something - so it's just like they want it to succeed and not be reproducible. I think, also, exploitable.

You looked at what happened with the Swift AI where Microsoft made that chatbot that people from 4chan quickly turned it into a white supremacist chatbot.

Chris: Neat...

Dave: I mean I think any time you show the rules, you now have a chance for exploitation. Human nature is like, "I am going to break it. That's a very big, cool thing. I'm going to go break it."

That's human nature. We just try to storm castles because we're just curious monkeys. I don't know. So, that's one part of it.

But you know. You should have a right to know if something was algorithmically generated. If you're talking to somebody and it's actually just a robot, you should know, like if you're in a chat with somebody.

Chris: Yeah. I suppose the pushback would be like, "Oh, we always say this thing can hallucinate. We told you."

Dave: Right, but okay. How did you get to this hallucination? It's just like, "Well, I just made it up. I chose ten bad words or something like that." Yeah, I feel like that's my number one is you have the right to know.

And I realize it's hard. Where does it go in my GitHub Copilot? Maybe it's just a comment that says, "Here's a link to how this came out," or a document of how this was made or something like that.

Then at what point does the robot barf become my barf because I take the robot barf, and then I massage it and edit it. Does it turn back into my barf or what?

Chris: Yeah. I wonder. I hadn't mentioned GitHub Copilot yet. I did in my post that I'm a user. I wonder if our criticism is tempered once AI -- air quote AI. I'm getting a little sick of using that word when it's--

Dave: Predicted text. Yeah. Right.

Chris: Not that. Yeah. That I benefit so much from it that I'm less apt to criticize it. You're like, "Oh, don't take my Copilot, though. I like that one."

Dave: We don't like to criticize or hear criticism about the thing that makes us powerful. We don't like to do that.

Also, my other hot take would be I think if we're talking about AI and how awesome and productive it's going to make us, Josh Comeau had a great blog post about this. Right? It's going to eliminate all the boring, tedious work, and I super agree.

Actually, let me pull this up. Let me find this. I found GitHub released some stats on how generative AI is changing the way developers work. Ooh, got a post for us. Right? Look at me being relevant. Gah! The first time in ShopTalk's history. Holy shit!

Chris: [Laughter]

00:22:22

Dave: Money quote here: "In one study, we found that developers who use GitHub Copilot reported feeling 88% more productive," so that's the qualitative study. Right?

Chris: Mm-hmm.

Dave: "Those reports were supported by quantitative research, which found that developers using GitHub Copilot coded up to 55% faster than those who didn't."

Chris: Oh, wow.

Dave: Fifty-five percent faster! I hear that, and I think (in Dave's brain), I'm going to be 55% more productive. Literally, things are going to take half as long. Is that how I'm reading it? Or is that 200% more productive?

Chris: Of that specific task that you do in the day, yeah. Percentages are hard, aren't they?

Dave: I hate that, yeah.

Chris: Does it mean that you'll be 150% of your current speed? Is that what that means?

Dave: I think that's what that means, so I'll be 1.5x podcast. All right. Cool.

Chris: Got it.

Dave: I'm 1.5x Dave now, not quite a 10x Dave, but I'm 1.5x Dave. That's great. I hear that and think, "Great, I'm going to get so much done," and my brain could easily be like, "I'm going to get so much done and take a break," but I'm not. [Laughter] You know? I'm just going to do 1.5x work for no extra money, and I actually lose money because I'm paying for Copilot, but I get no extra money.

Maybe I get extra money if I'm making my company better. Well... let's punt on that. Right?

Chris: Okay. Yep.

Dave: Trent is not like, "Hey, Dave. Man, that was 1.5x faster. Let's go get you a raise." That's not happening, right?

Chris: Right.

Dave: Your boss at your job probably is not like, "Man, you are really fast."

Chris: I see where you're going with this. What you need... Rather than faster, it would be nice if you just had to work 1.5x less hard.

Dave: Yeah. Where's my cutback, right? I'm just giving free money to the capitalist machine.

Chris: That's a good point.

Dave: Or I'm giving free productivity. And this is over the long course.

Chris: Plus, you used your brain a little less in producing that code, so maybe it's not quite as good.

Dave: Right, or maybe it's a net wash. I'm faster, but it's poorer quality or I didn't use my brain, so why should I get paid for not using my brain?

This is in the long arch of human history. We have become way more productive since computers showed up, but the average, "Look! I just wrote a book," [laughter] like Bernie Sanders. We've become more productive, but we haven't got more money. Right? The middle class is still stagnant wages.

Those of us in tech are probably towards the upper echelon of that, and we're probably doing great, but most people, since the dawn of computers, they've gotten more productive but haven't gone up in salary. So, all this to say I think, when we talk about AI making us more productive, I think we kind of also need to talk about universal basic income as something we probably have to start thinking about.

Dave Rupert doesn't actually know if the math works. I don't want to get into a Republican vs. Democrat fight. That's not what I'm asserting. But I'm asserting people are now losing their jobs.

I heard this company laid off its entire copywriting team. They laid off 85% of their team and went down to a skeleton crew, and that skeleton crew's job is now to review AI.

Is that the future we want? That company now has cheaper, freer content that just gets reviewed.

The inverse is... This is going to happen to lawyers. This is going to happen to YouTubers. This is going to happen to developers.

Chris: Don't you imagine AI is already being trained on AI-generated content? Is that incestuous?

Dave: Well, that's interesting, too. Sorry.

00:26:19

Chris: Yeah, you're going everywhere. I like the idea, the one where it's like free pizza will be provided for those who work until 7:00 p.m. - or whatever. That's the analogy I think of is that we're giving you this amazing tool because all it does is make you have to work harder. It's in the same vein as that.

Dave: Because I get more out of you... ha, ha, ha, ha. Monopoly man laugh.

Chris: Yeah. [Laughter]

Dave: But I was just reading on Kottke, a favorite blog. It's this Ted Chang, "ChatGPT is a Blurry JPEG of the Web." It links out to... I don't even know what blog this is on, but it links out to an article over on New Yorker. Ooh, fancy. Now you know it's real pretentious.

But one thing he said, he called out, I think, Ted and Kottke, was it's interesting that ChatGPT is not training itself on ChatGPT because ChatGPT knows that ChatGPT is just garbage, hallucinations. [Laughter] So...

Chris: Yeah. Feed me the good stuff. I want a human-authored sentence, a nice, juicy rib of human sentences.

Dave: When you're like, "I'm going to replace Buzzfeed," which just went out of business - or whatever - Buzzfeed News, with CHATGPT Buzz News, you actually are undermining your own authority because you're now a resource which ChatGPT is like, "Nah, we're not even going to touch this." You fall off that big list because you're not even a source of authority. It's very interesting.

Chris: If they even know. You know? I mean I don't know. Is there an AI detector? I've got to imagine there is.

Dave: I think Stanford brains are working on that - or something. But yeah.

Chris: Interesting. But yeah, you change a couple of words around and then it's not, which is what they want you to do. That's kind of the point. At least that's the public-facing thing is don't just review and hit publish. This is just for the table of contents, Dave.

Dave: Yeah.

Chris: It's just ideas.

Dave: It's the drug dealer....

Chris: I'm sure that's how everybody is using it. I'm sure people are highly editing all this free copy they're getting.

Dave: Dude, bro, I'm not even reading it. I'm just hitting tab and hitting send. I'm not. [Laughter]

Chris: Yeah. Tell me about it.

Dave: Well, I think people are reading it. I know people... Here's the thing. I think there's a positive side where teams, small teams can stay small, and that's a gift to America and capitalism and small businesses.

I don't have to hire 20 content people if I just have ChatGPT do it. Then I kind of edit the content.

But I've also taken work out of the work system, so that's why I think universal basic income is probably something we should be talking about. I believe two out of ten strong feelings about that.

Chris: Mm-hmm.

Dave: But I think it's something we should probably start opening the door to and talking about because I think it's already changing things. So, careful, I guess.

Chris: Indeed.

00:29:42

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by Frontend Masters. That's frontendmasters.com.

Hey, Dave. They're pretty good, right?

Dave: Oh, I'm a big fan, big fan.

Chris: Heck, yeah. They're super. I don't know. They just run a good business over there. Lots of good learning material.

One thing you should do is click that learn link in the header. You'll be taken to their learning paths area. Just /learning at Frontend Masters.

This is what I was so envious of when I was running CSS-Tricks is that I never had course material that was like, "Start here. Do these things, and it will train your brain forward in this arena."

CSS-Tricks was never good at that. It was more like a newspaper. Just somewhere where you just landed via Google - or whatever. This is better than that.

Dave: [Laughter]

Chris: This is learning done right because there's this big SVG circle that fills out the percentages of finishing a course. It gives you that satisfaction of actually learning something, right?

Dave: Yeah. The way my brain works is it's so much easier to follow a course end-to-end versus piecing together 52 different blog posts and YouTube videos and stuff like that, hoping I understand React or something like that. That's what I really like about Frontend Masters is it's taught by experts - everything like that.

Chris: Yeah, man.

Dave: It's great. And one of the most common questions on ShopTalk Show is, "What do I need to learn next?" Well, there's your answer. There are like 10, 15, 20 courses that you can just go through and just A to Z it. Go for it.

Chris: Yeah, dude. Frontendmasters.com.

[Banjo music stops]

00:31:28

Chris: I have a comment here from one Matt Bloomfield who writes in. "Chris," me "often bags on PHP for not having Prettier, but I've wondered if he's ever used PHP Storm or PHP 8. As a JS dev who recently jumped back into PHP, I've been pleasantly surprised at how great the DX is now." That's developer experience, y'all.

"And with Storm," I guess PHP Storm, which is like a software product, an integrated editor, "all the auto-complete goodness is in there, plus all the benefits of TypeScript since now you can declare types in PHP, and it even suggests better ways to write your code as it's always executing in the background and linting for bugs/unnecessary conditions, et cetera."

I think that's super cool, [laughter] if you're writing PHP. The people in my life who are big-time PHP writers -- I'm thinking of the Craft CMS fellows that live here in Bend, and we chat -- are totally PHP Storm people. It's an editor that's just for that language. Yes, it's executing and finding issues and stuff with your PHP way smarter than an editor that's not doing that. it's doing it. That seems great.

I haven't used it, Matt, so I don't know exactly. It does feel like I'm missing out a little bit because of the amount of WordPress sites I've worked on with PHP in them over the years has been enough, probably, to have warranted it. I just never did it. So, my bad.

Dave: I think it's awesome. And I think it's awesome there are opportunities. Does that make sense?

Like, "Hey, we can do this better than another one just because we understand this really well."

Chris: Shouldn't there be a JavaScript Storm? It's like the biggest language other than Python, right?

Dave: Probably. I mean is JS Storm really just VS Code? Maybe. [Laughter]

Chris: [Laughter] Probably, yeah, because of the insane TypeScript. TypeScript works freakin' great in VS Code.

Dave: Right. Right.

Chris: Really nice.

Dave: Maybe that's what it is. But you know PHP Storm from JetBrains, they have... What's their main software? Is it JetBrains?

Chris: Yeah, I guess.

Dave: That's the Java one, IntelliJ.

Chris: Yeah.

Dave: IntelliJ, that's what it is.

Chris: Kind of a sleeper awesome company. Not sleeper, but just that I don't hear it talked about that much.

Dave: Yeah.

Chris: But it seems like they do really good work. Then they do these little side things that are like, "Oh, that's nice," like Kotlin or whatever. They made a font that's super nice.

Dave: Oh, yeah? Okay.

Chris: I don't know. Good job, JetBrains. One of the good ones, apparently.

Dave: Yeah.

Chris: Until we hear that you fired everybody or something horrible. [Laughter]

Dave: Or leaked data to Russia or something. I don't know.

Chris: Yeah.

Dave: But anyway--

Chris: For now, pretty good.

Dave: Yeah. For now, okay. But they--

Yeah. Who was it? Alex Fimian, over there, he does--

Chris: Hey, Alex!

Dave: He uses WebStorm or PHP? Is it JetBrains's WebStorm? I feel like I should know that. Yeah, WebStorm. He likes that. I think you can--

Chris: Oh, that's exactly what it is.

Dave: Yeah.

Chris: The smartest JavaScript IDE. Hilarious. Wow.

Dave: We did it. We found it.

Chris: Where are we?

Dave: Anyway, I think it's very cool. There are very cool, distinctive features about it. I personally... There's something weird. It's like I was an Atom user and not a Sublime user. You know?

Chris: Mm-hmm.

Dave: And so, JetBrains and that sort of vibe or that style, there are some stylistic choices in there, never sat with me exactly. It was like, "I am not going to use that." I kind of dragged myself to VS Code sort of kicking and screaming, but it had really good Node support, so I switched over to that.

But I don't know. I was like Coda, and then Atom, and then it's like... It was a downgrade to go to VS Code because it's kind of ugly as sin. [Laughter] So, anyway, it's really hard for me to pick up one of these Java-based ones or Java-y ones. But if it's working for you, that's awesome. I think it's great.

If you're working on Laravel sites, why would you use anything else? Or Craft CMS sites, use the PHP....

00:35:59

Chris: Right. I wonder. Is that their most popular one?

I feel wildly ignorant now. If you go to JetBrains.com and open up developer tools, where you find WebStorm and PHP Storm is in this list with, like, ten-plus others. There's a Go-specific one called GoLand. What?

Dave: Yeah.

Chris: I'm downloading this.

Dave: You're going to GoLand?

Chris: Well, I've got to try it.

Dave: We're going to GoLand.

Chris: I have a problem with my... Let's see. This is esoteric, but I'm going to run it by you because you have a mono repo, too, right?

Dave: Got a mono repo.

Chris: Generally...? Do you open the whole mono repo? Do you use VS Code? I'm sure you do. Right?

Dave: I use VS Code, yes.

Chris: Do you drag the folder for the entire mono repo onto VS Code or are you picky about which particular folders in the mono repo you open?

Dave: Ugh... This is a configuration issue I'm having, and I wish I could pay somebody to fix this. I open the whole repo. I open the whole thing.

Chris: The whole thing. Okay.

Dave: And if I had code workspaces, I would get a flattened list of all my apps and packages. You know?

Chris: Yeah.

Dave: But if I enable code workspaces, all of a sudden, my Jest tests quit running automatically. [Laughter]

Chris: Hmm...

Dave: So, there's this weird... I'm in a fugue state where Viter, VS Code, and Jest all hate each other, so it's sort of like when you get into a Prettier, editor config, ES Lint debacle. I'm kind of in that.

Chris: Yeah, that's a thing. Right? Because if you open just a sub-part of your mono repo, it doesn't know. It can't reach up higher to get a higher, Prettier config - or whatever.

Dave: Yeah.

Chris: That's kind of an issue.

Dave: Yeah, so that's why I opened root because they're all sharing the same Jest config - or whatever.

Chris: Yes. Right.

Dave: Plus extensions. It's Jest config and then whatever.

Chris: Who knows what else? You're fricken' TypeScript types and all kinds of stuff. It really behooves you, I think, to open the whole mono repo. In a way, it's one of the list of reasons to have a mono repo.

Dave: Mm-hmm. Yeah.

Chris: It's because it's so nice to do a "find in project" and find some keyword across everything because it gives you a better picture of what's happening. I very much prefer to open it that way and, 80% of the time, that's what I do.

Although, it's interesting. Some people at CodePen are so fast at using the terminal and stuff because you can type, for example, code is the CLI command for VS Code.

Dave: Code dot, yeah.

00:38:39

Chris: Yeah, code dot, and they're so adept at CD'ing around directories that if you know the stuff right away, they only open the folders they know they're going to need, and they're so fast at doing it from the command line that that's just how they roll. But I have a workspace set up that I just do one click on this file, and it opens my root thing.

Here's the problem. Go specifically for us -- and I'm sure this is fixable. It's just one of those fiddly things that none of us have really homed in on why--

Dave: Mm-hmm. Mm-hmm.

Chris: --is the Go code, when you have the mono repo open, just doesn't behave correctly. And Go works great in VS Code. It's like TypeScript. Anything that you hover over, it's giving you what type is that thing and where it is defined and what's the implementation and show me the type definition and all this great stuff. It works totally nicely in VS Code. Although, I'm excited to try GoLand and see how it goes.

But it doesn't work unless you open the root of our Go stuff alone as a folder in VS Code. You could have other folders next to it, but you can't open the mono repo above it. It just all breaks. You open Go, and all the stuff has squigglies on it and stuff.

There's probably some way to fix it, but nobody has really been able to figure it out. The prevailing thing is just like, "Well, just don't open the whole mono repo when you're working on Go stuff then."

Anyway, that's all. Maybe GoLand can fix it for me. I'm going to try it.

Dave: Yeah. Yeah, I feel like there's a job out there, like, "I fix your editor config." [Laughter]

Chris: Yeah.

Dave: If you had--

Chris: [Laughter]

Dave: I would literally probably... It's a $500 problem to me, probably. Right? Like, "Hey, could you download this, get it set up vaguely how I have it set up, and then fix it?"

Chris: Yeah. Yeah.

Dave: Tune it up. Make it super cool.

Wes Bos used to have cool courses on how to use Sublime real well. You know?

Chris: Yeah.

Dave: Those are cool, but I feel like I just need somebody who is like, "I am a fricken' pro at setting up your editors and stuff."

That would be cool because my other developer, Kyle, he's got a different setup, and we don't know what the difference is. Did one of us hit a setting or not? He's got a different problem, like, if he adds this, something else falls over. It's like a barstool in another bar thing but for editor configs.

Chris: I like that idea. Then spit shine it up, too. Install the nicest icon thing and make sure Dracula is in there. I like that one. [Laughter]

Dave: Stuff like that, yeah. Here's stuff. List out services. Here's stuff I can do.

We have Turbo Repo. Here's another question I have. I don't even know if this is possible. We have Turbo Repo. I think I saw your thing. you run a command and it spits out... it opens tmux and opens up a bunch of windows, right? Process A, B, and C are all happening in different terminal shells, like different shells.

00:41:54

Chris: Yeah. Yeah. I'm a little obsessed with it, still. Yeah, well, we kind of have to because there's probably 15 at this point, things that need to be running.

Dave: Right.

Chris: For like a fully, totally fully functional thing, and we're pretty big on, like, that our dev environment is very close to production.

Dave: Mm-hmm. Mm-hmm.

Chris: In all ways, all things. So, that's a lot of services. And in no world can you ask a developer to make a new terminal tab and type this. Make a new terminal tab and type this. Make a new terminal tab and type this.

Dave: For sure.

Chris: It's like, no, no. You just type "run CodePen," and it just--

Dave: Run CodePen.

Chris: It just opens up tmux. What tmux does then is it simulates tabs in a terminal, which is nice because it's not terminal specific then. Anybody can run it. It doesn't matter what terminal you use.

Dave: In Turbo Repo, the way we have it set up is I do NPM run dev, and then it goes into every repo and runs NPM run dev. We can teach it which repos need what, right? It'll go into each one and start up what it needs to do.

Chris: Yeah.

Dave: Starts up a docker or two, I think, locally for this weird message queue service we have. It's awesome, but all the feeds, all the logging is all happening in one big window, and so I don't know who is mad unless I really zero in on the logging string.

We have it the best we can, but I think what would be cooler is if when I say NPM run dev to Turbo Repo, it does the tmux thing and gives me five... opens up a shell for each process, and then I get all these shells going. That would feel very powerful to me.

Stuff like that, I would like that. Could this mythical person who tunes up these repos, are they doing that?

There are other things. Could I switch over? We're using TSC to compile stuff and then we run Node and stuff.

Chris: Yeah.

Dave: Just in case. We're not using TypeScript, but just in case somebody is using TypeScript in the dependency.

Chris: Wow!

Dave: You know?

Chris: Yeah.

Dave: But is it possible to use Vite instead? Is that safe in production? That's stuff I'm interested in, but I just don't know. Should I just run Vite instead?

You probably don't want to run Vite in production, so do you just run a Vite builder? What do you do?

Vite building in Node app, that seems stupid to me, so should I just switch to Dino? Tell me what to do, mythical person.

Chris: [Laughter] Yeah, right. Prepare a report. Prepare a presentation for me in my own codebase.

Dave: Yeah. Dave probably just needs to hire a dev ops back-end person. That's probably what's actually where we're headed.

00:44:59

Chris: Well, it's nice when you can share all the work, too. It's one thing to be like, "You know what I'm going to do this weekend?" Even though it's totally unhealthy to do a bunch of stupid work on the weekend. "In this mythical time where there's no meetings and I can just focus on some esoteric thing, get our dev environment all cleaned up."

Dave: Yeah.

Chris: It's nice to be able to clean it up and then share that cleanness.

Dave: To a team, yeah.

Chris: Right, which is not always possible in all ways. It's nice to make sure that it's set up so whatever you do is kind of shareable or at least documented.

Dave: Yeah. Nah, I think, yeah, if it can go in the repo, that's awesome. VS Code is pretty good at that.

Chris: Yeah. I don't know.

Rory Hendrixson here. "Dave--"

Dave: Uh-oh. I'm on blast.

Chris: It seems like probably in reference to something you mentioned, but we don't always do these questions right after we get them. You know?

Dave: Yeah.

Chris: Couldn't exactly tell you how old this is. Although, I do use Notion here, so it should say a date. Maybe it doesn't. Okay, sorry. Who knows. This could be a minute old.

Dave: Sure.

00:46:08

Chris: "Dave, have you tried Boxy SVG? The URL is boxy-svg.com. The best vector editor plus Web app I've used because everything maps to actual SVG. Plus, you can inspect the SVG code it generates. I've heavily used Illustrator in the past and drawing tools are almost on par with it. I swear I have no affiliation."

That's kind of cool.

Dave: I like this. You know what I think this is maybe in reference to is I wanted to draw stuff but have it be vectors - maybe.

Chris: Yeah!

Dave: For blog posts and stuff.

Chris: Just really quick.

Dave: Yeah.

Chris: Draw it and then get it out.

Dave: Ah, man. Dude, I have four blog posts blocked because I want to put a chart and graph in there, like a hand-drawn chart. [Laughter]

Chris: Oh, yeah. I've got another one for you then. Let me find it.

Dave: Handdrawncharts.net.

Chris: No. I freaking love this, though. It's a really nice Web app. It's not going to solve your problems, I don't think, just yet, but just know that it exists. I'll Discord you because we're in Discord together.

Dave: All right.

Chris: It's called Perfect Freehand. I think it's a GitHub repo, so you could kind of use it anywhere and that URL is the hosted one.

Oh, look. It even has a better URL.

Dave: Did you write that or did you--? Wait. Did you write ... in that?

Chris: No.

Dave: That's what it comes with. Okay.

Chris: Yeah.

Dave: I was like, your handwriting is amazing.

Chris: It just says, "Hey."

Dave: [Laughter]

Chris: It does, but you try it. Right above where it says, "Hey," you try to copy it. It's a little janky, but it still looks cool, right?

Dave: Yeah.

Chris: There's some kind of magic done that, as you're writing, it's smoothing it out and making it look a little better than it should.

Dave: Bezier curves. Yeah.

Chris: Yeah.

Dave: I like it.

Chris: But it's not just for drawing letters. Just hit clear in the bottom. You can draw whatever. I do think blog posts benefit from that as a quick little sketch of something, like a box with an arrow that points to another thing. Just as a little interlude that explains kind of what you're talking about.

I did it the other day in a blog post. It worked out pretty good.

What this is missing is a one-click button to save it as an SVG, but it has copy to SVG. [Laughter]

Dave: [Laughter]

Chris: You'll never guess what Dave just drew and sent it to me in Discord.

Dave: Definitely not a butt.

Chris: [Laughter] See! That is an illustration style that looks nice in the type of blogging that you and I do, I think.

Dave: That's... This is it. This feels like... Does it work with pen tools? Could I pull it up on the old iPad?

Chris: I don't--

Dave: I'm going to try that out.

Chris: Oh... Oh, yeah. I thought you meant pen tools like click, drag, Illustrator, vector points.

Dave: No, because this is exactly what I want, both these tools, Boxy and Freehand. Is that what it's called?

Chris: Perfect Freehand.

Dave: Perfect Freehand.

Chris: It's nice.

Dave: It's very nice, and I might use it because I think I saw your drawing, and I was like, "How does he do that?"

Yeah. No, this is very up my alley.

00:49:07

Chris: I found an iPad flow that worked pretty good, too, because... I forget the exact app name. I'll have to dig it up. But it's one of the popular drawing ones that do work with pens. I don't even have an iPad pen, but it works fine with your finger, too.

You draw some stuff. But the beauty of the iPad one was that you could just hit the little share icon and then hit copy image, which is what this does, too. It's just that SVG didn't paste into the block editor in WordPress for me. It pasted as text, not image.

Dave: Yeah. Yeah. Okay.

Chris: But for whatever reason, on the iPad app, this app that would copy as SVG, I could hit copy from the iPad. Then on my laptop, just immediately hit paste because of the shared clipboard scene on iOS.

Dave: Mm-hmm.

Chris: Shared between Mac OS and iOS, which I've heard from some people is the one reason I never leave Mac is the shared clipboard works so freaking flawlessly. It's unbelievable to me.

Dave: Oh, between iOS. Yeah. Yeah.

Chris: I can open my phone, flick around in my images, long click on an image and just say copy (from my phone). Then without doing anything at all, just be in a WordPress post and hit command-V and that photo from my phone pastes. It's like, "Wow!"

Dave: Yeah. I've done that by accident before, and it was very magical.

Chris: How the hell does that work? [Laughter]

Dave: Cloud tabs is actually pretty cool, too, which you maybe can do with other stuff like Google cloud sync or Edge cloud sync. I had all these blog posts open, and Arc likes to close tabs. I found out that's a feature of Arc is it just unloads your stuff.

Chris: Oh, I can't stand it. I tell it. That's the one thing I don't like, and people love it about Arc. It's a touted beloved feature that it auto-closes your tabs, but I am way too OCD for that. I'm like, "I close my tabs."

Dave: Well, yeah.

Chris: [Laughter]

Dave: I'm on the fence because I'm like--

Chris: Uh-huh.

Dave: 100%, please rescue me from my own devices. [Laughter] I am going to wreck my brain if somebody doesn't come through and do some cleaning.

But I actually opened up Safari, and I put all these tabs I was trying to keep because I had one of those big brain days where I'm following links. I probably got 20 tabs, and now it's all synced to my iPad. But I need to actually read the articles. [Laughter]

Safari has been open for like three weeks, but anyway. I think maybe that's what I do this weekend. But that's a cool feature. When you're in an ecosystem and the cross-device story is very good, yeah, it's a good feeling.

Chris: Yeah.

Dave: Better than how my phone and my iPad never knew about my Windows machine. A little bit better than that. [Laughter]

Chris: Yeah.

Dave: But the curse is, your whole computer explodes if you get a phone call, and that's a bad thing.

Chris: Yeah.

Dave: Because it was so bad, I somehow said, "Ignore every call," and now I get no phone calls, even when the school nurse is saying, "Hey, come pick up your kid." [Laughter] So, now I don't even get those calls. It's a bit of a problem, so anyway. Hey...

00:52:32

Chris: Thanks for the link to Boxy. I have seen that before.

Dave: Yeah. Thanks, Rory.

Chris: SVG was a part of my life for a minute while I was writing that book and stuff. It does seem like one of those Web apps that falls into this category of, like, "Wow. This is way better than it needs to be," kind of thing. [Laughter] Where did this come from? It's just free and just works great. What?! You know? [Laughter]

Dave: Right.

Chris: How does this work? There's no paid plan or anything.

Dave: You know what I would use this for, like today, is diagrams and flow charts. I know there are other apps that do that specifically, but they don't always give you a cool SVG.

If you were just like, "Hey, I just need to diagram something and share it," this seems like a cool way to do that. I'm sure I have blog posts that are waiting on that, too.

Chris: Yeah.

Dave: I need to diagram whatever. I use Mermaid a lot, but you know. This would be cooler.

Chris: Yeah. Is Mermaid like Markdown for charts?

Dave: Markdown for charts. It's very cool, Mermaid.js. And it's got a little DSL (domain-specific language) that you use.

Chris: Yeah.

Dave: It's kind of just like - whatever - fu, and then you draw an arrow in ASCI to bar.

Chris: Yeah. I always wanted to get that on CodePen. We're going to have to do that one of these days because everybody likes it on CodePen, too. [Laughter]

Dave: I think it's a Markdown extension, and y'all have Markdown, maybe.

Chris: Yeah.

Dave: It might work. But yeah. Gosh. Now that I think about it, do we have that in Luro? I think we do have it in Luro. I'd have to verify. [Laughter]

You know sometimes you build a feature over a weekend and a few beers, and you forget if it's in the application, Chris. [Laughter]

Chris: Yeah.

Dave: Yeah, so I don't actually know if it's in there or not. But it does work in GitHub comments, which is super useful. It works in read me and stuff, and that's super useful. You can kind of just--

In our read-me for Luro, we have basically big diagrams of how the whole application comes together.

Chris: Uh-huh.

Dave: That's just the idea of, like--

Chris: Well, that's good. Good for you. [Laughter]

Dave: Yeah. Hey, I'm trying to be a cool guy. I'm a CTO, baby. [Laughter]

Chris: Yeah.

Dave: I'm trying to... Basically, if somebody paratroops into the application, they have no question about how it works. That's the goal is to give you a high enough level thing.

I used to have this thing where Prisma, which is our little database adapter ORM thing, would automatically generate--

Chris: Yeah. Oh, I didn't realize you were a production user of Prisma. You're not just a fan.

Dave: Oh, production user, yeah. Yeah. Unless it has a security problem. Then, no, we don't use it at all.

[Laughter]

Dave: No, production user. It used to read the schema file and then spit out an ERD, which is like an entity relationship diagram where it shows the table, column names, and the types and links them all together, all the tables together. We used to auto-map our database, our data structure, so that was kind of cool. But there was a bug in that plugin and it failed. Yeah, it's partly because of NPM, but it failed on generating on production, and that's not what we wanted.

Chris: Uh, no.

Dave: [Laughter] Can't have the production system fail because your chart and graph doesn't load up - your superfluous chart and graph.

Chris: Yeah. I think that might be all the time we have. We have a few more questions here, but we're going to have to punt them to a future show.

Dave: [Laughter] Eight more years later.

[Laughter]

Dave: We can get through it. Well, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Mastodon at shoptalkshow@frontendsocial. The link will be in the show notes.

And join us in the D-d-d-d-discord. There are some D&D happening. That's exciting. Patreon.com/shoptalkshow.

Chris, do you got anything else you'd like to day?

Chris: Oh... Yeah, it's really medium lively in there. I really like it.

ShopTalkShow.com.